@hex-core/themes 0.1.1 → 0.2.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/elevenlabs.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const elevenlabsBrief = `---\nversion: alpha\nname: ElevenLabs\ndescription: A voice-AI brand whose marketing surfaces read like a quietly editorial print magazine. The base canvas is off-white (\\`#f5f5f5\\`) holding warm near-black ink (\\`#292524\\`); the brand voltage is photographic, not chromatic — soft pastel atmospheric gradient orbs (mint → peach → lavender → sky) drift through the page as the only \"color\" moments. Display runs Waldenburg Light at weight 300 — the editorial signature. Inter carries body, navigation, captions. CTAs are subtle: a near-black ink pill is the primary, a transparent outline is the secondary. The brand trusts atmospheric photography and modest type weights to do all of the brand work; there is no neon accent, no saturated CTA color, no developer-tools dark canvas.\n\ncolors:\n  primary: \"#292524\"\n  primary-active: \"#0c0a09\"\n  ink: \"#0c0a09\"\n  body: \"#4e4e4e\"\n  body-strong: \"#292524\"\n  muted: \"#777169\"\n  muted-soft: \"#a8a29e\"\n  hairline: \"#e7e5e4\"\n  hairline-soft: \"#f0efed\"\n  hairline-strong: \"#d6d3d1\"\n  canvas: \"#f5f5f5\"\n  canvas-soft: \"#fafafa\"\n  canvas-deep: \"#0c0a09\"\n  surface-card: \"#ffffff\"\n  surface-strong: \"#f0efed\"\n  surface-dark: \"#0c0a09\"\n  surface-dark-elevated: \"#1c1917\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-dark-soft: \"#a8a29e\"\n  gradient-mint: \"#a7e5d3\"\n  gradient-peach: \"#f4c5a8\"\n  gradient-lavender: \"#c8b8e0\"\n  gradient-sky: \"#a8c8e8\"\n  gradient-rose: \"#e8b8c4\"\n  semantic-error: \"#dc2626\"\n  semantic-success: \"#16a34a\"\n\ntypography:\n  display-mega:\n    fontFamily: \"'Waldenburg', 'Times New Roman', serif\"\n    fontSize: 64px\n    fontWeight: 300\n    lineHeight: 1.05\n    letterSpacing: -1.92px\n  display-xl:\n    fontFamily: \"'Waldenburg', serif\"\n    fontSize: 48px\n    fontWeight: 300\n    lineHeight: 1.08\n    letterSpacing: -0.96px\n  display-lg:\n    fontFamily: \"'Waldenburg', serif\"\n    fontSize: 36px\n    fontWeight: 300\n    lineHeight: 1.17\n    letterSpacing: -0.36px\n  display-md:\n    fontFamily: \"'Waldenburg', serif\"\n    fontSize: 32px\n    fontWeight: 300\n    lineHeight: 1.13\n    letterSpacing: -0.32px\n  display-sm:\n    fontFamily: \"'Waldenburg', serif\"\n    fontSize: 24px\n    fontWeight: 300\n    lineHeight: 1.2\n    letterSpacing: 0\n  title-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 20px\n    fontWeight: 500\n    lineHeight: 1.35\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 18px\n    fontWeight: 500\n    lineHeight: 1.44\n    letterSpacing: 0.18px\n  body-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0.16px\n  body-strong:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 16px\n    fontWeight: 500\n    lineHeight: 1.5\n    letterSpacing: 0.16px\n  body-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 15px\n    fontWeight: 400\n    lineHeight: 1.47\n    letterSpacing: 0.15px\n  caption:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 12px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0.96px\n    textTransform: uppercase\n  button:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 15px\n    fontWeight: 500\n    lineHeight: 1.0\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 15px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n\nrounded:\n  none: 0px\n  xs: 4px\n  sm: 6px\n  md: 8px\n  lg: 12px\n  xl: 16px\n  xxl: 24px\n  pill: 9999px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  base: 16px\n  md: 20px\n  lg: 24px\n  xl: 32px\n  xxl: 48px\n  section: 96px\n\ncomponents:\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 10px 20px\n    height: 40px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.pill}\"\n  button-outline:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.pill}\"\n    padding: 9px 19px\n    height: 40px\n  button-tertiary-text:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-mega}\"\n    padding: 96px\n  gradient-orb-card:\n    backgroundColor: \"{colors.canvas-soft}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xxl}\"\n    padding: 32px\n  feature-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 24px\n  product-card-stack:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 0\n  voice-row:\n    backgroundColor: transparent\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    padding: 12px 0\n  voice-icon-circular:\n    backgroundColor: \"{colors.surface-strong}\"\n    rounded: \"{rounded.full}\"\n    size: 32px\n  pricing-tier-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  pricing-tier-featured:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  text-input:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 16px\n    height: 44px\n  badge-pill:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  cta-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-lg}\"\n    padding: 96px\n  testimonial-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.xl}\"\n    padding: 32px\n  audio-waveform-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xl}\"\n    padding: 24px\n  footer:\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\nElevenLabs reads like a quietly editorial print magazine that happens to be a voice-AI product. The base canvas is off-white \\`{colors.canvas}\\` (#f5f5f5) holding warm near-black ink \\`{colors.ink}\\` (#0c0a09). The brand voltage is **photographic, not chromatic**: soft pastel atmospheric gradient orbs (mint, peach, lavender, sky, rose) drift through the page as the only \"color\" moments. There is no neon accent, no saturated CTA color, no dark-canvas dev-tools atmosphere.\n\nType pairs **Waldenburg Light** (custom serif at weight 300) for display with **Inter** for body, navigation, captions. The display weight at 300 is the editorial signature — never bold, never heavy.\n\nCTAs are subtle: a near-black ink pill (\\`{component.button-primary}\\`) is the primary, a transparent outline (\\`{component.button-outline}\\`) is the secondary. The brand trusts atmospheric photography and modest type weights to carry brand work.\n\n**Key Characteristics:**\n- Off-white canvas, warm near-black ink. No saturated CTA color.\n- Single primary action: ink pill at \\`{rounded.pill}\\`. Atmospheric gradients carry visual brand voltage.\n- Display runs Waldenburg Light at weight 300 — editorial magazine voice.\n- Body runs Inter at 400 with subtle letter-spacing (+0.15-0.18px).\n- Pastel gradient orbs (5 tokens: mint, peach, lavender, sky, rose) used as atmospheric brand decoration only.\n- Soft pill geometry (\\`{rounded.pill}\\` for CTAs, \\`{rounded.xl}\\` for cards).\n- 96px section rhythm.\n\n## Colors\n\n### Brand & Accent\n- **Ink Primary** (\\`{colors.primary}\\` — #292524): The primary action color — warm near-black pill. Used scarcely.\n- **Ink Primary Active** (\\`{colors.primary-active}\\` — #0c0a09): Press state.\n\n### Surface\n- **Canvas** (\\`{colors.canvas}\\` — #f5f5f5): Off-white page floor.\n- **Canvas Soft** (\\`{colors.canvas-soft}\\` — #fafafa): Lighter band for subtle alternating sections.\n- **Canvas Deep** (\\`{colors.canvas-deep}\\` — #0c0a09): Same as ink — used for the rare dark-mode hero (Agents page).\n- **Surface Card** (\\`{colors.surface-card}\\` — #ffffff): Pure white card.\n- **Surface Strong** (\\`{colors.surface-strong}\\` — #f0efed): Badges, voice-icon plates.\n- **Surface Dark** (\\`{colors.surface-dark}\\` — #0c0a09): Dark hero/CTA band canvas.\n- **Surface Dark Elevated** (\\`{colors.surface-dark-elevated}\\` — #1c1917): Cards on dark canvas.\n\n### Hairlines\n- **Hairline** (\\`{colors.hairline}\\` — #e7e5e4): Default 1px divider.\n- **Hairline Soft** (\\`{colors.hairline-soft}\\` — #f0efed): Lighter divider.\n- **Hairline Strong** (\\`{colors.hairline-strong}\\` — #d6d3d1): Stronger panel outline.\n\n### Text\n- **Ink** (\\`{colors.ink}\\` — #0c0a09): Display, primary text.\n- **Body** (\\`{colors.body}\\` — #4e4e4e): Default running-text.\n- **Body Strong** (\\`{colors.body-strong}\\` — #292524): Same as primary — emphasis.\n- **Muted** (\\`{colors.muted}\\` — #777169): Sub-titles.\n- **Muted Soft** (\\`{colors.muted-soft}\\` — #a8a29e): Disabled text.\n- **On Primary** (\\`{colors.on-primary}\\` — #ffffff): White text on ink pill.\n- **On Dark** (\\`{colors.on-dark}\\` — #ffffff): White text on dark hero.\n- **On Dark Soft** (\\`{colors.on-dark-soft}\\` — #a8a29e): Muted off-white on dark.\n\n### Atmospheric Gradient Stops (signature)\n- **Gradient Mint** (\\`{colors.gradient-mint}\\` — #a7e5d3): Mint green orb.\n- **Gradient Peach** (\\`{colors.gradient-peach}\\` — #f4c5a8): Peach orb.\n- **Gradient Lavender** (\\`{colors.gradient-lavender}\\` — #c8b8e0): Lavender orb.\n- **Gradient Sky** (\\`{colors.gradient-sky}\\` — #a8c8e8): Sky-blue orb.\n- **Gradient Rose** (\\`{colors.gradient-rose}\\` — #e8b8c4): Rose orb.\n\nThese appear ONLY as soft radial-gradient atmospheric orbs inside \\`{component.gradient-orb-card}\\` and as background atmospheric blooms behind hero copy. Never as button fills, never as text colors.\n\n### Semantic\n- **Success** (\\`{colors.semantic-success}\\` — #16a34a): Confirmation.\n- **Error** (\\`{colors.semantic-error}\\` — #dc2626): Validation errors.\n\n## Typography\n\n### Font Family\n**Waldenburg Light** is the licensed display serif at weight 300. **Inter** carries body, navigation, captions, and buttons. Fallback: \\`'Times New Roman', serif\\` for Waldenburg, \\`sans-serif\\` for Inter.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| \\`{typography.display-mega}\\` | 64px | 300 | 1.05 | -1.92px | Homepage hero h1 |\n| \\`{typography.display-xl}\\` | 48px | 300 | 1.08 | -0.96px | Subsidiary heroes |\n| \\`{typography.display-lg}\\` | 36px | 300 | 1.17 | -0.36px | Section heads |\n| \\`{typography.display-md}\\` | 32px | 300 | 1.13 | -0.32px | Sub-section heads |\n| \\`{typography.display-sm}\\` | 24px | 300 | 1.2 | 0 | Card group titles |\n| \\`{typography.title-md}\\` | 20px | 500 | 1.35 | 0 | Component titles — Inter |\n| \\`{typography.title-sm}\\` | 18px | 500 | 1.44 | 0.18px | List labels |\n| \\`{typography.body-md}\\` | 16px | 400 | 1.5 | 0.16px | Default body — Inter |\n| \\`{typography.body-strong}\\` | 16px | 500 | 1.5 | 0.16px | Emphasized body |\n| \\`{typography.body-sm}\\` | 15px | 400 | 1.47 | 0.15px | Footer body |\n| \\`{typography.caption}\\` | 14px | 400 | 1.5 | 0 | Photo captions |\n| \\`{typography.caption-uppercase}\\` | 12px | 600 | 1.4 | 0.96px | Section labels, badges |\n| \\`{typography.button}\\` | 15px | 500 | 1.0 | 0 | CTA pill |\n| \\`{typography.nav-link}\\` | 15px | 500 | 1.4 | 0 | Top-nav menu |\n\n### Principles\n- **Display weight stays at 300.** Waldenburg Light is the editorial signature. Never bold display copy.\n- **Subtle letter-spacing on body.** Inter at +0.15-0.18px tracking — slightly looser than default Inter for a more editorial feel.\n- **Negative letter-spacing on display.** Waldenburg pulls -0.32px to -1.92px tighter on display sizes.\n\n### Note on Font Substitutes\nWaldenburg is licensed. Open-source substitute: **EB Garamond** at weight 300 (slightly more humanist) or **GT Sectra** (closer to Waldenburg's modernity). Use Inter directly for body — it's the same family ElevenLabs uses.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** \\`{spacing.xxs}\\` 4px · \\`{spacing.xs}\\` 8px · \\`{spacing.sm}\\` 12px · \\`{spacing.base}\\` 16px · \\`{spacing.md}\\` 20px · \\`{spacing.lg}\\` 24px · \\`{spacing.xl}\\` 32px · \\`{spacing.xxl}\\` 48px · \\`{spacing.section}\\` 96px.\n- **Section padding:** 96px.\n\n### Grid & Container\n- Max content width: ~1200px.\n- Editorial body: 12-column grid.\n- Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids.\n- Footer: 5-column at desktop.\n\n### Whitespace Philosophy\nGenerous editorial pacing — print-magazine feel. 96px between bands; cards inside bands sit close (16-24px gap). The atmospheric gradient orbs occupy generous breathing space without competing with copy.\n\n## Elevation & Depth\n\nThe system uses **hairline + soft drop**. Cards float above the off-white canvas via 1px hairlines and a single subtle shadow tier. Atmospheric depth comes from gradient orbs.\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat (canvas) | \\`{colors.canvas}\\` (#f5f5f5) | Body bands, footer |\n| Card | \\`{colors.surface-card}\\` (#ffffff) | Content cards |\n| Hairline border | 1px \\`{colors.hairline}\\` | Card outlines |\n| Soft drop | \\`0 4px 16px rgba(0, 0, 0, 0.04)\\` | Hovered cards (single shadow tier) |\n| Gradient orb | Radial gradient with one of \\`{colors.gradient-*}\\` | Atmospheric depth — never a card surface |\n\n### Decorative Depth\n- **Pastel gradient orbs** are the brand's strongest atmospheric pattern. Soft radial blooms in mint, peach, lavender, sky, or rose drift through hero bands and feature sections without containing any content — they are pure atmosphere.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| \\`{rounded.none}\\` | 0px | Reserved |\n| \\`{rounded.xs}\\` | 4px | Inline tags |\n| \\`{rounded.sm}\\` | 6px | Compact rows |\n| \\`{rounded.md}\\` | 8px | Form inputs |\n| \\`{rounded.lg}\\` | 12px | Compact cards |\n| \\`{rounded.xl}\\` | 16px | Feature cards, pricing tiers |\n| \\`{rounded.xxl}\\` | 24px | Gradient orb cards (extra-soft) |\n| \\`{rounded.pill}\\` | 9999px | All CTA buttons, badges |\n| \\`{rounded.full}\\` | 9999px | Voice icon circles, avatars |\n\n## Components\n\n### Top Navigation\n\n**\\`top-nav\\`** — Background \\`{colors.canvas}\\`, text \\`{colors.ink}\\`, height 64px. Layout: ElevenLabs wordmark left, primary horizontal menu (Creative / Agents / Video / Pricing / Enterprise / Docs), Sign In + \"Try free\" primary CTA right.\n\n### Buttons\n\n**\\`button-primary\\`** — Near-black ink pill. Background \\`{colors.primary}\\`, text \\`{colors.on-primary}\\`, type \\`{typography.button}\\` (15px / 500), padding 10px × 20px, height 40px, rounded \\`{rounded.pill}\\`.\n\n**\\`button-primary-active\\`** — Press state. Background \\`{colors.primary-active}\\`.\n\n**\\`button-outline\\`** — Transparent pill with 1px ink border. Background transparent, text \\`{colors.ink}\\`, 1px \\`{colors.hairline-strong}\\` border.\n\n**\\`button-tertiary-text\\`** — Inline ink text link.\n\n### Hero & Atmospheric\n\n**\\`hero-band\\`** — Background \\`{colors.canvas}\\`, full-width display headline in \\`{typography.display-mega}\\` (64px / 300 / -1.92px), subhead in \\`{typography.body-md}\\`, two CTAs, and an atmospheric gradient orb behind the centered headline.\n\n**\\`gradient-orb-card\\`** — A large card with a soft radial-gradient orb behind centered display copy. Background \\`{colors.canvas-soft}\\`, rounded \\`{rounded.xxl}\\` (24px), padding 32px. Each variant uses one of the five gradient tokens (\\`gradient-mint\\`, \\`gradient-peach\\`, \\`gradient-lavender\\`, \\`gradient-sky\\`, \\`gradient-rose\\`).\n\n**\\`audio-waveform-card\\`** — A waveform visualization card. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.xl}\\`, padding 24px. Holds a play button + waveform glyph + voice metadata.\n\n### Cards\n\n**\\`feature-card\\`** — 2-up or 3-up grids. Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.xl}\\`, padding 24px, 1px hairline border.\n\n**\\`product-card-stack\\`** — Stacked product preview cards. Background \\`{colors.surface-card}\\`, rounded \\`{rounded.xl}\\`, no padding (children fill the card edge-to-edge).\n\n**\\`testimonial-card\\`** — Quote card. Background \\`{colors.surface-card}\\`, text \\`{colors.body}\\`, rounded \\`{rounded.xl}\\`, padding 32px.\n\n### Voice Library\n\n**\\`voice-row\\`** — Horizontal row in voice list. Background transparent, 1px hairline divider. Layout: 32px circular voice icon (\\`{component.voice-icon-circular}\\`) left, voice name + accent stack, optional preview button right.\n\n**\\`voice-icon-circular\\`** — Background \\`{colors.surface-strong}\\`, rounded \\`{rounded.full}\\`, 32px diameter. Holds initials or voice glyph.\n\n### Pricing\n\n**\\`pricing-tier-card\\`** — Background \\`{colors.surface-card}\\`, rounded \\`{rounded.xl}\\`, padding 32px, 1px hairline border.\n\n**\\`pricing-tier-featured\\`** — Featured tier inverts. Background \\`{colors.surface-dark}\\`, text \\`{colors.on-dark}\\`. Same shape, dark inversion.\n\n### Forms & Tags\n\n**\\`text-input\\`** — Background \\`{colors.surface-card}\\`, text \\`{colors.ink}\\`, rounded \\`{rounded.md}\\` (8px), padding 12px × 16px, height 44px, 1px \\`{colors.hairline-strong}\\` border. On focus, border thickens to 2px ink.\n\n**\\`badge-pill\\`** — Background \\`{colors.surface-strong}\\`, text \\`{colors.ink}\\`, type \\`{typography.caption-uppercase}\\`, rounded \\`{rounded.pill}\\`, padding 4px × 10px.\n\n### CTA / Footer\n\n**\\`cta-band\\`** — Pre-footer. Background \\`{colors.canvas}\\`, centered display headline in \\`{typography.display-lg}\\`, single ink pill CTA. 96px padding.\n\n**\\`footer\\`** — Closing 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}\\` (ink pill) for primary CTAs.\n- Use Waldenburg Light at weight 300 for every display headline. Never bold.\n- Use Inter at +0.15-0.18px tracking for body — the editorial dialect.\n- Use atmospheric gradient orbs (mint/peach/lavender/sky/rose) as decoration only.\n- Use the pill shape for every CTA and badge.\n\n### Don't\n- Don't introduce a saturated brand action color. Ink pill is the only CTA color.\n- Don't bold display copy. Display sits at weight 300 — bolding shifts the brand voice from editorial to consumer-marketing.\n- Don't use gradient orbs as button fills, text colors, or component backgrounds. They are pure atmosphere.\n- Don't use sharp \\`{rounded.none}\\` (0px) on CTAs. Pill geometry is the brand button.\n- Don't drop body Inter to weight 300 to match Waldenburg — body stays at 400/500 for legibility.\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.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 640px | Hero h1 64→32px; feature cards 1-up; nav hamburger; gradient orbs shrink. |\n| Tablet | 640–1024px | Hero h1 48px; feature cards 2-up. |\n| Desktop | 1024–1280px | Full hero h1 64px; feature cards 3-up. |\n| Wide | > 1280px | Content caps at 1200px. |\n\n### Touch Targets\n- Primary pill at 40px height — at WCAG AA, padded for AAA.\n- Voice icon circles 32px — padded row creates effective 48px tap zone.\n\n### Collapsing Strategy\n- Top nav switches to hamburger below 768px.\n- Feature grid: 3-up → 2-up → 1-up.\n- Gradient orbs reduce diameter at every breakpoint but never disappear.\n\n## Iteration Guide\n\n1. Focus on a single component at a time.\n2. CTAs default to \\`{rounded.pill}\\`. Cards use \\`{rounded.xl}\\` (16px).\n3. Variants live as separate entries.\n4. Use \\`{token.refs}\\` everywhere — never inline hex.\n5. Hover state never documented.\n6. Waldenburg 300 for display, Inter 400/500 for body.\n7. Gradient orbs scoped to atmospheric decoration.\n\n## Known Gaps\n\n- Waldenburg is a licensed typeface; EB Garamond / GT Sectra are documented substitutes.\n- Animation timings (orb drift, waveform pulse, hero entrance) out of scope.\n- In-product surfaces (voice library editor, agent playground) only partially captured via marketing mockups.\n- Form validation states beyond focus not visible on captured surfaces.\n`;\n"],"mappings":";AACO,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/expo.d.ts

@@ -0,0 +1,3 @@
+declare const expoBrief = "---\nversion: alpha\nname: Expo\ndescription: A React Native developer-platform whose marketing site reads like a quietly-confident infrastructure brand. The base canvas is pure white with a soft sky-blue gradient atmospheric wash behind the hero; near-black ink (`#171717`) carries body and display alike. The single brand voltage is **pure black** (`#000000`) for primary CTAs \u2014 minimal and editorial-feeling, paired with a small blue text-link accent (`#0d74ce`) reserved for inline body links. Type pairs Inter at modest weights (display 600, body 400) with JetBrains Mono on every code surface. The brand's strongest visual signature is the **device-mockup hero** \u2014 a centered MacBook + iPhone composite showing real Expo dev surfaces \u2014 over the gradient sky wash.\n\ncolors:\n  primary: \"#000000\"\n  primary-active: \"#1a1a1a\"\n  text-link: \"#0d74ce\"\n  text-link-secondary: \"#476cff\"\n  ink: \"#171717\"\n  body: \"#60646c\"\n  body-strong: \"#171717\"\n  muted: \"#999999\"\n  muted-soft: \"#cccccc\"\n  hairline: \"#f0f0f3\"\n  hairline-soft: \"#f5f5f7\"\n  hairline-strong: \"#dcdee0\"\n  canvas: \"#ffffff\"\n  canvas-soft: \"#fafafa\"\n  surface-card: \"#ffffff\"\n  surface-strong: \"#f0f0f3\"\n  surface-dark: \"#171717\"\n  surface-dark-elevated: \"#1a1a1a\"\n  on-primary: \"#ffffff\"\n  on-dark: \"#ffffff\"\n  on-dark-soft: \"#b0b4ba\"\n  gradient-sky-light: \"#cfe7ff\"\n  gradient-sky-mid: \"#a8c8e8\"\n  accent-warning: \"#ab6400\"\n  accent-preview: \"#8145b5\"\n  accent-link-bright: \"#47c2ff\"\n  semantic-error: \"#eb8e90\"\n  semantic-success: \"#16a34a\"\n\ntypography:\n  display-mega:\n    fontFamily: \"'Inter', -apple-system, system-ui, sans-serif\"\n    fontSize: 64px\n    fontWeight: 600\n    lineHeight: 1.05\n    letterSpacing: -1.92px\n  display-xl:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 48px\n    fontWeight: 600\n    lineHeight: 1.1\n    letterSpacing: -1.44px\n  display-lg:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 36px\n    fontWeight: 600\n    lineHeight: 1.15\n    letterSpacing: -1.08px\n  display-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 28px\n    fontWeight: 600\n    lineHeight: 1.2\n    letterSpacing: -0.84px\n  display-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 22px\n    fontWeight: 600\n    lineHeight: 1.25\n    letterSpacing: -0.5px\n  title-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 18px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  title-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0\n  body-md:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  body-sm:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  caption:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.4\n    letterSpacing: 0\n  caption-uppercase:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 11px\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: 0.88px\n    textTransform: uppercase\n  code:\n    fontFamily: \"'JetBrains Mono', 'Fira Code', monospace\"\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0\n  button:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.0\n    letterSpacing: 0\n  nav-link:\n    fontFamily: \"'Inter', sans-serif\"\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n    letterSpacing: 0\n\nrounded:\n  none: 0px\n  xs: 4px\n  sm: 6px\n  md: 8px\n  lg: 12px\n  xl: 16px\n  xxl: 24px\n  pill: 9999px\n  full: 9999px\n\nspacing:\n  xxs: 4px\n  xs: 8px\n  sm: 12px\n  base: 16px\n  md: 20px\n  lg: 24px\n  xl: 32px\n  xxl: 48px\n  section: 96px\n\ncomponents:\n  top-nav:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.nav-link}\"\n    height: 64px\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.on-primary}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 10px 18px\n    height: 40px\n  button-primary-active:\n    backgroundColor: \"{colors.primary-active}\"\n    textColor: \"{colors.on-primary}\"\n    rounded: \"{rounded.md}\"\n  button-secondary:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.button}\"\n    rounded: \"{rounded.md}\"\n    padding: 9px 17px\n    height: 40px\n  button-tertiary-text:\n    backgroundColor: transparent\n    textColor: \"{colors.text-link}\"\n    typography: \"{typography.button}\"\n  hero-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-mega}\"\n    padding: 96px\n  device-mockup-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.xl}\"\n    padding: 0\n  feature-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  feature-card-dark:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.title-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  workflow-step-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 20px\n  workflow-step-icon:\n    backgroundColor: \"{colors.surface-strong}\"\n    rounded: \"{rounded.md}\"\n    size: 32px\n  code-block:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.code}\"\n    rounded: \"{rounded.lg}\"\n    padding: 20px\n  ide-mockup-card:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    rounded: \"{rounded.lg}\"\n    padding: 0\n  pricing-tier-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  pricing-tier-featured:\n    backgroundColor: \"{colors.surface-dark}\"\n    textColor: \"{colors.on-dark}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 32px\n  text-input:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.md}\"\n    padding: 12px 16px\n    height: 44px\n  badge-pill:\n    backgroundColor: \"{colors.surface-strong}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.caption-uppercase}\"\n    rounded: \"{rounded.pill}\"\n    padding: 4px 10px\n  ecosystem-tile:\n    backgroundColor: \"{colors.surface-card}\"\n    rounded: \"{rounded.md}\"\n    size: 64px\n  cta-band:\n    backgroundColor: \"{colors.canvas}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.display-lg}\"\n    padding: 96px\n  testimonial-card:\n    backgroundColor: \"{colors.surface-card}\"\n    textColor: \"{colors.body}\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  footer-light:\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\nExpo's marketing site reads like a quietly-confident React-Native developer platform. The base canvas is **pure white** (`{colors.canvas}` \u2014 #ffffff) with a soft **sky-blue gradient atmospheric wash** behind the hero band. Near-black ink `{colors.ink}` (#171717) carries body and display alike. The single brand voltage is **pure black** (`{colors.primary}` \u2014 #000000) for primary CTAs \u2014 minimal and editorial-feeling. A small blue text-link accent (`{colors.text-link}` \u2014 #0d74ce) is reserved for inline body links, never as a CTA.\n\nType runs **Inter** as the single sans family at modest weights (display 600, body 400). JetBrains Mono carries every code surface. No custom typeface \u2014 the brand trusts Inter's editorial neutrality.\n\nThe brand's strongest visual signature is the **device-mockup hero** \u2014 a centered MacBook + iPhone composite showing real Expo dev surfaces (Expo Studio, EAS Build dashboard, the Expo Go simulator) \u2014 over a sky-blue gradient atmospheric wash. The composite is the page's chrome instead of an illustration.\n\n**Key Characteristics:**\n- Pure white canvas with sky-blue gradient atmospheric backdrop in hero only.\n- Single primary CTA: pure black pill at `{rounded.md}` (8px) \u2014 compact developer-tool dialect.\n- Text-link blue (`{colors.text-link}`) for inline links only \u2014 never on a CTA.\n- Inter as the single sans family \u2014 no custom display typeface.\n- JetBrains Mono on every code surface.\n- Device-mockup hero with real Expo product surfaces is the brand chrome.\n- Hairline + soft drop depth; no atmospheric brand decoration outside the hero.\n- 96px section rhythm.\n\n## Colors\n\n### Brand & Accent\n- **Black** (`{colors.primary}` \u2014 #000000): Primary CTA fill. Used scarcely.\n- **Black Active** (`{colors.primary-active}` \u2014 #1a1a1a): Press state.\n- **Text Link Blue** (`{colors.text-link}` \u2014 #0d74ce): Inline body links inside long-form copy. Scoped narrowly \u2014 never on CTAs.\n- **Legal Link Blue** (`{colors.text-link-secondary}` \u2014 #476cff): Inline links inside legal copy footer.\n- **Bright Cyan** (`{colors.accent-link-bright}` \u2014 #47c2ff): Used very sparingly inside docs widget links.\n\n### Surface\n- **Canvas** (`{colors.canvas}` \u2014 #ffffff): Pure white page floor.\n- **Canvas Soft** (`{colors.canvas-soft}` \u2014 #fafafa): Subtle alternating band.\n- **Surface Card** (`{colors.surface-card}` \u2014 #ffffff): Pure white card.\n- **Surface Strong** (`{colors.surface-strong}` \u2014 #f0f0f3): Badges, ecosystem tiles, secondary buttons.\n- **Surface Dark** (`{colors.surface-dark}` \u2014 #171717): Dark feature cards, code blocks, IDE mockups, featured pricing.\n- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` \u2014 #1a1a1a): One step lighter inside dark cards.\n\n### Atmospheric Backdrop\n- **Sky Light** (`{colors.gradient-sky-light}` \u2014 #cfe7ff) + **Sky Mid** (`{colors.gradient-sky-mid}` \u2014 #a8c8e8): The soft sky-blue gradient wash behind the homepage hero only. Not a brand action color.\n\n### Hairlines\n- **Hairline** (`{colors.hairline}` \u2014 #f0f0f3): Default 1px divider.\n- **Hairline Soft** (`{colors.hairline-soft}` \u2014 #f5f5f7): Lighter divider.\n- **Hairline Strong** (`{colors.hairline-strong}` \u2014 #dcdee0): Stronger panel outline.\n\n### Text\n- **Ink** (`{colors.ink}` \u2014 #171717): Display, body emphasis.\n- **Body** (`{colors.body}` \u2014 #60646c): Default running-text \u2014 slightly cool gray.\n- **Body Strong** (`{colors.body-strong}` \u2014 #171717): Same as ink.\n- **Muted** (`{colors.muted}` \u2014 #999999): Sub-titles.\n- **Muted Soft** (`{colors.muted-soft}` \u2014 #cccccc): Disabled text.\n- **On Primary** (`{colors.on-primary}` \u2014 #ffffff): White text on black CTA.\n- **On Dark** (`{colors.on-dark}` \u2014 #ffffff): White text on dark cards.\n- **On Dark Soft** (`{colors.on-dark-soft}` \u2014 #b0b4ba): Muted off-white on dark.\n\n### Semantic\n- **Warning** (`{colors.accent-warning}` \u2014 #ab6400): Warning text inside docs callouts.\n- **Preview** (`{colors.accent-preview}` \u2014 #8145b5): \"Preview\" tag color.\n- **Success** (`{colors.semantic-success}` \u2014 #16a34a): Confirmation.\n- **Error** (`{colors.semantic-error}` \u2014 #eb8e90): Validation errors.\n\n## Typography\n\n### Font Family\n**Inter** is the single sans family across every text role. **JetBrains Mono** carries every code surface. Fallback: `-apple-system, system-ui, sans-serif`.\n\n### Hierarchy\n\n| Token | Size | Weight | Line Height | Letter Spacing | Use |\n|---|---|---|---|---|---|\n| `{typography.display-mega}` | 64px | 600 | 1.05 | -1.92px | Homepage hero h1 |\n| `{typography.display-xl}` | 48px | 600 | 1.1 | -1.44px | Subsidiary heroes |\n| `{typography.display-lg}` | 36px | 600 | 1.15 | -1.08px | Section heads |\n| `{typography.display-md}` | 28px | 600 | 1.2 | -0.84px | Sub-section heads |\n| `{typography.display-sm}` | 22px | 600 | 1.25 | -0.5px | Card group titles |\n| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Component titles |\n| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | List labels |\n| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body |\n| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body |\n| `{typography.caption}` | 13px | 400 | 1.4 | 0 | Photo captions |\n| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 0.88px | Section labels, badges |\n| `{typography.code}` | 13px | 400 | 1.5 | 0 | Code blocks \u2014 JetBrains Mono |\n| `{typography.button}` | 14px | 500 | 1.0 | 0 | CTA labels |\n| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu |\n\n### Principles\n- **Display weight stays at 600** \u2014 confident but not bombastic. Inter at 600 reads cleaner than 700.\n- **Negative letter-spacing on display** \u2014 -0.5px to -1.92px tracking.\n- **JetBrains Mono on every code surface.**\n\n### Note on Font Substitutes\nInter and JetBrains Mono are both freely available \u2014 the system uses them directly.\n\n## Layout\n\n### Spacing System\n- **Base unit:** 4px.\n- **Tokens:** `{spacing.xxs}` 4px \u00B7 `{spacing.xs}` 8px \u00B7 `{spacing.sm}` 12px \u00B7 `{spacing.base}` 16px \u00B7 `{spacing.md}` 20px \u00B7 `{spacing.lg}` 24px \u00B7 `{spacing.xl}` 32px \u00B7 `{spacing.xxl}` 48px \u00B7 `{spacing.section}` 96px.\n- **Section padding:** 96px.\n\n### Grid & Container\n- Max content width: ~1200px.\n- Editorial body: 12-column grid.\n- Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids.\n- Ecosystem tile grid: 8-up at desktop.\n- Footer: 5-column at desktop.\n\n### Whitespace Philosophy\nGenerous editorial pacing. The white canvas does not compete with the hero's gradient sky wash; cards inside dense workflow sections sit close (16-24px gap).\n\n## Elevation & Depth\n\n| Level | Treatment | Use |\n|---|---|---|\n| Flat (canvas) | `{colors.canvas}` (#ffffff) | Body bands, footer |\n| Card | `{colors.surface-card}` (#ffffff) | Content cards |\n| Hairline border | 1px `{colors.hairline}` | Card outlines |\n| Soft drop | `0 4px 12px rgba(0, 0, 0, 0.04)` | Hovered cards (single shadow tier) |\n| Atmospheric gradient | Sky-blue radial wash | Hero backdrop only |\n| Dark inversion | `{colors.surface-dark}` (#171717) | Dark feature cards, code blocks, featured pricing |\n\n### Decorative Depth\n- **Sky-blue gradient backdrop** in the hero only \u2014 atmospheric depth without claiming to be a brand color.\n- **Device mockup composite** as page chrome \u2014 MacBook + iPhone showing real Expo dev surfaces.\n\n## Shapes\n\n### Border Radius Scale\n\n| Token | Value | Use |\n|---|---|---|\n| `{rounded.none}` | 0px | Reserved |\n| `{rounded.xs}` | 4px | Inline tags |\n| `{rounded.sm}` | 6px | Compact rows |\n| `{rounded.md}` | 8px | CTA buttons, form inputs, ecosystem tiles |\n| `{rounded.lg}` | 12px | Feature cards, code blocks, pricing tiers |\n| `{rounded.xl}` | 16px | Device mockup cards |\n| `{rounded.xxl}` | 24px | Larger atmospheric cards (rare) |\n| `{rounded.pill}` | 9999px | Badges only |\n| `{rounded.full}` | 9999px | Avatar plates (rare) |\n\nCompact developer-ergonomic radii \u2014 8px CTAs, 12px cards. Pill geometry is reserved for badges, never CTAs.\n\n## Components\n\n### Top Navigation\n\n**`top-nav`** \u2014 Background `{colors.canvas}`, text `{colors.ink}`, height 64px. Layout: Expo wordmark left, primary horizontal menu (Tools / Workflows / EAS / Pricing / Docs / Showcase), Sign In + Get started CTA right.\n\n### Buttons\n\n**`button-primary`** \u2014 Pure black pill. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}` (14px / 500), padding 10px \u00D7 18px, height 40px, rounded `{rounded.md}` (8px).\n\n**`button-primary-active`** \u2014 Press state. Background `{colors.primary-active}`.\n\n**`button-secondary`** \u2014 White card with 1px hairline-strong border. Background `{colors.surface-card}`, text `{colors.ink}`, 1px `{colors.hairline-strong}` border.\n\n**`button-tertiary-text`** \u2014 Inline blue text link. Background transparent, text `{colors.text-link}`.\n\n### Hero & Device Mockup\n\n**`hero-band`** \u2014 Background `{colors.canvas}` with a soft sky-blue gradient wash behind the centered headline. Display headline in `{typography.display-mega}` (64px / 600 / -1.92px), subhead in `{typography.body-md}`, single primary CTA, then below \u2014 the device mockup composite.\n\n**`device-mockup-card`** \u2014 A layered MacBook + iPhone composite showing real Expo dev surfaces. Background `{colors.surface-card}`, rounded `{rounded.xl}`. The MacBook holds the EAS dashboard or Expo Studio screenshot; the iPhone overlay shows the running app in Expo Go. This is the page chrome.\n\n### Cards\n\n**`feature-card`** \u2014 Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.title-md}`, rounded `{rounded.lg}`, padding 24px, 1px `{colors.hairline-strong}` border.\n\n**`feature-card-dark`** \u2014 Dark variant. Background `{colors.surface-dark}`, text `{colors.on-dark}`. Same shape, dark inversion.\n\n**`workflow-step-card`** \u2014 Step in the \"Get your app on every device\" workflow row. Background `{colors.surface-card}`, text `{colors.body}`, rounded `{rounded.lg}`, padding 20px. Layout: 32px square `{component.workflow-step-icon}` + step number + label + body.\n\n**`workflow-step-icon`** \u2014 Square plate. Background `{colors.surface-strong}`, rounded `{rounded.md}`, 32px size.\n\n**`testimonial-card`** \u2014 Quote card. Background `{colors.surface-card}`, text `{colors.body}`, rounded `{rounded.lg}`, padding 24px.\n\n### Code & IDE\n\n**`code-block`** \u2014 Inline code block. Background `{colors.surface-dark}`, text `{colors.on-dark}` in `{typography.code}` (JetBrains Mono 13px), rounded `{rounded.lg}`, padding 20px. White text on dark.\n\n**`ide-mockup-card`** \u2014 Stylized IDE mockup. Background `{colors.surface-dark}`, rounded `{rounded.lg}`. Multi-pane editor + terminal preview.\n\n### Pricing\n\n**`pricing-tier-card`** \u2014 Standard pricing tier. Background `{colors.surface-card}`, rounded `{rounded.lg}`, padding 32px, 1px `{colors.hairline-strong}` border.\n\n**`pricing-tier-featured`** \u2014 Featured tier. Background `{colors.surface-dark}`, text `{colors.on-dark}`. Same shape, dark inversion.\n\n### Ecosystem\n\n**`ecosystem-tile`** \u2014 Square logo plate for ecosystem partner logos (TypeScript, React, Sentry, etc.). Background `{colors.surface-card}`, rounded `{rounded.md}`, 64px size, 1px `{colors.hairline}` border.\n\n### Forms & Tags\n\n**`text-input`** \u2014 Background `{colors.surface-card}`, text `{colors.ink}`, rounded `{rounded.md}` (8px), padding 12px \u00D7 16px, height 44px, 1px `{colors.hairline-strong}` border. Focus thickens border to 2px ink.\n\n**`badge-pill`** \u2014 Small uppercase pill. Background `{colors.surface-strong}`, text `{colors.ink}`, type `{typography.caption-uppercase}`, rounded `{rounded.pill}`, padding 4px \u00D7 10px.\n\n### CTA / Footer\n\n**`cta-band`** \u2014 Pre-footer band. Background `{colors.canvas}`, centered display headline in `{typography.display-lg}`, single black pill CTA. 96px padding.\n\n**`footer-light`** \u2014 Closing white footer. Background `{colors.canvas}`, text `{colors.body}`. 5-column link list. 64\u00D748px padding.\n\n**`footer-link`** \u2014 Background transparent, text `{colors.body}`, type `{typography.body-sm}`.\n\n## Do's and Don'ts\n\n### Do\n- Reserve `{colors.primary}` (black) for primary CTAs.\n- Use `{colors.text-link}` (blue) for inline body links only \u2014 never on CTAs or buttons.\n- Set every CTA at `{rounded.md}` (8px) \u2014 developer dialect.\n- Use Inter at weight 600 for display, 400 for body.\n- Render every code surface in JetBrains Mono.\n- Pair the hero with the device-mockup composite \u2014 it's the page chrome.\n\n### Don't\n- Don't introduce a saturated brand action color. Black is the only CTA fill.\n- Don't use blue (`{colors.text-link}`) on a CTA. Inline links only.\n- Don't drop display below weight 600 or above 700.\n- Don't use full pills on CTAs \u2014 pills are for badges only.\n- Don't replicate the sky-blue gradient backdrop outside the hero.\n- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA is what appears on actual page CTAs.\n\n## Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Mobile | < 640px | Hero h1 64\u219232px; device mockup \u2192 single iPhone screen; feature grid 1-up; nav hamburger. |\n| Tablet | 640\u20131024px | Hero h1 48px; device mockup compresses; feature grid 2-up. |\n| Desktop | 1024\u20131280px | Full hero h1 64px; full MacBook + iPhone composite; feature grid 3-up. |\n| Wide | > 1280px | Content caps at 1200px. |\n\n### Touch Targets\n- Primary CTA at 40px height \u2014 at WCAG AA, padded for AAA.\n- Search input 44px \u2014 at AAA.\n\n### Collapsing Strategy\n- Top nav switches to hamburger below 768px.\n- Device mockup MacBook + iPhone collapses to a single iPhone preview on mobile.\n- Feature grid: 3-up \u2192 2-up \u2192 1-up.\n- Ecosystem tile grid: 8-up \u2192 4-up \u2192 3-up \u2192 2-up.\n\n## Iteration Guide\n\n1. Focus on a single component at a time.\n2. CTAs default to `{rounded.md}` (8px). Cards use `{rounded.lg}` (12px).\n3. Variants live as separate entries.\n4. Use `{token.refs}` everywhere \u2014 never inline hex.\n5. Hover state never documented.\n6. Inter 600 for display, Inter 400 for body. JetBrains Mono on code.\n7. Black stays the only CTA color; text-link blue stays inline-only.\n\n## Known Gaps\n\n- Inter and JetBrains Mono are freely available \u2014 no licensing concerns.\n- Animation timings (device mockup parallax, hero entrance) out of scope.\n- In-app surfaces (EAS dashboard interactive, Expo Go simulator) only partially captured via marketing mockups.\n- Form validation states beyond focus not visible on captured surfaces.\n";
+
+export { expoBrief };

package/dist/presets/_briefs/expo.js

@@ -0,0 +1,532 @@
+// src/presets/_briefs/expo.ts
+var expoBrief = `---
+version: alpha
+name: Expo
+description: A React Native developer-platform whose marketing site reads like a quietly-confident infrastructure brand. The base canvas is pure white with a soft sky-blue gradient atmospheric wash behind the hero; near-black ink (\`#171717\`) carries body and display alike. The single brand voltage is **pure black** (\`#000000\`) for primary CTAs \u2014 minimal and editorial-feeling, paired with a small blue text-link accent (\`#0d74ce\`) reserved for inline body links. Type pairs Inter at modest weights (display 600, body 400) with JetBrains Mono on every code surface. The brand's strongest visual signature is the **device-mockup hero** \u2014 a centered MacBook + iPhone composite showing real Expo dev surfaces \u2014 over the gradient sky wash.
+
+colors:
+  primary: "#000000"
+  primary-active: "#1a1a1a"
+  text-link: "#0d74ce"
+  text-link-secondary: "#476cff"
+  ink: "#171717"
+  body: "#60646c"
+  body-strong: "#171717"
+  muted: "#999999"
+  muted-soft: "#cccccc"
+  hairline: "#f0f0f3"
+  hairline-soft: "#f5f5f7"
+  hairline-strong: "#dcdee0"
+  canvas: "#ffffff"
+  canvas-soft: "#fafafa"
+  surface-card: "#ffffff"
+  surface-strong: "#f0f0f3"
+  surface-dark: "#171717"
+  surface-dark-elevated: "#1a1a1a"
+  on-primary: "#ffffff"
+  on-dark: "#ffffff"
+  on-dark-soft: "#b0b4ba"
+  gradient-sky-light: "#cfe7ff"
+  gradient-sky-mid: "#a8c8e8"
+  accent-warning: "#ab6400"
+  accent-preview: "#8145b5"
+  accent-link-bright: "#47c2ff"
+  semantic-error: "#eb8e90"
+  semantic-success: "#16a34a"
+
+typography:
+  display-mega:
+    fontFamily: "'Inter', -apple-system, system-ui, sans-serif"
+    fontSize: 64px
+    fontWeight: 600
+    lineHeight: 1.05
+    letterSpacing: -1.92px
+  display-xl:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 48px
+    fontWeight: 600
+    lineHeight: 1.1
+    letterSpacing: -1.44px
+  display-lg:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 36px
+    fontWeight: 600
+    lineHeight: 1.15
+    letterSpacing: -1.08px
+  display-md:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 28px
+    fontWeight: 600
+    lineHeight: 1.2
+    letterSpacing: -0.84px
+  display-sm:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 22px
+    fontWeight: 600
+    lineHeight: 1.25
+    letterSpacing: -0.5px
+  title-md:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 18px
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: 0
+  title-sm:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 16px
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: 0
+  body-md:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+  body-sm:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+  caption:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 1.4
+    letterSpacing: 0
+  caption-uppercase:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 11px
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: 0.88px
+    textTransform: uppercase
+  code:
+    fontFamily: "'JetBrains Mono', 'Fira Code', monospace"
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+  button:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.0
+    letterSpacing: 0
+  nav-link:
+    fontFamily: "'Inter', sans-serif"
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: 0
+
+rounded:
+  none: 0px
+  xs: 4px
+  sm: 6px
+  md: 8px
+  lg: 12px
+  xl: 16px
+  xxl: 24px
+  pill: 9999px
+  full: 9999px
+
+spacing:
+  xxs: 4px
+  xs: 8px
+  sm: 12px
+  base: 16px
+  md: 20px
+  lg: 24px
+  xl: 32px
+  xxl: 48px
+  section: 96px
+
+components:
+  top-nav:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.nav-link}"
+    height: 64px
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 10px 18px
+    height: 40px
+  button-primary-active:
+    backgroundColor: "{colors.primary-active}"
+    textColor: "{colors.on-primary}"
+    rounded: "{rounded.md}"
+  button-secondary:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 9px 17px
+    height: 40px
+  button-tertiary-text:
+    backgroundColor: transparent
+    textColor: "{colors.text-link}"
+    typography: "{typography.button}"
+  hero-band:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.display-mega}"
+    padding: 96px
+  device-mockup-card:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.xl}"
+    padding: 0
+  feature-card:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.lg}"
+    padding: 24px
+  feature-card-dark:
+    backgroundColor: "{colors.surface-dark}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.title-md}"
+    rounded: "{rounded.lg}"
+    padding: 24px
+  workflow-step-card:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.body}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 20px
+  workflow-step-icon:
+    backgroundColor: "{colors.surface-strong}"
+    rounded: "{rounded.md}"
+    size: 32px
+  code-block:
+    backgroundColor: "{colors.surface-dark}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.code}"
+    rounded: "{rounded.lg}"
+    padding: 20px
+  ide-mockup-card:
+    backgroundColor: "{colors.surface-dark}"
+    textColor: "{colors.on-dark}"
+    rounded: "{rounded.lg}"
+    padding: 0
+  pricing-tier-card:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  pricing-tier-featured:
+    backgroundColor: "{colors.surface-dark}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  text-input:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 16px
+    height: 44px
+  badge-pill:
+    backgroundColor: "{colors.surface-strong}"
+    textColor: "{colors.ink}"
+    typography: "{typography.caption-uppercase}"
+    rounded: "{rounded.pill}"
+    padding: 4px 10px
+  ecosystem-tile:
+    backgroundColor: "{colors.surface-card}"
+    rounded: "{rounded.md}"
+    size: 64px
+  cta-band:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.display-lg}"
+    padding: 96px
+  testimonial-card:
+    backgroundColor: "{colors.surface-card}"
+    textColor: "{colors.body}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 24px
+  footer-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.body}"
+    typography: "{typography.body-sm}"
+    padding: 64px 48px
+  footer-link:
+    backgroundColor: transparent
+    textColor: "{colors.body}"
+    typography: "{typography.body-sm}"
+---
+
+## Overview
+
+Expo's marketing site reads like a quietly-confident React-Native developer platform. The base canvas is **pure white** (\`{colors.canvas}\` \u2014 #ffffff) with a soft **sky-blue gradient atmospheric wash** behind the hero band. Near-black ink \`{colors.ink}\` (#171717) carries body and display alike. The single brand voltage is **pure black** (\`{colors.primary}\` \u2014 #000000) for primary CTAs \u2014 minimal and editorial-feeling. A small blue text-link accent (\`{colors.text-link}\` \u2014 #0d74ce) is reserved for inline body links, never as a CTA.
+
+Type runs **Inter** as the single sans family at modest weights (display 600, body 400). JetBrains Mono carries every code surface. No custom typeface \u2014 the brand trusts Inter's editorial neutrality.
+
+The brand's strongest visual signature is the **device-mockup hero** \u2014 a centered MacBook + iPhone composite showing real Expo dev surfaces (Expo Studio, EAS Build dashboard, the Expo Go simulator) \u2014 over a sky-blue gradient atmospheric wash. The composite is the page's chrome instead of an illustration.
+
+**Key Characteristics:**
+- Pure white canvas with sky-blue gradient atmospheric backdrop in hero only.
+- Single primary CTA: pure black pill at \`{rounded.md}\` (8px) \u2014 compact developer-tool dialect.
+- Text-link blue (\`{colors.text-link}\`) for inline links only \u2014 never on a CTA.
+- Inter as the single sans family \u2014 no custom display typeface.
+- JetBrains Mono on every code surface.
+- Device-mockup hero with real Expo product surfaces is the brand chrome.
+- Hairline + soft drop depth; no atmospheric brand decoration outside the hero.
+- 96px section rhythm.
+
+## Colors
+
+### Brand & Accent
+- **Black** (\`{colors.primary}\` \u2014 #000000): Primary CTA fill. Used scarcely.
+- **Black Active** (\`{colors.primary-active}\` \u2014 #1a1a1a): Press state.
+- **Text Link Blue** (\`{colors.text-link}\` \u2014 #0d74ce): Inline body links inside long-form copy. Scoped narrowly \u2014 never on CTAs.
+- **Legal Link Blue** (\`{colors.text-link-secondary}\` \u2014 #476cff): Inline links inside legal copy footer.
+- **Bright Cyan** (\`{colors.accent-link-bright}\` \u2014 #47c2ff): Used very sparingly inside docs widget links.
+
+### Surface
+- **Canvas** (\`{colors.canvas}\` \u2014 #ffffff): Pure white page floor.
+- **Canvas Soft** (\`{colors.canvas-soft}\` \u2014 #fafafa): Subtle alternating band.
+- **Surface Card** (\`{colors.surface-card}\` \u2014 #ffffff): Pure white card.
+- **Surface Strong** (\`{colors.surface-strong}\` \u2014 #f0f0f3): Badges, ecosystem tiles, secondary buttons.
+- **Surface Dark** (\`{colors.surface-dark}\` \u2014 #171717): Dark feature cards, code blocks, IDE mockups, featured pricing.
+- **Surface Dark Elevated** (\`{colors.surface-dark-elevated}\` \u2014 #1a1a1a): One step lighter inside dark cards.
+
+### Atmospheric Backdrop
+- **Sky Light** (\`{colors.gradient-sky-light}\` \u2014 #cfe7ff) + **Sky Mid** (\`{colors.gradient-sky-mid}\` \u2014 #a8c8e8): The soft sky-blue gradient wash behind the homepage hero only. Not a brand action color.
+
+### Hairlines
+- **Hairline** (\`{colors.hairline}\` \u2014 #f0f0f3): Default 1px divider.
+- **Hairline Soft** (\`{colors.hairline-soft}\` \u2014 #f5f5f7): Lighter divider.
+- **Hairline Strong** (\`{colors.hairline-strong}\` \u2014 #dcdee0): Stronger panel outline.
+
+### Text
+- **Ink** (\`{colors.ink}\` \u2014 #171717): Display, body emphasis.
+- **Body** (\`{colors.body}\` \u2014 #60646c): Default running-text \u2014 slightly cool gray.
+- **Body Strong** (\`{colors.body-strong}\` \u2014 #171717): Same as ink.
+- **Muted** (\`{colors.muted}\` \u2014 #999999): Sub-titles.
+- **Muted Soft** (\`{colors.muted-soft}\` \u2014 #cccccc): Disabled text.
+- **On Primary** (\`{colors.on-primary}\` \u2014 #ffffff): White text on black CTA.
+- **On Dark** (\`{colors.on-dark}\` \u2014 #ffffff): White text on dark cards.
+- **On Dark Soft** (\`{colors.on-dark-soft}\` \u2014 #b0b4ba): Muted off-white on dark.
+
+### Semantic
+- **Warning** (\`{colors.accent-warning}\` \u2014 #ab6400): Warning text inside docs callouts.
+- **Preview** (\`{colors.accent-preview}\` \u2014 #8145b5): "Preview" tag color.
+- **Success** (\`{colors.semantic-success}\` \u2014 #16a34a): Confirmation.
+- **Error** (\`{colors.semantic-error}\` \u2014 #eb8e90): Validation errors.
+
+## Typography
+
+### Font Family
+**Inter** is the single sans family across every text role. **JetBrains Mono** carries every code surface. Fallback: \`-apple-system, system-ui, sans-serif\`.
+
+### Hierarchy
+
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| \`{typography.display-mega}\` | 64px | 600 | 1.05 | -1.92px | Homepage hero h1 |
+| \`{typography.display-xl}\` | 48px | 600 | 1.1 | -1.44px | Subsidiary heroes |
+| \`{typography.display-lg}\` | 36px | 600 | 1.15 | -1.08px | Section heads |
+| \`{typography.display-md}\` | 28px | 600 | 1.2 | -0.84px | Sub-section heads |
+| \`{typography.display-sm}\` | 22px | 600 | 1.25 | -0.5px | Card group titles |
+| \`{typography.title-md}\` | 18px | 600 | 1.4 | 0 | Component titles |
+| \`{typography.title-sm}\` | 16px | 600 | 1.4 | 0 | List labels |
+| \`{typography.body-md}\` | 16px | 400 | 1.5 | 0 | Default body |
+| \`{typography.body-sm}\` | 14px | 400 | 1.5 | 0 | Footer body |
+| \`{typography.caption}\` | 13px | 400 | 1.4 | 0 | Photo captions |
+| \`{typography.caption-uppercase}\` | 11px | 600 | 1.4 | 0.88px | Section labels, badges |
+| \`{typography.code}\` | 13px | 400 | 1.5 | 0 | Code blocks \u2014 JetBrains Mono |
+| \`{typography.button}\` | 14px | 500 | 1.0 | 0 | CTA labels |
+| \`{typography.nav-link}\` | 14px | 500 | 1.4 | 0 | Top-nav menu |
+
+### Principles
+- **Display weight stays at 600** \u2014 confident but not bombastic. Inter at 600 reads cleaner than 700.
+- **Negative letter-spacing on display** \u2014 -0.5px to -1.92px tracking.
+- **JetBrains Mono on every code surface.**
+
+### Note on Font Substitutes
+Inter and JetBrains Mono are both freely available \u2014 the system uses them directly.
+
+## Layout
+
+### Spacing System
+- **Base unit:** 4px.
+- **Tokens:** \`{spacing.xxs}\` 4px \xB7 \`{spacing.xs}\` 8px \xB7 \`{spacing.sm}\` 12px \xB7 \`{spacing.base}\` 16px \xB7 \`{spacing.md}\` 20px \xB7 \`{spacing.lg}\` 24px \xB7 \`{spacing.xl}\` 32px \xB7 \`{spacing.xxl}\` 48px \xB7 \`{spacing.section}\` 96px.
+- **Section padding:** 96px.
+
+### Grid & Container
+- Max content width: ~1200px.
+- Editorial body: 12-column grid.
+- Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids.
+- Ecosystem tile grid: 8-up at desktop.
+- Footer: 5-column at desktop.
+
+### Whitespace Philosophy
+Generous editorial pacing. The white canvas does not compete with the hero's gradient sky wash; cards inside dense workflow sections sit close (16-24px gap).
+
+## Elevation & Depth
+
+| Level | Treatment | Use |
+|---|---|---|
+| Flat (canvas) | \`{colors.canvas}\` (#ffffff) | Body bands, footer |
+| Card | \`{colors.surface-card}\` (#ffffff) | Content cards |
+| Hairline border | 1px \`{colors.hairline}\` | Card outlines |
+| Soft drop | \`0 4px 12px rgba(0, 0, 0, 0.04)\` | Hovered cards (single shadow tier) |
+| Atmospheric gradient | Sky-blue radial wash | Hero backdrop only |
+| Dark inversion | \`{colors.surface-dark}\` (#171717) | Dark feature cards, code blocks, featured pricing |
+
+### Decorative Depth
+- **Sky-blue gradient backdrop** in the hero only \u2014 atmospheric depth without claiming to be a brand color.
+- **Device mockup composite** as page chrome \u2014 MacBook + iPhone showing real Expo dev surfaces.
+
+## Shapes
+
+### Border Radius Scale
+
+| Token | Value | Use |
+|---|---|---|
+| \`{rounded.none}\` | 0px | Reserved |
+| \`{rounded.xs}\` | 4px | Inline tags |
+| \`{rounded.sm}\` | 6px | Compact rows |
+| \`{rounded.md}\` | 8px | CTA buttons, form inputs, ecosystem tiles |
+| \`{rounded.lg}\` | 12px | Feature cards, code blocks, pricing tiers |
+| \`{rounded.xl}\` | 16px | Device mockup cards |
+| \`{rounded.xxl}\` | 24px | Larger atmospheric cards (rare) |
+| \`{rounded.pill}\` | 9999px | Badges only |
+| \`{rounded.full}\` | 9999px | Avatar plates (rare) |
+
+Compact developer-ergonomic radii \u2014 8px CTAs, 12px cards. Pill geometry is reserved for badges, never CTAs.
+
+## Components
+
+### Top Navigation
+
+**\`top-nav\`** \u2014 Background \`{colors.canvas}\`, text \`{colors.ink}\`, height 64px. Layout: Expo wordmark left, primary horizontal menu (Tools / Workflows / EAS / Pricing / Docs / Showcase), Sign In + Get started CTA right.
+
+### Buttons
+
+**\`button-primary\`** \u2014 Pure black pill. Background \`{colors.primary}\`, text \`{colors.on-primary}\`, type \`{typography.button}\` (14px / 500), padding 10px \xD7 18px, height 40px, rounded \`{rounded.md}\` (8px).
+
+**\`button-primary-active\`** \u2014 Press state. Background \`{colors.primary-active}\`.
+
+**\`button-secondary\`** \u2014 White card with 1px hairline-strong border. Background \`{colors.surface-card}\`, text \`{colors.ink}\`, 1px \`{colors.hairline-strong}\` border.
+
+**\`button-tertiary-text\`** \u2014 Inline blue text link. Background transparent, text \`{colors.text-link}\`.
+
+### Hero & Device Mockup
+
+**\`hero-band\`** \u2014 Background \`{colors.canvas}\` with a soft sky-blue gradient wash behind the centered headline. Display headline in \`{typography.display-mega}\` (64px / 600 / -1.92px), subhead in \`{typography.body-md}\`, single primary CTA, then below \u2014 the device mockup composite.
+
+**\`device-mockup-card\`** \u2014 A layered MacBook + iPhone composite showing real Expo dev surfaces. Background \`{colors.surface-card}\`, rounded \`{rounded.xl}\`. The MacBook holds the EAS dashboard or Expo Studio screenshot; the iPhone overlay shows the running app in Expo Go. This is the page chrome.
+
+### Cards
+
+**\`feature-card\`** \u2014 Background \`{colors.surface-card}\`, text \`{colors.ink}\`, type \`{typography.title-md}\`, rounded \`{rounded.lg}\`, padding 24px, 1px \`{colors.hairline-strong}\` border.
+
+**\`feature-card-dark\`** \u2014 Dark variant. Background \`{colors.surface-dark}\`, text \`{colors.on-dark}\`. Same shape, dark inversion.
+
+**\`workflow-step-card\`** \u2014 Step in the "Get your app on every device" workflow row. Background \`{colors.surface-card}\`, text \`{colors.body}\`, rounded \`{rounded.lg}\`, padding 20px. Layout: 32px square \`{component.workflow-step-icon}\` + step number + label + body.
+
+**\`workflow-step-icon\`** \u2014 Square plate. Background \`{colors.surface-strong}\`, rounded \`{rounded.md}\`, 32px size.
+
+**\`testimonial-card\`** \u2014 Quote card. Background \`{colors.surface-card}\`, text \`{colors.body}\`, rounded \`{rounded.lg}\`, padding 24px.
+
+### Code & IDE
+
+**\`code-block\`** \u2014 Inline code block. Background \`{colors.surface-dark}\`, text \`{colors.on-dark}\` in \`{typography.code}\` (JetBrains Mono 13px), rounded \`{rounded.lg}\`, padding 20px. White text on dark.
+
+**\`ide-mockup-card\`** \u2014 Stylized IDE mockup. Background \`{colors.surface-dark}\`, rounded \`{rounded.lg}\`. Multi-pane editor + terminal preview.
+
+### Pricing
+
+**\`pricing-tier-card\`** \u2014 Standard pricing tier. Background \`{colors.surface-card}\`, rounded \`{rounded.lg}\`, padding 32px, 1px \`{colors.hairline-strong}\` border.
+
+**\`pricing-tier-featured\`** \u2014 Featured tier. Background \`{colors.surface-dark}\`, text \`{colors.on-dark}\`. Same shape, dark inversion.
+
+### Ecosystem
+
+**\`ecosystem-tile\`** \u2014 Square logo plate for ecosystem partner logos (TypeScript, React, Sentry, etc.). Background \`{colors.surface-card}\`, rounded \`{rounded.md}\`, 64px size, 1px \`{colors.hairline}\` border.
+
+### Forms & Tags
+
+**\`text-input\`** \u2014 Background \`{colors.surface-card}\`, text \`{colors.ink}\`, rounded \`{rounded.md}\` (8px), padding 12px \xD7 16px, height 44px, 1px \`{colors.hairline-strong}\` border. Focus thickens border to 2px ink.
+
+**\`badge-pill\`** \u2014 Small uppercase pill. Background \`{colors.surface-strong}\`, text \`{colors.ink}\`, type \`{typography.caption-uppercase}\`, rounded \`{rounded.pill}\`, padding 4px \xD7 10px.
+
+### CTA / Footer
+
+**\`cta-band\`** \u2014 Pre-footer band. Background \`{colors.canvas}\`, centered display headline in \`{typography.display-lg}\`, single black pill CTA. 96px padding.
+
+**\`footer-light\`** \u2014 Closing white footer. Background \`{colors.canvas}\`, text \`{colors.body}\`. 5-column link list. 64\xD748px padding.
+
+**\`footer-link\`** \u2014 Background transparent, text \`{colors.body}\`, type \`{typography.body-sm}\`.
+
+## Do's and Don'ts
+
+### Do
+- Reserve \`{colors.primary}\` (black) for primary CTAs.
+- Use \`{colors.text-link}\` (blue) for inline body links only \u2014 never on CTAs or buttons.
+- Set every CTA at \`{rounded.md}\` (8px) \u2014 developer dialect.
+- Use Inter at weight 600 for display, 400 for body.
+- Render every code surface in JetBrains Mono.
+- Pair the hero with the device-mockup composite \u2014 it's the page chrome.
+
+### Don't
+- Don't introduce a saturated brand action color. Black is the only CTA fill.
+- Don't use blue (\`{colors.text-link}\`) on a CTA. Inline links only.
+- Don't drop display below weight 600 or above 700.
+- Don't use full pills on CTAs \u2014 pills are for badges only.
+- Don't replicate the sky-blue gradient backdrop outside the hero.
+- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA is what appears on actual page CTAs.
+
+## Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Mobile | < 640px | Hero h1 64\u219232px; device mockup \u2192 single iPhone screen; feature grid 1-up; nav hamburger. |
+| Tablet | 640\u20131024px | Hero h1 48px; device mockup compresses; feature grid 2-up. |
+| Desktop | 1024\u20131280px | Full hero h1 64px; full MacBook + iPhone composite; feature grid 3-up. |
+| Wide | > 1280px | Content caps at 1200px. |
+
+### Touch Targets
+- Primary CTA at 40px height \u2014 at WCAG AA, padded for AAA.
+- Search input 44px \u2014 at AAA.
+
+### Collapsing Strategy
+- Top nav switches to hamburger below 768px.
+- Device mockup MacBook + iPhone collapses to a single iPhone preview on mobile.
+- Feature grid: 3-up \u2192 2-up \u2192 1-up.
+- Ecosystem tile grid: 8-up \u2192 4-up \u2192 3-up \u2192 2-up.
+
+## Iteration Guide
+
+1. Focus on a single component at a time.
+2. CTAs default to \`{rounded.md}\` (8px). Cards use \`{rounded.lg}\` (12px).
+3. Variants live as separate entries.
+4. Use \`{token.refs}\` everywhere \u2014 never inline hex.
+5. Hover state never documented.
+6. Inter 600 for display, Inter 400 for body. JetBrains Mono on code.
+7. Black stays the only CTA color; text-link blue stays inline-only.
+
+## Known Gaps
+
+- Inter and JetBrains Mono are freely available \u2014 no licensing concerns.
+- Animation timings (device mockup parallax, hero entrance) out of scope.
+- In-app surfaces (EAS dashboard interactive, Expo Go simulator) only partially captured via marketing mockups.
+- Form validation states beyond focus not visible on captured surfaces.
+`;
+export {
+  expoBrief
+};
+//# sourceMappingURL=expo.js.map