@hex-core/themes 0.2.4 → 0.2.6

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/ferrari.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const ferrariBrief = `---\nversion: alpha\nname: Ferrari\ndescription: A luxury-automotive brand whose marketing surfaces read as cinematic editorial. The base canvas is **near-black** (\\`#181818\\`) holding pure white display type; white-canvas bands appear only inside specific editorial contexts (preowned listings, pricing tables). The single brand voltage is **Rosso Corsa** (\\`#da291c\\`) — the iconic Ferrari racing red — used scarcely on primary CTAs, the Cavallino mark, and Formula 1 race-position highlights. Type runs **FerrariSans** at modest weights (display 500, body 400) — never bombastic. Spacing follows an explicit 8px token ladder (\\`xxxs\\` 4px through \\`super\\` 128px); generous editorial pacing throughout. The brand's strongest visual signature is the **full-bleed cinematic hero photograph** that fills the viewport top with car photography, model details, or trackside livery — followed by a tighter editorial body layout below.\n\ncolors:\n  primary: \"#da291c\"\n  primary-active: \"#b01e0a\"\n  primary-hover: \"#9d2211\"\n  ink: \"#ffffff\"\n  body: \"#969696\"\n  body-strong: \"#ffffff\"\n  body-on-light: \"#181818\"\n  muted: \"#666666\"\n  muted-soft: \"#8f8f8f\"\n  hairline: \"#303030\"\n  hairline-on-light: \"#d2d2d2\"\n  hairline-soft: \"#ebebeb\"\n  canvas: \"#181818\"\n  canvas-elevated: \"#303030\"\n  canvas-light: \"#ffffff\"\n  surface-card: \"#303030\"\n  surface-soft-light: \"#f7f7f7\"\n  surface-strong-light: \"#ebebeb\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-light: \"#181818\"\n  accent-yellow-hypersail: \"#fff200\"\n  accent-yellow: \"#f6e500\"\n  semantic-info: \"#4c98b9\"\n  semantic-success: \"#03904a\"\n  semantic-warning: \"#f13a2c\"\n\ntypography:\n  display-mega:\n    fontFamily: \"'FerrariSans', -apple-system, system-ui, sans-serif\"\n    fontSize: 80px\n    fontWeight: 500\n    lineHeight: 1.05\n    letterSpacing: -1.6px\n  display-xl:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 56px\n    fontWeight: 500\n    lineHeight: 1.1\n    letterSpacing: -1.12px\n  display-lg:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 36px\n    fontWeight: 500\n    lineHeight: 1.2\n    letterSpacing: -0.36px\n  display-md:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 26px\n    fontWeight: 500\n    lineHeight: 1.5\n    letterSpacing: 0.195px\n  title-md:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 18px\n    fontWeight: 700\n    lineHeight: 1.2\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 16px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0.08px\n  body-md:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 12px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 11px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 1.1px\n    textTransform: uppercase\n  button:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 14px\n    fontWeight: 700\n    lineHeight: 1.0\n    letterSpacing: 1.4px\n    textTransform: uppercase\n  nav-link:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 13px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0.65px\n    textTransform: uppercase\n  number-display:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 80px\n    fontWeight: 700\n    lineHeight: 1.0\n    letterSpacing: -1.6px\n\nrounded:\n  none: 0px\n  xs: 2px\n  sm: 4px\n  md: 6px\n  lg: 8px\n  xl: 12px\n  full: 9999px\n\nspacing:\n  xxxs: 4px\n  xxs: 8px\n  xs: 16px\n  sm: 24px\n  md: 32px\n  lg: 48px\n  xl: 64px\n  xxl: 96px\n  super: 128px\n\ncomponents:\n  top-nav-on-dark:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  top-nav-on-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 14px 32px\n    height: 48px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.none}\"\n  button-outline-on-dark:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 13px 31px\n    height: 48px\n  button-outline-on-light:\n    backgroundColor: transparent\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 13px 31px\n    height: 48px\n  button-tertiary-text:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n  hero-band-cinema:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-mega}\"\n    padding: 0\n  hero-band-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.display-xl}\"\n    padding: 96px\n  feature-card-photo:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 0\n  feature-card-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 32px\n  livery-band:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-lg}\"\n    padding: 96px\n  preowned-listing-card:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  spec-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.number-display}\"\n    padding: 24px 0\n  race-position-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.number-display}\"\n  race-calendar-row:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    padding: 16px 0\n  driver-card:\n    backgroundColor: \"{colors.canvas-elevated}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  text-input-on-dark:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.sm}\"\n    padding: 14px 16px\n    height: 48px\n  text-input-on-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.sm}\"\n    padding: 14px 16px\n    height: 48px\n  badge-pill:\n    backgroundColor: \"{colors.canvas-elevated}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.full}\"\n    padding: 4px 12px\n  cta-band-dark:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-lg}\"\n    padding: 96px\n  newsletter-input-band:\n    backgroundColor: \"{colors.canvas-elevated}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.sm}\"\n    padding: 32px\n  footer-dark:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px 48px\n  footer-link:\n    backgroundColor: transparent\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n---\n\n## Overview\n\nFerrari's marketing site reads as cinematic editorial — closer to a luxury-magazine spread than a typical car-OEM site. The base canvas is **near-black** (\\`{colors.canvas}\\` — #181818) holding pure white display type; white-canvas bands appear only inside specific editorial contexts (preowned listings, pricing tables, dealer surfaces). The single brand voltage is **Rosso Corsa** (\\`{colors.primary}\\` — #da291c), the iconic Ferrari racing red, used scarcely on primary CTAs, the Cavallino mark, and Formula 1 race-position highlights.\n\nType runs **FerrariSans** as the single sans family at modest weights — display 500, body 400. CTA labels render in uppercase with generous tracking (1.1-1.4px). The brand never uses bold display copy.\n\nThe brand's strongest visual signature is the **full-bleed cinematic hero photograph** — top-of-page imagery shows car photography, model details, or trackside livery without any chrome competing with it. Headlines float over the bottom of the photo or sit in a tight band beneath. Spacing follows the explicit 8px token ladder: \\`xxxs\\` 4 / \\`xxs\\` 8 / \\`xs\\` 16 / \\`sm\\` 24 / \\`md\\` 32 / \\`lg\\` 48 / \\`xl\\` 64 / \\`xxl\\` 96 / \\`super\\` 128.\n\n**Key Characteristics:**\n- Single accent: \\`{colors.primary}\\` (Rosso Corsa #da291c) for primary CTAs, the Cavallino, F1 race-position highlights. Used scarcely.\n- Near-black canvas (#181818) — never pure black. White-canvas bands only inside editorial contexts.\n- Single sans family: FerrariSans across every text role.\n- Display weight stays at 500 — never bold.\n- CTA labels render uppercase with 1.4px tracking.\n- Sharp \\`{rounded.none}\\` (0px) corners on every CTA, card, and band — luxury-automotive precision.\n- Full-bleed cinematic hero photography is the page chrome.\n- Explicit 8px spacing token ladder with named scale (xxxs through super).\n- Hairlines + photographic depth — no drop shadow tiers.\n\n## Colors\n\n### Brand & Accent\n- **Rosso Corsa** (\\`{colors.primary}\\` — #da291c): The iconic Ferrari racing red. Primary CTA fill, Cavallino mark, F1 driver-position highlights. Used scarcely.\n- **Rosso Corsa Active** (\\`{colors.primary-active}\\` — #b01e0a): Press state.\n- **Rosso Corsa Hover-darker** (\\`{colors.primary-hover}\\` — #9d2211): Documented for completeness; per the no-hover policy this is not used in preview HTML.\n- **Hypersail Yellow** (\\`{colors.accent-yellow-hypersail}\\` — #fff200) + **Yellow** (\\`{colors.accent-yellow}\\` — #f6e500): Sub-brand accents reserved for the Hypersail sailing program and the global focus-ring color. Not part of the main automotive palette.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #181818): Near-black page floor — never pure black, slight warmth.\n- **Canvas Elevated** (\\`{colors.canvas-elevated}\\` — #303030): Cards and panels on dark canvas.\n- **Canvas Light** (\\`{colors.canvas-light}\\` — #ffffff): White editorial bands (preowned listings, pricing).\n- **Surface Card** (\\`{colors.surface-card}\\` — #303030): Same as canvas-elevated — driver cards, livery photo plates.\n- **Surface Soft Light** (\\`{colors.surface-soft-light}\\` — #f7f7f7): Light editorial alternating band.\n- **Surface Strong Light** (\\`{colors.surface-strong-light}\\` — #ebebeb): Light-canvas dividers, badges.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #303030): 1px divider on dark — same hex as \\`{colors.canvas-elevated}\\`.\n- **Hairline On Light** (\\`{colors.hairline-on-light}\\` — #d2d2d2): 1px divider on light bands.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #ebebeb): Lighter divider.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #ffffff): Display, body emphasis on dark.\n- **Body** (\\`{colors.body}\\` — #969696): Default running-text on dark.\n- **Body Strong** (\\`{colors.body-strong}\\` — #ffffff): Same as ink.\n- **Body On Light** (\\`{colors.body-on-light}\\` — #181818): Default text on light bands.\n- **Muted** (\\`{colors.muted}\\` — #666666): Sub-titles, captions on dark.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #8f8f8f): Disabled link text.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on Rosso Corsa.\n\n### Semantic\n- **Info** (\\`{colors.semantic-info}\\` — #4c98b9): Info badges, callout backgrounds.\n- **Success** (\\`{colors.semantic-success}\\` — #03904a): Confirmation.\n- **Warning** (\\`{colors.semantic-warning}\\` — #f13a2c): Validation warnings.\n\n## Typography\n\n### Font Family\n**FerrariSans** is the licensed single sans family across every text role. Fallback: \\`-apple-system, system-ui, sans-serif\\`. No display/body family split.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-mega}\\` | 80px | 500 | 1.05 | -1.6px | Homepage hero h1 |\n| \\`{typography.display-xl}\\` | 56px | 500 | 1.1 | -1.12px | Subsidiary heroes |\n| \\`{typography.display-lg}\\` | 36px | 500 | 1.2 | -0.36px | Section heads, livery band |\n| \\`{typography.display-md}\\` | 26px | 500 | 1.5 | 0.195px | Sub-section heads |\n| \\`{typography.title-md}\\` | 18px | 700 | 1.2 | 0 | Component titles |\n| \\`{typography.title-sm}\\` | 16px | 500 | 1.4 | 0.08px | List labels |\n| \\`{typography.body-md}\\` | 14px | 400 | 1.5 | 0 | Default body |\n| \\`{typography.body-sm}\\` | 13px | 400 | 1.5 | 0 | Footer body |\n| \\`{typography.caption}\\` | 12px | 400 | 1.4 | 0 | Photo captions |\n| \\`{typography.caption-uppercase}\\` | 11px | 600 | 1.4 | 1.1px | Section labels, badges |\n| \\`{typography.button}\\` | 14px | 700 | 1.0 | 1.4px (uppercase) | CTA pill labels |\n| \\`{typography.nav-link}\\` | 13px | 600 | 1.4 | 0.65px (uppercase) | Top-nav menu items |\n| \\`{typography.number-display}\\` | 80px | 700 | 1.0 | -1.6px | Race position highlights, spec values |\n\n### Principles\n- **Display weight stays at 500.** Editorial confidence, not bombastic. The cinematic photography is doing the visual heavy-lifting — type doesn't need to compete.\n- **CTA labels are uppercase with 1.4px tracking.** Luxury-precision feel.\n- **Nav labels are uppercase with 0.65px tracking.** Consistent with CTA voice.\n- **Negative letter-spacing on display only.** -0.36px to -1.6px on display sizes; body stays at 0.\n\n### Note on Font Substitutes\nFerrariSans is licensed. Open-source substitute: **Inter** at weight 500 with letter-spacing -1%, or **Söhne** for closer humanist proportions.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** \\`{spacing.xxxs}\\` 4px · \\`{spacing.xxs}\\` 8px · \\`{spacing.xs}\\` 16px · \\`{spacing.sm}\\` 24px · \\`{spacing.md}\\` 32px · \\`{spacing.lg}\\` 48px · \\`{spacing.xl}\\` 64px · \\`{spacing.xxl}\\` 96px · \\`{spacing.super}\\` 128px.\n- **Section padding:** \\`{spacing.xxl}\\` (96px) for major bands; \\`{spacing.super}\\` (128px) reserved for hero band depth.\n\n### Grid & Container\n- Max content width: ~1280px on editorial bands. Hero photography goes full-bleed.\n- Editorial body: 12-column grid.\n- Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids, 4-up for preowned listing tiles.\n- Footer: 5-column at desktop.\n\n### Whitespace Philosophy\nGenerous editorial pacing. Cinematic hero photography occupies generous viewport real-estate; body sections sit in tighter editorial layouts beneath. The canvas-light editorial bands (preowned, pricing) carry tighter density than the dark cinema bands.\n\n## Elevation & Depth\n\nThe system uses **photographic depth + brightness-step** elevation. No drop shadows except a single soft-small \\`{shadow.small}\\` documented in extracted tokens.\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat (canvas) | \\`{colors.canvas}\\` (#181818) | Body bands, footer |\n| Card | \\`{colors.canvas-elevated}\\` (#303030) | Driver cards, livery plates |\n| Light band | \\`{colors.canvas-light}\\` (#ffffff) | Preowned listings, pricing |\n| Hairline border | 1px \\`{colors.hairline}\\` or \\`{colors.hairline-on-light}\\` | Card outlines, dividers |\n| Soft drop | \\`0 4px 8px rgba(0,0,0,0.1)\\` | Hovered cards (single shadow tier) |\n| Photographic | Full-bleed cinema imagery | Hero band, livery photographs |\n\n### Decorative Depth\n- **Full-bleed cinema photography** is the brand's primary depth treatment.\n- **Brand red gradient** (\\`linear-gradient(180deg, #a00c01, #da291c 64%)\\`): The Rosso Corsa gradient used inside accent bands and CTA hover states.\n- **Dark grey gradient** (\\`linear-gradient(180deg, #3c3c3c, #030303 64%)\\`): Atmospheric darken used at section transitions.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.none}\\` | 0px | Every CTA, card, band — dominant radius |\n| \\`{rounded.xs}\\` | 2px | Tight badges (rare) |\n| \\`{rounded.sm}\\` | 4px | Form inputs |\n| \\`{rounded.md}\\` | 6px | Compact cards (rare) |\n| \\`{rounded.lg}\\` | 8px | Mobile-only collapse cards |\n| \\`{rounded.xl}\\` | 12px | Modal/dialog corners (rare) |\n| \\`{rounded.full}\\` | 9999px | Avatar plates, badge pills |\n\nThe radius vocabulary is **sharp by default**. Sharp 0px corners are the brand button shape — never rounded pills. Pill geometry is reserved for badge labels only.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav-on-dark\\`** — Default top nav on dark hero pages. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, height 64px. Layout: Cavallino mark left, primary horizontal menu (Models / F1 / Lifestyle / Owners / Preowned), language picker + utilities right. Menu items render uppercase with 0.65px tracking.\n\n**\\`top-nav-on-light\\`** — White-canvas variant for editorial light bands.\n\n### Buttons\n\n**\\`button-primary\\`** — The signature Rosso Corsa CTA. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (14px / 700 / 1.4px tracking, uppercase), padding 14px × 32px, height 48px, **rounded \\`{rounded.none}\\` (0px — sharp corners)**.\n\n**\\`button-primary-active\\`** — Press state. Background \\`{colors.primary-active}\\`.\n\n**\\`button-outline-on-dark\\`** — Transparent with 1px white border. Background transparent, text \\`{colors.ink}\\`, 1px white border, same sharp 0px corners.\n\n**\\`button-outline-on-light\\`** — Transparent with 1px ink border on light bands.\n\n**\\`button-tertiary-text\\`** — Inline text link, uppercase tracking.\n\n### Hero Bands\n\n**\\`hero-band-cinema\\`** — Full-bleed cinematic photograph. Background \\`{colors.canvas}\\` underneath, but the photo fills the viewport. Display headline floats over the bottom of the photo or sits in a tight band beneath, in \\`{typography.display-mega}\\` (80px / 500 / -1.6px). One primary CTA + one outline CTA. Zero padding — the photo fills edge-to-edge.\n\n**\\`hero-band-light\\`** — White-canvas variant for editorial bands. Background \\`{colors.canvas-light}\\`, text \\`{colors.body-on-light}\\`, padding 96px.\n\n### Cards\n\n**\\`feature-card-photo\\`** — Image-first card. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.none}\\`. Image fills the top edge-to-edge; title + body sit beneath in tight typography.\n\n**\\`feature-card-light\\`** — White-canvas variant. Background \\`{colors.canvas-light}\\`, text \\`{colors.body-on-light}\\`, rounded \\`{rounded.none}\\`, padding 32px.\n\n**\\`driver-card\\`** — F1 driver portrait card. Background \\`{colors.canvas-elevated}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.none}\\`, padding 24px. Layout: driver portrait + name + race number + team badge.\n\n### Editorial Surfaces\n\n**\\`livery-band\\`** — A full-width Rosso Corsa accent band. Background \\`{colors.primary}\\`, text \\`{colors.ink}\\`, type \\`{typography.display-lg}\\`, 96px padding. Used as a standout livery callout between dark editorial bands.\n\n**\\`preowned-listing-card\\`** — Used in the preowned Ferrari listing grid. Background \\`{colors.canvas-light}\\`, text \\`{colors.body-on-light}\\`, rounded \\`{rounded.none}\\`, padding 24px. Layout: car photo top + model name + year/mileage + price.\n\n### Spec & Race Surfaces\n\n**\\`spec-cell\\`** — Technical spec callout. Transparent background, value in \\`{typography.number-display}\\` (80px / 700 / -1.6px white), label below in \\`{typography.caption-uppercase}\\`.\n\n**\\`race-position-cell\\`** — F1 driver finishing position. Same number-display geometry but text in \\`{colors.primary}\\` Rosso Corsa for the brand's racing identity.\n\n**\\`race-calendar-row\\`** — Hairline-divided row in the F1 race calendar. Layout: date column left, race name + circuit middle, results column right.\n\n### Forms & Tags\n\n**\\`text-input-on-dark\\`** — Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.sm}\\` (4px), padding 14px × 16px, height 48px, 1px \\`{colors.hairline}\\` border.\n\n**\\`text-input-on-light\\`** — White-canvas variant.\n\n**\\`badge-pill\\`** — Small uppercase pill. Background \\`{colors.canvas-elevated}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption-uppercase}\\` (11px / 600 / 1.1px tracking, uppercase), rounded \\`{rounded.full}\\` (9999px), padding 4px × 12px. The only place pill geometry is used.\n\n### Newsletter / CTA / Footer\n\n**\\`newsletter-input-band\\`** — Newsletter signup band. Background \\`{colors.canvas-elevated}\\`, padding 32px, rounded \\`{rounded.sm}\\`. Holds an inline email input + primary CTA.\n\n**\\`cta-band-dark\\`** — Pre-footer band. Background \\`{colors.canvas}\\`, centered display headline in \\`{typography.display-lg}\\`, single Rosso Corsa CTA. 96px padding.\n\n**\\`footer-dark\\`** — Closing dark footer. Background \\`{colors.canvas}\\`, text \\`{colors.body}\\`. 5-column link list. 64×48px padding.\n\n**\\`footer-link\\`** — Background transparent, text \\`{colors.body}\\`, type \\`{typography.body-sm}\\`.\n\n## Do's and Don'ts\n\n### Do\n- Reserve \\`{colors.primary}\\` (Rosso Corsa) for primary CTAs, the Cavallino mark, and F1 race-position highlights.\n- Set every CTA at \\`{rounded.none}\\` (0px sharp corners) — the brand's signature precision.\n- Render CTA labels in uppercase with 1.4px tracking via \\`{typography.button}\\`.\n- Pair every hero with a full-bleed cinematic photograph — the photograph IS the depth.\n- Use the explicit 8px spacing ladder (\\`xxxs\\` through \\`super\\`) rather than ad-hoc px values.\n- Keep display weight at 500 — never bold.\n\n### Don't\n- Don't introduce a saturated brand color other than Rosso Corsa.\n- Don't use rounded or pill CTAs — sharp 0px corners are the brand button.\n- Don't bold display copy. The cinematic photography does the visual heavy-lifting.\n- Don't use Hypersail yellow outside the Hypersail sailing program context.\n- Don't use pure black canvas. The brand canvas is \\`{colors.canvas}\\` (#181818) — slightly warm.\n- Don't add drop shadow tiers. Photography + brightness-step elevation carry the depth.\n- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual product CTAs, not on injected modals.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 640px | Hero photograph crops vertically; hero h1 80→32px; feature card grid 1-up; nav hamburger; preowned listing 1-up. |\n| Tablet | 640–1024px | Hero h1 56px; feature card grid 2-up; preowned listing 2-up. |\n| Desktop | 1024–1280px | Full hero h1 80px; feature card grid 3-up; preowned listing 4-up. |\n| Wide | > 1280px | Editorial body content caps at 1280px; hero photography continues full-bleed. |\n\n### Touch Targets\n- Primary CTA at 48px height — at WCAG AAA (44 × 44).\n- Nav items render uppercase with 0.65px tracking, padded for an effective 48px tap area.\n\n### Collapsing Strategy\n- Top nav switches to hamburger below 768px.\n- Hero photograph reframes per breakpoint via art direction — desktop carries wide cinematic; mobile crops tighter or shifts to vertical.\n- Feature card grid: 4-up → 3-up → 2-up → 1-up.\n- F1 driver cards: 2-up at desktop, 1-up at mobile.\n\n## Iteration Guide\n\n1. Focus on a single component at a time.\n2. CTAs default to \\`{rounded.none}\\` (0px sharp). Cards use \\`{rounded.none}\\` too. Pill is reserved for badges.\n3. Variants live as separate entries inside \\`components:\\`.\n4. Use \\`{token.refs}\\` everywhere — never inline hex.\n5. Hover state never documented.\n6. FerrariSans 500 for display, 400/700 for body. Uppercase + tracking on CTAs and nav.\n7. Rosso Corsa stays scarce — primary CTAs, Cavallino, race-position highlights only.\n8. Use the explicit 8px named spacing ladder.\n\n## Known Gaps\n\n- FerrariSans is a licensed typeface; Inter at weight 500 is the documented substitute.\n- Animation timings (hero parallax, livery band entrance, race position counter) out of scope.\n- In-product surfaces (preowned configurator, F1 telemetry overlays) only partially captured via marketing surfaces.\n- Form validation states beyond focus not visible on captured surfaces.\n- Hypersail yellow tokens are extracted but only appear in the Hypersail sailing program context — documented as scoped accents.\n`;\n"],"mappings":";AACO,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/ferrari.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const ferrariBrief = `---\nversion: alpha\nname: Ferrari\ndescription: A luxury-automotive brand whose marketing surfaces read as cinematic editorial. The base canvas is **near-black** (\\`#181818\\`) holding pure white display type; white-canvas bands appear only inside specific editorial contexts (preowned listings, pricing tables). The single brand voltage is **Rosso Corsa** (\\`#da291c\\`) — the iconic Ferrari racing red — used scarcely on primary CTAs, the Cavallino mark, and Formula 1 race-position highlights. Type runs **FerrariSans** at modest weights (display 500, body 400) — never bombastic. Spacing follows an explicit 8px token ladder (\\`xxxs\\` 4px through \\`super\\` 128px); generous editorial pacing throughout. The brand's strongest visual signature is the **full-bleed cinematic hero photograph** that fills the viewport top with car photography, model details, or trackside livery — followed by a tighter editorial body layout below.\n\ncolors:\n  primary: \"#da291c\"\n  primary-active: \"#b01e0a\"\n  primary-hover: \"#9d2211\"\n  ink: \"#ffffff\"\n  body: \"#969696\"\n  body-strong: \"#ffffff\"\n  body-on-light: \"#181818\"\n  muted: \"#666666\"\n  muted-soft: \"#8f8f8f\"\n  hairline: \"#303030\"\n  hairline-on-light: \"#d2d2d2\"\n  hairline-soft: \"#ebebeb\"\n  canvas: \"#181818\"\n  canvas-elevated: \"#303030\"\n  canvas-light: \"#ffffff\"\n  surface-card: \"#303030\"\n  surface-soft-light: \"#f7f7f7\"\n  surface-strong-light: \"#ebebeb\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-light: \"#181818\"\n  accent-yellow-hypersail: \"#fff200\"\n  accent-yellow: \"#f6e500\"\n  semantic-info: \"#4c98b9\"\n  semantic-success: \"#03904a\"\n  semantic-warning: \"#f13a2c\"\n\ntypography:\n  display-mega:\n    fontFamily: \"'FerrariSans', -apple-system, system-ui, sans-serif\"\n    fontSize: 80px\n    fontWeight: 500\n    lineHeight: 1.05\n    letterSpacing: -1.6px\n  display-xl:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 56px\n    fontWeight: 500\n    lineHeight: 1.1\n    letterSpacing: -1.12px\n  display-lg:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 36px\n    fontWeight: 500\n    lineHeight: 1.2\n    letterSpacing: -0.36px\n  display-md:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 26px\n    fontWeight: 500\n    lineHeight: 1.5\n    letterSpacing: 0.195px\n  title-md:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 18px\n    fontWeight: 700\n    lineHeight: 1.2\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 16px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0.08px\n  body-md:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 12px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 11px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 1.1px\n    textTransform: uppercase\n  button:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 14px\n    fontWeight: 700\n    lineHeight: 1.0\n    letterSpacing: 1.4px\n    textTransform: uppercase\n  nav-link:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 13px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0.65px\n    textTransform: uppercase\n  number-display:\n    fontFamily: \"'FerrariSans', sans-serif\"\n    fontSize: 80px\n    fontWeight: 700\n    lineHeight: 1.0\n    letterSpacing: -1.6px\n\nrounded:\n  none: 0px\n  xs: 2px\n  sm: 4px\n  md: 6px\n  lg: 8px\n  xl: 12px\n  full: 9999px\n\nspacing:\n  xxxs: 4px\n  xxs: 8px\n  xs: 16px\n  sm: 24px\n  md: 32px\n  lg: 48px\n  xl: 64px\n  xxl: 96px\n  super: 128px\n\ncomponents:\n  top-nav-on-dark:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  top-nav-on-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 14px 32px\n    height: 48px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.none}\"\n  button-outline-on-dark:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 13px 31px\n    height: 48px\n  button-outline-on-light:\n    backgroundColor: transparent\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.none}\"\n    padding: 13px 31px\n    height: 48px\n  button-tertiary-text:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n  hero-band-cinema:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-mega}\"\n    padding: 0\n  hero-band-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.display-xl}\"\n    padding: 96px\n  feature-card-photo:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 0\n  feature-card-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 32px\n  livery-band:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-lg}\"\n    padding: 96px\n  preowned-listing-card:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  spec-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.number-display}\"\n    padding: 24px 0\n  race-position-cell:\n    backgroundColor: transparent\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.number-display}\"\n  race-calendar-row:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    padding: 16px 0\n  driver-card:\n    backgroundColor: \"{colors.canvas-elevated}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.none}\"\n    padding: 24px\n  text-input-on-dark:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.sm}\"\n    padding: 14px 16px\n    height: 48px\n  text-input-on-light:\n    backgroundColor: \"{colors.canvas-light}\"\n    textColor: \"{colors.body-on-light}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.sm}\"\n    padding: 14px 16px\n    height: 48px\n  badge-pill:\n    backgroundColor: \"{colors.canvas-elevated}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.full}\"\n    padding: 4px 12px\n  cta-band-dark:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-lg}\"\n    padding: 96px\n  newsletter-input-band:\n    backgroundColor: \"{colors.canvas-elevated}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.sm}\"\n    padding: 32px\n  footer-dark:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n    padding: 64px 48px\n  footer-link:\n    backgroundColor: transparent\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-sm}\"\n---\n\n## Overview\n\nFerrari's marketing site reads as cinematic editorial — closer to a luxury-magazine spread than a typical car-OEM site. The base canvas is **near-black** (\\`{colors.canvas}\\` — #181818) holding pure white display type; white-canvas bands appear only inside specific editorial contexts (preowned listings, pricing tables, dealer surfaces). The single brand voltage is **Rosso Corsa** (\\`{colors.primary}\\` — #da291c), the iconic Ferrari racing red, used scarcely on primary CTAs, the Cavallino mark, and Formula 1 race-position highlights.\n\nType runs **FerrariSans** as the single sans family at modest weights — display 500, body 400. CTA labels render in uppercase with generous tracking (1.1-1.4px). The brand never uses bold display copy.\n\nThe brand's strongest visual signature is the **full-bleed cinematic hero photograph** — top-of-page imagery shows car photography, model details, or trackside livery without any chrome competing with it. Headlines float over the bottom of the photo or sit in a tight band beneath. Spacing follows the explicit 8px token ladder: \\`xxxs\\` 4 / \\`xxs\\` 8 / \\`xs\\` 16 / \\`sm\\` 24 / \\`md\\` 32 / \\`lg\\` 48 / \\`xl\\` 64 / \\`xxl\\` 96 / \\`super\\` 128.\n\n**Key Characteristics:**\n- Single accent: \\`{colors.primary}\\` (Rosso Corsa #da291c) for primary CTAs, the Cavallino, F1 race-position highlights. Used scarcely.\n- Near-black canvas (#181818) — never pure black. White-canvas bands only inside editorial contexts.\n- Single sans family: FerrariSans across every text role.\n- Display weight stays at 500 — never bold.\n- CTA labels render uppercase with 1.4px tracking.\n- Sharp \\`{rounded.none}\\` (0px) corners on every CTA, card, and band — luxury-automotive precision.\n- Full-bleed cinematic hero photography is the page chrome.\n- Explicit 8px spacing token ladder with named scale (xxxs through super).\n- Hairlines + photographic depth — no drop shadow tiers.\n\n## Colors\n\n### Brand & Accent\n- **Rosso Corsa** (\\`{colors.primary}\\` — #da291c): The iconic Ferrari racing red. Primary CTA fill, Cavallino mark, F1 driver-position highlights. Used scarcely.\n- **Rosso Corsa Active** (\\`{colors.primary-active}\\` — #b01e0a): Press state.\n- **Rosso Corsa Hover-darker** (\\`{colors.primary-hover}\\` — #9d2211): Documented for completeness; per the no-hover policy this is not used in preview HTML.\n- **Hypersail Yellow** (\\`{colors.accent-yellow-hypersail}\\` — #fff200) + **Yellow** (\\`{colors.accent-yellow}\\` — #f6e500): Sub-brand accents reserved for the Hypersail sailing program and the global focus-ring color. Not part of the main automotive palette.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #181818): Near-black page floor — never pure black, slight warmth.\n- **Canvas Elevated** (\\`{colors.canvas-elevated}\\` — #303030): Cards and panels on dark canvas.\n- **Canvas Light** (\\`{colors.canvas-light}\\` — #ffffff): White editorial bands (preowned listings, pricing).\n- **Surface Card** (\\`{colors.surface-card}\\` — #303030): Same as canvas-elevated — driver cards, livery photo plates.\n- **Surface Soft Light** (\\`{colors.surface-soft-light}\\` — #f7f7f7): Light editorial alternating band.\n- **Surface Strong Light** (\\`{colors.surface-strong-light}\\` — #ebebeb): Light-canvas dividers, badges.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #303030): 1px divider on dark — same hex as \\`{colors.canvas-elevated}\\`.\n- **Hairline On Light** (\\`{colors.hairline-on-light}\\` — #d2d2d2): 1px divider on light bands.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #ebebeb): Lighter divider.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #ffffff): Display, body emphasis on dark.\n- **Body** (\\`{colors.body}\\` — #969696): Default running-text on dark.\n- **Body Strong** (\\`{colors.body-strong}\\` — #ffffff): Same as ink.\n- **Body On Light** (\\`{colors.body-on-light}\\` — #181818): Default text on light bands.\n- **Muted** (\\`{colors.muted}\\` — #666666): Sub-titles, captions on dark.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #8f8f8f): Disabled link text.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on Rosso Corsa.\n\n### Semantic\n- **Info** (\\`{colors.semantic-info}\\` — #4c98b9): Info badges, callout backgrounds.\n- **Success** (\\`{colors.semantic-success}\\` — #03904a): Confirmation.\n- **Warning** (\\`{colors.semantic-warning}\\` — #f13a2c): Validation warnings.\n\n## Typography\n\n### Font Family\n**FerrariSans** is the licensed single sans family across every text role. Fallback: \\`-apple-system, system-ui, sans-serif\\`. No display/body family split.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-mega}\\` | 80px | 500 | 1.05 | -1.6px | Homepage hero h1 |\n| \\`{typography.display-xl}\\` | 56px | 500 | 1.1 | -1.12px | Subsidiary heroes |\n| \\`{typography.display-lg}\\` | 36px | 500 | 1.2 | -0.36px | Section heads, livery band |\n| \\`{typography.display-md}\\` | 26px | 500 | 1.5 | 0.195px | Sub-section heads |\n| \\`{typography.title-md}\\` | 18px | 700 | 1.2 | 0 | Component titles |\n| \\`{typography.title-sm}\\` | 16px | 500 | 1.4 | 0.08px | List labels |\n| \\`{typography.body-md}\\` | 14px | 400 | 1.5 | 0 | Default body |\n| \\`{typography.body-sm}\\` | 13px | 400 | 1.5 | 0 | Footer body |\n| \\`{typography.caption}\\` | 12px | 400 | 1.4 | 0 | Photo captions |\n| \\`{typography.caption-uppercase}\\` | 11px | 600 | 1.4 | 1.1px | Section labels, badges |\n| \\`{typography.button}\\` | 14px | 700 | 1.0 | 1.4px (uppercase) | CTA pill labels |\n| \\`{typography.nav-link}\\` | 13px | 600 | 1.4 | 0.65px (uppercase) | Top-nav menu items |\n| \\`{typography.number-display}\\` | 80px | 700 | 1.0 | -1.6px | Race position highlights, spec values |\n\n### Principles\n- **Display weight stays at 500.** Editorial confidence, not bombastic. The cinematic photography is doing the visual heavy-lifting — type doesn't need to compete.\n- **CTA labels are uppercase with 1.4px tracking.** Luxury-precision feel.\n- **Nav labels are uppercase with 0.65px tracking.** Consistent with CTA voice.\n- **Negative letter-spacing on display only.** -0.36px to -1.6px on display sizes; body stays at 0.\n\n### Note on Font Substitutes\nFerrariSans is licensed. Open-source substitute: **Inter** at weight 500 with letter-spacing -1%, or **Söhne** for closer humanist proportions.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** \\`{spacing.xxxs}\\` 4px · \\`{spacing.xxs}\\` 8px · \\`{spacing.xs}\\` 16px · \\`{spacing.sm}\\` 24px · \\`{spacing.md}\\` 32px · \\`{spacing.lg}\\` 48px · \\`{spacing.xl}\\` 64px · \\`{spacing.xxl}\\` 96px · \\`{spacing.super}\\` 128px.\n- **Section padding:** \\`{spacing.xxl}\\` (96px) for major bands; \\`{spacing.super}\\` (128px) reserved for hero band depth.\n\n### Grid & Container\n- Max content width: ~1280px on editorial bands. Hero photography goes full-bleed.\n- Editorial body: 12-column grid.\n- Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids, 4-up for preowned listing tiles.\n- Footer: 5-column at desktop.\n\n### Whitespace Philosophy\nGenerous editorial pacing. Cinematic hero photography occupies generous viewport real-estate; body sections sit in tighter editorial layouts beneath. The canvas-light editorial bands (preowned, pricing) carry tighter density than the dark cinema bands.\n\n## Elevation & Depth\n\nThe system uses **photographic depth + brightness-step** elevation. No drop shadows except a single soft-small \\`{shadow.small}\\` documented in extracted tokens.\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat (canvas) | \\`{colors.canvas}\\` (#181818) | Body bands, footer |\n| Card | \\`{colors.canvas-elevated}\\` (#303030) | Driver cards, livery plates |\n| Light band | \\`{colors.canvas-light}\\` (#ffffff) | Preowned listings, pricing |\n| Hairline border | 1px \\`{colors.hairline}\\` or \\`{colors.hairline-on-light}\\` | Card outlines, dividers |\n| Soft drop | \\`0 4px 8px rgba(0,0,0,0.1)\\` | Hovered cards (single shadow tier) |\n| Photographic | Full-bleed cinema imagery | Hero band, livery photographs |\n\n### Decorative Depth\n- **Full-bleed cinema photography** is the brand's primary depth treatment.\n- **Brand red gradient** (\\`linear-gradient(180deg, #a00c01, #da291c 64%)\\`): The Rosso Corsa gradient used inside accent bands and CTA hover states.\n- **Dark grey gradient** (\\`linear-gradient(180deg, #3c3c3c, #030303 64%)\\`): Atmospheric darken used at section transitions.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.none}\\` | 0px | Every CTA, card, band — dominant radius |\n| \\`{rounded.xs}\\` | 2px | Tight badges (rare) |\n| \\`{rounded.sm}\\` | 4px | Form inputs |\n| \\`{rounded.md}\\` | 6px | Compact cards (rare) |\n| \\`{rounded.lg}\\` | 8px | Mobile-only collapse cards |\n| \\`{rounded.xl}\\` | 12px | Modal/dialog corners (rare) |\n| \\`{rounded.full}\\` | 9999px | Avatar plates, badge pills |\n\nThe radius vocabulary is **sharp by default**. Sharp 0px corners are the brand button shape — never rounded pills. Pill geometry is reserved for badge labels only.\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav-on-dark\\`** — Default top nav on dark hero pages. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, height 64px. Layout: Cavallino mark left, primary horizontal menu (Models / F1 / Lifestyle / Owners / Preowned), language picker + utilities right. Menu items render uppercase with 0.65px tracking.\n\n**\\`top-nav-on-light\\`** — White-canvas variant for editorial light bands.\n\n### Buttons\n\n**\\`button-primary\\`** — The signature Rosso Corsa CTA. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (14px / 700 / 1.4px tracking, uppercase), padding 14px × 32px, height 48px, **rounded \\`{rounded.none}\\` (0px — sharp corners)**.\n\n**\\`button-primary-active\\`** — Press state. Background \\`{colors.primary-active}\\`.\n\n**\\`button-outline-on-dark\\`** — Transparent with 1px white border. Background transparent, text \\`{colors.ink}\\`, 1px white border, same sharp 0px corners.\n\n**\\`button-outline-on-light\\`** — Transparent with 1px ink border on light bands.\n\n**\\`button-tertiary-text\\`** — Inline text link, uppercase tracking.\n\n### Hero Bands\n\n**\\`hero-band-cinema\\`** — Full-bleed cinematic photograph. Background \\`{colors.canvas}\\` underneath, but the photo fills the viewport. Display headline floats over the bottom of the photo or sits in a tight band beneath, in \\`{typography.display-mega}\\` (80px / 500 / -1.6px). One primary CTA + one outline CTA. Zero padding — the photo fills edge-to-edge.\n\n**\\`hero-band-light\\`** — White-canvas variant for editorial bands. Background \\`{colors.canvas-light}\\`, text \\`{colors.body-on-light}\\`, padding 96px.\n\n### Cards\n\n**\\`feature-card-photo\\`** — Image-first card. Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.none}\\`. Image fills the top edge-to-edge; title + body sit beneath in tight typography.\n\n**\\`feature-card-light\\`** — White-canvas variant. Background \\`{colors.canvas-light}\\`, text \\`{colors.body-on-light}\\`, rounded \\`{rounded.none}\\`, padding 32px.\n\n**\\`driver-card\\`** — F1 driver portrait card. Background \\`{colors.canvas-elevated}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.none}\\`, padding 24px. Layout: driver portrait + name + race number + team badge.\n\n### Editorial Surfaces\n\n**\\`livery-band\\`** — A full-width Rosso Corsa accent band. Background \\`{colors.primary}\\`, text \\`{colors.ink}\\`, type \\`{typography.display-lg}\\`, 96px padding. Used as a standout livery callout between dark editorial bands.\n\n**\\`preowned-listing-card\\`** — Used in the preowned Ferrari listing grid. Background \\`{colors.canvas-light}\\`, text \\`{colors.body-on-light}\\`, rounded \\`{rounded.none}\\`, padding 24px. Layout: car photo top + model name + year/mileage + price.\n\n### Spec & Race Surfaces\n\n**\\`spec-cell\\`** — Technical spec callout. Transparent background, value in \\`{typography.number-display}\\` (80px / 700 / -1.6px white), label below in \\`{typography.caption-uppercase}\\`.\n\n**\\`race-position-cell\\`** — F1 driver finishing position. Same number-display geometry but text in \\`{colors.primary}\\` Rosso Corsa for the brand's racing identity.\n\n**\\`race-calendar-row\\`** — Hairline-divided row in the F1 race calendar. Layout: date column left, race name + circuit middle, results column right.\n\n### Forms & Tags\n\n**\\`text-input-on-dark\\`** — Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.sm}\\` (4px), padding 14px × 16px, height 48px, 1px \\`{colors.hairline}\\` border.\n\n**\\`text-input-on-light\\`** — White-canvas variant.\n\n**\\`badge-pill\\`** — Small uppercase pill. Background \\`{colors.canvas-elevated}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption-uppercase}\\` (11px / 600 / 1.1px tracking, uppercase), rounded \\`{rounded.full}\\` (9999px), padding 4px × 12px. The only place pill geometry is used.\n\n### Newsletter / CTA / Footer\n\n**\\`newsletter-input-band\\`** — Newsletter signup band. Background \\`{colors.canvas-elevated}\\`, padding 32px, rounded \\`{rounded.sm}\\`. Holds an inline email input + primary CTA.\n\n**\\`cta-band-dark\\`** — Pre-footer band. Background \\`{colors.canvas}\\`, centered display headline in \\`{typography.display-lg}\\`, single Rosso Corsa CTA. 96px padding.\n\n**\\`footer-dark\\`** — Closing dark footer. Background \\`{colors.canvas}\\`, text \\`{colors.body}\\`. 5-column link list. 64×48px padding.\n\n**\\`footer-link\\`** — Background transparent, text \\`{colors.body}\\`, type \\`{typography.body-sm}\\`.\n\n## Do's and Don'ts\n\n### Do\n- Reserve \\`{colors.primary}\\` (Rosso Corsa) for primary CTAs, the Cavallino mark, and F1 race-position highlights.\n- Set every CTA at \\`{rounded.none}\\` (0px sharp corners) — the brand's signature precision.\n- Render CTA labels in uppercase with 1.4px tracking via \\`{typography.button}\\`.\n- Pair every hero with a full-bleed cinematic photograph — the photograph IS the depth.\n- Use the explicit 8px spacing ladder (\\`xxxs\\` through \\`super\\`) rather than ad-hoc px values.\n- Keep display weight at 500 — never bold.\n\n### Don't\n- Don't introduce a saturated brand color other than Rosso Corsa.\n- Don't use rounded or pill CTAs — sharp 0px corners are the brand button.\n- Don't bold display copy. The cinematic photography does the visual heavy-lifting.\n- Don't use Hypersail yellow outside the Hypersail sailing program context.\n- Don't use pure black canvas. The brand canvas is \\`{colors.canvas}\\` (#181818) — slightly warm.\n- Don't add drop shadow tiers. Photography + brightness-step elevation carry the depth.\n- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual product CTAs, not on injected modals.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 640px | Hero photograph crops vertically; hero h1 80→32px; feature card grid 1-up; nav hamburger; preowned listing 1-up. |\n| Tablet | 640–1024px | Hero h1 56px; feature card grid 2-up; preowned listing 2-up. |\n| Desktop | 1024–1280px | Full hero h1 80px; feature card grid 3-up; preowned listing 4-up. |\n| Wide | > 1280px | Editorial body content caps at 1280px; hero photography continues full-bleed. |\n\n### Touch Targets\n- Primary CTA at 48px height — at WCAG AAA (44 × 44).\n- Nav items render uppercase with 0.65px tracking, padded for an effective 48px tap area.\n\n### Collapsing Strategy\n- Top nav switches to hamburger below 768px.\n- Hero photograph reframes per breakpoint via art direction — desktop carries wide cinematic; mobile crops tighter or shifts to vertical.\n- Feature card grid: 4-up → 3-up → 2-up → 1-up.\n- F1 driver cards: 2-up at desktop, 1-up at mobile.\n\n## Iteration Guide\n\n1. Focus on a single component at a time.\n2. CTAs default to \\`{rounded.none}\\` (0px sharp). Cards use \\`{rounded.none}\\` too. Pill is reserved for badges.\n3. Variants live as separate entries inside \\`components:\\`.\n4. Use \\`{token.refs}\\` everywhere — never inline hex.\n5. Hover state never documented.\n6. FerrariSans 500 for display, 400/700 for body. Uppercase + tracking on CTAs and nav.\n7. Rosso Corsa stays scarce — primary CTAs, Cavallino, race-position highlights only.\n8. Use the explicit 8px named spacing ladder.\n\n## Known Gaps\n\n- FerrariSans is a licensed typeface; Inter at weight 500 is the documented substitute.\n- Animation timings (hero parallax, livery band entrance, race position counter) out of scope.\n- In-product surfaces (preowned configurator, F1 telemetry overlays) only partially captured via marketing surfaces.\n- Form validation states beyond focus not visible on captured surfaces.\n- Hypersail yellow tokens are extracted but only appear in the Hypersail sailing program context — documented as scoped accents.\n`;\n"],"mappings":";AACO,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/figma.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const figmaBrief = `# Design System Inspired by Figma\n\n## 1. Visual Theme & Atmosphere\n\nFigma's interface is the design tool that designed itself — a masterclass in typographic sophistication where a custom variable font (figmaSans) modulates between razor-thin (weight 320) and bold (weight 700) with stops at unusual intermediates (330, 340, 450, 480, 540) that most type systems never explore. This granular weight control gives every text element a precisely calibrated visual weight, creating hierarchy through micro-differences rather than the blunt instrument of \"regular vs bold.\"\n\nThe page presents a fascinating duality: the interface chrome is strictly black-and-white (literally only \\`#000000\\` and \\`#ffffff\\` detected as colors), while the hero section and product showcases explode with vibrant multi-color gradients — electric greens, bright yellows, deep purples, hot pinks. This separation means the design system itself is colorless, treating the product's colorful output as the hero content. Figma's marketing page is essentially a white gallery wall displaying colorful art.\n\nWhat makes Figma distinctive beyond the variable font is its circle-and-pill geometry. Buttons use 50px radius (pill) or 50% (perfect circle for icon buttons), creating an organic, tool-palette-like feel. The dashed-outline focus indicator (\\`dashed 2px\\`) is a deliberate design choice that echoes selection handles in the Figma editor itself — the website's UI language references the product's UI language.\n\n**Key Characteristics:**\n- Custom variable font (figmaSans) with unusual weight stops: 320, 330, 340, 450, 480, 540, 700\n- Strictly black-and-white interface chrome — color exists only in product content\n- figmaMono for uppercase technical labels with wide letter-spacing\n- Pill (50px) and circular (50%) button geometry\n- Dashed focus outlines echoing Figma's editor selection handles\n- Vibrant multi-color hero gradients (green, yellow, purple, pink)\n- OpenType \\`\"kern\"\\` feature enabled globally\n- Negative letter-spacing throughout — even body text at -0.14px to -0.26px\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure Black** (\\`#000000\\`): All text, all solid buttons, all borders. The sole \"color\" of the interface.\n- **Pure White** (\\`#ffffff\\`): All backgrounds, white buttons, text on dark surfaces. The other half of the binary.\n\n*Note: Figma's marketing site uses ONLY these two colors for its interface layer. All vibrant colors appear exclusively in product screenshots, hero gradients, and embedded content.*\n\n### Surface & Background\n- **Pure White** (\\`#ffffff\\`): Primary page background and card surfaces.\n- **Glass Black** (\\`rgba(0, 0, 0, 0.08)\\`): Subtle dark overlay for secondary circular buttons and glass effects.\n- **Glass White** (\\`rgba(255, 255, 255, 0.16)\\`): Frosted glass overlay for buttons on dark/colored surfaces.\n\n### Gradient System\n- **Hero Gradient**: A vibrant multi-stop gradient using electric green, bright yellow, deep purple, and hot pink. This gradient is the visual signature of the hero section — it represents the creative possibilities of the tool.\n- **Product Section Gradients**: Individual product areas (Design, Dev Mode, Prototyping) may use distinct color themes in their showcases.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: \\`figmaSans\\`, with fallbacks: \\`figmaSans Fallback, SF Pro Display, system-ui, helvetica\\`\n- **Monospace / Labels**: \\`figmaMono\\`, with fallbacks: \\`figmaMono Fallback, SF Mono, menlo\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (tight) | -1.72px | Maximum impact, extreme tracking |\n| Section Heading | figmaSans | 64px (4rem) | 400 | 1.10 (tight) | -0.96px | Feature section titles |\n| Sub-heading | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Emphasized section text |\n| Sub-heading Light | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Light-weight section text |\n| Feature Title | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Bold card headings |\n| Body Large | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | Descriptions, intros |\n| Body / Button | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | Standard body, nav, buttons |\n| Body Light | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | Light-weight body text |\n| Mono Label | figmaMono | 18px (1.13rem) | 400 | 1.30 (tight) | 0.54px | Uppercase section labels |\n| Mono Small | figmaMono | 12px (0.75rem) | 400 | 1.00 (tight) | 0.6px | Uppercase tiny tags |\n\n### Principles\n- **Variable font precision**: figmaSans uses weights that most systems never touch — 320, 330, 340, 450, 480, 540. This creates hierarchy through subtle weight differences rather than dramatic jumps. The difference between 330 and 340 is nearly imperceptible but structurally significant.\n- **Light as the base**: Most body text uses 320–340 (lighter than typical 400 \"regular\"), creating an ethereal, airy reading experience that matches the design-tool aesthetic.\n- **Kern everywhere**: Every text element enables OpenType \\`\"kern\"\\` feature — kerning is not optional, it's structural.\n- **Negative tracking by default**: Even body text uses -0.1px to -0.26px letter-spacing, creating universally tight text. Display text compresses further to -0.96px and -1.72px.\n- **Mono for structure**: figmaMono in uppercase with positive letter-spacing (0.54px–0.6px) creates technical signpost labels.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Black Solid (Pill)**\n- Background: Pure Black (\\`#000000\\`)\n- Text: Pure White (\\`#ffffff\\`)\n- Radius: circle (50%) for icon buttons\n- Focus: dashed 2px outline\n- Maximum emphasis\n\n**White Pill**\n- Background: Pure White (\\`#ffffff\\`)\n- Text: Pure Black (\\`#000000\\`)\n- Padding: 8px 18px 10px (asymmetric vertical)\n- Radius: pill (50px)\n- Focus: dashed 2px outline\n- Standard CTA on dark/colored surfaces\n\n**Glass Dark**\n- Background: \\`rgba(0, 0, 0, 0.08)\\` (subtle dark overlay)\n- Text: Pure Black\n- Radius: circle (50%)\n- Focus: dashed 2px outline\n- Secondary action on light surfaces\n\n**Glass Light**\n- Background: \\`rgba(255, 255, 255, 0.16)\\` (frosted glass)\n- Text: Pure White\n- Radius: circle (50%)\n- Focus: dashed 2px outline\n- Secondary action on dark/colored surfaces\n\n### Cards & Containers\n- Background: Pure White\n- Border: none or minimal\n- Radius: 6px (small containers), 8px (images, cards, dialogs)\n- Shadow: subtle to medium elevation effects\n- Product screenshots as card content\n\n### Navigation\n- Clean horizontal nav on white\n- Logo: Figma wordmark in black\n- Product tabs: pill-shaped (50px) tab navigation\n- Links: black text, underline 1px decoration\n- CTA: Black pill button\n- Hover: text color via CSS variable\n\n### Distinctive Components\n\n**Product Tab Bar**\n- Horizontal pill-shaped tabs (50px radius)\n- Each tab represents a Figma product area (Design, Dev Mode, Prototyping, etc.)\n- Active tab highlighted\n\n**Hero Gradient Section**\n- Full-width vibrant multi-color gradient background\n- White text overlay with 86px display heading\n- Product screenshots floating within the gradient\n\n**Dashed Focus Indicators**\n- All interactive elements use \\`dashed 2px\\` outline on focus\n- References the selection handles in the Figma editor\n- A meta-design choice connecting website and product\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px\n\n### Grid & Container\n- Max container width: up to 1920px\n- Hero: full-width gradient with centered content\n- Product sections: alternating showcases\n- Footer: dark full-width section\n- Responsive from 559px to 1920px\n\n### Whitespace Philosophy\n- **Gallery-like pacing**: Generous spacing lets each product section breathe as its own exhibit.\n- **Color sections as visual breathing**: The gradient hero and product showcases provide chromatic relief between the monochrome interface sections.\n\n### Border Radius Scale\n- Minimal (2px): Small link elements\n- Subtle (6px): Small containers, dividers\n- Comfortable (8px): Cards, images, dialogs\n- Pill (50px): Tab buttons, CTAs\n- Circle (50%): Icon buttons, circular elements\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page background, most text |\n| Surface (Level 1) | White card on gradient/dark section | Cards, product showcases |\n| Elevated (Level 2) | Subtle shadow | Floating cards, hover states |\n\n**Shadow Philosophy**: Figma uses shadows sparingly. The primary depth mechanisms are **background contrast** (white content on colorful/dark sections) and the inherent dimensionality of the product screenshots themselves.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use figmaSans with precise variable weights (320–540) — the granular weight control IS the design\n- Keep the interface strictly black-and-white — color comes from product content only\n- Use pill (50px) and circular (50%) geometry for all interactive elements\n- Apply dashed 2px focus outlines — the signature accessibility pattern\n- Enable \\`\"kern\"\\` feature on all text\n- Use figmaMono in uppercase with positive letter-spacing for labels\n- Apply negative letter-spacing throughout (-0.1px to -1.72px)\n\n### Don't\n- Don't add interface colors — the monochrome palette is absolute\n- Don't use standard font weights (400, 500, 600, 700) — use the variable font's unique stops (320, 330, 340, 450, 480, 540)\n- Don't use sharp corners on buttons — pill and circular geometry only\n- Don't use solid focus outlines — dashed is the signature\n- Don't increase body font weight above 450 — the light-weight aesthetic is core\n- Don't use positive letter-spacing on body text — it's always negative\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Small Mobile | <560px | Compact layout, stacked |\n| Tablet | 560–768px | Minor adjustments |\n| Small Desktop | 768–960px | 2-column layouts |\n| Desktop | 960–1280px | Standard layout |\n| Large Desktop | 1280–1440px | Expanded |\n| Ultra-wide | 1440–1920px | Maximum width |\n\n### Collapsing Strategy\n- Hero text: 86px → 64px → 48px\n- Product tabs: horizontal scroll on mobile\n- Feature sections: stacked single column\n- Footer: multi-column → stacked\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Everything: \"Pure Black (#000000)\" and \"Pure White (#ffffff)\"\n- Glass Dark: \"rgba(0, 0, 0, 0.08)\"\n- Glass Light: \"rgba(255, 255, 255, 0.16)\"\n\n### Example Component Prompts\n- \"Create a hero on a vibrant multi-color gradient (green, yellow, purple, pink). Headline at 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. White text. White pill CTA button (50px radius, 8px 18px padding).\"\n- \"Design a product tab bar with pill-shaped buttons (50px radius). Active: Black bg, white text. Inactive: transparent, black text. figmaSans at 20px weight 480.\"\n- \"Build a section label: figmaMono 18px, uppercase, letter-spacing 0.54px, black text. Kern enabled.\"\n- \"Create body text at 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Pure Black on white.\"\n\n### Iteration Guide\n1. Use variable font weight stops precisely: 320, 330, 340, 450, 480, 540, 700\n2. Interface is always black + white — never add colors to chrome\n3. Dashed focus outlines, not solid\n4. Letter-spacing is always negative on body, always positive on mono labels\n5. Pill (50px) for buttons/tabs, circle (50%) for icon buttons\n`;\n"],"mappings":";AACO,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/figma.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const figmaBrief = `# Design System Inspired by Figma\n\n## 1. Visual Theme & Atmosphere\n\nFigma's interface is the design tool that designed itself — a masterclass in typographic sophistication where a custom variable font (figmaSans) modulates between razor-thin (weight 320) and bold (weight 700) with stops at unusual intermediates (330, 340, 450, 480, 540) that most type systems never explore. This granular weight control gives every text element a precisely calibrated visual weight, creating hierarchy through micro-differences rather than the blunt instrument of \"regular vs bold.\"\n\nThe page presents a fascinating duality: the interface chrome is strictly black-and-white (literally only \\`#000000\\` and \\`#ffffff\\` detected as colors), while the hero section and product showcases explode with vibrant multi-color gradients — electric greens, bright yellows, deep purples, hot pinks. This separation means the design system itself is colorless, treating the product's colorful output as the hero content. Figma's marketing page is essentially a white gallery wall displaying colorful art.\n\nWhat makes Figma distinctive beyond the variable font is its circle-and-pill geometry. Buttons use 50px radius (pill) or 50% (perfect circle for icon buttons), creating an organic, tool-palette-like feel. The dashed-outline focus indicator (\\`dashed 2px\\`) is a deliberate design choice that echoes selection handles in the Figma editor itself — the website's UI language references the product's UI language.\n\n**Key Characteristics:**\n- Custom variable font (figmaSans) with unusual weight stops: 320, 330, 340, 450, 480, 540, 700\n- Strictly black-and-white interface chrome — color exists only in product content\n- figmaMono for uppercase technical labels with wide letter-spacing\n- Pill (50px) and circular (50%) button geometry\n- Dashed focus outlines echoing Figma's editor selection handles\n- Vibrant multi-color hero gradients (green, yellow, purple, pink)\n- OpenType \\`\"kern\"\\` feature enabled globally\n- Negative letter-spacing throughout — even body text at -0.14px to -0.26px\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure Black** (\\`#000000\\`): All text, all solid buttons, all borders. The sole \"color\" of the interface.\n- **Pure White** (\\`#ffffff\\`): All backgrounds, white buttons, text on dark surfaces. The other half of the binary.\n\n*Note: Figma's marketing site uses ONLY these two colors for its interface layer. All vibrant colors appear exclusively in product screenshots, hero gradients, and embedded content.*\n\n### Surface & Background\n- **Pure White** (\\`#ffffff\\`): Primary page background and card surfaces.\n- **Glass Black** (\\`rgba(0, 0, 0, 0.08)\\`): Subtle dark overlay for secondary circular buttons and glass effects.\n- **Glass White** (\\`rgba(255, 255, 255, 0.16)\\`): Frosted glass overlay for buttons on dark/colored surfaces.\n\n### Gradient System\n- **Hero Gradient**: A vibrant multi-stop gradient using electric green, bright yellow, deep purple, and hot pink. This gradient is the visual signature of the hero section — it represents the creative possibilities of the tool.\n- **Product Section Gradients**: Individual product areas (Design, Dev Mode, Prototyping) may use distinct color themes in their showcases.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: \\`figmaSans\\`, with fallbacks: \\`figmaSans Fallback, SF Pro Display, system-ui, helvetica\\`\n- **Monospace / Labels**: \\`figmaMono\\`, with fallbacks: \\`figmaMono Fallback, SF Mono, menlo\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (tight) | -1.72px | Maximum impact, extreme tracking |\n| Section Heading | figmaSans | 64px (4rem) | 400 | 1.10 (tight) | -0.96px | Feature section titles |\n| Sub-heading | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Emphasized section text |\n| Sub-heading Light | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Light-weight section text |\n| Feature Title | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Bold card headings |\n| Body Large | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | Descriptions, intros |\n| Body / Button | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | Standard body, nav, buttons |\n| Body Light | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | Light-weight body text |\n| Mono Label | figmaMono | 18px (1.13rem) | 400 | 1.30 (tight) | 0.54px | Uppercase section labels |\n| Mono Small | figmaMono | 12px (0.75rem) | 400 | 1.00 (tight) | 0.6px | Uppercase tiny tags |\n\n### Principles\n- **Variable font precision**: figmaSans uses weights that most systems never touch — 320, 330, 340, 450, 480, 540. This creates hierarchy through subtle weight differences rather than dramatic jumps. The difference between 330 and 340 is nearly imperceptible but structurally significant.\n- **Light as the base**: Most body text uses 320–340 (lighter than typical 400 \"regular\"), creating an ethereal, airy reading experience that matches the design-tool aesthetic.\n- **Kern everywhere**: Every text element enables OpenType \\`\"kern\"\\` feature — kerning is not optional, it's structural.\n- **Negative tracking by default**: Even body text uses -0.1px to -0.26px letter-spacing, creating universally tight text. Display text compresses further to -0.96px and -1.72px.\n- **Mono for structure**: figmaMono in uppercase with positive letter-spacing (0.54px–0.6px) creates technical signpost labels.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Black Solid (Pill)**\n- Background: Pure Black (\\`#000000\\`)\n- Text: Pure White (\\`#ffffff\\`)\n- Radius: circle (50%) for icon buttons\n- Focus: dashed 2px outline\n- Maximum emphasis\n\n**White Pill**\n- Background: Pure White (\\`#ffffff\\`)\n- Text: Pure Black (\\`#000000\\`)\n- Padding: 8px 18px 10px (asymmetric vertical)\n- Radius: pill (50px)\n- Focus: dashed 2px outline\n- Standard CTA on dark/colored surfaces\n\n**Glass Dark**\n- Background: \\`rgba(0, 0, 0, 0.08)\\` (subtle dark overlay)\n- Text: Pure Black\n- Radius: circle (50%)\n- Focus: dashed 2px outline\n- Secondary action on light surfaces\n\n**Glass Light**\n- Background: \\`rgba(255, 255, 255, 0.16)\\` (frosted glass)\n- Text: Pure White\n- Radius: circle (50%)\n- Focus: dashed 2px outline\n- Secondary action on dark/colored surfaces\n\n### Cards & Containers\n- Background: Pure White\n- Border: none or minimal\n- Radius: 6px (small containers), 8px (images, cards, dialogs)\n- Shadow: subtle to medium elevation effects\n- Product screenshots as card content\n\n### Navigation\n- Clean horizontal nav on white\n- Logo: Figma wordmark in black\n- Product tabs: pill-shaped (50px) tab navigation\n- Links: black text, underline 1px decoration\n- CTA: Black pill button\n- Hover: text color via CSS variable\n\n### Distinctive Components\n\n**Product Tab Bar**\n- Horizontal pill-shaped tabs (50px radius)\n- Each tab represents a Figma product area (Design, Dev Mode, Prototyping, etc.)\n- Active tab highlighted\n\n**Hero Gradient Section**\n- Full-width vibrant multi-color gradient background\n- White text overlay with 86px display heading\n- Product screenshots floating within the gradient\n\n**Dashed Focus Indicators**\n- All interactive elements use \\`dashed 2px\\` outline on focus\n- References the selection handles in the Figma editor\n- A meta-design choice connecting website and product\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px\n\n### Grid & Container\n- Max container width: up to 1920px\n- Hero: full-width gradient with centered content\n- Product sections: alternating showcases\n- Footer: dark full-width section\n- Responsive from 559px to 1920px\n\n### Whitespace Philosophy\n- **Gallery-like pacing**: Generous spacing lets each product section breathe as its own exhibit.\n- **Color sections as visual breathing**: The gradient hero and product showcases provide chromatic relief between the monochrome interface sections.\n\n### Border Radius Scale\n- Minimal (2px): Small link elements\n- Subtle (6px): Small containers, dividers\n- Comfortable (8px): Cards, images, dialogs\n- Pill (50px): Tab buttons, CTAs\n- Circle (50%): Icon buttons, circular elements\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page background, most text |\n| Surface (Level 1) | White card on gradient/dark section | Cards, product showcases |\n| Elevated (Level 2) | Subtle shadow | Floating cards, hover states |\n\n**Shadow Philosophy**: Figma uses shadows sparingly. The primary depth mechanisms are **background contrast** (white content on colorful/dark sections) and the inherent dimensionality of the product screenshots themselves.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use figmaSans with precise variable weights (320–540) — the granular weight control IS the design\n- Keep the interface strictly black-and-white — color comes from product content only\n- Use pill (50px) and circular (50%) geometry for all interactive elements\n- Apply dashed 2px focus outlines — the signature accessibility pattern\n- Enable \\`\"kern\"\\` feature on all text\n- Use figmaMono in uppercase with positive letter-spacing for labels\n- Apply negative letter-spacing throughout (-0.1px to -1.72px)\n\n### Don't\n- Don't add interface colors — the monochrome palette is absolute\n- Don't use standard font weights (400, 500, 600, 700) — use the variable font's unique stops (320, 330, 340, 450, 480, 540)\n- Don't use sharp corners on buttons — pill and circular geometry only\n- Don't use solid focus outlines — dashed is the signature\n- Don't increase body font weight above 450 — the light-weight aesthetic is core\n- Don't use positive letter-spacing on body text — it's always negative\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Small Mobile | <560px | Compact layout, stacked |\n| Tablet | 560–768px | Minor adjustments |\n| Small Desktop | 768–960px | 2-column layouts |\n| Desktop | 960–1280px | Standard layout |\n| Large Desktop | 1280–1440px | Expanded |\n| Ultra-wide | 1440–1920px | Maximum width |\n\n### Collapsing Strategy\n- Hero text: 86px → 64px → 48px\n- Product tabs: horizontal scroll on mobile\n- Feature sections: stacked single column\n- Footer: multi-column → stacked\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Everything: \"Pure Black (#000000)\" and \"Pure White (#ffffff)\"\n- Glass Dark: \"rgba(0, 0, 0, 0.08)\"\n- Glass Light: \"rgba(255, 255, 255, 0.16)\"\n\n### Example Component Prompts\n- \"Create a hero on a vibrant multi-color gradient (green, yellow, purple, pink). Headline at 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. White text. White pill CTA button (50px radius, 8px 18px padding).\"\n- \"Design a product tab bar with pill-shaped buttons (50px radius). Active: Black bg, white text. Inactive: transparent, black text. figmaSans at 20px weight 480.\"\n- \"Build a section label: figmaMono 18px, uppercase, letter-spacing 0.54px, black text. Kern enabled.\"\n- \"Create body text at 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Pure Black on white.\"\n\n### Iteration Guide\n1. Use variable font weight stops precisely: 320, 330, 340, 450, 480, 540, 700\n2. Interface is always black + white — never add colors to chrome\n3. Dashed focus outlines, not solid\n4. Letter-spacing is always negative on body, always positive on mono labels\n5. Pill (50px) for buttons/tabs, circle (50%) for icon buttons\n`;\n"],"mappings":";AACO,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/framer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/framer.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const framerBrief = `# Design System Inspired by Framer\n\n## 1. Visual Theme & Atmosphere\n\nFramer's website is a cinematic, tool-obsessed dark canvas that radiates the confidence of a design tool built by designers who worship craft. The entire experience is drenched in pure black — not a warm charcoal or a cozy dark gray, but an absolute void (\\`#000000\\`) that makes every element, every screenshot, every typographic flourish feel like it's floating in deep space. This is a website that treats its own product UI as the hero art, embedding full-fidelity screenshots and interactive demos directly into the narrative flow.\n\nThe typography is the signature move: GT Walsheim with aggressively tight letter-spacing (as extreme as -5.5px on 110px display text) creates headlines that feel compressed, kinetic, almost spring-loaded — like words under pressure that might expand at any moment. The transition to Inter for body text is seamless, with extensive OpenType feature usage (\\`cv01\\`, \\`cv05\\`, \\`cv09\\`, \\`cv11\\`, \\`ss03\\`, \\`ss07\\`) that gives even small text a refined, custom feel. Framer Blue (\\`#0099ff\\`) is deployed sparingly but decisively — as link color, border accents, and subtle ring shadows — creating a cold, electric throughline against the warm-less black.\n\nThe overall effect is a nightclub for web designers: dark, precise, seductive, and unapologetically product-forward. Every section exists to showcase what the tool can do, with the website itself serving as proof of concept.\n\n**Key Characteristics:**\n- Pure black (\\`#000000\\`) void canvas — absolute dark, not warm or gray-tinted\n- GT Walsheim display font with extreme negative letter-spacing (-5.5px at 110px)\n- Framer Blue (\\`#0099ff\\`) as the sole accent color — cold, electric, precise\n- Pill-shaped buttons (40px–100px radius) — no sharp corners on interactive elements\n- Product screenshots as hero art — the tool IS the marketing\n- Frosted glass button variants using \\`rgba(255, 255, 255, 0.1)\\` on dark surfaces\n- Extensive OpenType feature usage across Inter for refined micro-typography\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure Black** (\\`#000000\\`): Primary background, the void canvas that defines Framer's dark-first identity\n- **Pure White** (\\`#ffffff\\`): Primary text color on dark surfaces, button text on accent backgrounds\n- **Framer Blue** (\\`#0099ff\\`): Primary accent color — links, borders, ring shadows, interactive highlights\n\n### Secondary & Accent\n- **Muted Silver** (\\`#a6a6a6\\`): Secondary text, subdued labels, dimmed descriptions on dark surfaces\n- **Near Black** (\\`#090909\\`): Elevated dark surface, shadow ring color for subtle depth separation\n\n### Surface & Background\n- **Void Black** (\\`#000000\\`): Page background, primary canvas\n- **Frosted White** (\\`rgba(255, 255, 255, 0.1)\\`): Translucent button backgrounds, glass-effect surfaces on dark\n- **Subtle White** (\\`rgba(255, 255, 255, 0.5)\\`): Slightly more opaque frosted elements for hover states\n\n### Neutrals & Text\n- **Pure White** (\\`#ffffff\\`): Heading text, high-emphasis body text\n- **Muted Silver** (\\`#a6a6a6\\`): Body text, descriptions, secondary information\n- **Ghost White** (\\`rgba(255, 255, 255, 0.6)\\`): Tertiary text, placeholders on dark surfaces\n\n### Semantic & Accent\n- **Framer Blue** (\\`#0099ff\\`): Links, interactive borders, focus rings\n- **Blue Glow** (\\`rgba(0, 153, 255, 0.15)\\`): Focus ring shadow, subtle blue halo around interactive elements\n- **Default Link Blue** (\\`#0000ee\\`): Standard browser link color (used sparingly in content areas)\n\n### Gradient System\n- No prominent gradient usage — Framer relies on pure flat black surfaces with occasional blue-tinted glows for depth\n- Subtle radial glow effects behind product screenshots using Framer Blue at very low opacity\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: \\`GT Walsheim Framer Medium\\` / \\`GT Walsheim Medium\\` — custom geometric sans-serif, weight 500. Fallbacks: \\`GT Walsheim Framer Medium Placeholder\\`, system sans-serif\n- **Body/UI**: \\`Inter Variable\\` / \\`Inter\\` — variable sans-serif with extensive OpenType features. Fallbacks: \\`Inter Placeholder\\`, \\`-apple-system\\`, \\`system-ui\\`\n- **Accent**: \\`Mona Sans\\` — GitHub's open-source font, used for select elements at ultra-light weight (100)\n- **Monospace**: \\`Azeret Mono\\` — companion mono for code and technical labels\n- **Rounded**: \\`Open Runde\\` — small rounded companion font for micro-labels\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | GT Walsheim Framer Medium | 110px | 500 | 0.85 | -5.5px | Extreme negative tracking, compressed impact |\n| Section Display | GT Walsheim Medium | 85px | 500 | 0.95 | -4.25px | OpenType: ss02, tnum |\n| Section Heading | GT Walsheim Medium | 62px | 500 | 1.00 | -3.1px | OpenType: ss02 |\n| Feature Heading | GT Walsheim Medium | 32px | 500 | 1.13 | -1px | Tightest of the smaller headings |\n| Accent Display | Mona Sans | 61.5px | 100 | 1.00 | -3.1px | Ultra-light weight, ethereal |\n| Card Title | Inter Variable | 24px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |\n| Feature Title | Inter | 22px | 700 | 1.20 | -0.8px | OpenType: cv05 |\n| Sub-heading | Inter | 20px | 600 | 1.20 | -0.8px | OpenType: cv01, cv09 |\n| Body Large | Inter Variable | 18px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |\n| Body | Inter Variable | 15px | 400 | 1.30 | -0.01px | OpenType: cv11 |\n| Nav/UI | Inter Variable | 15px | 400 | 1.00 | -0.15px | OpenType: cv06, cv11, dlig, ss03 |\n| Body Readable | Inter Framer Regular | 14px | 400 | 1.60 | normal | Long-form body text |\n| Caption | Inter Variable | 14px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |\n| Label | Inter | 13px | 500 | 1.60 | normal | OpenType: cv06, cv11, ss03 |\n| Small Caption | Inter Variable | 12px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |\n| Micro Code | Azeret Mono | 10.4px | 400 | 1.60 | normal | OpenType: cv06, cv11, ss03 |\n| Badge | Open Runde | 9px | 600 | 1.11 | normal | OpenType: cv01, cv09 |\n| Micro Uppercase | Inter Variable | 7px | 400 | 1.00 | 0.21px | uppercase transform |\n\n### Principles\n- **Compression as personality**: GT Walsheim's extreme negative letter-spacing (-5.5px at 110px) is the defining typographic gesture — headlines feel spring-loaded, urgent, almost breathless\n- **OpenType maximalism**: Inter is deployed with 6+ OpenType features simultaneously (\\`cv01\\`, \\`cv05\\`, \\`cv09\\`, \\`cv11\\`, \\`ss03\\`, \\`ss07\\`), creating a subtly custom feel even at body sizes\n- **Weight restraint on display**: All GT Walsheim usage is weight 500 (medium) — never bold, never regular. This creates a confident-but-not-aggressive display tone\n- **Ultra-tight line heights**: Display text at 0.85 line-height means letters nearly overlap vertically — intentional density that rewards reading at arm's length\n\n## 4. Component Stylings\n\n### Buttons\n- **Frosted Pill**: \\`rgba(255, 255, 255, 0.1)\\` background, black text (\\`#000000\\`), pill shape (40px radius). The glass-effect button that lives on dark surfaces — translucent, ambient, subtle\n- **Solid White Pill**: \\`rgb(255, 255, 255)\\` background, black text (\\`#000000\\`), full pill shape (100px radius), padding \\`10px 15px\\`. The primary CTA — clean, high-contrast on dark, unmissable\n- **Ghost**: No visible background, white text, relies on text styling alone. Hover reveals subtle frosted background\n- **Transition**: Scale-based animations (matrix transform with 0.85 scale factor), opacity transitions for reveal effects\n\n### Cards & Containers\n- **Dark Surface Card**: Black or near-black (\\`#090909\\`) background, \\`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px\\` blue ring shadow border, rounded corners (10px–15px radius)\n- **Elevated Card**: Multi-layer shadow — \\`rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px\\` (subtle top highlight) + \\`rgba(0, 0, 0, 0.25) 0px 10px 30px\\` (deep ambient shadow)\n- **Product Screenshots**: Full-width or padded within dark containers, 8px–12px border-radius for software UI previews\n- **Hover**: Subtle glow increase on Framer Blue ring shadow, or brightness shift on frosted surfaces\n\n### Inputs & Forms\n- Minimal form presence on the marketing site\n- Input fields follow dark theme: dark background, subtle border, white text\n- Focus state: Framer Blue (\\`#0099ff\\`) ring border, \\`1px solid #0099ff\\`\n- Placeholder text in \\`rgba(255, 255, 255, 0.4)\\`\n\n### Navigation\n- **Dark floating nav bar**: Black background with frosted glass effect, white text links\n- **Nav links**: Inter at 15px, weight 400, white text with subtle hover opacity change\n- **CTA button**: Pill-shaped, white or frosted, positioned at right end of nav\n- **Mobile**: Collapses to hamburger menu, maintains dark theme\n- **Sticky behavior**: Nav remains fixed at top on scroll\n\n### Image Treatment\n- **Product screenshots as hero art**: Full-width embedded UI screenshots with rounded corners (8px–12px)\n- **Dark-on-dark composition**: Screenshots placed on black backgrounds with subtle shadow for depth separation\n- **16:9 and custom aspect ratios**: Product demos fill their containers\n- **No decorative imagery**: All images are functional — showing the tool, the output, or the workflow\n\n### Trust & Social Proof\n- Customer logos and testimonials in muted gray on dark surfaces\n- Minimal ornamentation — the product screenshots serve as the trust signal\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 20px, 30px, 35px\n- **Section padding**: Large vertical spacing (80px–120px between sections)\n- **Card padding**: 15px–30px internal padding\n- **Component gaps**: 8px–20px between related elements\n\n### Grid & Container\n- **Max width**: ~1200px container, centered\n- **Column patterns**: Full-width hero, 2-column feature sections, single-column product showcases\n- **Asymmetric layouts**: Feature sections often pair text (40%) with screenshot (60%)\n\n### Whitespace Philosophy\n- **Breathe through darkness**: Generous vertical spacing between sections — the black background means whitespace manifests as void, creating dramatic pauses between content blocks\n- **Dense within, spacious between**: Individual components are tightly composed (tight line-heights, compressed text) but float in generous surrounding space\n- **Product-first density**: Screenshot areas are allowed to be dense and information-rich, contrasting with the sparse marketing text\n\n### Border Radius Scale\n- **1px**: Micro-elements, nearly squared precision edges\n- **5px–7px**: Small UI elements, image thumbnails — subtly softened\n- **8px**: Standard component radius — code blocks, buttons, interactive elements\n- **10px–12px**: Cards, product screenshots — comfortably rounded\n- **15px–20px**: Large containers, feature cards — generously rounded\n- **30px–40px**: Navigation pills, pagination — noticeably rounded\n- **100px**: Full pill shape — primary CTAs, tag elements\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow, pure black surface | Page background, empty areas |\n| Level 1 (Ring) | \\`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px\\` | Card borders, interactive element outlines — Framer Blue glow ring |\n| Level 2 (Contained) | \\`rgb(9, 9, 9) 0px 0px 0px 2px\\` | Near-black ring for subtle containment on dark surfaces |\n| Level 3 (Floating) | \\`rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px\\` | Elevated cards, floating elements — subtle white top-edge highlight + deep ambient shadow |\n\n### Shadow Philosophy\nFramer's elevation system is inverted from traditional light-theme designs. Instead of darker shadows on light backgrounds, Framer uses:\n- **Blue-tinted ring shadows** at very low opacity (0.15) for containment — a signature move that subtly brands every bordered element\n- **White edge highlights** (0.5px) on the top edge of elevated elements — simulating light hitting the top surface\n- **Deep ambient shadows** for true floating elements — \\`rgba(0, 0, 0, 0.25)\\` at large spread (30px)\n\n### Decorative Depth\n- **Blue glow auras**: Subtle Framer Blue (\\`#0099ff\\`) radial gradients behind key interactive areas\n- **No background blur/glassmorphism**: Despite the frosted button effect, there's no heavy glass blur usage — the translucency is achieved through simple rgba opacity\n\n## 7. Do's and Don'ts\n\n### Do\n- Use pure black (\\`#000000\\`) as the primary background — not dark gray, not charcoal\n- Apply extreme negative letter-spacing on GT Walsheim display text (-3px to -5.5px)\n- Keep all buttons pill-shaped (40px+ radius) — never use squared or slightly-rounded buttons\n- Use Framer Blue (\\`#0099ff\\`) exclusively for interactive accents — links, borders, focus states\n- Deploy \\`rgba(255, 255, 255, 0.1)\\` for frosted glass surfaces on dark backgrounds\n- Maintain GT Walsheim at weight 500 only — the medium weight IS the brand\n- Use extensive OpenType features on Inter text (cv01, cv05, cv09, cv11, ss03, ss07)\n- Let product screenshots be the visual centerpiece — the tool markets itself\n- Apply blue ring shadows (\\`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px\\`) for card containment\n\n### Don't\n- Use warm dark backgrounds (no \\`#1a1a1a\\`, \\`#2d2d2d\\`, or brownish blacks)\n- Apply bold (700+) weight to GT Walsheim display text — medium 500 only\n- Introduce additional accent colors beyond Framer Blue — this is a one-accent-color system\n- Use large border-radius on non-interactive elements (cards use 10px–15px, only buttons get 40px+)\n- Add decorative imagery, illustrations, or icons — the product IS the illustration\n- Use positive letter-spacing on headlines — everything is compressed, negative tracking\n- Create heavy drop shadows — depth is communicated through subtle rings and minimal ambients\n- Place light/white backgrounds behind content sections — the void is sacred\n- Use serif or display-weight fonts — the system is geometric sans-serif only\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <809px | Single column, stacked feature sections, reduced hero text (62px→40px), hamburger nav |\n| Tablet | 809px–1199px | 2-column features begin, nav links partially visible, screenshots scale down |\n| Desktop | >1199px | Full layout, expanded nav with all links + CTA, 110px display hero, side-by-side features |\n\n### Touch Targets\n- Pill buttons: minimum 40px height with 10px vertical padding — exceeds 44px WCAG minimum\n- Nav links: 15px text with generous padding for touch accessibility\n- Mobile CTA buttons: Full-width pills on mobile for easy thumb reach\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav → hamburger menu at mobile breakpoint\n- **Hero text**: 110px display → 85px → 62px → ~40px across breakpoints, maintaining extreme negative tracking proportionally\n- **Feature sections**: Side-by-side (text + screenshot) → stacked vertically on mobile\n- **Product screenshots**: Scale responsively within containers, maintaining aspect ratios\n- **Section spacing**: Reduces proportionally — 120px desktop → 60px mobile\n\n### Image Behavior\n- Product screenshots are responsive, scaling within their container boundaries\n- No art direction changes — same crops across breakpoints\n- Dark background ensures screenshots maintain visual impact at any size\n- Screenshots lazy-load as user scrolls into view\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Background: Void Black (\\`#000000\\`)\n- Primary Text: Pure White (\\`#ffffff\\`)\n- Accent/CTA: Framer Blue (\\`#0099ff\\`)\n- Secondary Text: Muted Silver (\\`#a6a6a6\\`)\n- Frosted Surface: Translucent White (\\`rgba(255, 255, 255, 0.1)\\`)\n- Elevation Ring: Blue Glow (\\`rgba(0, 153, 255, 0.15)\\`)\n\n### Example Component Prompts\n- \"Create a hero section on pure black background with 110px GT Walsheim heading in white, letter-spacing -5.5px, line-height 0.85, and a pill-shaped white CTA button (100px radius) with black text\"\n- \"Design a feature card on black background with a 1px Framer Blue ring shadow border (rgba(0,153,255,0.15)), 12px border-radius, white heading in Inter at 22px weight 700, and muted silver (a6a6a6) body text\"\n- \"Build a navigation bar with black background, white Inter text links at 15px, and a frosted pill button (rgba(255,255,255,0.1) background, 40px radius) as the CTA\"\n- \"Create a product showcase section with a full-width screenshot embedded on black, 10px border-radius, subtle multi-layer shadow (white 0.5px top highlight + rgba(0,0,0,0.25) 30px ambient)\"\n- \"Design a pricing card using pure black surface, Framer Blue (#0099ff) accent for the selected plan border, white text hierarchy (24px Inter bold heading, 14px regular body), and a solid white pill CTA button\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time — the dark canvas makes each element precious\n2. Always verify letter-spacing on GT Walsheim headings — the extreme negative tracking is non-negotiable\n3. Check that Framer Blue appears ONLY on interactive elements — never as decorative background or text color for non-links\n4. Ensure all buttons are pill-shaped — any squared corner immediately breaks the Framer aesthetic\n5. Test frosted glass surfaces by checking they have exactly \\`rgba(255, 255, 255, 0.1)\\` — too opaque looks like a bug, too transparent disappears\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;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/framer.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const framerBrief = `# Design System Inspired by Framer\n\n## 1. Visual Theme & Atmosphere\n\nFramer's website is a cinematic, tool-obsessed dark canvas that radiates the confidence of a design tool built by designers who worship craft. The entire experience is drenched in pure black — not a warm charcoal or a cozy dark gray, but an absolute void (\\`#000000\\`) that makes every element, every screenshot, every typographic flourish feel like it's floating in deep space. This is a website that treats its own product UI as the hero art, embedding full-fidelity screenshots and interactive demos directly into the narrative flow.\n\nThe typography is the signature move: GT Walsheim with aggressively tight letter-spacing (as extreme as -5.5px on 110px display text) creates headlines that feel compressed, kinetic, almost spring-loaded — like words under pressure that might expand at any moment. The transition to Inter for body text is seamless, with extensive OpenType feature usage (\\`cv01\\`, \\`cv05\\`, \\`cv09\\`, \\`cv11\\`, \\`ss03\\`, \\`ss07\\`) that gives even small text a refined, custom feel. Framer Blue (\\`#0099ff\\`) is deployed sparingly but decisively — as link color, border accents, and subtle ring shadows — creating a cold, electric throughline against the warm-less black.\n\nThe overall effect is a nightclub for web designers: dark, precise, seductive, and unapologetically product-forward. Every section exists to showcase what the tool can do, with the website itself serving as proof of concept.\n\n**Key Characteristics:**\n- Pure black (\\`#000000\\`) void canvas — absolute dark, not warm or gray-tinted\n- GT Walsheim display font with extreme negative letter-spacing (-5.5px at 110px)\n- Framer Blue (\\`#0099ff\\`) as the sole accent color — cold, electric, precise\n- Pill-shaped buttons (40px–100px radius) — no sharp corners on interactive elements\n- Product screenshots as hero art — the tool IS the marketing\n- Frosted glass button variants using \\`rgba(255, 255, 255, 0.1)\\` on dark surfaces\n- Extensive OpenType feature usage across Inter for refined micro-typography\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure Black** (\\`#000000\\`): Primary background, the void canvas that defines Framer's dark-first identity\n- **Pure White** (\\`#ffffff\\`): Primary text color on dark surfaces, button text on accent backgrounds\n- **Framer Blue** (\\`#0099ff\\`): Primary accent color — links, borders, ring shadows, interactive highlights\n\n### Secondary & Accent\n- **Muted Silver** (\\`#a6a6a6\\`): Secondary text, subdued labels, dimmed descriptions on dark surfaces\n- **Near Black** (\\`#090909\\`): Elevated dark surface, shadow ring color for subtle depth separation\n\n### Surface & Background\n- **Void Black** (\\`#000000\\`): Page background, primary canvas\n- **Frosted White** (\\`rgba(255, 255, 255, 0.1)\\`): Translucent button backgrounds, glass-effect surfaces on dark\n- **Subtle White** (\\`rgba(255, 255, 255, 0.5)\\`): Slightly more opaque frosted elements for hover states\n\n### Neutrals & Text\n- **Pure White** (\\`#ffffff\\`): Heading text, high-emphasis body text\n- **Muted Silver** (\\`#a6a6a6\\`): Body text, descriptions, secondary information\n- **Ghost White** (\\`rgba(255, 255, 255, 0.6)\\`): Tertiary text, placeholders on dark surfaces\n\n### Semantic & Accent\n- **Framer Blue** (\\`#0099ff\\`): Links, interactive borders, focus rings\n- **Blue Glow** (\\`rgba(0, 153, 255, 0.15)\\`): Focus ring shadow, subtle blue halo around interactive elements\n- **Default Link Blue** (\\`#0000ee\\`): Standard browser link color (used sparingly in content areas)\n\n### Gradient System\n- No prominent gradient usage — Framer relies on pure flat black surfaces with occasional blue-tinted glows for depth\n- Subtle radial glow effects behind product screenshots using Framer Blue at very low opacity\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: \\`GT Walsheim Framer Medium\\` / \\`GT Walsheim Medium\\` — custom geometric sans-serif, weight 500. Fallbacks: \\`GT Walsheim Framer Medium Placeholder\\`, system sans-serif\n- **Body/UI**: \\`Inter Variable\\` / \\`Inter\\` — variable sans-serif with extensive OpenType features. Fallbacks: \\`Inter Placeholder\\`, \\`-apple-system\\`, \\`system-ui\\`\n- **Accent**: \\`Mona Sans\\` — GitHub's open-source font, used for select elements at ultra-light weight (100)\n- **Monospace**: \\`Azeret Mono\\` — companion mono for code and technical labels\n- **Rounded**: \\`Open Runde\\` — small rounded companion font for micro-labels\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | GT Walsheim Framer Medium | 110px | 500 | 0.85 | -5.5px | Extreme negative tracking, compressed impact |\n| Section Display | GT Walsheim Medium | 85px | 500 | 0.95 | -4.25px | OpenType: ss02, tnum |\n| Section Heading | GT Walsheim Medium | 62px | 500 | 1.00 | -3.1px | OpenType: ss02 |\n| Feature Heading | GT Walsheim Medium | 32px | 500 | 1.13 | -1px | Tightest of the smaller headings |\n| Accent Display | Mona Sans | 61.5px | 100 | 1.00 | -3.1px | Ultra-light weight, ethereal |\n| Card Title | Inter Variable | 24px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |\n| Feature Title | Inter | 22px | 700 | 1.20 | -0.8px | OpenType: cv05 |\n| Sub-heading | Inter | 20px | 600 | 1.20 | -0.8px | OpenType: cv01, cv09 |\n| Body Large | Inter Variable | 18px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |\n| Body | Inter Variable | 15px | 400 | 1.30 | -0.01px | OpenType: cv11 |\n| Nav/UI | Inter Variable | 15px | 400 | 1.00 | -0.15px | OpenType: cv06, cv11, dlig, ss03 |\n| Body Readable | Inter Framer Regular | 14px | 400 | 1.60 | normal | Long-form body text |\n| Caption | Inter Variable | 14px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |\n| Label | Inter | 13px | 500 | 1.60 | normal | OpenType: cv06, cv11, ss03 |\n| Small Caption | Inter Variable | 12px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |\n| Micro Code | Azeret Mono | 10.4px | 400 | 1.60 | normal | OpenType: cv06, cv11, ss03 |\n| Badge | Open Runde | 9px | 600 | 1.11 | normal | OpenType: cv01, cv09 |\n| Micro Uppercase | Inter Variable | 7px | 400 | 1.00 | 0.21px | uppercase transform |\n\n### Principles\n- **Compression as personality**: GT Walsheim's extreme negative letter-spacing (-5.5px at 110px) is the defining typographic gesture — headlines feel spring-loaded, urgent, almost breathless\n- **OpenType maximalism**: Inter is deployed with 6+ OpenType features simultaneously (\\`cv01\\`, \\`cv05\\`, \\`cv09\\`, \\`cv11\\`, \\`ss03\\`, \\`ss07\\`), creating a subtly custom feel even at body sizes\n- **Weight restraint on display**: All GT Walsheim usage is weight 500 (medium) — never bold, never regular. This creates a confident-but-not-aggressive display tone\n- **Ultra-tight line heights**: Display text at 0.85 line-height means letters nearly overlap vertically — intentional density that rewards reading at arm's length\n\n## 4. Component Stylings\n\n### Buttons\n- **Frosted Pill**: \\`rgba(255, 255, 255, 0.1)\\` background, black text (\\`#000000\\`), pill shape (40px radius). The glass-effect button that lives on dark surfaces — translucent, ambient, subtle\n- **Solid White Pill**: \\`rgb(255, 255, 255)\\` background, black text (\\`#000000\\`), full pill shape (100px radius), padding \\`10px 15px\\`. The primary CTA — clean, high-contrast on dark, unmissable\n- **Ghost**: No visible background, white text, relies on text styling alone. Hover reveals subtle frosted background\n- **Transition**: Scale-based animations (matrix transform with 0.85 scale factor), opacity transitions for reveal effects\n\n### Cards & Containers\n- **Dark Surface Card**: Black or near-black (\\`#090909\\`) background, \\`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px\\` blue ring shadow border, rounded corners (10px–15px radius)\n- **Elevated Card**: Multi-layer shadow — \\`rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px\\` (subtle top highlight) + \\`rgba(0, 0, 0, 0.25) 0px 10px 30px\\` (deep ambient shadow)\n- **Product Screenshots**: Full-width or padded within dark containers, 8px–12px border-radius for software UI previews\n- **Hover**: Subtle glow increase on Framer Blue ring shadow, or brightness shift on frosted surfaces\n\n### Inputs & Forms\n- Minimal form presence on the marketing site\n- Input fields follow dark theme: dark background, subtle border, white text\n- Focus state: Framer Blue (\\`#0099ff\\`) ring border, \\`1px solid #0099ff\\`\n- Placeholder text in \\`rgba(255, 255, 255, 0.4)\\`\n\n### Navigation\n- **Dark floating nav bar**: Black background with frosted glass effect, white text links\n- **Nav links**: Inter at 15px, weight 400, white text with subtle hover opacity change\n- **CTA button**: Pill-shaped, white or frosted, positioned at right end of nav\n- **Mobile**: Collapses to hamburger menu, maintains dark theme\n- **Sticky behavior**: Nav remains fixed at top on scroll\n\n### Image Treatment\n- **Product screenshots as hero art**: Full-width embedded UI screenshots with rounded corners (8px–12px)\n- **Dark-on-dark composition**: Screenshots placed on black backgrounds with subtle shadow for depth separation\n- **16:9 and custom aspect ratios**: Product demos fill their containers\n- **No decorative imagery**: All images are functional — showing the tool, the output, or the workflow\n\n### Trust & Social Proof\n- Customer logos and testimonials in muted gray on dark surfaces\n- Minimal ornamentation — the product screenshots serve as the trust signal\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 20px, 30px, 35px\n- **Section padding**: Large vertical spacing (80px–120px between sections)\n- **Card padding**: 15px–30px internal padding\n- **Component gaps**: 8px–20px between related elements\n\n### Grid & Container\n- **Max width**: ~1200px container, centered\n- **Column patterns**: Full-width hero, 2-column feature sections, single-column product showcases\n- **Asymmetric layouts**: Feature sections often pair text (40%) with screenshot (60%)\n\n### Whitespace Philosophy\n- **Breathe through darkness**: Generous vertical spacing between sections — the black background means whitespace manifests as void, creating dramatic pauses between content blocks\n- **Dense within, spacious between**: Individual components are tightly composed (tight line-heights, compressed text) but float in generous surrounding space\n- **Product-first density**: Screenshot areas are allowed to be dense and information-rich, contrasting with the sparse marketing text\n\n### Border Radius Scale\n- **1px**: Micro-elements, nearly squared precision edges\n- **5px–7px**: Small UI elements, image thumbnails — subtly softened\n- **8px**: Standard component radius — code blocks, buttons, interactive elements\n- **10px–12px**: Cards, product screenshots — comfortably rounded\n- **15px–20px**: Large containers, feature cards — generously rounded\n- **30px–40px**: Navigation pills, pagination — noticeably rounded\n- **100px**: Full pill shape — primary CTAs, tag elements\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow, pure black surface | Page background, empty areas |\n| Level 1 (Ring) | \\`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px\\` | Card borders, interactive element outlines — Framer Blue glow ring |\n| Level 2 (Contained) | \\`rgb(9, 9, 9) 0px 0px 0px 2px\\` | Near-black ring for subtle containment on dark surfaces |\n| Level 3 (Floating) | \\`rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px\\` | Elevated cards, floating elements — subtle white top-edge highlight + deep ambient shadow |\n\n### Shadow Philosophy\nFramer's elevation system is inverted from traditional light-theme designs. Instead of darker shadows on light backgrounds, Framer uses:\n- **Blue-tinted ring shadows** at very low opacity (0.15) for containment — a signature move that subtly brands every bordered element\n- **White edge highlights** (0.5px) on the top edge of elevated elements — simulating light hitting the top surface\n- **Deep ambient shadows** for true floating elements — \\`rgba(0, 0, 0, 0.25)\\` at large spread (30px)\n\n### Decorative Depth\n- **Blue glow auras**: Subtle Framer Blue (\\`#0099ff\\`) radial gradients behind key interactive areas\n- **No background blur/glassmorphism**: Despite the frosted button effect, there's no heavy glass blur usage — the translucency is achieved through simple rgba opacity\n\n## 7. Do's and Don'ts\n\n### Do\n- Use pure black (\\`#000000\\`) as the primary background — not dark gray, not charcoal\n- Apply extreme negative letter-spacing on GT Walsheim display text (-3px to -5.5px)\n- Keep all buttons pill-shaped (40px+ radius) — never use squared or slightly-rounded buttons\n- Use Framer Blue (\\`#0099ff\\`) exclusively for interactive accents — links, borders, focus states\n- Deploy \\`rgba(255, 255, 255, 0.1)\\` for frosted glass surfaces on dark backgrounds\n- Maintain GT Walsheim at weight 500 only — the medium weight IS the brand\n- Use extensive OpenType features on Inter text (cv01, cv05, cv09, cv11, ss03, ss07)\n- Let product screenshots be the visual centerpiece — the tool markets itself\n- Apply blue ring shadows (\\`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px\\`) for card containment\n\n### Don't\n- Use warm dark backgrounds (no \\`#1a1a1a\\`, \\`#2d2d2d\\`, or brownish blacks)\n- Apply bold (700+) weight to GT Walsheim display text — medium 500 only\n- Introduce additional accent colors beyond Framer Blue — this is a one-accent-color system\n- Use large border-radius on non-interactive elements (cards use 10px–15px, only buttons get 40px+)\n- Add decorative imagery, illustrations, or icons — the product IS the illustration\n- Use positive letter-spacing on headlines — everything is compressed, negative tracking\n- Create heavy drop shadows — depth is communicated through subtle rings and minimal ambients\n- Place light/white backgrounds behind content sections — the void is sacred\n- Use serif or display-weight fonts — the system is geometric sans-serif only\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <809px | Single column, stacked feature sections, reduced hero text (62px→40px), hamburger nav |\n| Tablet | 809px–1199px | 2-column features begin, nav links partially visible, screenshots scale down |\n| Desktop | >1199px | Full layout, expanded nav with all links + CTA, 110px display hero, side-by-side features |\n\n### Touch Targets\n- Pill buttons: minimum 40px height with 10px vertical padding — exceeds 44px WCAG minimum\n- Nav links: 15px text with generous padding for touch accessibility\n- Mobile CTA buttons: Full-width pills on mobile for easy thumb reach\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav → hamburger menu at mobile breakpoint\n- **Hero text**: 110px display → 85px → 62px → ~40px across breakpoints, maintaining extreme negative tracking proportionally\n- **Feature sections**: Side-by-side (text + screenshot) → stacked vertically on mobile\n- **Product screenshots**: Scale responsively within containers, maintaining aspect ratios\n- **Section spacing**: Reduces proportionally — 120px desktop → 60px mobile\n\n### Image Behavior\n- Product screenshots are responsive, scaling within their container boundaries\n- No art direction changes — same crops across breakpoints\n- Dark background ensures screenshots maintain visual impact at any size\n- Screenshots lazy-load as user scrolls into view\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Background: Void Black (\\`#000000\\`)\n- Primary Text: Pure White (\\`#ffffff\\`)\n- Accent/CTA: Framer Blue (\\`#0099ff\\`)\n- Secondary Text: Muted Silver (\\`#a6a6a6\\`)\n- Frosted Surface: Translucent White (\\`rgba(255, 255, 255, 0.1)\\`)\n- Elevation Ring: Blue Glow (\\`rgba(0, 153, 255, 0.15)\\`)\n\n### Example Component Prompts\n- \"Create a hero section on pure black background with 110px GT Walsheim heading in white, letter-spacing -5.5px, line-height 0.85, and a pill-shaped white CTA button (100px radius) with black text\"\n- \"Design a feature card on black background with a 1px Framer Blue ring shadow border (rgba(0,153,255,0.15)), 12px border-radius, white heading in Inter at 22px weight 700, and muted silver (a6a6a6) body text\"\n- \"Build a navigation bar with black background, white Inter text links at 15px, and a frosted pill button (rgba(255,255,255,0.1) background, 40px radius) as the CTA\"\n- \"Create a product showcase section with a full-width screenshot embedded on black, 10px border-radius, subtle multi-layer shadow (white 0.5px top highlight + rgba(0,0,0,0.25) 30px ambient)\"\n- \"Design a pricing card using pure black surface, Framer Blue (#0099ff) accent for the selected plan border, white text hierarchy (24px Inter bold heading, 14px regular body), and a solid white pill CTA button\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time — the dark canvas makes each element precious\n2. Always verify letter-spacing on GT Walsheim headings — the extreme negative tracking is non-negotiable\n3. Check that Framer Blue appears ONLY on interactive elements — never as decorative background or text color for non-links\n4. Ensure all buttons are pill-shaped — any squared corner immediately breaks the Framer aesthetic\n5. Test frosted glass surfaces by checking they have exactly \\`rgba(255, 255, 255, 0.1)\\` — too opaque looks like a bug, too transparent disappears\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;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/hashicorp.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const hashicorpBrief = `# Design System Inspired by HashiCorp\n\n## 1. Visual Theme & Atmosphere\n\nHashiCorp's website is enterprise infrastructure made tangible — a design system that must communicate the complexity of cloud infrastructure management while remaining approachable. The visual language splits between two modes: a clean white light-mode for informational sections and a dramatic dark-mode (\\`#15181e\\`, \\`#0d0e12\\`) for hero areas and product showcases, creating a day/night duality that mirrors the \"build in light, deploy in dark\" developer workflow.\n\nThe typography is anchored by a custom brand font (HashiCorp Sans, loaded as \\`__hashicorpSans_96f0ca\\`) that carries substantial weight — literally. Headings use 600–700 weights with tight line-heights (1.17–1.19), creating dense, authoritative text blocks that communicate enterprise confidence. The hero headline at 82px weight 600 with OpenType \\`\"kern\"\\` enabled is not decorative — it's infrastructure-grade typography.\n\nWhat distinguishes HashiCorp is its multi-product color system. Each product in the portfolio has its own brand color — Terraform purple (\\`#7b42bc\\`), Vault yellow (\\`#ffcf25\\`), Waypoint teal (\\`#14c6cb\\`), Vagrant blue (\\`#1868f2\\`) — and these colors appear throughout as accent tokens via a CSS custom property system (\\`--mds-color-*\\`). This creates a design system within a design system: the parent brand is black-and-white with blue accents, while each child product injects its own chromatic identity.\n\nThe component system uses the \\`mds\\` (Markdown Design System) prefix, indicating a systematic, token-driven approach where colors, spacing, and states are all managed through CSS variables. Shadows are remarkably subtle — dual-layer micro-shadows using \\`rgba(97, 104, 117, 0.05)\\` that are nearly invisible but provide just enough depth to separate interactive surfaces from the background.\n\n**Key Characteristics:**\n- Dual-mode: clean white sections + dramatic dark (\\`#15181e\\`) hero/product areas\n- Custom HashiCorp Sans font with 600–700 weights and \\`\"kern\"\\` feature\n- Multi-product color system via \\`--mds-color-*\\` CSS custom properties\n- Product brand colors: Terraform purple, Vault yellow, Waypoint teal, Vagrant blue\n- Uppercase letter-spaced captions (13px, weight 600, 1.3px letter-spacing)\n- Micro-shadows: dual-layer at 0.05 opacity — depth through whisper, not shout\n- Token-driven \\`mds\\` component system with semantic variable names\n- Tight border radius: 2px–8px, nothing pill-shaped or circular\n- System-ui fallback stack for secondary text\n\n## 2. Color Palette & Roles\n\n### Brand Primary\n- **Black** (\\`#000000\\`): Primary brand color, text on light surfaces, \\`--mds-color-hcp-brand\\`\n- **Dark Charcoal** (\\`#15181e\\`): Dark mode backgrounds, hero sections\n- **Near Black** (\\`#0d0e12\\`): Deepest dark mode surface, form inputs on dark\n\n### Neutral Scale\n- **Light Gray** (\\`#f1f2f3\\`): Light backgrounds, subtle surfaces\n- **Mid Gray** (\\`#d5d7db\\`): Borders, button text on dark\n- **Cool Gray** (\\`#b2b6bd\\`): Border accents (at 0.1–0.4 opacity)\n- **Dark Gray** (\\`#656a76\\`): Helper text, secondary labels, \\`--mds-form-helper-text-color\\`\n- **Charcoal** (\\`#3b3d45\\`): Secondary text on light, button borders\n- **Near White** (\\`#efeff1\\`): Primary text on dark surfaces\n\n### Product Brand Colors\n- **Terraform Purple** (\\`#7b42bc\\`): \\`--mds-color-terraform-button-background\\`\n- **Vault Yellow** (\\`#ffcf25\\`): \\`--mds-color-vault-button-background\\`\n- **Waypoint Teal** (\\`#14c6cb\\`): \\`--mds-color-waypoint-button-background-focus\\`\n- **Waypoint Teal Hover** (\\`#12b6bb\\`): \\`--mds-color-waypoint-button-background-hover\\`\n- **Vagrant Blue** (\\`#1868f2\\`): \\`--mds-color-vagrant-brand\\`\n- **Purple Accent** (\\`#911ced\\`): \\`--mds-color-palette-purple-300\\`\n- **Visited Purple** (\\`#a737ff\\`): \\`--mds-color-foreground-action-visited\\`\n\n### Semantic Colors\n- **Action Blue** (\\`#1060ff\\`): Primary action links on dark\n- **Link Blue** (\\`#2264d6\\`): Primary links on light\n- **Bright Blue** (\\`#2b89ff\\`): Active links, hover accent\n- **Amber** (\\`#bb5a00\\`): \\`--mds-color-palette-amber-200\\`, warning states\n- **Amber Light** (\\`#fbeabf\\`): \\`--mds-color-palette-amber-100\\`, warning backgrounds\n- **Vault Faint Yellow** (\\`#fff9cf\\`): \\`--mds-color-vault-radar-gradient-faint-stop\\`\n- **Orange** (\\`#a9722e\\`): \\`--mds-color-unified-core-orange-6\\`\n- **Red** (\\`#731e25\\`): \\`--mds-color-unified-core-red-7\\`, error states\n- **Navy** (\\`#101a59\\`): \\`--mds-color-unified-core-blue-7\\`\n\n### Shadows\n- **Micro Shadow** (\\`rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px\\`): Default card/button elevation\n- **Focus Outline**: \\`3px solid var(--mds-color-focus-action-external)\\` — systematic focus ring\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary Brand**: \\`__hashicorpSans_96f0ca\\` (HashiCorp Sans), with fallback: \\`__hashicorpSans_Fallback_96f0ca\\`\n- **System UI**: \\`system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | HashiCorp Sans | 82px (5.13rem) | 600 | 1.17 (tight) | normal | \\`\"kern\"\\` enabled |\n| Section Heading | HashiCorp Sans | 52px (3.25rem) | 600 | 1.19 (tight) | normal | \\`\"kern\"\\` enabled |\n| Feature Heading | HashiCorp Sans | 42px (2.63rem) | 700 | 1.19 (tight) | -0.42px | Negative tracking |\n| Sub-heading | HashiCorp Sans | 34px (2.13rem) | 600–700 | 1.18 (tight) | normal | Feature blocks |\n| Card Title | HashiCorp Sans | 26px (1.63rem) | 700 | 1.19 (tight) | normal | Card and panel headings |\n| Small Title | HashiCorp Sans | 19px (1.19rem) | 700 | 1.21 (tight) | normal | Compact headings |\n| Body Emphasis | HashiCorp Sans | 17px (1.06rem) | 600–700 | 1.18–1.35 | normal | Bold body text |\n| Body Large | system-ui | 20px (1.25rem) | 400–600 | 1.50 | normal | Hero descriptions |\n| Body | system-ui | 16px (1.00rem) | 400–500 | 1.63–1.69 (relaxed) | normal | Standard body text |\n| Nav Link | system-ui | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | Navigation items |\n| Small Body | system-ui | 14px (0.88rem) | 400–500 | 1.29–1.71 | normal | Secondary content |\n| Caption | system-ui | 13px (0.81rem) | 400–500 | 1.23–1.69 | normal | Metadata, footer links |\n| Uppercase Label | HashiCorp Sans | 13px (0.81rem) | 600 | 1.69 (relaxed) | 1.3px | \\`text-transform: uppercase\\` |\n\n### Principles\n- **Brand/System split**: HashiCorp Sans for headings and brand-critical text; system-ui for body, navigation, and functional text. The brand font carries the weight, system-ui carries the words.\n- **Kern always on**: All HashiCorp Sans text enables OpenType \\`\"kern\"\\` — letterfitting is non-negotiable.\n- **Tight headings**: Every heading uses 1.17–1.21 line-height, creating dense, stacked text blocks that feel infrastructural — solid, load-bearing.\n- **Relaxed body**: Body text uses 1.50–1.69 line-height (notably generous), creating comfortable reading rhythm beneath the dense headings.\n- **Uppercase labels as wayfinding**: 13px uppercase with 1.3px letter-spacing serves as the systematic category/section marker — always HashiCorp Sans weight 600.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Dark**\n- Background: \\`#15181e\\`\n- Text: \\`#d5d7db\\`\n- Padding: 9px 9px 9px 15px (asymmetric, more left padding)\n- Radius: 5px\n- Border: \\`1px solid rgba(178, 182, 189, 0.4)\\`\n- Shadow: \\`rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px\\`\n- Focus: \\`3px solid var(--mds-color-focus-action-external)\\`\n- Hover: uses \\`--mds-color-surface-interactive\\` token\n\n**Secondary White**\n- Background: \\`#ffffff\\`\n- Text: \\`#3b3d45\\`\n- Padding: 8px 12px\n- Radius: 4px\n- Hover: \\`--mds-color-surface-interactive\\` + low-shadow elevation\n- Focus: \\`3px solid transparent\\` outline\n- Clean, minimal appearance\n\n**Product-Colored Buttons**\n- Terraform: background \\`#7b42bc\\`\n- Vault: background \\`#ffcf25\\` (dark text)\n- Waypoint: background \\`#14c6cb\\`, hover \\`#12b6bb\\`\n- Each product button follows the same structural pattern but uses its brand color\n\n### Badges / Pills\n- Background: \\`#42225b\\` (deep purple)\n- Text: \\`#efeff1\\`\n- Padding: 3px 7px\n- Radius: 5px\n- Border: \\`1px solid rgb(180, 87, 255)\\`\n- Font: 16px\n\n### Inputs\n\n**Text Input (Dark Mode)**\n- Background: \\`#0d0e12\\`\n- Text: \\`#efeff1\\`\n- Border: \\`1px solid rgb(97, 104, 117)\\`\n- Padding: 11px\n- Radius: 5px\n- Focus: \\`3px solid var(--mds-color-focus-action-external)\\` outline\n\n**Checkbox**\n- Background: \\`#0d0e12\\`\n- Border: \\`1px solid rgb(97, 104, 117)\\`\n- Radius: 3px\n\n### Links\n- **Action Blue on Light**: \\`#2264d6\\`, hover → blue-600 variable, underline on hover\n- **Action Blue on Dark**: \\`#1060ff\\` or \\`#2b89ff\\`, underline on hover\n- **White on Dark**: \\`#ffffff\\`, transparent underline → visible underline on hover\n- **Neutral on Light**: \\`#3b3d45\\`, transparent underline → visible underline on hover\n- **Light on Dark**: \\`#efeff1\\`, similar hover pattern\n- All links use \\`var(--wpl-blue-600)\\` as hover color\n\n### Cards & Containers\n- Light mode: white background, micro-shadow elevation\n- Dark mode: \\`#15181e\\` or darker surfaces\n- Radius: 8px for cards and containers\n- Product showcase cards with gradient borders or accent lighting\n\n### Navigation\n- Clean horizontal nav with mega-menu dropdowns\n- HashiCorp logo left-aligned\n- system-ui 15px weight 500 for links\n- Product categories organized by lifecycle management group\n- \"Get started\" and \"Contact us\" CTAs in header\n- Dark mode variant for hero sections\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 3px, 4px, 6px, 7px, 8px, 9px, 11px, 12px, 16px, 20px, 24px, 32px, 40px, 48px\n\n### Grid & Container\n- Max content width: ~1150px (xl breakpoint)\n- Full-width dark hero sections with contained content\n- Card grids: 2–3 column layouts\n- Generous horizontal padding at desktop scale\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <375px | Tight single column |\n| Mobile | 375–480px | Standard mobile |\n| Small Tablet | 480–600px | Minor adjustments |\n| Tablet | 600–768px | 2-column grids begin |\n| Small Desktop | 768–992px | Full nav visible |\n| Desktop | 992–1120px | Standard layout |\n| Large Desktop | 1120–1440px | Max-width content |\n| Ultra-wide | >1440px | Centered, generous margins |\n\n### Whitespace Philosophy\n- **Enterprise breathing room**: Generous vertical spacing between sections (48px–80px+) communicates stability and seriousness.\n- **Dense headings, spacious body**: Tight line-height headings sit above relaxed body text, creating visual \"weight at the top\" of each section.\n- **Dark as canvas**: Dark hero sections use extra vertical padding to let 3D illustrations and gradients breathe.\n\n### Border Radius Scale\n- Minimal (2px): Links, small inline elements\n- Subtle (3px): Checkboxes, small inputs\n- Standard (4px): Secondary buttons\n- Comfortable (5px): Primary buttons, badges, inputs\n- Card (8px): Cards, containers, images\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default surfaces, text blocks |\n| Whisper (Level 1) | \\`rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px\\` | Cards, buttons, interactive surfaces |\n| Focus (Level 2) | \\`3px solid var(--mds-color-focus-action-external)\\` outline | Focus rings — color-matched to context |\n\n**Shadow Philosophy**: HashiCorp uses arguably the subtlest shadow system in modern web design. The dual-layer shadows at 5% opacity are nearly invisible — they exist not to create visual depth but to signal interactivity. If you can see the shadow, it's too strong. This restraint communicates the enterprise value of stability — nothing floats, nothing is uncertain.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use HashiCorp Sans for headings and brand text, system-ui for body and UI text\n- Enable \\`\"kern\"\\` on all HashiCorp Sans text\n- Use product brand colors ONLY for their respective products (Terraform = purple, Vault = yellow, etc.)\n- Apply uppercase labels at 13px weight 600 with 1.3px letter-spacing for section markers\n- Keep shadows at the \"whisper\" level (0.05 opacity dual-layer)\n- Use the \\`--mds-color-*\\` token system for consistent color application\n- Maintain the tight-heading / relaxed-body rhythm (1.17–1.21 vs 1.50–1.69 line-heights)\n- Use \\`3px solid\\` focus outlines for accessibility\n\n### Don't\n- Don't use product brand colors outside their product context (no Terraform purple on Vault content)\n- Don't increase shadow opacity above 0.1 — the whisper level is intentional\n- Don't use pill-shaped buttons (>8px radius) — the sharp, minimal radius is structural\n- Don't skip the \\`\"kern\"\\` feature on headings — the font requires it\n- Don't use HashiCorp Sans for small body text — it's designed for 17px+ heading use\n- Don't mix product colors in the same component — each product has one color\n- Don't use pure black (\\`#000000\\`) for dark backgrounds — use \\`#15181e\\` or \\`#0d0e12\\`\n- Don't forget the asymmetric button padding — 9px 9px 9px 15px is intentional\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <768px | Single column, hamburger nav, stacked CTAs |\n| Tablet | 768–992px | 2-column grids, nav begins expanding |\n| Desktop | 992–1150px | Full layout, mega-menu nav |\n| Large | >1150px | Max-width centered, generous margins |\n\n### Collapsing Strategy\n- Hero: 82px → 52px → 42px heading sizes\n- Navigation: mega-menu → hamburger\n- Product cards: 3-column → 2-column → stacked\n- Dark sections maintain full-width but compress padding\n- Buttons: inline → full-width stacked on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Light bg: \\`#ffffff\\`, \\`#f1f2f3\\`\n- Dark bg: \\`#15181e\\`, \\`#0d0e12\\`\n- Text light: \\`#000000\\`, \\`#3b3d45\\`\n- Text dark: \\`#efeff1\\`, \\`#d5d7db\\`\n- Links: \\`#2264d6\\` (light), \\`#1060ff\\` (dark), \\`#2b89ff\\` (active)\n- Helper text: \\`#656a76\\`\n- Borders: \\`rgba(178, 182, 189, 0.4)\\`, \\`rgb(97, 104, 117)\\`\n- Focus: \\`3px solid\\` product-appropriate color\n\n### Example Component Prompts\n- \"Create a hero on dark background (#15181e). Headline at 82px HashiCorp Sans weight 600, line-height 1.17, kern enabled, white text. Sub-text at 20px system-ui weight 400, line-height 1.50, #d5d7db text. Two buttons: primary dark (#15181e, 5px radius, 9px 15px padding) and secondary white (#ffffff, 4px radius, 8px 12px padding).\"\n- \"Design a product card: white background, 8px radius, dual-layer shadow at rgba(97,104,117,0.05). Title at 26px HashiCorp Sans weight 700, body at 16px system-ui weight 400 line-height 1.63.\"\n- \"Build an uppercase section label: 13px HashiCorp Sans weight 600, line-height 1.69, letter-spacing 1.3px, text-transform uppercase, #656a76 color.\"\n- \"Create a product-specific CTA button: Terraform → #7b42bc background, Vault → #ffcf25 with dark text, Waypoint → #14c6cb. All: 5px radius, 500 weight text, 16px system-ui.\"\n- \"Design a dark form: #0d0e12 input background, #efeff1 text, 1px solid rgb(97,104,117) border, 5px radius, 11px padding. Focus: 3px solid accent-color outline.\"\n\n### Iteration Guide\n1. Always start with the mode decision: light (white) for informational, dark (#15181e) for hero/product\n2. HashiCorp Sans for headings only (17px+), system-ui for everything else\n3. Shadows are at whisper level (0.05 opacity) — if visible, reduce\n4. Product colors are sacred — each product owns exactly one color\n5. Focus rings are always 3px solid, color-matched to product context\n6. Uppercase labels are the systematic wayfinding pattern — 13px, 600, 1.3px tracking\n`;\n"],"mappings":";AACO,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/hashicorp.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const hashicorpBrief = `# Design System Inspired by HashiCorp\n\n## 1. Visual Theme & Atmosphere\n\nHashiCorp's website is enterprise infrastructure made tangible — a design system that must communicate the complexity of cloud infrastructure management while remaining approachable. The visual language splits between two modes: a clean white light-mode for informational sections and a dramatic dark-mode (\\`#15181e\\`, \\`#0d0e12\\`) for hero areas and product showcases, creating a day/night duality that mirrors the \"build in light, deploy in dark\" developer workflow.\n\nThe typography is anchored by a custom brand font (HashiCorp Sans, loaded as \\`__hashicorpSans_96f0ca\\`) that carries substantial weight — literally. Headings use 600–700 weights with tight line-heights (1.17–1.19), creating dense, authoritative text blocks that communicate enterprise confidence. The hero headline at 82px weight 600 with OpenType \\`\"kern\"\\` enabled is not decorative — it's infrastructure-grade typography.\n\nWhat distinguishes HashiCorp is its multi-product color system. Each product in the portfolio has its own brand color — Terraform purple (\\`#7b42bc\\`), Vault yellow (\\`#ffcf25\\`), Waypoint teal (\\`#14c6cb\\`), Vagrant blue (\\`#1868f2\\`) — and these colors appear throughout as accent tokens via a CSS custom property system (\\`--mds-color-*\\`). This creates a design system within a design system: the parent brand is black-and-white with blue accents, while each child product injects its own chromatic identity.\n\nThe component system uses the \\`mds\\` (Markdown Design System) prefix, indicating a systematic, token-driven approach where colors, spacing, and states are all managed through CSS variables. Shadows are remarkably subtle — dual-layer micro-shadows using \\`rgba(97, 104, 117, 0.05)\\` that are nearly invisible but provide just enough depth to separate interactive surfaces from the background.\n\n**Key Characteristics:**\n- Dual-mode: clean white sections + dramatic dark (\\`#15181e\\`) hero/product areas\n- Custom HashiCorp Sans font with 600–700 weights and \\`\"kern\"\\` feature\n- Multi-product color system via \\`--mds-color-*\\` CSS custom properties\n- Product brand colors: Terraform purple, Vault yellow, Waypoint teal, Vagrant blue\n- Uppercase letter-spaced captions (13px, weight 600, 1.3px letter-spacing)\n- Micro-shadows: dual-layer at 0.05 opacity — depth through whisper, not shout\n- Token-driven \\`mds\\` component system with semantic variable names\n- Tight border radius: 2px–8px, nothing pill-shaped or circular\n- System-ui fallback stack for secondary text\n\n## 2. Color Palette & Roles\n\n### Brand Primary\n- **Black** (\\`#000000\\`): Primary brand color, text on light surfaces, \\`--mds-color-hcp-brand\\`\n- **Dark Charcoal** (\\`#15181e\\`): Dark mode backgrounds, hero sections\n- **Near Black** (\\`#0d0e12\\`): Deepest dark mode surface, form inputs on dark\n\n### Neutral Scale\n- **Light Gray** (\\`#f1f2f3\\`): Light backgrounds, subtle surfaces\n- **Mid Gray** (\\`#d5d7db\\`): Borders, button text on dark\n- **Cool Gray** (\\`#b2b6bd\\`): Border accents (at 0.1–0.4 opacity)\n- **Dark Gray** (\\`#656a76\\`): Helper text, secondary labels, \\`--mds-form-helper-text-color\\`\n- **Charcoal** (\\`#3b3d45\\`): Secondary text on light, button borders\n- **Near White** (\\`#efeff1\\`): Primary text on dark surfaces\n\n### Product Brand Colors\n- **Terraform Purple** (\\`#7b42bc\\`): \\`--mds-color-terraform-button-background\\`\n- **Vault Yellow** (\\`#ffcf25\\`): \\`--mds-color-vault-button-background\\`\n- **Waypoint Teal** (\\`#14c6cb\\`): \\`--mds-color-waypoint-button-background-focus\\`\n- **Waypoint Teal Hover** (\\`#12b6bb\\`): \\`--mds-color-waypoint-button-background-hover\\`\n- **Vagrant Blue** (\\`#1868f2\\`): \\`--mds-color-vagrant-brand\\`\n- **Purple Accent** (\\`#911ced\\`): \\`--mds-color-palette-purple-300\\`\n- **Visited Purple** (\\`#a737ff\\`): \\`--mds-color-foreground-action-visited\\`\n\n### Semantic Colors\n- **Action Blue** (\\`#1060ff\\`): Primary action links on dark\n- **Link Blue** (\\`#2264d6\\`): Primary links on light\n- **Bright Blue** (\\`#2b89ff\\`): Active links, hover accent\n- **Amber** (\\`#bb5a00\\`): \\`--mds-color-palette-amber-200\\`, warning states\n- **Amber Light** (\\`#fbeabf\\`): \\`--mds-color-palette-amber-100\\`, warning backgrounds\n- **Vault Faint Yellow** (\\`#fff9cf\\`): \\`--mds-color-vault-radar-gradient-faint-stop\\`\n- **Orange** (\\`#a9722e\\`): \\`--mds-color-unified-core-orange-6\\`\n- **Red** (\\`#731e25\\`): \\`--mds-color-unified-core-red-7\\`, error states\n- **Navy** (\\`#101a59\\`): \\`--mds-color-unified-core-blue-7\\`\n\n### Shadows\n- **Micro Shadow** (\\`rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px\\`): Default card/button elevation\n- **Focus Outline**: \\`3px solid var(--mds-color-focus-action-external)\\` — systematic focus ring\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary Brand**: \\`__hashicorpSans_96f0ca\\` (HashiCorp Sans), with fallback: \\`__hashicorpSans_Fallback_96f0ca\\`\n- **System UI**: \\`system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | HashiCorp Sans | 82px (5.13rem) | 600 | 1.17 (tight) | normal | \\`\"kern\"\\` enabled |\n| Section Heading | HashiCorp Sans | 52px (3.25rem) | 600 | 1.19 (tight) | normal | \\`\"kern\"\\` enabled |\n| Feature Heading | HashiCorp Sans | 42px (2.63rem) | 700 | 1.19 (tight) | -0.42px | Negative tracking |\n| Sub-heading | HashiCorp Sans | 34px (2.13rem) | 600–700 | 1.18 (tight) | normal | Feature blocks |\n| Card Title | HashiCorp Sans | 26px (1.63rem) | 700 | 1.19 (tight) | normal | Card and panel headings |\n| Small Title | HashiCorp Sans | 19px (1.19rem) | 700 | 1.21 (tight) | normal | Compact headings |\n| Body Emphasis | HashiCorp Sans | 17px (1.06rem) | 600–700 | 1.18–1.35 | normal | Bold body text |\n| Body Large | system-ui | 20px (1.25rem) | 400–600 | 1.50 | normal | Hero descriptions |\n| Body | system-ui | 16px (1.00rem) | 400–500 | 1.63–1.69 (relaxed) | normal | Standard body text |\n| Nav Link | system-ui | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | Navigation items |\n| Small Body | system-ui | 14px (0.88rem) | 400–500 | 1.29–1.71 | normal | Secondary content |\n| Caption | system-ui | 13px (0.81rem) | 400–500 | 1.23–1.69 | normal | Metadata, footer links |\n| Uppercase Label | HashiCorp Sans | 13px (0.81rem) | 600 | 1.69 (relaxed) | 1.3px | \\`text-transform: uppercase\\` |\n\n### Principles\n- **Brand/System split**: HashiCorp Sans for headings and brand-critical text; system-ui for body, navigation, and functional text. The brand font carries the weight, system-ui carries the words.\n- **Kern always on**: All HashiCorp Sans text enables OpenType \\`\"kern\"\\` — letterfitting is non-negotiable.\n- **Tight headings**: Every heading uses 1.17–1.21 line-height, creating dense, stacked text blocks that feel infrastructural — solid, load-bearing.\n- **Relaxed body**: Body text uses 1.50–1.69 line-height (notably generous), creating comfortable reading rhythm beneath the dense headings.\n- **Uppercase labels as wayfinding**: 13px uppercase with 1.3px letter-spacing serves as the systematic category/section marker — always HashiCorp Sans weight 600.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Dark**\n- Background: \\`#15181e\\`\n- Text: \\`#d5d7db\\`\n- Padding: 9px 9px 9px 15px (asymmetric, more left padding)\n- Radius: 5px\n- Border: \\`1px solid rgba(178, 182, 189, 0.4)\\`\n- Shadow: \\`rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px\\`\n- Focus: \\`3px solid var(--mds-color-focus-action-external)\\`\n- Hover: uses \\`--mds-color-surface-interactive\\` token\n\n**Secondary White**\n- Background: \\`#ffffff\\`\n- Text: \\`#3b3d45\\`\n- Padding: 8px 12px\n- Radius: 4px\n- Hover: \\`--mds-color-surface-interactive\\` + low-shadow elevation\n- Focus: \\`3px solid transparent\\` outline\n- Clean, minimal appearance\n\n**Product-Colored Buttons**\n- Terraform: background \\`#7b42bc\\`\n- Vault: background \\`#ffcf25\\` (dark text)\n- Waypoint: background \\`#14c6cb\\`, hover \\`#12b6bb\\`\n- Each product button follows the same structural pattern but uses its brand color\n\n### Badges / Pills\n- Background: \\`#42225b\\` (deep purple)\n- Text: \\`#efeff1\\`\n- Padding: 3px 7px\n- Radius: 5px\n- Border: \\`1px solid rgb(180, 87, 255)\\`\n- Font: 16px\n\n### Inputs\n\n**Text Input (Dark Mode)**\n- Background: \\`#0d0e12\\`\n- Text: \\`#efeff1\\`\n- Border: \\`1px solid rgb(97, 104, 117)\\`\n- Padding: 11px\n- Radius: 5px\n- Focus: \\`3px solid var(--mds-color-focus-action-external)\\` outline\n\n**Checkbox**\n- Background: \\`#0d0e12\\`\n- Border: \\`1px solid rgb(97, 104, 117)\\`\n- Radius: 3px\n\n### Links\n- **Action Blue on Light**: \\`#2264d6\\`, hover → blue-600 variable, underline on hover\n- **Action Blue on Dark**: \\`#1060ff\\` or \\`#2b89ff\\`, underline on hover\n- **White on Dark**: \\`#ffffff\\`, transparent underline → visible underline on hover\n- **Neutral on Light**: \\`#3b3d45\\`, transparent underline → visible underline on hover\n- **Light on Dark**: \\`#efeff1\\`, similar hover pattern\n- All links use \\`var(--wpl-blue-600)\\` as hover color\n\n### Cards & Containers\n- Light mode: white background, micro-shadow elevation\n- Dark mode: \\`#15181e\\` or darker surfaces\n- Radius: 8px for cards and containers\n- Product showcase cards with gradient borders or accent lighting\n\n### Navigation\n- Clean horizontal nav with mega-menu dropdowns\n- HashiCorp logo left-aligned\n- system-ui 15px weight 500 for links\n- Product categories organized by lifecycle management group\n- \"Get started\" and \"Contact us\" CTAs in header\n- Dark mode variant for hero sections\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 3px, 4px, 6px, 7px, 8px, 9px, 11px, 12px, 16px, 20px, 24px, 32px, 40px, 48px\n\n### Grid & Container\n- Max content width: ~1150px (xl breakpoint)\n- Full-width dark hero sections with contained content\n- Card grids: 2–3 column layouts\n- Generous horizontal padding at desktop scale\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <375px | Tight single column |\n| Mobile | 375–480px | Standard mobile |\n| Small Tablet | 480–600px | Minor adjustments |\n| Tablet | 600–768px | 2-column grids begin |\n| Small Desktop | 768–992px | Full nav visible |\n| Desktop | 992–1120px | Standard layout |\n| Large Desktop | 1120–1440px | Max-width content |\n| Ultra-wide | >1440px | Centered, generous margins |\n\n### Whitespace Philosophy\n- **Enterprise breathing room**: Generous vertical spacing between sections (48px–80px+) communicates stability and seriousness.\n- **Dense headings, spacious body**: Tight line-height headings sit above relaxed body text, creating visual \"weight at the top\" of each section.\n- **Dark as canvas**: Dark hero sections use extra vertical padding to let 3D illustrations and gradients breathe.\n\n### Border Radius Scale\n- Minimal (2px): Links, small inline elements\n- Subtle (3px): Checkboxes, small inputs\n- Standard (4px): Secondary buttons\n- Comfortable (5px): Primary buttons, badges, inputs\n- Card (8px): Cards, containers, images\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default surfaces, text blocks |\n| Whisper (Level 1) | \\`rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px\\` | Cards, buttons, interactive surfaces |\n| Focus (Level 2) | \\`3px solid var(--mds-color-focus-action-external)\\` outline | Focus rings — color-matched to context |\n\n**Shadow Philosophy**: HashiCorp uses arguably the subtlest shadow system in modern web design. The dual-layer shadows at 5% opacity are nearly invisible — they exist not to create visual depth but to signal interactivity. If you can see the shadow, it's too strong. This restraint communicates the enterprise value of stability — nothing floats, nothing is uncertain.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use HashiCorp Sans for headings and brand text, system-ui for body and UI text\n- Enable \\`\"kern\"\\` on all HashiCorp Sans text\n- Use product brand colors ONLY for their respective products (Terraform = purple, Vault = yellow, etc.)\n- Apply uppercase labels at 13px weight 600 with 1.3px letter-spacing for section markers\n- Keep shadows at the \"whisper\" level (0.05 opacity dual-layer)\n- Use the \\`--mds-color-*\\` token system for consistent color application\n- Maintain the tight-heading / relaxed-body rhythm (1.17–1.21 vs 1.50–1.69 line-heights)\n- Use \\`3px solid\\` focus outlines for accessibility\n\n### Don't\n- Don't use product brand colors outside their product context (no Terraform purple on Vault content)\n- Don't increase shadow opacity above 0.1 — the whisper level is intentional\n- Don't use pill-shaped buttons (>8px radius) — the sharp, minimal radius is structural\n- Don't skip the \\`\"kern\"\\` feature on headings — the font requires it\n- Don't use HashiCorp Sans for small body text — it's designed for 17px+ heading use\n- Don't mix product colors in the same component — each product has one color\n- Don't use pure black (\\`#000000\\`) for dark backgrounds — use \\`#15181e\\` or \\`#0d0e12\\`\n- Don't forget the asymmetric button padding — 9px 9px 9px 15px is intentional\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <768px | Single column, hamburger nav, stacked CTAs |\n| Tablet | 768–992px | 2-column grids, nav begins expanding |\n| Desktop | 992–1150px | Full layout, mega-menu nav |\n| Large | >1150px | Max-width centered, generous margins |\n\n### Collapsing Strategy\n- Hero: 82px → 52px → 42px heading sizes\n- Navigation: mega-menu → hamburger\n- Product cards: 3-column → 2-column → stacked\n- Dark sections maintain full-width but compress padding\n- Buttons: inline → full-width stacked on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Light bg: \\`#ffffff\\`, \\`#f1f2f3\\`\n- Dark bg: \\`#15181e\\`, \\`#0d0e12\\`\n- Text light: \\`#000000\\`, \\`#3b3d45\\`\n- Text dark: \\`#efeff1\\`, \\`#d5d7db\\`\n- Links: \\`#2264d6\\` (light), \\`#1060ff\\` (dark), \\`#2b89ff\\` (active)\n- Helper text: \\`#656a76\\`\n- Borders: \\`rgba(178, 182, 189, 0.4)\\`, \\`rgb(97, 104, 117)\\`\n- Focus: \\`3px solid\\` product-appropriate color\n\n### Example Component Prompts\n- \"Create a hero on dark background (#15181e). Headline at 82px HashiCorp Sans weight 600, line-height 1.17, kern enabled, white text. Sub-text at 20px system-ui weight 400, line-height 1.50, #d5d7db text. Two buttons: primary dark (#15181e, 5px radius, 9px 15px padding) and secondary white (#ffffff, 4px radius, 8px 12px padding).\"\n- \"Design a product card: white background, 8px radius, dual-layer shadow at rgba(97,104,117,0.05). Title at 26px HashiCorp Sans weight 700, body at 16px system-ui weight 400 line-height 1.63.\"\n- \"Build an uppercase section label: 13px HashiCorp Sans weight 600, line-height 1.69, letter-spacing 1.3px, text-transform uppercase, #656a76 color.\"\n- \"Create a product-specific CTA button: Terraform → #7b42bc background, Vault → #ffcf25 with dark text, Waypoint → #14c6cb. All: 5px radius, 500 weight text, 16px system-ui.\"\n- \"Design a dark form: #0d0e12 input background, #efeff1 text, 1px solid rgb(97,104,117) border, 5px radius, 11px padding. Focus: 3px solid accent-color outline.\"\n\n### Iteration Guide\n1. Always start with the mode decision: light (white) for informational, dark (#15181e) for hero/product\n2. HashiCorp Sans for headings only (17px+), system-ui for everything else\n3. Shadows are at whisper level (0.05 opacity) — if visible, reduce\n4. Product colors are sacred — each product owns exactly one color\n5. Focus rings are always 3px solid, color-matched to product context\n6. Uppercase labels are the systematic wayfinding pattern — 13px, 600, 1.3px tracking\n`;\n"],"mappings":";AACO,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/ibm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/ibm.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const ibmBrief = `# Design System Inspired by IBM\n\n## 1. Visual Theme & Atmosphere\n\nIBM's website is the digital embodiment of enterprise authority built on the Carbon Design System — a design language so methodically structured it reads like an engineering specification rendered as a webpage. The page operates on a stark duality: a bright white (\\`#ffffff\\`) canvas with near-black (\\`#161616\\`) text, punctuated by a single, unwavering accent — IBM Blue 60 (\\`#0f62fe\\`). This isn't playful tech-startup minimalism; it's corporate precision distilled into pixels. Every element exists within Carbon's rigid 2x grid, every color maps to a semantic token, every spacing value snaps to the 8px base unit.\n\nThe IBM Plex type family is the system's backbone. IBM Plex Sans at light weight (300) for display headlines creates an unexpectedly airy, almost delicate quality at large sizes — a deliberate counterpoint to IBM's corporate gravity. At body sizes, regular weight (400) with 0.16px letter-spacing on 14px captions introduces the meticulous micro-tracking that makes Carbon text feel engineered rather than designed. IBM Plex Mono serves code, data, and technical labels, completing the family trinity alongside the rarely-surfaced IBM Plex Serif.\n\nWhat defines IBM's visual identity beyond monochrome-plus-blue is the reliance on Carbon's component token system. Every interactive state maps to a CSS custom property prefixed with \\`--cds-\\` (Carbon Design System). Buttons don't have hardcoded colors; they reference \\`--cds-button-primary\\`, \\`--cds-button-primary-hover\\`, \\`--cds-button-primary-active\\`. This tokenized architecture means the entire visual layer is a thin skin over a deeply systematic foundation — the design equivalent of a well-typed API.\n\n**Key Characteristics:**\n- IBM Plex Sans at weight 300 (Light) for display — corporate gravitas through typographic restraint\n- IBM Plex Mono for code and technical content with consistent 0.16px letter-spacing at small sizes\n- Single accent color: IBM Blue 60 (\\`#0f62fe\\`) — every interactive element, every CTA, every link\n- Carbon token system (\\`--cds-*\\`) driving all semantic colors, enabling theme-switching at the variable level\n- 8px spacing grid with strict adherence — no arbitrary values, everything aligns\n- Flat, borderless cards on \\`#f4f4f4\\` Gray 10 surface — depth through background-color layering, not shadows\n- Bottom-border inputs (not boxed) — the signature Carbon form pattern\n- 0px border-radius on primary buttons — unapologetically rectangular, no softening\n\n## 2. Color Palette & Roles\n\n### Primary\n- **IBM Blue 60** (\\`#0f62fe\\`): The singular interactive color. Primary buttons, links, focus states, active indicators. This is the only chromatic hue in the core UI palette.\n- **White** (\\`#ffffff\\`): Page background, card surfaces, button text on blue, \\`--cds-background\\`.\n- **Gray 100** (\\`#161616\\`): Primary text, headings, dark surface backgrounds, nav bar, footer. \\`--cds-text-primary\\`.\n\n### Neutral Scale (Gray Family)\n- **Gray 100** (\\`#161616\\`): Primary text, headings, dark UI chrome, footer background.\n- **Gray 90** (\\`#262626\\`): Secondary dark surfaces, hover states on dark backgrounds.\n- **Gray 80** (\\`#393939\\`): Tertiary dark, active states.\n- **Gray 70** (\\`#525252\\`): Secondary text, helper text, descriptions. \\`--cds-text-secondary\\`.\n- **Gray 60** (\\`#6f6f6f\\`): Placeholder text, disabled text.\n- **Gray 50** (\\`#8d8d8d\\`): Disabled icons, muted labels.\n- **Gray 30** (\\`#c6c6c6\\`): Borders, divider lines, input bottom-borders. \\`--cds-border-subtle\\`.\n- **Gray 20** (\\`#e0e0e0\\`): Subtle borders, card outlines.\n- **Gray 10** (\\`#f4f4f4\\`): Secondary surface background, card fills, alternating rows. \\`--cds-layer-01\\`.\n- **Gray 10 Hover** (\\`#e8e8e8\\`): Hover state for Gray 10 surfaces.\n\n### Interactive\n- **Blue 60** (\\`#0f62fe\\`): Primary interactive — buttons, links, focus. \\`--cds-link-primary\\`, \\`--cds-button-primary\\`.\n- **Blue 70** (\\`#0043ce\\`): Link hover state. \\`--cds-link-primary-hover\\`.\n- **Blue 80** (\\`#002d9c\\`): Active/pressed state for blue elements.\n- **Blue 10** (\\`#edf5ff\\`): Blue tint surface, selected row background.\n- **Focus Blue** (\\`#0f62fe\\`): \\`--cds-focus\\` — 2px inset border on focused elements.\n- **Focus Inset** (\\`#ffffff\\`): \\`--cds-focus-inset\\` — white inner ring for focus on dark backgrounds.\n\n### Support & Status\n- **Red 60** (\\`#da1e28\\`): Error, danger. \\`--cds-support-error\\`.\n- **Green 50** (\\`#24a148\\`): Success. \\`--cds-support-success\\`.\n- **Yellow 30** (\\`#f1c21b\\`): Warning. \\`--cds-support-warning\\`.\n- **Blue 60** (\\`#0f62fe\\`): Informational. \\`--cds-support-info\\`.\n\n### Dark Theme (Gray 100 Theme)\n- **Background**: Gray 100 (\\`#161616\\`). \\`--cds-background\\`.\n- **Layer 01**: Gray 90 (\\`#262626\\`). Card and container surfaces.\n- **Layer 02**: Gray 80 (\\`#393939\\`). Elevated surfaces.\n- **Text Primary**: Gray 10 (\\`#f4f4f4\\`). \\`--cds-text-primary\\`.\n- **Text Secondary**: Gray 30 (\\`#c6c6c6\\`). \\`--cds-text-secondary\\`.\n- **Border Subtle**: Gray 80 (\\`#393939\\`). \\`--cds-border-subtle\\`.\n- **Interactive**: Blue 40 (\\`#78a9ff\\`). Links and interactive elements shift lighter for contrast.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: \\`IBM Plex Sans\\`, with fallbacks: \\`Helvetica Neue, Arial, sans-serif\\`\n- **Monospace**: \\`IBM Plex Mono\\`, with fallbacks: \\`Menlo, Courier, monospace\\`\n- **Serif** (limited use): \\`IBM Plex Serif\\`, for editorial/expressive contexts\n- **Icon Font**: \\`ibm_icons\\` — proprietary icon glyphs at 20px\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display 01 | IBM Plex Sans | 60px (3.75rem) | 300 (Light) | 1.17 (70px) | 0 | Maximum impact, light weight for elegance |\n| Display 02 | IBM Plex Sans | 48px (3.00rem) | 300 (Light) | 1.17 (56px) | 0 | Secondary hero, responsive fallback |\n| Heading 01 | IBM Plex Sans | 42px (2.63rem) | 300 (Light) | 1.19 (50px) | 0 | Expressive heading |\n| Heading 02 | IBM Plex Sans | 32px (2.00rem) | 400 (Regular) | 1.25 (40px) | 0 | Section headings |\n| Heading 03 | IBM Plex Sans | 24px (1.50rem) | 400 (Regular) | 1.33 (32px) | 0 | Sub-section titles |\n| Heading 04 | IBM Plex Sans | 20px (1.25rem) | 600 (Semibold) | 1.40 (28px) | 0 | Card titles, feature headers |\n| Heading 05 | IBM Plex Sans | 20px (1.25rem) | 400 (Regular) | 1.40 (28px) | 0 | Lighter card headings |\n| Body Long 01 | IBM Plex Sans | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Standard reading text |\n| Body Long 02 | IBM Plex Sans | 16px (1.00rem) | 600 (Semibold) | 1.50 (24px) | 0 | Emphasized body, labels |\n| Body Short 01 | IBM Plex Sans | 14px (0.88rem) | 400 (Regular) | 1.29 (18px) | 0.16px | Compact body, captions |\n| Body Short 02 | IBM Plex Sans | 14px (0.88rem) | 600 (Semibold) | 1.29 (18px) | 0.16px | Bold captions, nav items |\n| Caption 01 | IBM Plex Sans | 12px (0.75rem) | 400 (Regular) | 1.33 (16px) | 0.32px | Metadata, timestamps |\n| Code 01 | IBM Plex Mono | 14px (0.88rem) | 400 (Regular) | 1.43 (20px) | 0.16px | Inline code, terminal |\n| Code 02 | IBM Plex Mono | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Code blocks |\n| Mono Display | IBM Plex Mono | 42px (2.63rem) | 400 (Regular) | 1.19 (50px) | 0 | Hero mono decorative |\n\n### Principles\n- **Light weight at display sizes**: Carbon's expressive type set uses weight 300 (Light) at 42px+. This creates a distinctive tension — the content speaks with corporate authority while the letterforms whisper with typographic lightness.\n- **Micro-tracking at small sizes**: 0.16px letter-spacing at 14px and 0.32px at 12px. These seemingly negligible values are Carbon's secret weapon for readability at compact sizes — they open up the tight IBM Plex letterforms just enough.\n- **Three functional weights**: 300 (display/expressive), 400 (body/reading), 600 (emphasis/UI labels). Weight 700 is intentionally absent from the production type scale.\n- **Productive vs. Expressive**: Productive sets use tighter line-heights (1.29) for dense UI. Expressive sets breathe more (1.40-1.50) for marketing and editorial content.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Button (Blue)**\n- Background: \\`#0f62fe\\` (Blue 60) → \\`--cds-button-primary\\`\n- Text: \\`#ffffff\\` (White)\n- Padding: 14px 63px 14px 15px (asymmetric — room for trailing icon)\n- Border: 1px solid transparent\n- Border-radius: 0px (sharp rectangle — the Carbon signature)\n- Height: 48px (default), 40px (compact), 64px (expressive)\n- Hover: \\`#0353e9\\` (Blue 60 Hover) → \\`--cds-button-primary-hover\\`\n- Active: \\`#002d9c\\` (Blue 80) → \\`--cds-button-primary-active\\`\n- Focus: \\`2px solid #0f62fe\\` inset + \\`1px solid #ffffff\\` inner\n\n**Secondary Button (Gray)**\n- Background: \\`#393939\\` (Gray 80)\n- Text: \\`#ffffff\\`\n- Hover: \\`#4c4c4c\\` (Gray 70)\n- Active: \\`#6f6f6f\\` (Gray 60)\n- Same padding/radius as primary\n\n**Tertiary Button (Ghost Blue)**\n- Background: transparent\n- Text: \\`#0f62fe\\` (Blue 60)\n- Border: 1px solid \\`#0f62fe\\`\n- Hover: \\`#0353e9\\` text + Blue 10 background tint\n- Border-radius: 0px\n\n**Ghost Button**\n- Background: transparent\n- Text: \\`#0f62fe\\` (Blue 60)\n- Padding: 14px 16px\n- Border: none\n- Hover: \\`#e8e8e8\\` background tint\n\n**Danger Button**\n- Background: \\`#da1e28\\` (Red 60)\n- Text: \\`#ffffff\\`\n- Hover: \\`#b81921\\` (Red 70)\n\n### Cards & Containers\n- Background: \\`#ffffff\\` on white theme, \\`#f4f4f4\\` (Gray 10) for elevated cards\n- Border: none (flat design — no border or shadow on most cards)\n- Border-radius: 0px (matching the rectangular button aesthetic)\n- Hover: background shifts to \\`#e8e8e8\\` (Gray 10 Hover) for clickable cards\n- Content padding: 16px\n- Separation: background-color layering (white → gray 10 → white) rather than shadows\n\n### Inputs & Forms\n- Background: \\`#f4f4f4\\` (Gray 10) — \\`--cds-field\\`\n- Text: \\`#161616\\` (Gray 100)\n- Padding: 0px 16px (horizontal only)\n- Height: 40px (default), 48px (large)\n- Border: none on sides/top — \\`2px solid transparent\\` bottom\n- Bottom-border active: \\`2px solid #161616\\` (Gray 100)\n- Focus: \\`2px solid #0f62fe\\` (Blue 60) bottom-border — \\`--cds-focus\\`\n- Error: \\`2px solid #da1e28\\` (Red 60) bottom-border\n- Label: 12px IBM Plex Sans, 0.32px letter-spacing, Gray 70\n- Helper text: 12px, Gray 60\n- Placeholder: Gray 60 (\\`#6f6f6f\\`)\n- Border-radius: 0px (top) — inputs are sharp-cornered\n\n### Navigation\n- Background: \\`#161616\\` (Gray 100) — full-width dark masthead\n- Height: 48px\n- Logo: IBM 8-bar logo, white on dark, left-aligned\n- Links: 14px IBM Plex Sans, weight 400, \\`#c6c6c6\\` (Gray 30) default\n- Link hover: \\`#ffffff\\` text\n- Active link: \\`#ffffff\\` with bottom-border indicator\n- Platform switcher: left-aligned horizontal tabs\n- Search: icon-triggered slide-out search field\n- Mobile: hamburger with left-sliding panel\n\n### Links\n- Default: \\`#0f62fe\\` (Blue 60) with no underline\n- Hover: \\`#0043ce\\` (Blue 70) with underline\n- Visited: remains Blue 60 (no visited state change)\n- Inline links: underlined by default in body copy\n\n### Distinctive Components\n\n**Content Block (Hero/Feature)**\n- Full-width alternating white/gray-10 background bands\n- Headline left-aligned with 60px or 48px display type\n- CTA as blue primary button with arrow icon\n- Image/illustration right-aligned or below on mobile\n\n**Tile (Clickable Card)**\n- Background: \\`#f4f4f4\\` or \\`#ffffff\\`\n- Full-width bottom-border or background-shift hover\n- Arrow icon bottom-right on hover\n- No shadow — flatness is the identity\n\n**Tag / Label**\n- Background: contextual color at 10% opacity (e.g., Blue 10, Red 10)\n- Text: corresponding 60-grade color\n- Padding: 4px 8px\n- Border-radius: 24px (pill — exception to the 0px rule)\n- Font: 12px weight 400\n\n**Notification Banner**\n- Full-width bar, typically Blue 60 or Gray 100 background\n- White text, 14px\n- Close/dismiss icon right-aligned\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px (Carbon 2x grid)\n- Component spacing scale: 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px\n- Layout spacing scale: 16px, 24px, 32px, 48px, 64px, 80px, 96px, 160px\n- Mini unit: 8px (smallest usable spacing)\n- Padding within components: typically 16px\n- Gap between cards/tiles: 1px (hairline) or 16px (standard)\n\n### Grid & Container\n- 16-column grid (Carbon's 2x grid system)\n- Max content width: 1584px (max breakpoint)\n- Column gutters: 32px (16px on mobile)\n- Margin: 16px (mobile), 32px (tablet+)\n- Content typically spans 8-12 columns for readable line lengths\n- Full-bleed sections alternate with contained content\n\n### Whitespace Philosophy\n- **Functional density**: Carbon favors productive density over expansive whitespace. Sections are tightly packed compared to consumer design systems — this reflects IBM's enterprise DNA.\n- **Background-color zoning**: Instead of massive padding between sections, IBM uses alternating background colors (white → gray 10 → white) to create visual separation with minimal vertical space.\n- **Consistent 48px rhythm**: Major section transitions use 48px vertical spacing. Hero sections may use 80px–96px.\n\n### Border Radius Scale\n- **0px**: Primary buttons, inputs, tiles, cards — the dominant treatment. Carbon is fundamentally rectangular.\n- **2px**: Occasionally on small interactive elements (tags)\n- **24px**: Tags/labels (pill shape — the sole rounded exception)\n- **50%**: Avatar circles, icon containers\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, \\`#ffffff\\` background | Default page surface |\n| Layer 01 | No shadow, \\`#f4f4f4\\` background | Cards, tiles, alternating sections |\n| Layer 02 | No shadow, \\`#e0e0e0\\` background | Elevated panels within Layer 01 |\n| Raised | \\`0 2px 6px rgba(0,0,0,0.3)\\` | Dropdowns, tooltips, overflow menus |\n| Overlay | \\`0 2px 6px rgba(0,0,0,0.3)\\` + dark scrim | Modal dialogs, side panels |\n| Focus | \\`2px solid #0f62fe\\` inset + \\`1px solid #ffffff\\` | Keyboard focus ring |\n| Bottom-border | \\`2px solid #161616\\` on bottom edge | Active input, active tab indicator |\n\n**Shadow Philosophy**: Carbon is deliberately shadow-averse. IBM achieves depth primarily through background-color layering — stacking surfaces of progressively darker grays rather than adding box-shadows. This creates a flat, print-inspired aesthetic where hierarchy is communicated through color value, not simulated light. Shadows are reserved exclusively for floating elements (dropdowns, tooltips, modals) where the element genuinely overlaps content. This restraint gives the rare shadow meaningful impact — when something floats in Carbon, it matters.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use IBM Plex Sans at weight 300 for display sizes (42px+) — the lightness is intentional\n- Apply 0.16px letter-spacing on 14px body text and 0.32px on 12px captions\n- Use 0px border-radius on buttons, inputs, cards, and tiles — rectangles are the system\n- Reference \\`--cds-*\\` token names when implementing (e.g., \\`--cds-button-primary\\`, \\`--cds-text-primary\\`)\n- Use background-color layering (white → gray 10 → gray 20) for depth instead of shadows\n- Use bottom-border (not box) for input field indicators\n- Maintain the 48px default button height and asymmetric padding for icon accommodation\n- Apply Blue 60 (\\`#0f62fe\\`) as the sole accent — one blue to rule them all\n\n### Don't\n- Don't round button corners — 0px radius is the Carbon identity\n- Don't use shadows on cards or tiles — flatness is the point\n- Don't introduce additional accent colors — IBM's system is monochromatic + blue\n- Don't use weight 700 (Bold) — the scale stops at 600 (Semibold)\n- Don't add letter-spacing to display-size text — tracking is only for 14px and below\n- Don't box inputs with full borders — Carbon inputs use bottom-border only\n- Don't use gradient backgrounds — IBM's surfaces are flat, solid colors\n- Don't deviate from the 8px spacing grid — every value should be divisible by 8 (with 2px and 4px for micro-adjustments)\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Small (sm) | 320px | Single column, hamburger nav, 16px margins |\n| Medium (md) | 672px | 2-column grids begin, expanded content |\n| Large (lg) | 1056px | Full navigation visible, 3-4 column grids |\n| X-Large (xlg) | 1312px | Maximum content density, wide layouts |\n| Max | 1584px | Maximum content width, centered with margins |\n\n### Touch Targets\n- Button height: 48px default, minimum 40px (compact)\n- Navigation links: 48px row height for touch\n- Input height: 40px default, 48px large\n- Icon buttons: 48px square touch target\n- Mobile menu items: full-width 48px rows\n\n### Collapsing Strategy\n- Hero: 60px display → 42px → 32px heading as viewport narrows\n- Navigation: full horizontal masthead → hamburger with slide-out panel\n- Grid: 4-column → 2-column → single column\n- Tiles/cards: horizontal grid → vertical stack\n- Images: maintain aspect ratio, max-width 100%\n- Footer: multi-column link groups → stacked single column\n- Section padding: 48px → 32px → 16px\n\n### Image Behavior\n- Responsive images with \\`max-width: 100%\\`\n- Product illustrations scale proportionally\n- Hero images may shift from side-by-side to stacked below\n- Data visualizations maintain aspect ratio with horizontal scroll on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: IBM Blue 60 (\\`#0f62fe\\`)\n- Background: White (\\`#ffffff\\`)\n- Heading text: Gray 100 (\\`#161616\\`)\n- Body text: Gray 100 (\\`#161616\\`)\n- Secondary text: Gray 70 (\\`#525252\\`)\n- Surface/Card: Gray 10 (\\`#f4f4f4\\`)\n- Border: Gray 30 (\\`#c6c6c6\\`)\n- Link: Blue 60 (\\`#0f62fe\\`)\n- Link hover: Blue 70 (\\`#0043ce\\`)\n- Focus ring: Blue 60 (\\`#0f62fe\\`)\n- Error: Red 60 (\\`#da1e28\\`)\n- Success: Green 50 (\\`#24a148\\`)\n\n### Example Component Prompts\n- \"Create a hero section on white background. Headline at 60px IBM Plex Sans weight 300, line-height 1.17, color #161616. Subtitle at 16px weight 400, line-height 1.50, color #525252, max-width 640px. Blue CTA button (#0f62fe background, #ffffff text, 0px border-radius, 48px height, 14px 63px 14px 15px padding).\"\n- \"Design a card tile: #f4f4f4 background, 0px border-radius, 16px padding. Title at 20px IBM Plex Sans weight 600, line-height 1.40, color #161616. Body at 14px weight 400, letter-spacing 0.16px, line-height 1.29, color #525252. Hover: background shifts to #e8e8e8.\"\n- \"Build a form field: #f4f4f4 background, 0px border-radius, 40px height, 16px horizontal padding. Label above at 12px weight 400, letter-spacing 0.32px, color #525252. Bottom-border: 2px solid transparent default, 2px solid #0f62fe on focus. Placeholder: #6f6f6f.\"\n- \"Create a dark navigation bar: #161616 background, 48px height. IBM logo white left-aligned. Links at 14px IBM Plex Sans weight 400, color #c6c6c6. Hover: #ffffff text. Active: #ffffff with 2px bottom border.\"\n- \"Build a tag component: Blue 10 (#edf5ff) background, Blue 60 (#0f62fe) text, 4px 8px padding, 24px border-radius, 12px IBM Plex Sans weight 400.\"\n\n### Iteration Guide\n1. Always use 0px border-radius on buttons, inputs, and cards — this is non-negotiable in Carbon\n2. Letter-spacing only at small sizes: 0.16px at 14px, 0.32px at 12px — never on display text\n3. Three weights: 300 (display), 400 (body), 600 (emphasis) — no bold\n4. Blue 60 is the only accent color — do not introduce secondary accent hues\n5. Depth comes from background-color layering (white → #f4f4f4 → #e0e0e0), not shadows\n6. Inputs have bottom-border only, never fully boxed\n7. Use \\`--cds-\\` prefix for token naming to stay Carbon-compatible\n8. 48px is the universal interactive element height\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;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/ibm.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const ibmBrief = `# Design System Inspired by IBM\n\n## 1. Visual Theme & Atmosphere\n\nIBM's website is the digital embodiment of enterprise authority built on the Carbon Design System — a design language so methodically structured it reads like an engineering specification rendered as a webpage. The page operates on a stark duality: a bright white (\\`#ffffff\\`) canvas with near-black (\\`#161616\\`) text, punctuated by a single, unwavering accent — IBM Blue 60 (\\`#0f62fe\\`). This isn't playful tech-startup minimalism; it's corporate precision distilled into pixels. Every element exists within Carbon's rigid 2x grid, every color maps to a semantic token, every spacing value snaps to the 8px base unit.\n\nThe IBM Plex type family is the system's backbone. IBM Plex Sans at light weight (300) for display headlines creates an unexpectedly airy, almost delicate quality at large sizes — a deliberate counterpoint to IBM's corporate gravity. At body sizes, regular weight (400) with 0.16px letter-spacing on 14px captions introduces the meticulous micro-tracking that makes Carbon text feel engineered rather than designed. IBM Plex Mono serves code, data, and technical labels, completing the family trinity alongside the rarely-surfaced IBM Plex Serif.\n\nWhat defines IBM's visual identity beyond monochrome-plus-blue is the reliance on Carbon's component token system. Every interactive state maps to a CSS custom property prefixed with \\`--cds-\\` (Carbon Design System). Buttons don't have hardcoded colors; they reference \\`--cds-button-primary\\`, \\`--cds-button-primary-hover\\`, \\`--cds-button-primary-active\\`. This tokenized architecture means the entire visual layer is a thin skin over a deeply systematic foundation — the design equivalent of a well-typed API.\n\n**Key Characteristics:**\n- IBM Plex Sans at weight 300 (Light) for display — corporate gravitas through typographic restraint\n- IBM Plex Mono for code and technical content with consistent 0.16px letter-spacing at small sizes\n- Single accent color: IBM Blue 60 (\\`#0f62fe\\`) — every interactive element, every CTA, every link\n- Carbon token system (\\`--cds-*\\`) driving all semantic colors, enabling theme-switching at the variable level\n- 8px spacing grid with strict adherence — no arbitrary values, everything aligns\n- Flat, borderless cards on \\`#f4f4f4\\` Gray 10 surface — depth through background-color layering, not shadows\n- Bottom-border inputs (not boxed) — the signature Carbon form pattern\n- 0px border-radius on primary buttons — unapologetically rectangular, no softening\n\n## 2. Color Palette & Roles\n\n### Primary\n- **IBM Blue 60** (\\`#0f62fe\\`): The singular interactive color. Primary buttons, links, focus states, active indicators. This is the only chromatic hue in the core UI palette.\n- **White** (\\`#ffffff\\`): Page background, card surfaces, button text on blue, \\`--cds-background\\`.\n- **Gray 100** (\\`#161616\\`): Primary text, headings, dark surface backgrounds, nav bar, footer. \\`--cds-text-primary\\`.\n\n### Neutral Scale (Gray Family)\n- **Gray 100** (\\`#161616\\`): Primary text, headings, dark UI chrome, footer background.\n- **Gray 90** (\\`#262626\\`): Secondary dark surfaces, hover states on dark backgrounds.\n- **Gray 80** (\\`#393939\\`): Tertiary dark, active states.\n- **Gray 70** (\\`#525252\\`): Secondary text, helper text, descriptions. \\`--cds-text-secondary\\`.\n- **Gray 60** (\\`#6f6f6f\\`): Placeholder text, disabled text.\n- **Gray 50** (\\`#8d8d8d\\`): Disabled icons, muted labels.\n- **Gray 30** (\\`#c6c6c6\\`): Borders, divider lines, input bottom-borders. \\`--cds-border-subtle\\`.\n- **Gray 20** (\\`#e0e0e0\\`): Subtle borders, card outlines.\n- **Gray 10** (\\`#f4f4f4\\`): Secondary surface background, card fills, alternating rows. \\`--cds-layer-01\\`.\n- **Gray 10 Hover** (\\`#e8e8e8\\`): Hover state for Gray 10 surfaces.\n\n### Interactive\n- **Blue 60** (\\`#0f62fe\\`): Primary interactive — buttons, links, focus. \\`--cds-link-primary\\`, \\`--cds-button-primary\\`.\n- **Blue 70** (\\`#0043ce\\`): Link hover state. \\`--cds-link-primary-hover\\`.\n- **Blue 80** (\\`#002d9c\\`): Active/pressed state for blue elements.\n- **Blue 10** (\\`#edf5ff\\`): Blue tint surface, selected row background.\n- **Focus Blue** (\\`#0f62fe\\`): \\`--cds-focus\\` — 2px inset border on focused elements.\n- **Focus Inset** (\\`#ffffff\\`): \\`--cds-focus-inset\\` — white inner ring for focus on dark backgrounds.\n\n### Support & Status\n- **Red 60** (\\`#da1e28\\`): Error, danger. \\`--cds-support-error\\`.\n- **Green 50** (\\`#24a148\\`): Success. \\`--cds-support-success\\`.\n- **Yellow 30** (\\`#f1c21b\\`): Warning. \\`--cds-support-warning\\`.\n- **Blue 60** (\\`#0f62fe\\`): Informational. \\`--cds-support-info\\`.\n\n### Dark Theme (Gray 100 Theme)\n- **Background**: Gray 100 (\\`#161616\\`). \\`--cds-background\\`.\n- **Layer 01**: Gray 90 (\\`#262626\\`). Card and container surfaces.\n- **Layer 02**: Gray 80 (\\`#393939\\`). Elevated surfaces.\n- **Text Primary**: Gray 10 (\\`#f4f4f4\\`). \\`--cds-text-primary\\`.\n- **Text Secondary**: Gray 30 (\\`#c6c6c6\\`). \\`--cds-text-secondary\\`.\n- **Border Subtle**: Gray 80 (\\`#393939\\`). \\`--cds-border-subtle\\`.\n- **Interactive**: Blue 40 (\\`#78a9ff\\`). Links and interactive elements shift lighter for contrast.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: \\`IBM Plex Sans\\`, with fallbacks: \\`Helvetica Neue, Arial, sans-serif\\`\n- **Monospace**: \\`IBM Plex Mono\\`, with fallbacks: \\`Menlo, Courier, monospace\\`\n- **Serif** (limited use): \\`IBM Plex Serif\\`, for editorial/expressive contexts\n- **Icon Font**: \\`ibm_icons\\` — proprietary icon glyphs at 20px\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display 01 | IBM Plex Sans | 60px (3.75rem) | 300 (Light) | 1.17 (70px) | 0 | Maximum impact, light weight for elegance |\n| Display 02 | IBM Plex Sans | 48px (3.00rem) | 300 (Light) | 1.17 (56px) | 0 | Secondary hero, responsive fallback |\n| Heading 01 | IBM Plex Sans | 42px (2.63rem) | 300 (Light) | 1.19 (50px) | 0 | Expressive heading |\n| Heading 02 | IBM Plex Sans | 32px (2.00rem) | 400 (Regular) | 1.25 (40px) | 0 | Section headings |\n| Heading 03 | IBM Plex Sans | 24px (1.50rem) | 400 (Regular) | 1.33 (32px) | 0 | Sub-section titles |\n| Heading 04 | IBM Plex Sans | 20px (1.25rem) | 600 (Semibold) | 1.40 (28px) | 0 | Card titles, feature headers |\n| Heading 05 | IBM Plex Sans | 20px (1.25rem) | 400 (Regular) | 1.40 (28px) | 0 | Lighter card headings |\n| Body Long 01 | IBM Plex Sans | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Standard reading text |\n| Body Long 02 | IBM Plex Sans | 16px (1.00rem) | 600 (Semibold) | 1.50 (24px) | 0 | Emphasized body, labels |\n| Body Short 01 | IBM Plex Sans | 14px (0.88rem) | 400 (Regular) | 1.29 (18px) | 0.16px | Compact body, captions |\n| Body Short 02 | IBM Plex Sans | 14px (0.88rem) | 600 (Semibold) | 1.29 (18px) | 0.16px | Bold captions, nav items |\n| Caption 01 | IBM Plex Sans | 12px (0.75rem) | 400 (Regular) | 1.33 (16px) | 0.32px | Metadata, timestamps |\n| Code 01 | IBM Plex Mono | 14px (0.88rem) | 400 (Regular) | 1.43 (20px) | 0.16px | Inline code, terminal |\n| Code 02 | IBM Plex Mono | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Code blocks |\n| Mono Display | IBM Plex Mono | 42px (2.63rem) | 400 (Regular) | 1.19 (50px) | 0 | Hero mono decorative |\n\n### Principles\n- **Light weight at display sizes**: Carbon's expressive type set uses weight 300 (Light) at 42px+. This creates a distinctive tension — the content speaks with corporate authority while the letterforms whisper with typographic lightness.\n- **Micro-tracking at small sizes**: 0.16px letter-spacing at 14px and 0.32px at 12px. These seemingly negligible values are Carbon's secret weapon for readability at compact sizes — they open up the tight IBM Plex letterforms just enough.\n- **Three functional weights**: 300 (display/expressive), 400 (body/reading), 600 (emphasis/UI labels). Weight 700 is intentionally absent from the production type scale.\n- **Productive vs. Expressive**: Productive sets use tighter line-heights (1.29) for dense UI. Expressive sets breathe more (1.40-1.50) for marketing and editorial content.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Button (Blue)**\n- Background: \\`#0f62fe\\` (Blue 60) → \\`--cds-button-primary\\`\n- Text: \\`#ffffff\\` (White)\n- Padding: 14px 63px 14px 15px (asymmetric — room for trailing icon)\n- Border: 1px solid transparent\n- Border-radius: 0px (sharp rectangle — the Carbon signature)\n- Height: 48px (default), 40px (compact), 64px (expressive)\n- Hover: \\`#0353e9\\` (Blue 60 Hover) → \\`--cds-button-primary-hover\\`\n- Active: \\`#002d9c\\` (Blue 80) → \\`--cds-button-primary-active\\`\n- Focus: \\`2px solid #0f62fe\\` inset + \\`1px solid #ffffff\\` inner\n\n**Secondary Button (Gray)**\n- Background: \\`#393939\\` (Gray 80)\n- Text: \\`#ffffff\\`\n- Hover: \\`#4c4c4c\\` (Gray 70)\n- Active: \\`#6f6f6f\\` (Gray 60)\n- Same padding/radius as primary\n\n**Tertiary Button (Ghost Blue)**\n- Background: transparent\n- Text: \\`#0f62fe\\` (Blue 60)\n- Border: 1px solid \\`#0f62fe\\`\n- Hover: \\`#0353e9\\` text + Blue 10 background tint\n- Border-radius: 0px\n\n**Ghost Button**\n- Background: transparent\n- Text: \\`#0f62fe\\` (Blue 60)\n- Padding: 14px 16px\n- Border: none\n- Hover: \\`#e8e8e8\\` background tint\n\n**Danger Button**\n- Background: \\`#da1e28\\` (Red 60)\n- Text: \\`#ffffff\\`\n- Hover: \\`#b81921\\` (Red 70)\n\n### Cards & Containers\n- Background: \\`#ffffff\\` on white theme, \\`#f4f4f4\\` (Gray 10) for elevated cards\n- Border: none (flat design — no border or shadow on most cards)\n- Border-radius: 0px (matching the rectangular button aesthetic)\n- Hover: background shifts to \\`#e8e8e8\\` (Gray 10 Hover) for clickable cards\n- Content padding: 16px\n- Separation: background-color layering (white → gray 10 → white) rather than shadows\n\n### Inputs & Forms\n- Background: \\`#f4f4f4\\` (Gray 10) — \\`--cds-field\\`\n- Text: \\`#161616\\` (Gray 100)\n- Padding: 0px 16px (horizontal only)\n- Height: 40px (default), 48px (large)\n- Border: none on sides/top — \\`2px solid transparent\\` bottom\n- Bottom-border active: \\`2px solid #161616\\` (Gray 100)\n- Focus: \\`2px solid #0f62fe\\` (Blue 60) bottom-border — \\`--cds-focus\\`\n- Error: \\`2px solid #da1e28\\` (Red 60) bottom-border\n- Label: 12px IBM Plex Sans, 0.32px letter-spacing, Gray 70\n- Helper text: 12px, Gray 60\n- Placeholder: Gray 60 (\\`#6f6f6f\\`)\n- Border-radius: 0px (top) — inputs are sharp-cornered\n\n### Navigation\n- Background: \\`#161616\\` (Gray 100) — full-width dark masthead\n- Height: 48px\n- Logo: IBM 8-bar logo, white on dark, left-aligned\n- Links: 14px IBM Plex Sans, weight 400, \\`#c6c6c6\\` (Gray 30) default\n- Link hover: \\`#ffffff\\` text\n- Active link: \\`#ffffff\\` with bottom-border indicator\n- Platform switcher: left-aligned horizontal tabs\n- Search: icon-triggered slide-out search field\n- Mobile: hamburger with left-sliding panel\n\n### Links\n- Default: \\`#0f62fe\\` (Blue 60) with no underline\n- Hover: \\`#0043ce\\` (Blue 70) with underline\n- Visited: remains Blue 60 (no visited state change)\n- Inline links: underlined by default in body copy\n\n### Distinctive Components\n\n**Content Block (Hero/Feature)**\n- Full-width alternating white/gray-10 background bands\n- Headline left-aligned with 60px or 48px display type\n- CTA as blue primary button with arrow icon\n- Image/illustration right-aligned or below on mobile\n\n**Tile (Clickable Card)**\n- Background: \\`#f4f4f4\\` or \\`#ffffff\\`\n- Full-width bottom-border or background-shift hover\n- Arrow icon bottom-right on hover\n- No shadow — flatness is the identity\n\n**Tag / Label**\n- Background: contextual color at 10% opacity (e.g., Blue 10, Red 10)\n- Text: corresponding 60-grade color\n- Padding: 4px 8px\n- Border-radius: 24px (pill — exception to the 0px rule)\n- Font: 12px weight 400\n\n**Notification Banner**\n- Full-width bar, typically Blue 60 or Gray 100 background\n- White text, 14px\n- Close/dismiss icon right-aligned\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px (Carbon 2x grid)\n- Component spacing scale: 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px\n- Layout spacing scale: 16px, 24px, 32px, 48px, 64px, 80px, 96px, 160px\n- Mini unit: 8px (smallest usable spacing)\n- Padding within components: typically 16px\n- Gap between cards/tiles: 1px (hairline) or 16px (standard)\n\n### Grid & Container\n- 16-column grid (Carbon's 2x grid system)\n- Max content width: 1584px (max breakpoint)\n- Column gutters: 32px (16px on mobile)\n- Margin: 16px (mobile), 32px (tablet+)\n- Content typically spans 8-12 columns for readable line lengths\n- Full-bleed sections alternate with contained content\n\n### Whitespace Philosophy\n- **Functional density**: Carbon favors productive density over expansive whitespace. Sections are tightly packed compared to consumer design systems — this reflects IBM's enterprise DNA.\n- **Background-color zoning**: Instead of massive padding between sections, IBM uses alternating background colors (white → gray 10 → white) to create visual separation with minimal vertical space.\n- **Consistent 48px rhythm**: Major section transitions use 48px vertical spacing. Hero sections may use 80px–96px.\n\n### Border Radius Scale\n- **0px**: Primary buttons, inputs, tiles, cards — the dominant treatment. Carbon is fundamentally rectangular.\n- **2px**: Occasionally on small interactive elements (tags)\n- **24px**: Tags/labels (pill shape — the sole rounded exception)\n- **50%**: Avatar circles, icon containers\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, \\`#ffffff\\` background | Default page surface |\n| Layer 01 | No shadow, \\`#f4f4f4\\` background | Cards, tiles, alternating sections |\n| Layer 02 | No shadow, \\`#e0e0e0\\` background | Elevated panels within Layer 01 |\n| Raised | \\`0 2px 6px rgba(0,0,0,0.3)\\` | Dropdowns, tooltips, overflow menus |\n| Overlay | \\`0 2px 6px rgba(0,0,0,0.3)\\` + dark scrim | Modal dialogs, side panels |\n| Focus | \\`2px solid #0f62fe\\` inset + \\`1px solid #ffffff\\` | Keyboard focus ring |\n| Bottom-border | \\`2px solid #161616\\` on bottom edge | Active input, active tab indicator |\n\n**Shadow Philosophy**: Carbon is deliberately shadow-averse. IBM achieves depth primarily through background-color layering — stacking surfaces of progressively darker grays rather than adding box-shadows. This creates a flat, print-inspired aesthetic where hierarchy is communicated through color value, not simulated light. Shadows are reserved exclusively for floating elements (dropdowns, tooltips, modals) where the element genuinely overlaps content. This restraint gives the rare shadow meaningful impact — when something floats in Carbon, it matters.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use IBM Plex Sans at weight 300 for display sizes (42px+) — the lightness is intentional\n- Apply 0.16px letter-spacing on 14px body text and 0.32px on 12px captions\n- Use 0px border-radius on buttons, inputs, cards, and tiles — rectangles are the system\n- Reference \\`--cds-*\\` token names when implementing (e.g., \\`--cds-button-primary\\`, \\`--cds-text-primary\\`)\n- Use background-color layering (white → gray 10 → gray 20) for depth instead of shadows\n- Use bottom-border (not box) for input field indicators\n- Maintain the 48px default button height and asymmetric padding for icon accommodation\n- Apply Blue 60 (\\`#0f62fe\\`) as the sole accent — one blue to rule them all\n\n### Don't\n- Don't round button corners — 0px radius is the Carbon identity\n- Don't use shadows on cards or tiles — flatness is the point\n- Don't introduce additional accent colors — IBM's system is monochromatic + blue\n- Don't use weight 700 (Bold) — the scale stops at 600 (Semibold)\n- Don't add letter-spacing to display-size text — tracking is only for 14px and below\n- Don't box inputs with full borders — Carbon inputs use bottom-border only\n- Don't use gradient backgrounds — IBM's surfaces are flat, solid colors\n- Don't deviate from the 8px spacing grid — every value should be divisible by 8 (with 2px and 4px for micro-adjustments)\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Small (sm) | 320px | Single column, hamburger nav, 16px margins |\n| Medium (md) | 672px | 2-column grids begin, expanded content |\n| Large (lg) | 1056px | Full navigation visible, 3-4 column grids |\n| X-Large (xlg) | 1312px | Maximum content density, wide layouts |\n| Max | 1584px | Maximum content width, centered with margins |\n\n### Touch Targets\n- Button height: 48px default, minimum 40px (compact)\n- Navigation links: 48px row height for touch\n- Input height: 40px default, 48px large\n- Icon buttons: 48px square touch target\n- Mobile menu items: full-width 48px rows\n\n### Collapsing Strategy\n- Hero: 60px display → 42px → 32px heading as viewport narrows\n- Navigation: full horizontal masthead → hamburger with slide-out panel\n- Grid: 4-column → 2-column → single column\n- Tiles/cards: horizontal grid → vertical stack\n- Images: maintain aspect ratio, max-width 100%\n- Footer: multi-column link groups → stacked single column\n- Section padding: 48px → 32px → 16px\n\n### Image Behavior\n- Responsive images with \\`max-width: 100%\\`\n- Product illustrations scale proportionally\n- Hero images may shift from side-by-side to stacked below\n- Data visualizations maintain aspect ratio with horizontal scroll on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: IBM Blue 60 (\\`#0f62fe\\`)\n- Background: White (\\`#ffffff\\`)\n- Heading text: Gray 100 (\\`#161616\\`)\n- Body text: Gray 100 (\\`#161616\\`)\n- Secondary text: Gray 70 (\\`#525252\\`)\n- Surface/Card: Gray 10 (\\`#f4f4f4\\`)\n- Border: Gray 30 (\\`#c6c6c6\\`)\n- Link: Blue 60 (\\`#0f62fe\\`)\n- Link hover: Blue 70 (\\`#0043ce\\`)\n- Focus ring: Blue 60 (\\`#0f62fe\\`)\n- Error: Red 60 (\\`#da1e28\\`)\n- Success: Green 50 (\\`#24a148\\`)\n\n### Example Component Prompts\n- \"Create a hero section on white background. Headline at 60px IBM Plex Sans weight 300, line-height 1.17, color #161616. Subtitle at 16px weight 400, line-height 1.50, color #525252, max-width 640px. Blue CTA button (#0f62fe background, #ffffff text, 0px border-radius, 48px height, 14px 63px 14px 15px padding).\"\n- \"Design a card tile: #f4f4f4 background, 0px border-radius, 16px padding. Title at 20px IBM Plex Sans weight 600, line-height 1.40, color #161616. Body at 14px weight 400, letter-spacing 0.16px, line-height 1.29, color #525252. Hover: background shifts to #e8e8e8.\"\n- \"Build a form field: #f4f4f4 background, 0px border-radius, 40px height, 16px horizontal padding. Label above at 12px weight 400, letter-spacing 0.32px, color #525252. Bottom-border: 2px solid transparent default, 2px solid #0f62fe on focus. Placeholder: #6f6f6f.\"\n- \"Create a dark navigation bar: #161616 background, 48px height. IBM logo white left-aligned. Links at 14px IBM Plex Sans weight 400, color #c6c6c6. Hover: #ffffff text. Active: #ffffff with 2px bottom border.\"\n- \"Build a tag component: Blue 10 (#edf5ff) background, Blue 60 (#0f62fe) text, 4px 8px padding, 24px border-radius, 12px IBM Plex Sans weight 400.\"\n\n### Iteration Guide\n1. Always use 0px border-radius on buttons, inputs, and cards — this is non-negotiable in Carbon\n2. Letter-spacing only at small sizes: 0.16px at 14px, 0.32px at 12px — never on display text\n3. Three weights: 300 (display), 400 (body), 600 (emphasis) — no bold\n4. Blue 60 is the only accent color — do not introduce secondary accent hues\n5. Depth comes from background-color layering (white → #f4f4f4 → #e0e0e0), not shadows\n6. Inputs have bottom-border only, never fully boxed\n7. Use \\`--cds-\\` prefix for token naming to stay Carbon-compatible\n8. 48px is the universal interactive element height\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;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/intercom.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const intercomBrief = `# Design System Inspired by Intercom\n\n## 1. Visual Theme & Atmosphere\n\nIntercom's website is a warm, confident customer service platform that communicates \"AI-first helpdesk\" through a clean, editorial design language. The page operates on a warm off-white canvas (\\`#faf9f6\\`) with off-black (\\`#111111\\`) text, creating an intimate, magazine-like reading experience. The signature Fin Orange (\\`#ff5600\\`) — named after Intercom's AI agent — serves as the singular vibrant accent against the warm neutral palette.\n\nThe typography uses Saans — a custom geometric sans-serif with aggressive negative letter-spacing (-2.4px at 80px, -0.48px at 24px) and a consistent 1.00 line-height across all heading sizes. This creates ultra-compressed, billboard-like headlines that feel engineered and precise. Serrif provides the serif companion for editorial moments, and SaansMono handles code and uppercase technical labels. MediumLL and LLMedium appear for specific UI contexts, creating a rich five-font ecosystem.\n\nWhat distinguishes Intercom is its remarkably sharp geometry — 4px border-radius on buttons creates near-rectangular interactive elements that feel industrial and precise, contrasting with the warm surface colors. Button hover states use \\`scale(1.1)\\` expansion, creating a physical \"growing\" interaction. The border system uses warm oat tones (\\`#dedbd6\\`) and oklab-based opacity values for sophisticated color management.\n\n**Key Characteristics:**\n- Warm off-white canvas (\\`#faf9f6\\`) with oat-toned borders (\\`#dedbd6\\`)\n- Saans font with extreme negative tracking (-2.4px at 80px) and 1.00 line-height\n- Fin Orange (\\`#ff5600\\`) as singular brand accent\n- Sharp 4px border-radius — near-rectangular buttons and elements\n- Scale(1.1) hover with scale(0.85) active — physical button interaction\n- SaansMono uppercase labels with wide tracking (0.6px–1.2px)\n- Rich multi-color report palette (blue, green, red, pink, lime, orange)\n- oklab color values for sophisticated opacity management\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Off Black** (\\`#111111\\`): \\`--color-off-black\\`, primary text, button backgrounds\n- **Pure White** (\\`#ffffff\\`): \\`--wsc-color-content-primary\\`, primary surface\n- **Warm Cream** (\\`#faf9f6\\`): Button backgrounds, card surfaces\n- **Fin Orange** (\\`#ff5600\\`): \\`--color-fin\\`, primary brand accent\n- **Report Orange** (\\`#fe4c02\\`): \\`--color-report-orange\\`, data visualization\n\n### Report Palette\n- **Report Blue** (\\`#65b5ff\\`): \\`--color-report-blue\\`\n- **Report Green** (\\`#0bdf50\\`): \\`--color-report-green\\`\n- **Report Red** (\\`#c41c1c\\`): \\`--color-report-red\\`\n- **Report Pink** (\\`#ff2067\\`): \\`--color-report-pink\\`\n- **Report Lime** (\\`#b3e01c\\`): \\`--color-report-lime-300\\`\n- **Green** (\\`#00da00\\`): \\`--color-green\\`\n- **Deep Blue** (\\`#0007cb\\`): Deep blue accent\n\n### Neutral Scale (Warm)\n- **Black 80** (\\`#313130\\`): \\`--wsc-color-black-80\\`, dark neutral\n- **Black 60** (\\`#626260\\`): \\`--wsc-color-black-60\\`, mid neutral\n- **Black 50** (\\`#7b7b78\\`): \\`--wsc-color-black-50\\`, muted text\n- **Content Tertiary** (\\`#9c9fa5\\`): \\`--wsc-color-content-tertiary\\`\n- **Oat Border** (\\`#dedbd6\\`): Warm border color\n- **Warm Sand** (\\`#d3cec6\\`): Light warm neutral\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary**: \\`Saans\\`, fallbacks: \\`Saans Fallback, ui-sans-serif, system-ui\\`\n- **Serif**: \\`Serrif\\`, fallbacks: \\`Serrif Fallback, ui-serif, Georgia\\`\n- **Monospace**: \\`SaansMono\\`, fallbacks: \\`SaansMono Fallback, ui-monospace\\`\n- **UI**: \\`MediumLL\\` / \\`LLMedium\\`, fallbacks: \\`system-ui, -apple-system\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing |\n|------|------|------|--------|-------------|----------------|\n| Display Hero | Saans | 80px | 400 | 1.00 (tight) | -2.4px |\n| Section Heading | Saans | 54px | 400 | 1.00 | -1.6px |\n| Sub-heading | Saans | 40px | 400 | 1.00 | -1.2px |\n| Card Title | Saans | 32px | 400 | 1.00 | -0.96px |\n| Feature Title | Saans | 24px | 400 | 1.00 | -0.48px |\n| Body Emphasis | Saans | 20px | 400 | 0.95 | -0.2px |\n| Nav / UI | Saans | 18px | 400 | 1.00 | normal |\n| Body | Saans | 16px | 400 | 1.50 | normal |\n| Body Light | Saans | 14px | 300 | 1.40 | normal |\n| Button | Saans | 16px / 14px | 400 | 1.50 / 1.43 | normal |\n| Button Bold | LLMedium | 16px | 700 | 1.20 | 0.16px |\n| Serif Body | Serrif | 16px | 300 | 1.40 | -0.16px |\n| Mono Label | SaansMono | 12px | 400–500 | 1.00–1.30 | 0.6px–1.2px uppercase |\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Dark**\n- Background: \\`#111111\\`\n- Text: \\`#ffffff\\`\n- Padding: 0px 14px\n- Radius: 4px\n- Hover: white background, dark text, scale(1.1)\n- Active: green background (\\`#2c6415\\`), scale(0.85)\n\n**Outlined**\n- Background: transparent\n- Text: \\`#111111\\`\n- Border: \\`1px solid #111111\\`\n- Radius: 4px\n- Same scale hover/active behavior\n\n**Warm Card Button**\n- Background: \\`#faf9f6\\`\n- Text: \\`#111111\\`\n- Padding: 16px\n- Border: \\`1px solid oklab(... / 0.1)\\`\n\n### Cards & Containers\n- Background: \\`#faf9f6\\` (warm cream)\n- Border: \\`1px solid #dedbd6\\` (warm oat)\n- Radius: 8px\n- No visible shadows\n\n### Navigation\n- Saans 16px for links\n- Off-black text on white\n- Small 4px–6px radius buttons\n- Orange Fin accent for AI features\n\n## 5. Layout Principles\n\n### Spacing: 8px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 60px, 64px, 80px, 96px\n### Border Radius: 4px (buttons), 6px (nav items), 8px (cards, containers)\n\n## 6. Depth & Elevation\nMinimal shadows. Depth through warm border colors and surface tints.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Saans with 1.00 line-height and negative tracking on all headings\n- Apply 4px radius on buttons — sharp geometry is the identity\n- Use Fin Orange (#ff5600) for AI/brand accent only\n- Apply scale(1.1) hover on buttons\n- Use warm neutrals (#faf9f6, #dedbd6)\n\n### Don't\n- Don't round buttons beyond 4px\n- Don't use Fin Orange decoratively\n- Don't use cool gray borders — always warm oat tones\n- Don't skip the negative tracking on headings\n\n## 8. Responsive Behavior\nBreakpoints: 425px, 530px, 600px, 640px, 768px, 896px\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Text: Off Black (\\`#111111\\`)\n- Background: Warm Cream (\\`#faf9f6\\`)\n- Accent: Fin Orange (\\`#ff5600\\`)\n- Border: Oat (\\`#dedbd6\\`)\n- Muted: \\`#7b7b78\\`\n\n### Example Component Prompts\n- \"Create hero: warm cream (#faf9f6) background. Saans 80px weight 400, line-height 1.00, letter-spacing -2.4px, #111111. Dark button (#111111, 4px radius). Hover: scale(1.1), white bg.\"\n`;\n"],"mappings":";AACO,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/intercom.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const intercomBrief = `# Design System Inspired by Intercom\n\n## 1. Visual Theme & Atmosphere\n\nIntercom's website is a warm, confident customer service platform that communicates \"AI-first helpdesk\" through a clean, editorial design language. The page operates on a warm off-white canvas (\\`#faf9f6\\`) with off-black (\\`#111111\\`) text, creating an intimate, magazine-like reading experience. The signature Fin Orange (\\`#ff5600\\`) — named after Intercom's AI agent — serves as the singular vibrant accent against the warm neutral palette.\n\nThe typography uses Saans — a custom geometric sans-serif with aggressive negative letter-spacing (-2.4px at 80px, -0.48px at 24px) and a consistent 1.00 line-height across all heading sizes. This creates ultra-compressed, billboard-like headlines that feel engineered and precise. Serrif provides the serif companion for editorial moments, and SaansMono handles code and uppercase technical labels. MediumLL and LLMedium appear for specific UI contexts, creating a rich five-font ecosystem.\n\nWhat distinguishes Intercom is its remarkably sharp geometry — 4px border-radius on buttons creates near-rectangular interactive elements that feel industrial and precise, contrasting with the warm surface colors. Button hover states use \\`scale(1.1)\\` expansion, creating a physical \"growing\" interaction. The border system uses warm oat tones (\\`#dedbd6\\`) and oklab-based opacity values for sophisticated color management.\n\n**Key Characteristics:**\n- Warm off-white canvas (\\`#faf9f6\\`) with oat-toned borders (\\`#dedbd6\\`)\n- Saans font with extreme negative tracking (-2.4px at 80px) and 1.00 line-height\n- Fin Orange (\\`#ff5600\\`) as singular brand accent\n- Sharp 4px border-radius — near-rectangular buttons and elements\n- Scale(1.1) hover with scale(0.85) active — physical button interaction\n- SaansMono uppercase labels with wide tracking (0.6px–1.2px)\n- Rich multi-color report palette (blue, green, red, pink, lime, orange)\n- oklab color values for sophisticated opacity management\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Off Black** (\\`#111111\\`): \\`--color-off-black\\`, primary text, button backgrounds\n- **Pure White** (\\`#ffffff\\`): \\`--wsc-color-content-primary\\`, primary surface\n- **Warm Cream** (\\`#faf9f6\\`): Button backgrounds, card surfaces\n- **Fin Orange** (\\`#ff5600\\`): \\`--color-fin\\`, primary brand accent\n- **Report Orange** (\\`#fe4c02\\`): \\`--color-report-orange\\`, data visualization\n\n### Report Palette\n- **Report Blue** (\\`#65b5ff\\`): \\`--color-report-blue\\`\n- **Report Green** (\\`#0bdf50\\`): \\`--color-report-green\\`\n- **Report Red** (\\`#c41c1c\\`): \\`--color-report-red\\`\n- **Report Pink** (\\`#ff2067\\`): \\`--color-report-pink\\`\n- **Report Lime** (\\`#b3e01c\\`): \\`--color-report-lime-300\\`\n- **Green** (\\`#00da00\\`): \\`--color-green\\`\n- **Deep Blue** (\\`#0007cb\\`): Deep blue accent\n\n### Neutral Scale (Warm)\n- **Black 80** (\\`#313130\\`): \\`--wsc-color-black-80\\`, dark neutral\n- **Black 60** (\\`#626260\\`): \\`--wsc-color-black-60\\`, mid neutral\n- **Black 50** (\\`#7b7b78\\`): \\`--wsc-color-black-50\\`, muted text\n- **Content Tertiary** (\\`#9c9fa5\\`): \\`--wsc-color-content-tertiary\\`\n- **Oat Border** (\\`#dedbd6\\`): Warm border color\n- **Warm Sand** (\\`#d3cec6\\`): Light warm neutral\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary**: \\`Saans\\`, fallbacks: \\`Saans Fallback, ui-sans-serif, system-ui\\`\n- **Serif**: \\`Serrif\\`, fallbacks: \\`Serrif Fallback, ui-serif, Georgia\\`\n- **Monospace**: \\`SaansMono\\`, fallbacks: \\`SaansMono Fallback, ui-monospace\\`\n- **UI**: \\`MediumLL\\` / \\`LLMedium\\`, fallbacks: \\`system-ui, -apple-system\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing |\n|------|------|------|--------|-------------|----------------|\n| Display Hero | Saans | 80px | 400 | 1.00 (tight) | -2.4px |\n| Section Heading | Saans | 54px | 400 | 1.00 | -1.6px |\n| Sub-heading | Saans | 40px | 400 | 1.00 | -1.2px |\n| Card Title | Saans | 32px | 400 | 1.00 | -0.96px |\n| Feature Title | Saans | 24px | 400 | 1.00 | -0.48px |\n| Body Emphasis | Saans | 20px | 400 | 0.95 | -0.2px |\n| Nav / UI | Saans | 18px | 400 | 1.00 | normal |\n| Body | Saans | 16px | 400 | 1.50 | normal |\n| Body Light | Saans | 14px | 300 | 1.40 | normal |\n| Button | Saans | 16px / 14px | 400 | 1.50 / 1.43 | normal |\n| Button Bold | LLMedium | 16px | 700 | 1.20 | 0.16px |\n| Serif Body | Serrif | 16px | 300 | 1.40 | -0.16px |\n| Mono Label | SaansMono | 12px | 400–500 | 1.00–1.30 | 0.6px–1.2px uppercase |\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Dark**\n- Background: \\`#111111\\`\n- Text: \\`#ffffff\\`\n- Padding: 0px 14px\n- Radius: 4px\n- Hover: white background, dark text, scale(1.1)\n- Active: green background (\\`#2c6415\\`), scale(0.85)\n\n**Outlined**\n- Background: transparent\n- Text: \\`#111111\\`\n- Border: \\`1px solid #111111\\`\n- Radius: 4px\n- Same scale hover/active behavior\n\n**Warm Card Button**\n- Background: \\`#faf9f6\\`\n- Text: \\`#111111\\`\n- Padding: 16px\n- Border: \\`1px solid oklab(... / 0.1)\\`\n\n### Cards & Containers\n- Background: \\`#faf9f6\\` (warm cream)\n- Border: \\`1px solid #dedbd6\\` (warm oat)\n- Radius: 8px\n- No visible shadows\n\n### Navigation\n- Saans 16px for links\n- Off-black text on white\n- Small 4px–6px radius buttons\n- Orange Fin accent for AI features\n\n## 5. Layout Principles\n\n### Spacing: 8px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 60px, 64px, 80px, 96px\n### Border Radius: 4px (buttons), 6px (nav items), 8px (cards, containers)\n\n## 6. Depth & Elevation\nMinimal shadows. Depth through warm border colors and surface tints.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Saans with 1.00 line-height and negative tracking on all headings\n- Apply 4px radius on buttons — sharp geometry is the identity\n- Use Fin Orange (#ff5600) for AI/brand accent only\n- Apply scale(1.1) hover on buttons\n- Use warm neutrals (#faf9f6, #dedbd6)\n\n### Don't\n- Don't round buttons beyond 4px\n- Don't use Fin Orange decoratively\n- Don't use cool gray borders — always warm oat tones\n- Don't skip the negative tracking on headings\n\n## 8. Responsive Behavior\nBreakpoints: 425px, 530px, 600px, 640px, 768px, 896px\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Text: Off Black (\\`#111111\\`)\n- Background: Warm Cream (\\`#faf9f6\\`)\n- Accent: Fin Orange (\\`#ff5600\\`)\n- Border: Oat (\\`#dedbd6\\`)\n- Muted: \\`#7b7b78\\`\n\n### Example Component Prompts\n- \"Create hero: warm cream (#faf9f6) background. Saans 80px weight 400, line-height 1.00, letter-spacing -2.4px, #111111. Dark button (#111111, 4px radius). Hover: scale(1.1), white bg.\"\n`;\n"],"mappings":";AACO,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/kraken.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/kraken.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const krakenBrief = `# Design System Inspired by Kraken\n\n## 1. Visual Theme & Atmosphere\n\nKraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (\\`#7132f5\\`, \\`#5741d8\\`, \\`#5b1ecf\\`) creating a distinctive, professional crypto identity. The proprietary Kraken-Brand font handles display headings with bold (700) weight and negative tracking, while Kraken-Product (with IBM Plex Sans fallback) serves as the UI workhorse.\n\n**Key Characteristics:**\n- Kraken Purple (\\`#7132f5\\`) as primary brand with darker variants (\\`#5741d8\\`, \\`#5b1ecf\\`)\n- Kraken-Brand (display) + Kraken-Product (UI) dual font system\n- Near-black (\\`#101114\\`) text with cool blue-gray neutral scale\n- 12px radius buttons (rounded but not pill)\n- Subtle shadows (\\`rgba(0,0,0,0.03) 0px 4px 24px\\`) — whisper-level\n- Green accent (\\`#149e61\\`) for positive/success states\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Kraken Purple** (\\`#7132f5\\`): Primary CTA, brand accent, links\n- **Purple Dark** (\\`#5741d8\\`): Button borders, outlined variants\n- **Purple Deep** (\\`#5b1ecf\\`): Deepest purple\n- **Purple Subtle** (\\`rgba(133,91,251,0.16)\\`): Purple at 16% — subtle button backgrounds\n- **Near Black** (\\`#101114\\`): Primary text\n\n### Neutral\n- **Cool Gray** (\\`#686b82\\`): Primary neutral, borders at 24% opacity\n- **Silver Blue** (\\`#9497a9\\`): Secondary text, muted elements\n- **White** (\\`#ffffff\\`): Primary surface\n- **Border Gray** (\\`#dedee5\\`): Divider borders\n\n### Semantic\n- **Green** (\\`#149e61\\`): Success/positive at 16% opacity for badges\n- **Green Dark** (\\`#026b3f\\`): Badge text\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: \\`Kraken-Brand\\`, fallbacks: \\`IBM Plex Sans, Helvetica, Arial\\`\n- **UI / Body**: \\`Kraken-Product\\`, fallbacks: \\`Helvetica Neue, Helvetica, Arial\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing |\n|------|------|------|--------|-------------|----------------|\n| Display Hero | Kraken-Brand | 48px | 700 | 1.17 | -1px |\n| Section Heading | Kraken-Brand | 36px | 700 | 1.22 | -0.5px |\n| Sub-heading | Kraken-Brand | 28px | 700 | 1.29 | -0.5px |\n| Feature Title | Kraken-Product | 22px | 600 | 1.20 | normal |\n| Body | Kraken-Product | 16px | 400 | 1.38 | normal |\n| Body Medium | Kraken-Product | 16px | 500 | 1.38 | normal |\n| Button | Kraken-Product | 16px | 500–600 | 1.38 | normal |\n| Caption | Kraken-Product | 14px | 400–700 | 1.43–1.71 | normal |\n| Small | Kraken-Product | 12px | 400–500 | 1.33 | normal |\n| Micro | Kraken-Product | 7px | 500 | 1.00 | uppercase |\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Purple**\n- Background: \\`#7132f5\\`\n- Text: \\`#ffffff\\`\n- Padding: 13px 16px\n- Radius: 12px\n\n**Purple Outlined**\n- Background: \\`#ffffff\\`\n- Text: \\`#5741d8\\`\n- Border: \\`1px solid #5741d8\\`\n- Radius: 12px\n\n**Purple Subtle**\n- Background: \\`rgba(133,91,251,0.16)\\`\n- Text: \\`#7132f5\\`\n- Padding: 8px\n- Radius: 12px\n\n**White Button**\n- Background: \\`#ffffff\\`\n- Text: \\`#101114\\`\n- Radius: 10px\n- Shadow: \\`rgba(0,0,0,0.03) 0px 4px 24px\\`\n\n**Secondary Gray**\n- Background: \\`rgba(148,151,169,0.08)\\`\n- Text: \\`#101114\\`\n- Radius: 12px\n\n### Badges\n- Success: \\`rgba(20,158,97,0.16)\\` bg, \\`#026b3f\\` text, 6px radius\n- Neutral: \\`rgba(104,107,130,0.12)\\` bg, \\`#484b5e\\` text, 8px radius\n\n## 5. Layout Principles\n\n### Spacing: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 25px\n### Border Radius: 3px, 6px, 8px, 10px, 12px, 16px, 9999px, 50%\n\n## 6. Depth & Elevation\n- Subtle: \\`rgba(0,0,0,0.03) 0px 4px 24px\\`\n- Micro: \\`rgba(16,24,40,0.04) 0px 1px 4px\\`\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Kraken Purple (#7132f5) for CTAs and links\n- Apply 12px radius on all buttons\n- Use Kraken-Brand for headings, Kraken-Product for body\n\n### Don't\n- Don't use pill buttons — 12px is the max radius for buttons\n- Don't use other purples outside the defined scale\n\n## 8. Responsive Behavior\nBreakpoints: 375px, 425px, 640px, 768px, 1024px, 1280px, 1536px\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand: Kraken Purple (\\`#7132f5\\`)\n- Dark variant: \\`#5741d8\\`\n- Text: Near Black (\\`#101114\\`)\n- Secondary text: \\`#9497a9\\`\n- Background: White (\\`#ffffff\\`)\n\n### Example Component Prompts\n- \"Create hero: white background. Kraken-Brand 48px weight 700, letter-spacing -1px. Purple CTA (#7132f5, 12px radius, 13px 16px padding).\"\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;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/kraken.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const krakenBrief = `# Design System Inspired by Kraken\n\n## 1. Visual Theme & Atmosphere\n\nKraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (\\`#7132f5\\`, \\`#5741d8\\`, \\`#5b1ecf\\`) creating a distinctive, professional crypto identity. The proprietary Kraken-Brand font handles display headings with bold (700) weight and negative tracking, while Kraken-Product (with IBM Plex Sans fallback) serves as the UI workhorse.\n\n**Key Characteristics:**\n- Kraken Purple (\\`#7132f5\\`) as primary brand with darker variants (\\`#5741d8\\`, \\`#5b1ecf\\`)\n- Kraken-Brand (display) + Kraken-Product (UI) dual font system\n- Near-black (\\`#101114\\`) text with cool blue-gray neutral scale\n- 12px radius buttons (rounded but not pill)\n- Subtle shadows (\\`rgba(0,0,0,0.03) 0px 4px 24px\\`) — whisper-level\n- Green accent (\\`#149e61\\`) for positive/success states\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Kraken Purple** (\\`#7132f5\\`): Primary CTA, brand accent, links\n- **Purple Dark** (\\`#5741d8\\`): Button borders, outlined variants\n- **Purple Deep** (\\`#5b1ecf\\`): Deepest purple\n- **Purple Subtle** (\\`rgba(133,91,251,0.16)\\`): Purple at 16% — subtle button backgrounds\n- **Near Black** (\\`#101114\\`): Primary text\n\n### Neutral\n- **Cool Gray** (\\`#686b82\\`): Primary neutral, borders at 24% opacity\n- **Silver Blue** (\\`#9497a9\\`): Secondary text, muted elements\n- **White** (\\`#ffffff\\`): Primary surface\n- **Border Gray** (\\`#dedee5\\`): Divider borders\n\n### Semantic\n- **Green** (\\`#149e61\\`): Success/positive at 16% opacity for badges\n- **Green Dark** (\\`#026b3f\\`): Badge text\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: \\`Kraken-Brand\\`, fallbacks: \\`IBM Plex Sans, Helvetica, Arial\\`\n- **UI / Body**: \\`Kraken-Product\\`, fallbacks: \\`Helvetica Neue, Helvetica, Arial\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing |\n|------|------|------|--------|-------------|----------------|\n| Display Hero | Kraken-Brand | 48px | 700 | 1.17 | -1px |\n| Section Heading | Kraken-Brand | 36px | 700 | 1.22 | -0.5px |\n| Sub-heading | Kraken-Brand | 28px | 700 | 1.29 | -0.5px |\n| Feature Title | Kraken-Product | 22px | 600 | 1.20 | normal |\n| Body | Kraken-Product | 16px | 400 | 1.38 | normal |\n| Body Medium | Kraken-Product | 16px | 500 | 1.38 | normal |\n| Button | Kraken-Product | 16px | 500–600 | 1.38 | normal |\n| Caption | Kraken-Product | 14px | 400–700 | 1.43–1.71 | normal |\n| Small | Kraken-Product | 12px | 400–500 | 1.33 | normal |\n| Micro | Kraken-Product | 7px | 500 | 1.00 | uppercase |\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Purple**\n- Background: \\`#7132f5\\`\n- Text: \\`#ffffff\\`\n- Padding: 13px 16px\n- Radius: 12px\n\n**Purple Outlined**\n- Background: \\`#ffffff\\`\n- Text: \\`#5741d8\\`\n- Border: \\`1px solid #5741d8\\`\n- Radius: 12px\n\n**Purple Subtle**\n- Background: \\`rgba(133,91,251,0.16)\\`\n- Text: \\`#7132f5\\`\n- Padding: 8px\n- Radius: 12px\n\n**White Button**\n- Background: \\`#ffffff\\`\n- Text: \\`#101114\\`\n- Radius: 10px\n- Shadow: \\`rgba(0,0,0,0.03) 0px 4px 24px\\`\n\n**Secondary Gray**\n- Background: \\`rgba(148,151,169,0.08)\\`\n- Text: \\`#101114\\`\n- Radius: 12px\n\n### Badges\n- Success: \\`rgba(20,158,97,0.16)\\` bg, \\`#026b3f\\` text, 6px radius\n- Neutral: \\`rgba(104,107,130,0.12)\\` bg, \\`#484b5e\\` text, 8px radius\n\n## 5. Layout Principles\n\n### Spacing: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 25px\n### Border Radius: 3px, 6px, 8px, 10px, 12px, 16px, 9999px, 50%\n\n## 6. Depth & Elevation\n- Subtle: \\`rgba(0,0,0,0.03) 0px 4px 24px\\`\n- Micro: \\`rgba(16,24,40,0.04) 0px 1px 4px\\`\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Kraken Purple (#7132f5) for CTAs and links\n- Apply 12px radius on all buttons\n- Use Kraken-Brand for headings, Kraken-Product for body\n\n### Don't\n- Don't use pill buttons — 12px is the max radius for buttons\n- Don't use other purples outside the defined scale\n\n## 8. Responsive Behavior\nBreakpoints: 375px, 425px, 640px, 768px, 1024px, 1280px, 1536px\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand: Kraken Purple (\\`#7132f5\\`)\n- Dark variant: \\`#5741d8\\`\n- Text: Near Black (\\`#101114\\`)\n- Secondary text: \\`#9497a9\\`\n- Background: White (\\`#ffffff\\`)\n\n### Example Component Prompts\n- \"Create hero: white background. Kraken-Brand 48px weight 700, letter-spacing -1px. Purple CTA (#7132f5, 12px radius, 13px 16px padding).\"\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;","names":[]}