@hex-core/themes 0.1.1 → 0.2.0

package/dist/presets/_briefs/runwayml.js

@@ -0,0 +1,250 @@
+// src/presets/_briefs/runwayml.ts
+var runwaymlBrief = `# Design System Inspired by Runway
+
+## 1. Visual Theme & Atmosphere
+
+Runway's interface is a cinematic reel brought to life as a website \u2014 a dark, editorial, film-production-grade design where full-bleed photography and video ARE the primary UI elements. This is not a typical tech product page; it's a visual manifesto for AI-powered creativity. Every section feels like a frame from a film: dramatic lighting, sweeping landscapes, and intimate human moments captured in high-quality imagery that dominates the viewport.
+
+The design language is built on a single typeface \u2014 abcNormal \u2014 a clean, geometric sans-serif that handles everything from 48px display headlines to 11px uppercase labels. This single-font commitment creates an extreme typographic uniformity that lets the visual content speak louder than the text. Headlines use tight line-heights (1.0) with negative letter-spacing (-0.9px to -1.2px), creating compressed text blocks that feel like film titles rather than marketing copy.
+
+What makes Runway distinctive is its complete commitment to visual content as design. Rather than illustrating features with icons or diagrams, Runway shows actual AI-generated and AI-enhanced imagery \u2014 cars driving through cinematic landscapes, artistic portraits, architectural renders. The interface itself retreats into near-invisibility: minimal borders, zero shadows, subtle cool-gray text, and a dark palette that puts maximum focus on the photography.
+
+**Key Characteristics:**
+- Cinematic full-bleed photography and video as primary UI elements
+- Single typeface system: abcNormal for everything from display to micro labels
+- Dark-dominant palette with cool-toned neutrals (#767d88, #7d848e)
+- Zero shadows, minimal borders \u2014 the interface is intentionally invisible
+- Tight display typography (line-height 1.0) with negative tracking (-0.9px to -1.2px)
+- Uppercase labels with positive letter-spacing for navigational structure
+- Weight 450 (unusual intermediate) for small uppercase text \u2014 precision craft
+- Editorial magazine layout with mixed-size image grids
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Runway Black** (\`#000000\`): The primary page background and maximum-emphasis text.
+- **Deep Black** (\`#030303\`): A near-imperceptible variant for layered dark surfaces.
+- **Dark Surface** (\`#1a1a1a\`): Card backgrounds and elevated dark containers.
+- **Pure White** (\`#ffffff\`): Primary text on dark surfaces and light-section backgrounds.
+
+### Surface & Background
+- **Near White** (\`#fefefe\`): The lightest surface \u2014 barely distinguishable from pure white.
+- **Cool Cloud** (\`#e9ecf2\`): Light section backgrounds with a cool blue-gray tint.
+- **Border Dark** (\`#27272a\`): The single dark-mode border color \u2014 barely visible containment.
+
+### Neutrals & Text
+- **Charcoal** (\`#404040\`): Primary body text on light surfaces and secondary text.
+- **Near Charcoal** (\`#3f3f3f\`): Slightly lighter variant for dark-section secondary text.
+- **Cool Slate** (\`#767d88\`): Secondary body text \u2014 a distinctly blue-gray cool neutral.
+- **Mid Slate** (\`#7d848e\`): Tertiary text, metadata descriptions.
+- **Muted Gray** (\`#a7a7a7\`): De-emphasized content, timestamps.
+- **Cool Silver** (\`#c9ccd1\`): Light borders and dividers.
+- **Light Silver** (\`#d0d4d4\`): The lightest border/divider variant.
+- **Tailwind Gray** (\`#6b7280\`): Standard Tailwind neutral for supplementary text.
+- **Dark Link** (\`#0c0c0c\`): Darkest link text \u2014 nearly black.
+- **Footer Gray** (\`#999999\`): Footer links and deeply muted content.
+
+### Gradient System
+- **None in the interface.** Visual richness comes entirely from photographic content \u2014 AI-generated and enhanced imagery provides all the color and gradient the design needs. The interface itself is intentionally colorless.
+
+## 3. Typography Rules
+
+### Font Family
+- **Universal**: \`abcNormal\`, with fallback: \`abcNormal Fallback\`
+
+*Note: abcNormal is a custom geometric sans-serif. For external implementations, Inter or DM Sans serve as close substitutes.*
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | abcNormal | 48px (3rem) | 400 | 1.00 (tight) | -1.2px | Maximum size, film-title presence |
+| Section Heading | abcNormal | 40px (2.5rem) | 400 | 1.00\u20131.10 | -1px to 0px | Feature section titles |
+| Sub-heading | abcNormal | 36px (2.25rem) | 400 | 1.00 (tight) | -0.9px | Secondary section markers |
+| Card Title | abcNormal | 24px (1.5rem) | 400 | 1.00 (tight) | normal | Article and card headings |
+| Feature Title | abcNormal | 20px (1.25rem) | 400 | 1.00 (tight) | normal | Small headings |
+| Body / Button | abcNormal | 16px (1rem) | 400\u2013600 | 1.30\u20131.50 | -0.16px to normal | Standard body, nav links |
+| Caption / Label | abcNormal | 14px (0.88rem) | 500\u2013600 | 1.25\u20131.43 | 0.35px (uppercase) | Metadata, section labels |
+| Small | abcNormal | 13px (0.81rem) | 400 | 1.30 (tight) | -0.16px to -0.26px | Compact descriptions |
+| Micro / Tag | abcNormal | 11px (0.69rem) | 450 | 1.30 (tight) | normal | Uppercase tags, tiny labels |
+
+### Principles
+- **One typeface, complete expression**: abcNormal handles every text role. The design achieves variety through size, weight, case, and letter-spacing rather than font-family switching.
+- **Tight everywhere**: Nearly every size uses line-height 1.0\u20131.30 \u2014 even body text is relatively compressed. This creates a dense, editorial feel.
+- **Weight 450 \u2014 the precision detail**: Some small uppercase labels use weight 450, an uncommon intermediate between regular (400) and medium (500). This micro-craft signals typographic sophistication.
+- **Negative tracking as default**: Even body text uses -0.16px to -0.26px letter-spacing, keeping everything slightly tighter than default.
+- **Uppercase as structure**: Labels at 14px and 11px use \`text-transform: uppercase\` with positive letter-spacing (0.35px) to create navigational signposts that contrast with the tight lowercase text.
+
+## 4. Component Stylings
+
+### Buttons
+- Text: weight 600 at 14px abcNormal
+- Background: likely transparent or dark, with minimal border
+- Radius: small (4px) for button-like links
+- The button design is extremely restrained \u2014 no heavy fills or borders detected
+- Interactive elements blend into the editorial flow
+
+### Cards & Containers
+- Background: transparent or Dark Surface (\`#1a1a1a\`)
+- Border: \`1px solid #27272a\` (dark mode) \u2014 barely visible containment
+- Radius: small (4\u20138px) for functional elements; 16px for alert-style containers
+- Shadow: zero \u2014 no shadows on any element
+- Cards are primarily photographic \u2014 the image IS the card
+
+### Navigation
+- Minimal horizontal nav \u2014 transparent over hero content
+- Logo: Runway wordmark in white/black
+- Links: abcNormal at 16px, weight 400\u2013600
+- Hover: text shifts to white or higher opacity
+- Extremely subtle \u2014 designed to not compete with visual content
+
+### Image Treatment
+- Full-bleed cinematic photography and video dominate
+- AI-generated content shown at large scale as primary visual elements
+- Mixed-size image grids creating editorial magazine layouts
+- Dark overlays on hero images for text readability
+- Product screenshots with subtle rounded corners (8px)
+
+### Distinctive Components
+
+**Cinematic Hero**
+- Full-viewport image or video with text overlay
+- Headline in 48px abcNormal, white on dark imagery
+- The image is always cinematic quality \u2014 film-grade composition
+
+**Research Article Cards**
+- Photographic thumbnails with article titles
+- Mixed-size grid layout (large feature + smaller supporting)
+- Clean text overlay or below-image caption style
+
+**Trust Bar**
+- Company logos (leading organizations across industries)
+- Clean, monochrome treatment
+- Horizontal layout with generous spacing
+
+**Mission Statement**
+- "We are building AI to simulate the world through imagination, art and aesthetics"
+- On a dark background with white text
+- The emotional close \u2014 artistic and philosophical
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 48px, 64px, 78px
+- Section vertical spacing: generous (48\u201378px)
+- Component gaps: 16\u201324px
+
+### Grid & Container
+- Max container width: up to 1600px (cinema-wide)
+- Hero: full-viewport, edge-to-edge
+- Content sections: centered with generous margins
+- Image grids: asymmetric, magazine-style mixed sizes
+- Footer: full-width dark section
+
+### Whitespace Philosophy
+- **Cinema-grade breathing**: Large vertical gaps between sections create a scrolling experience that feels like watching scenes change.
+- **Images replace whitespace**: Where other sites use empty space, Runway fills it with photography. The visual content IS the breathing room.
+- **Editorial grid asymmetry**: The image grid uses intentionally varied sizes \u2014 large hero images paired with smaller supporting images, creating visual rhythm.
+
+### Border Radius Scale
+- Sharp (4px): Buttons, small interactive elements
+- Subtle (6px): Links, small containers
+- Comfortable (8px): Standard containers, image cards
+- Generous (16px): Alert-style containers, featured elements
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, no border | Everything \u2014 the dominant state |
+| Bordered (Level 1) | \`1px solid #27272a\` | Alert containers only |
+| Dark Section (Level 2) | Dark bg (#000000 / #1a1a1a) with light text | Hero, features, footer |
+| Light Section (Level 3) | White/Cool Cloud bg with dark text | Content sections, research |
+
+**Shadow Philosophy**: Runway uses **zero shadows**. This is a film-production design decision \u2014 in cinema, depth comes from lighting, focus, and composition, not drop shadows. The interface mirrors this philosophy: depth is communicated through dark/light section alternation, photographic depth-of-field, and overlay transparency \u2014 never through CSS box-shadow.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use full-bleed cinematic photography as the primary visual element
+- Use abcNormal for all text \u2014 maintain the single-typeface commitment
+- Keep display line-heights at 1.0 with negative letter-spacing for film-title density
+- Use the cool-gray neutral palette (#767d88, #7d848e) for secondary text
+- Maintain zero shadows \u2014 depth comes from photography and section backgrounds
+- Use uppercase with letter-spacing for navigational labels (14px, 0.35px spacing)
+- Apply small border-radius (4\u20138px) \u2014 the design is NOT pill-shaped
+- Let visual content (photos, videos) dominate \u2014 the UI should be invisible
+- Use weight 450 for micro labels \u2014 the precision matters
+
+### Don't
+- Don't add decorative colors to the interface \u2014 the only color comes from photography
+- Don't use heavy borders or shadows \u2014 the interface must be nearly invisible
+- Don't use pill-shaped radius \u2014 Runway's geometry is subtly rounded, not circular
+- Don't use bold (700+) weight \u2014 400\u2013600 is the full range, with 450 as a precision tool
+- Don't compete with the visual content \u2014 text overlays should be minimal and restrained
+- Don't use gradient backgrounds in the interface \u2014 gradients exist only in photography
+- Don't use more than one typeface \u2014 abcNormal handles everything
+- Don't use body line-height above 1.50 \u2014 the tight, editorial feel is core
+- Don't reduce image quality \u2014 cinematic photography IS the design
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, stacked images, reduced hero text |
+| Tablet | 640\u2013768px | 2-column image grids begin |
+| Small Desktop | 768\u20131024px | Standard layout |
+| Desktop | 1024\u20131280px | Full layout, expanded hero |
+| Large Desktop | 1280\u20131600px | Maximum cinema-width container |
+
+### Touch Targets
+- Navigation links at comfortable 16px
+- Article cards serve as large touch targets
+- Buttons at 14px weight 600 with adequate padding
+
+### Collapsing Strategy
+- **Navigation**: Collapses to hamburger on mobile
+- **Hero**: Full-bleed maintained, text scales down
+- **Image grids**: Multi-column \u2192 2-column \u2192 single column
+- **Research articles**: Feature-size cards \u2192 stacked full-width
+- **Trust logos**: Horizontal scroll or reduced grid
+
+### Image Behavior
+- Cinematic images scale proportionally
+- Full-bleed hero maintained across all sizes
+- Image grids reflow to fewer columns
+- Video content maintains aspect ratio
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background Dark: "Runway Black (#000000)"
+- Background Light: "Pure White (#ffffff)"
+- Primary Text Dark: "Charcoal (#404040)"
+- Secondary Text: "Cool Slate (#767d88)"
+- Muted Text: "Muted Gray (#a7a7a7)"
+- Light Border: "Cool Silver (#c9ccd1)"
+- Dark Border: "Border Dark (#27272a)"
+- Card Surface: "Dark Surface (#1a1a1a)"
+
+### Example Component Prompts
+- "Create a cinematic hero section: full-bleed dark background with a cinematic image overlay. Headline at 48px abcNormal weight 400, line-height 1.0, letter-spacing -1.2px in white. Minimal text below in Cool Slate (#767d88) at 16px."
+- "Design a research article grid: one large card (50% width) with a cinematic image and 24px title, next to two smaller cards stacked. All images with 8px border-radius. Titles in white (dark bg) or Charcoal (#404040, light bg)."
+- "Build a section label: 14px abcNormal weight 500, uppercase, letter-spacing 0.35px in Cool Slate (#767d88). No border, no background."
+- "Create a trust bar: company logos in monochrome, horizontal layout with generous spacing. On dark background with white/gray logo treatments."
+- "Design a mission statement section: Runway Black background, white text at 36px abcNormal, line-height 1.0, letter-spacing -0.9px. Centered, with generous vertical padding."
+
+### Iteration Guide
+1. Visual content first \u2014 always include cinematic photography
+2. Use abcNormal for everything \u2014 specify size and weight, never change the font
+3. Keep the interface invisible \u2014 no heavy borders, no shadows, no bright colors
+4. Use the cool slate grays (#767d88, #7d848e) for secondary text \u2014 not warm grays
+5. Uppercase labels need letter-spacing (0.35px) \u2014 never tight uppercase
+6. Dark sections should be truly dark (#000000 or #1a1a1a) \u2014 no medium grays as surfaces
+`;
+export {
+  runwaymlBrief
+};
+//# sourceMappingURL=runwayml.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/runwayml.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const runwaymlBrief = `# Design System Inspired by Runway\n\n## 1. Visual Theme & Atmosphere\n\nRunway's interface is a cinematic reel brought to life as a website — a dark, editorial, film-production-grade design where full-bleed photography and video ARE the primary UI elements. This is not a typical tech product page; it's a visual manifesto for AI-powered creativity. Every section feels like a frame from a film: dramatic lighting, sweeping landscapes, and intimate human moments captured in high-quality imagery that dominates the viewport.\n\nThe design language is built on a single typeface — abcNormal — a clean, geometric sans-serif that handles everything from 48px display headlines to 11px uppercase labels. This single-font commitment creates an extreme typographic uniformity that lets the visual content speak louder than the text. Headlines use tight line-heights (1.0) with negative letter-spacing (-0.9px to -1.2px), creating compressed text blocks that feel like film titles rather than marketing copy.\n\nWhat makes Runway distinctive is its complete commitment to visual content as design. Rather than illustrating features with icons or diagrams, Runway shows actual AI-generated and AI-enhanced imagery — cars driving through cinematic landscapes, artistic portraits, architectural renders. The interface itself retreats into near-invisibility: minimal borders, zero shadows, subtle cool-gray text, and a dark palette that puts maximum focus on the photography.\n\n**Key Characteristics:**\n- Cinematic full-bleed photography and video as primary UI elements\n- Single typeface system: abcNormal for everything from display to micro labels\n- Dark-dominant palette with cool-toned neutrals (#767d88, #7d848e)\n- Zero shadows, minimal borders — the interface is intentionally invisible\n- Tight display typography (line-height 1.0) with negative tracking (-0.9px to -1.2px)\n- Uppercase labels with positive letter-spacing for navigational structure\n- Weight 450 (unusual intermediate) for small uppercase text — precision craft\n- Editorial magazine layout with mixed-size image grids\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Runway Black** (\\`#000000\\`): The primary page background and maximum-emphasis text.\n- **Deep Black** (\\`#030303\\`): A near-imperceptible variant for layered dark surfaces.\n- **Dark Surface** (\\`#1a1a1a\\`): Card backgrounds and elevated dark containers.\n- **Pure White** (\\`#ffffff\\`): Primary text on dark surfaces and light-section backgrounds.\n\n### Surface & Background\n- **Near White** (\\`#fefefe\\`): The lightest surface — barely distinguishable from pure white.\n- **Cool Cloud** (\\`#e9ecf2\\`): Light section backgrounds with a cool blue-gray tint.\n- **Border Dark** (\\`#27272a\\`): The single dark-mode border color — barely visible containment.\n\n### Neutrals & Text\n- **Charcoal** (\\`#404040\\`): Primary body text on light surfaces and secondary text.\n- **Near Charcoal** (\\`#3f3f3f\\`): Slightly lighter variant for dark-section secondary text.\n- **Cool Slate** (\\`#767d88\\`): Secondary body text — a distinctly blue-gray cool neutral.\n- **Mid Slate** (\\`#7d848e\\`): Tertiary text, metadata descriptions.\n- **Muted Gray** (\\`#a7a7a7\\`): De-emphasized content, timestamps.\n- **Cool Silver** (\\`#c9ccd1\\`): Light borders and dividers.\n- **Light Silver** (\\`#d0d4d4\\`): The lightest border/divider variant.\n- **Tailwind Gray** (\\`#6b7280\\`): Standard Tailwind neutral for supplementary text.\n- **Dark Link** (\\`#0c0c0c\\`): Darkest link text — nearly black.\n- **Footer Gray** (\\`#999999\\`): Footer links and deeply muted content.\n\n### Gradient System\n- **None in the interface.** Visual richness comes entirely from photographic content — AI-generated and enhanced imagery provides all the color and gradient the design needs. The interface itself is intentionally colorless.\n\n## 3. Typography Rules\n\n### Font Family\n- **Universal**: \\`abcNormal\\`, with fallback: \\`abcNormal Fallback\\`\n\n*Note: abcNormal is a custom geometric sans-serif. For external implementations, Inter or DM Sans serve as close substitutes.*\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display / Hero | abcNormal | 48px (3rem) | 400 | 1.00 (tight) | -1.2px | Maximum size, film-title presence |\n| Section Heading | abcNormal | 40px (2.5rem) | 400 | 1.00–1.10 | -1px to 0px | Feature section titles |\n| Sub-heading | abcNormal | 36px (2.25rem) | 400 | 1.00 (tight) | -0.9px | Secondary section markers |\n| Card Title | abcNormal | 24px (1.5rem) | 400 | 1.00 (tight) | normal | Article and card headings |\n| Feature Title | abcNormal | 20px (1.25rem) | 400 | 1.00 (tight) | normal | Small headings |\n| Body / Button | abcNormal | 16px (1rem) | 400–600 | 1.30–1.50 | -0.16px to normal | Standard body, nav links |\n| Caption / Label | abcNormal | 14px (0.88rem) | 500–600 | 1.25–1.43 | 0.35px (uppercase) | Metadata, section labels |\n| Small | abcNormal | 13px (0.81rem) | 400 | 1.30 (tight) | -0.16px to -0.26px | Compact descriptions |\n| Micro / Tag | abcNormal | 11px (0.69rem) | 450 | 1.30 (tight) | normal | Uppercase tags, tiny labels |\n\n### Principles\n- **One typeface, complete expression**: abcNormal handles every text role. The design achieves variety through size, weight, case, and letter-spacing rather than font-family switching.\n- **Tight everywhere**: Nearly every size uses line-height 1.0–1.30 — even body text is relatively compressed. This creates a dense, editorial feel.\n- **Weight 450 — the precision detail**: Some small uppercase labels use weight 450, an uncommon intermediate between regular (400) and medium (500). This micro-craft signals typographic sophistication.\n- **Negative tracking as default**: Even body text uses -0.16px to -0.26px letter-spacing, keeping everything slightly tighter than default.\n- **Uppercase as structure**: Labels at 14px and 11px use \\`text-transform: uppercase\\` with positive letter-spacing (0.35px) to create navigational signposts that contrast with the tight lowercase text.\n\n## 4. Component Stylings\n\n### Buttons\n- Text: weight 600 at 14px abcNormal\n- Background: likely transparent or dark, with minimal border\n- Radius: small (4px) for button-like links\n- The button design is extremely restrained — no heavy fills or borders detected\n- Interactive elements blend into the editorial flow\n\n### Cards & Containers\n- Background: transparent or Dark Surface (\\`#1a1a1a\\`)\n- Border: \\`1px solid #27272a\\` (dark mode) — barely visible containment\n- Radius: small (4–8px) for functional elements; 16px for alert-style containers\n- Shadow: zero — no shadows on any element\n- Cards are primarily photographic — the image IS the card\n\n### Navigation\n- Minimal horizontal nav — transparent over hero content\n- Logo: Runway wordmark in white/black\n- Links: abcNormal at 16px, weight 400–600\n- Hover: text shifts to white or higher opacity\n- Extremely subtle — designed to not compete with visual content\n\n### Image Treatment\n- Full-bleed cinematic photography and video dominate\n- AI-generated content shown at large scale as primary visual elements\n- Mixed-size image grids creating editorial magazine layouts\n- Dark overlays on hero images for text readability\n- Product screenshots with subtle rounded corners (8px)\n\n### Distinctive Components\n\n**Cinematic Hero**\n- Full-viewport image or video with text overlay\n- Headline in 48px abcNormal, white on dark imagery\n- The image is always cinematic quality — film-grade composition\n\n**Research Article Cards**\n- Photographic thumbnails with article titles\n- Mixed-size grid layout (large feature + smaller supporting)\n- Clean text overlay or below-image caption style\n\n**Trust Bar**\n- Company logos (leading organizations across industries)\n- Clean, monochrome treatment\n- Horizontal layout with generous spacing\n\n**Mission Statement**\n- \"We are building AI to simulate the world through imagination, art and aesthetics\"\n- On a dark background with white text\n- The emotional close — artistic and philosophical\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 48px, 64px, 78px\n- Section vertical spacing: generous (48–78px)\n- Component gaps: 16–24px\n\n### Grid & Container\n- Max container width: up to 1600px (cinema-wide)\n- Hero: full-viewport, edge-to-edge\n- Content sections: centered with generous margins\n- Image grids: asymmetric, magazine-style mixed sizes\n- Footer: full-width dark section\n\n### Whitespace Philosophy\n- **Cinema-grade breathing**: Large vertical gaps between sections create a scrolling experience that feels like watching scenes change.\n- **Images replace whitespace**: Where other sites use empty space, Runway fills it with photography. The visual content IS the breathing room.\n- **Editorial grid asymmetry**: The image grid uses intentionally varied sizes — large hero images paired with smaller supporting images, creating visual rhythm.\n\n### Border Radius Scale\n- Sharp (4px): Buttons, small interactive elements\n- Subtle (6px): Links, small containers\n- Comfortable (8px): Standard containers, image cards\n- Generous (16px): Alert-style containers, featured elements\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Everything — the dominant state |\n| Bordered (Level 1) | \\`1px solid #27272a\\` | Alert containers only |\n| Dark Section (Level 2) | Dark bg (#000000 / #1a1a1a) with light text | Hero, features, footer |\n| Light Section (Level 3) | White/Cool Cloud bg with dark text | Content sections, research |\n\n**Shadow Philosophy**: Runway uses **zero shadows**. This is a film-production design decision — in cinema, depth comes from lighting, focus, and composition, not drop shadows. The interface mirrors this philosophy: depth is communicated through dark/light section alternation, photographic depth-of-field, and overlay transparency — never through CSS box-shadow.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use full-bleed cinematic photography as the primary visual element\n- Use abcNormal for all text — maintain the single-typeface commitment\n- Keep display line-heights at 1.0 with negative letter-spacing for film-title density\n- Use the cool-gray neutral palette (#767d88, #7d848e) for secondary text\n- Maintain zero shadows — depth comes from photography and section backgrounds\n- Use uppercase with letter-spacing for navigational labels (14px, 0.35px spacing)\n- Apply small border-radius (4–8px) — the design is NOT pill-shaped\n- Let visual content (photos, videos) dominate — the UI should be invisible\n- Use weight 450 for micro labels — the precision matters\n\n### Don't\n- Don't add decorative colors to the interface — the only color comes from photography\n- Don't use heavy borders or shadows — the interface must be nearly invisible\n- Don't use pill-shaped radius — Runway's geometry is subtly rounded, not circular\n- Don't use bold (700+) weight — 400–600 is the full range, with 450 as a precision tool\n- Don't compete with the visual content — text overlays should be minimal and restrained\n- Don't use gradient backgrounds in the interface — gradients exist only in photography\n- Don't use more than one typeface — abcNormal handles everything\n- Don't use body line-height above 1.50 — the tight, editorial feel is core\n- Don't reduce image quality — cinematic photography IS the design\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <640px | Single column, stacked images, reduced hero text |\n| Tablet | 640–768px | 2-column image grids begin |\n| Small Desktop | 768–1024px | Standard layout |\n| Desktop | 1024–1280px | Full layout, expanded hero |\n| Large Desktop | 1280–1600px | Maximum cinema-width container |\n\n### Touch Targets\n- Navigation links at comfortable 16px\n- Article cards serve as large touch targets\n- Buttons at 14px weight 600 with adequate padding\n\n### Collapsing Strategy\n- **Navigation**: Collapses to hamburger on mobile\n- **Hero**: Full-bleed maintained, text scales down\n- **Image grids**: Multi-column → 2-column → single column\n- **Research articles**: Feature-size cards → stacked full-width\n- **Trust logos**: Horizontal scroll or reduced grid\n\n### Image Behavior\n- Cinematic images scale proportionally\n- Full-bleed hero maintained across all sizes\n- Image grids reflow to fewer columns\n- Video content maintains aspect ratio\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background Dark: \"Runway Black (#000000)\"\n- Background Light: \"Pure White (#ffffff)\"\n- Primary Text Dark: \"Charcoal (#404040)\"\n- Secondary Text: \"Cool Slate (#767d88)\"\n- Muted Text: \"Muted Gray (#a7a7a7)\"\n- Light Border: \"Cool Silver (#c9ccd1)\"\n- Dark Border: \"Border Dark (#27272a)\"\n- Card Surface: \"Dark Surface (#1a1a1a)\"\n\n### Example Component Prompts\n- \"Create a cinematic hero section: full-bleed dark background with a cinematic image overlay. Headline at 48px abcNormal weight 400, line-height 1.0, letter-spacing -1.2px in white. Minimal text below in Cool Slate (#767d88) at 16px.\"\n- \"Design a research article grid: one large card (50% width) with a cinematic image and 24px title, next to two smaller cards stacked. All images with 8px border-radius. Titles in white (dark bg) or Charcoal (#404040, light bg).\"\n- \"Build a section label: 14px abcNormal weight 500, uppercase, letter-spacing 0.35px in Cool Slate (#767d88). No border, no background.\"\n- \"Create a trust bar: company logos in monochrome, horizontal layout with generous spacing. On dark background with white/gray logo treatments.\"\n- \"Design a mission statement section: Runway Black background, white text at 36px abcNormal, line-height 1.0, letter-spacing -0.9px. Centered, with generous vertical padding.\"\n\n### Iteration Guide\n1. Visual content first — always include cinematic photography\n2. Use abcNormal for everything — specify size and weight, never change the font\n3. Keep the interface invisible — no heavy borders, no shadows, no bright colors\n4. Use the cool slate grays (#767d88, #7d848e) for secondary text — not warm grays\n5. Uppercase labels need letter-spacing (0.35px) — never tight uppercase\n6. Dark sections should be truly dark (#000000 or #1a1a1a) — no medium grays as surfaces\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/sanity.d.ts

@@ -0,0 +1,3 @@
+declare const sanityBrief = "# Design System Inspired by Sanity\n\n## 1. Visual Theme & Atmosphere\n\nSanity's website is a developer-content platform rendered as a nocturnal command center -- dark, precise, and deeply structured. The entire experience sits on a near-black canvas (`#0b0b0b`) that reads less like a \"dark mode toggle\" and more like the natural state of a tool built for people who live in terminals. Where most CMS marketing pages reach for friendly pastels and soft illustration, Sanity leans into the gravity of its own product: structured content deserves a structured stage.\n\nThe signature typographic voice is waldenburgNormal -- a distinctive, slightly geometric sans-serif with tight negative letter-spacing (-0.32px to -4.48px at display sizes) that gives headlines a compressed, engineered quality. At 112px hero scale with -4.48px tracking, the type feels almost machined -- like precision-cut steel letterforms. This is paired with IBM Plex Mono for code and technical labels, creating a dual-register voice: editorial authority meets developer credibility.\n\nWhat makes Sanity distinctive is the interplay between its monochromatic dark palette and vivid, saturated accent punctuation. The neutral scale runs from pure black through a tightly controlled gray ramp (`#0b0b0b` -> `#212121` -> `#353535` -> `#797979` -> `#b9b9b9` -> `#ededed` -> `#ffffff`) with no warm or cool bias -- just pure, achromatic precision. Against this disciplined backdrop, a neon green accent (display-p3 green) and electric blue (`#0052ef`) land with the impact of signal lights in a dark control room. The orange-red CTA (`#f36458`) provides the only warm touch in an otherwise cool system.\n\n**Key Characteristics:**\n- Near-black canvas (`#0b0b0b`) as the default, natural environment -- not a dark \"mode\" but the primary identity\n- waldenburgNormal with extreme negative tracking at display sizes, creating a precision-engineered typographic voice\n- Pure achromatic gray scale -- no warm or cool undertones, pure neutral discipline\n- Vivid accent punctuation: neon green, electric blue (`#0052ef`), and coral-red (`#f36458`) against the dark field\n- Pill-shaped primary buttons (99999px radius) contrasting with subtle rounded rectangles (3-6px) for secondary actions\n- IBM Plex Mono as the technical counterweight to the editorial display face\n- Full-bleed dark sections with content contained in measured max-width containers\n- Hover states that shift to electric blue (`#0052ef`) across all interactive elements -- a consistent \"activation\" signal\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Sanity Black** (`#0b0b0b`): The primary canvas and dominant surface color. Not pure black but close enough to feel absolute. The foundation of the entire visual identity.\n- **Pure Black** (`#000000`): Used for maximum-contrast moments, deep overlays, and certain border accents.\n- **Sanity Red** (`#f36458`): The primary CTA and brand accent -- a warm coral-red that serves as the main call-to-action color. Used for \"Get Started\" buttons and primary conversion points.\n\n### Accent & Interactive\n- **Electric Blue** (`#0052ef`): The universal hover/active state color across the entire system. Buttons, links, and interactive elements all shift to this blue on hover. Also used as `--color-blue-700` for focus rings and active states.\n- **Light Blue** (`#55beff` / `#afe3ff`): Secondary blue variants used for accent backgrounds, badges, and dimmed blue surfaces.\n- **Neon Green** (`color(display-p3 .270588 1 0)`): A vivid, wide-gamut green used as `--color-fg-accent-green` for success states and premium feature highlights. Falls back to `#19d600` in sRGB.\n- **Accent Magenta** (`color(display-p3 .960784 0 1)`): A vivid wide-gamut magenta for specialized accent moments.\n\n### Surface & Background\n- **Near Black** (`#0b0b0b`): Default page background and primary surface.\n- **Dark Gray** (`#212121`): Elevated surface color for cards, secondary containers, input backgrounds, and subtle layering above the base canvas.\n- **Medium Dark** (`#353535`): Tertiary surface and border color for creating depth between dark layers.\n- **Pure White** (`#ffffff`): Used for inverted sections, light-on-dark text, and specific button surfaces.\n- **Light Gray** (`#ededed`): Light surface for inverted/light sections and subtle background tints.\n\n### Neutrals & Text\n- **White** (`#ffffff`): Primary text color on dark surfaces, maximum legibility.\n- **Silver** (`#b9b9b9`): Secondary text, body copy on dark surfaces, muted descriptions, and placeholder text.\n- **Medium Gray** (`#797979`): Tertiary text, metadata, timestamps, and de-emphasized content.\n- **Charcoal** (`#212121`): Text on light/inverted surfaces.\n- **Near Black Text** (`#0b0b0b`): Primary text on white/light button surfaces.\n\n### Semantic\n- **Error Red** (`#dd0000`): Destructive actions, validation errors, and critical warnings -- a pure, high-saturation red.\n- **GPC Green** (`#37cd84`): Privacy/compliance indicator green.\n- **Focus Ring Blue** (`#0052ef`): Focus ring color for accessibility, matching the interactive blue.\n\n### Border System\n- **Dark Border** (`#0b0b0b`): Primary border on dark containers -- barely visible, maintaining minimal containment.\n- **Subtle Border** (`#212121`): Standard border for inputs, textareas, and card edges on dark surfaces.\n- **Medium Border** (`#353535`): More visible borders for emphasized containment and dividers.\n- **Light Border** (`#ffffff`): Border on inverted/light elements or buttons needing contrast separation.\n- **Orange Border** (`color(display-p3 1 0.3333 0)`): Special accent border for highlighted/featured elements.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display / Headline**: `waldenburgNormal`, fallback: `waldenburgNormal Fallback, ui-sans-serif, system-ui`\n- **Body / UI**: `waldenburgNormal`, fallback: `waldenburgNormal Fallback, ui-sans-serif, system-ui`\n- **Code / Technical**: `IBM Plex Mono`, fallback: `ibmPlexMono Fallback, ui-monospace`\n- **Fallback / CJK**: `Helvetica`, fallback: `Arial, Hiragino Sans GB, STXihei, Microsoft YaHei, WenQuanYi Micro Hei`\n\n*Note: waldenburgNormal is a custom typeface. For external implementations, use Inter or Space Grotesk as the sans substitute (geometric, slightly condensed feel). IBM Plex Mono is available on Google Fonts.*\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display / Hero | waldenburgNormal | 112px (7rem) | 400 | 1.00 (tight) | -4.48px | Maximum impact, compressed tracking |\n| Hero Secondary | waldenburgNormal | 72px (4.5rem) | 400 | 1.05 (tight) | -2.88px | Large section headers |\n| Section Heading | waldenburgNormal | 48px (3rem) | 400 | 1.08 (tight) | -1.68px | Primary section anchors |\n| Heading Large | waldenburgNormal | 38px (2.38rem) | 400 | 1.10 (tight) | -1.14px | Feature section titles |\n| Heading Medium | waldenburgNormal | 32px (2rem) | 425 | 1.24 (tight) | -0.32px | Card titles, subsection headers |\n| Heading Small | waldenburgNormal | 24px (1.5rem) | 425 | 1.24 (tight) | -0.24px | Smaller feature headings |\n| Subheading | waldenburgNormal | 20px (1.25rem) | 425 | 1.13 (tight) | -0.2px | Sub-section markers |\n| Body Large | waldenburgNormal | 18px (1.13rem) | 400 | 1.50 | -0.18px | Intro paragraphs, descriptions |\n| Body | waldenburgNormal | 16px (1rem) | 400 | 1.50 | normal | Standard body text |\n| Body Small | waldenburgNormal | 15px (0.94rem) | 400 | 1.50 | -0.15px | Compact body text |\n| Caption | waldenburgNormal | 13px (0.81rem) | 400-500 | 1.30-1.50 | -0.13px | Metadata, descriptions, tags |\n| Small Caption | waldenburgNormal | 12px (0.75rem) | 400 | 1.50 | -0.12px | Footnotes, timestamps |\n| Micro / Label | waldenburgNormal | 11px (0.69rem) | 500-600 | 1.00-1.50 | normal | Uppercase labels, tiny badges |\n| Code Body | IBM Plex Mono | 15px (0.94rem) | 400 | 1.50 | normal | Code blocks, technical content |\n| Code Caption | IBM Plex Mono | 13px (0.81rem) | 400-500 | 1.30-1.50 | normal | Inline code, small technical labels |\n| Code Micro | IBM Plex Mono | 10-12px | 400 | 1.30-1.50 | normal | Tiny code labels, uppercase tags |\n\n### Principles\n- **Extreme negative tracking at scale**: Display headings at 72px+ use aggressive negative letter-spacing (-2.88px to -4.48px), creating a tight, engineered quality that distinguishes Sanity from looser editorial typography.\n- **Single font, multiple registers**: waldenburgNormal handles both editorial display and functional UI text. The weight range is narrow (400-425 for most, 500-600 only for tiny labels), keeping the voice consistent.\n- **OpenType feature control**: Typography uses deliberate feature settings including `\"cv01\", \"cv11\", \"cv12\", \"cv13\", \"ss07\"` for display sizes and `\"calt\" 0` for body text, fine-tuning character alternates for different contexts.\n- **Tight headings, relaxed body**: Headings use 1.00-1.24 line-height (extremely tight), while body text breathes at 1.50. This contrast creates clear visual hierarchy.\n- **Uppercase for technical labels**: IBM Plex Mono captions and small labels frequently use `text-transform: uppercase` with tight line-heights, creating a \"system readout\" aesthetic for technical metadata.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary CTA (Pill)**\n- Background: Sanity Red (`#f36458`)\n- Text: White (`#ffffff`)\n- Padding: 8px 16px\n- Border Radius: 99999px (full pill)\n- Border: none\n- Hover: Electric Blue (`#0052ef`) background, white text\n- Font: 16px waldenburgNormal, weight 400\n\n**Secondary (Dark Pill)**\n- Background: Near Black (`#0b0b0b`)\n- Text: Silver (`#b9b9b9`)\n- Padding: 8px 12px\n- Border Radius: 99999px (full pill)\n- Border: none\n- Hover: Electric Blue (`#0052ef`) background, white text\n\n**Outlined (Light Pill)**\n- Background: White (`#ffffff`)\n- Text: Near Black (`#0b0b0b`)\n- Padding: 8px\n- Border Radius: 99999px (full pill)\n- Border: 1px solid `#0b0b0b`\n- Hover: Electric Blue (`#0052ef`) background, white text\n\n**Ghost / Subtle**\n- Background: Dark Gray (`#212121`)\n- Text: Silver (`#b9b9b9`)\n- Padding: 0px 12px\n- Border Radius: 5px\n- Border: 1px solid `#212121`\n- Hover: Electric Blue (`#0052ef`) background, white text\n\n**Uppercase Label Button**\n- Font: 11px waldenburgNormal, weight 600, uppercase\n- Background: transparent or `#212121`\n- Text: Silver (`#b9b9b9`)\n- Letter-spacing: normal\n- Used for tab-like navigation and filter controls\n\n### Cards\n\n**Dark Content Card**\n- Background: `#212121`\n- Border: 1px solid `#353535` or `#212121`\n- Border Radius: 6px\n- Padding: 24px\n- Text: White (`#ffffff`) for titles, Silver (`#b9b9b9`) for body\n- Hover: subtle border color shift or elevation change\n\n**Feature Card (Full-bleed)**\n- Background: `#0b0b0b` or full-bleed image/gradient\n- Border: none or 1px solid `#212121`\n- Border Radius: 12px\n- Padding: 32-48px\n- Contains large imagery with overlaid text\n\n### Inputs\n\n**Text Input / Textarea**\n- Background: Near Black (`#0b0b0b`)\n- Text: Silver (`#b9b9b9`)\n- Border: 1px solid `#212121`\n- Padding: 8px 12px\n- Border Radius: 3px\n- Focus: outline with `var(--focus-ring-color)` (blue), 2px solid\n- Focus background: shifts to deep cyan (`#072227`)\n\n**Search Input**\n- Background: `#0b0b0b`\n- Text: Silver (`#b9b9b9`)\n- Padding: 0px 12px\n- Border Radius: 3px\n- Placeholder: Medium Gray (`#797979`)\n\n### Navigation\n\n**Top Navigation**\n- Background: Near Black (`#0b0b0b`) with backdrop blur\n- Height: auto, compact padding\n- Logo: left-aligned, Sanity wordmark\n- Links: waldenburgNormal 16px, Silver (`#b9b9b9`)\n- Link Hover: Electric Blue via `--color-fg-accent-blue`\n- CTA Button: Sanity Red pill button right-aligned\n- Separator: 1px border-bottom `#212121`\n\n**Footer**\n- Background: Near Black (`#0b0b0b`)\n- Multi-column link layout\n- Links: Silver (`#b9b9b9`), hover to blue\n- Section headers: White (`#ffffff`), 13px uppercase IBM Plex Mono\n\n### Badges / Pills\n\n**Neutral Subtle**\n- Background: White (`#ffffff`)\n- Text: Near Black (`#0b0b0b`)\n- Padding: 8px\n- Font: 13px\n- Border Radius: 99999px\n\n**Neutral Filled**\n- Background: Near Black (`#0b0b0b`)\n- Text: White (`#ffffff`)\n- Padding: 8px\n- Font: 13px\n- Border Radius: 99999px\n\n## 5. Layout Principles\n\n### Spacing System\nBase unit: **8px**\n\n| Token | Value | Usage |\n|-------|-------|-------|\n| space-1 | 1px | Hairline gaps, border-like spacing |\n| space-2 | 2px | Minimal internal padding |\n| space-3 | 4px | Tight component internal spacing |\n| space-4 | 6px | Small element gaps |\n| space-5 | 8px | Base unit -- button padding, input padding, badge padding |\n| space-6 | 12px | Standard component gap, button horizontal padding |\n| space-7 | 16px | Section internal padding, card spacing |\n| space-8 | 24px | Large component padding, card internal spacing |\n| space-9 | 32px | Section padding, container gutters |\n| space-10 | 48px | Large section vertical spacing |\n| space-11 | 64px | Major section breaks |\n| space-12 | 96-120px | Hero vertical padding, maximum section spacing |\n\n### Grid & Container\n- Max content width: ~1440px (inferred from breakpoints)\n- Page gutter: 32px on desktop, 16px on mobile\n- Content sections use full-bleed backgrounds with centered, max-width content\n- Multi-column layouts: 2-3 columns on desktop, single column on mobile\n- Card grids: CSS Grid with consistent gaps (16-24px)\n\n### Whitespace Philosophy\nSanity uses aggressive vertical spacing between sections (64-120px) to create breathing room on the dark canvas. Within sections, spacing is tighter (16-32px), creating dense information clusters separated by generous voids. This rhythm gives the page a \"slides\" quality -- each section feels like its own focused frame.\n\n### Border Radius Scale\n\n| Token | Value | Usage |\n|-------|-------|-------|\n| radius-xs | 3px | Inputs, textareas, subtle rounding |\n| radius-sm | 4-5px | Secondary buttons, small cards, tags |\n| radius-md | 6px | Standard cards, containers |\n| radius-lg | 12px | Large cards, feature containers, forms |\n| radius-pill | 99999px | Primary buttons, badges, nav pills |\n\n## 6. Depth & Elevation\n\n### Shadow System\n\n| Level | Value | Usage |\n|-------|-------|-------|\n| Level 0 (Flat) | none | Default state for most elements -- dark surfaces create depth through color alone |\n| Level 1 (Subtle) | 0px 0px 0px 1px `#212121` | Border-like shadow for minimal containment without visible borders |\n| Level 2 (Focus) | 0 0 0 2px `var(--color-blue-500)` | Focus ring for inputs and interactive elements |\n| Level 3 (Overlay) | Backdrop blur + semi-transparent dark | Navigation overlay, modal backgrounds |\n\n### Depth Philosophy\nSanity's depth system is almost entirely **colorimetric** rather than shadow-based. Elevation is communicated through surface color shifts: `#0b0b0b` (ground) -> `#212121` (elevated) -> `#353535` (prominent) -> `#ffffff` (inverted/highest). This approach is native to dark interfaces where traditional drop shadows would be invisible. The few shadows that exist are ring-based (0px 0px 0px Npx) or blur-based (backdrop-filter) rather than offset shadows, maintaining the flat, precision-engineered aesthetic.\n\nBorder-based containment (1px solid `#212121` or `#353535`) serves as the primary spatial separator, with the border darkness calibrated to be visible but not dominant. The system avoids \"floating card\" aesthetics -- everything feels mounted to the surface rather than hovering above it.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use the achromatic gray scale as the foundation -- maintain pure neutral discipline with no warm/cool tinting\n- Apply Electric Blue (`#0052ef`) consistently as the universal hover/active state across all interactive elements\n- Use extreme negative letter-spacing (-2px to -4.48px) on display headings 48px and above\n- Keep primary CTAs as full-pill shapes (99999px radius) with the coral-red (`#f36458`)\n- Use IBM Plex Mono uppercase for technical labels, tags, and system metadata\n- Communicate depth through surface color (dark-to-light) rather than shadows\n- Maintain generous vertical section spacing (64-120px) on the dark canvas\n- Use `\"cv01\", \"cv11\", \"cv12\", \"cv13\", \"ss07\"` OpenType features for display typography\n\n### Don't\n- Don't introduce warm or cool color tints to the neutral scale -- Sanity's grays are pure achromatic\n- Don't use drop shadows for elevation -- dark interfaces demand colorimetric depth\n- Don't apply border-radius between 13px and 99998px -- the system jumps from 12px (large card) directly to pill (99999px)\n- Don't mix the coral-red CTA with the electric blue interactive color in the same element\n- Don't use heavy font weights (700+) -- the system maxes out at 600 and only for 11px uppercase labels\n- Don't place light text on light surfaces or dark text on dark surfaces without checking the gray-on-gray contrast ratio\n- Don't use traditional offset box-shadows -- ring shadows (0 0 0 Npx) or border-based containment only\n- Don't break the tight line-height on headings -- 1.00-1.24 is the range, never go to 1.5+ for display text\n\n## 8. Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Behavior |\n|------|-------|----------|\n| Desktop XL | >= 1640px | Full layout, maximum content width |\n| Desktop | >= 1440px | Standard desktop layout |\n| Desktop Compact | >= 1200px | Slightly condensed desktop |\n| Laptop | >= 1100px | Reduced column widths |\n| Tablet Landscape | >= 960px | 2-column layouts begin collapsing |\n| Tablet | >= 768px | Transition zone, some elements stack |\n| Mobile Large | >= 720px | Near-tablet layout |\n| Mobile | >= 480px | Single-column, stacked layout |\n| Mobile Small | >= 376px | Minimum supported width |\n\n### Collapsing Strategy\n- **Navigation**: Horizontal links collapse to hamburger menu below 768px\n- **Hero typography**: Scales from 112px -> 72px -> 48px -> 38px across breakpoints, maintaining tight letter-spacing ratios\n- **Grid layouts**: 3-column -> 2-column at ~960px, single-column below 768px\n- **Card grids**: Horizontal scrolling on mobile instead of wrapping (preserving card aspect ratios)\n- **Section spacing**: Vertical padding reduces by ~40% on mobile (120px -> 64px -> 48px)\n- **Button sizing**: CTA pills maintain padding but reduce font size; ghost buttons stay fixed\n- **Code blocks**: Horizontal scroll with preserved monospace formatting\n\n### Mobile-Specific Adjustments\n- Full-bleed sections extend edge-to-edge with 16px internal gutters\n- Touch targets: minimum 44px for all interactive elements\n- Heading letter-spacing relaxes slightly at mobile sizes (less aggressive negative tracking)\n- Image containers switch from fixed aspect ratios to full-width with auto height\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n```\nBackground:      #0b0b0b (near-black canvas)\nSurface:         #212121 (elevated cards/containers)\nBorder:          #353535 (visible) / #212121 (subtle)\nText Primary:    #ffffff (white on dark)\nText Secondary:  #b9b9b9 (silver on dark)\nText Tertiary:   #797979 (medium gray)\nCTA:             #f36458 (coral-red)\nInteractive:     #0052ef (electric blue, all hovers)\nSuccess:         #19d600 (green, sRGB fallback)\nError:           #dd0000 (pure red)\nLight Surface:   #ededed / #ffffff (inverted sections)\n```\n\n### Example Prompts\n\n**Landing page section:**\n\"Create a feature section with a near-black (#0b0b0b) background. Use a 48px heading in Inter with -1.68px letter-spacing, white text. Below it, 16px body text in #b9b9b9 with 1.50 line-height. Include a coral-red (#f36458) pill button with white text and a secondary dark (#0b0b0b) pill button with #b9b9b9 text. Both buttons hover to #0052ef blue.\"\n\n**Card grid:**\n\"Build a 3-column card grid on a #0b0b0b background. Each card has a #212121 surface, 1px solid #353535 border, 6px border-radius, and 24px padding. Card titles are 24px white with -0.24px letter-spacing. Body text is 13px #b9b9b9. Add a 13px IBM Plex Mono uppercase tag in #797979 at the top of each card.\"\n\n**Form section:**\n\"Design a contact form on a #0b0b0b background. Inputs have #0b0b0b background, 1px solid #212121 border, 3px border-radius, 8px 12px padding, and #b9b9b9 placeholder text. Focus state shows a 2px blue (#0052ef) ring. Submit button is a full-width coral-red (#f36458) pill. Include a 13px #797979 helper text below each field.\"\n\n**Navigation bar:**\n\"Create a sticky top navigation on #0b0b0b with backdrop blur. Left: brand text in 15px white. Center/right: nav links in 16px #b9b9b9 that hover to blue. Far right: a coral-red (#f36458) pill CTA button. Bottom border: 1px solid #212121.\"\n\n### Iteration Guide\n1. **Start dark**: Begin with `#0b0b0b` background, `#ffffff` primary text, `#b9b9b9` secondary text\n2. **Add structure**: Use `#212121` surfaces and `#353535` borders for containment -- no shadows\n3. **Apply typography**: Inter (or Space Grotesk) with tight letter-spacing on headings, 1.50 line-height on body\n4. **Color punctuation**: Add `#f36458` for CTAs and `#0052ef` for all hover/interactive states\n5. **Refine spacing**: 8px base unit, 24-32px within sections, 64-120px between sections\n6. **Technical details**: Add IBM Plex Mono uppercase labels for tags and metadata\n7. **Polish**: Ensure all interactive elements hover to `#0052ef`, all buttons are pills or subtle 5px radius, borders are hairline (1px)\n";
+
+export { sanityBrief };