@hex-core/themes 0.1.1 → 0.2.1

package/dist/presets/_briefs/slack.js

@@ -0,0 +1,221 @@
+// src/presets/_briefs/slack.ts
+var slackBrief = `# Design System Inspired by Slack
+
+## 1. Visual Theme & Atmosphere
+
+Slack's marketing website is a confident, enterprise-friendly showcase that balances Salesforce's corporate muscle with Slack's original playful personality. The design operates on a white canvas with deep aubergine purple (\`#481a54\`, \`#4a154b\`) as the signature brand color \u2014 a rich, wine-dark hue that distinguishes Slack from every blue-dominated enterprise tool. Product screenshots and animated UI demos punctuate the white space, creating a "see it in action" experience.
+
+The typography reflects Slack's acquisition by Salesforce: Salesforce-Avant-Garde handles display headings at massive scale (64px, weight 700) with negative letter-spacing (-0.768px), while Salesforce-Sans serves as the UI/body workhorse. Both fonts carry Salesforce's geometric precision but retain enough warmth to feel approachable. Uppercase button labels with positive letter-spacing (0.8px\u20130.96px) create a systematic, enterprise-label voice.
+
+What makes Slack distinctive is its hover behavior: buttons transition from a soft lavender (\`#f9f0ff\`) to deep aubergine (\`#4a154b\`) on hover with a \`translate(3px)\` shift \u2014 a playful micro-animation that retains Slack's personality within the Salesforce design language. The sidebar highlight blue (\`#1264a3\`) provides the secondary interactive accent, and the overall shadow system uses soft, wide-radius shadows (\`0px 0px 32px\` at 0.1 opacity) that create a gentle, cloud-like elevation.
+
+**Key Characteristics:**
+- Aubergine purple (\`#481a54\`, \`#4a154b\`) as singular brand color \u2014 distinctive in an ocean of blue enterprise tools
+- Salesforce-Avant-Garde for display (up to 64px, weight 700, negative tracking)
+- Salesforce-Sans for body/UI with both positive and negative letter-spacing variants
+- Soft lavender button (\`#f9f0ff\`) \u2192 aubergine hover with translate(3px) animation
+- Sidebar Blue (\`#1264a3\`) as secondary interactive accent
+- Uppercase labels with wide tracking (0.8px\u20130.96px) for enterprise structure
+- Soft, wide-radius shadows (32px blur at 0.1 opacity) \u2014 cloud-like elevation
+- Purple inset ring (\`rgb(97,31,105) 0px 0px 0px 1px inset\`) for active states
+
+## 2. Color Palette & Roles
+
+### Primary Brand
+- **Aubergine** (\`#481a54\`): Deep purple brand color \u2014 hero backgrounds, dark sections
+- **Aubergine Dark** (\`#4a154b\`): Button hover, slightly different shade for depth
+- **Aubergine Link** (\`#611f69\`): Purple link text variant
+
+### Interactive
+- **Sidebar Blue** (\`#1264a3\`): \`--sidebar-highlight-color\`, active states, focus borders
+- **Hover Blue** (\`#3860be\`): All link hover states transition to this blue
+- **Lavender Surface** (\`#f9f0ff\`): Primary button background \u2014 soft, inviting purple tint
+- **Purple Border** (\`#592466\`): Button borders on purple context
+- **Purple Inset** (\`rgb(97, 31, 105)\`): Inset ring shadow for active/focus
+
+### Text
+- **White** (\`#ffffff\`): Primary text on dark/purple surfaces
+- **Near Black** (\`#1d1d1d\`): Primary text on light surfaces
+- **Black** (\`#000000\`): Secondary, attachment color
+- **Mid Gray** (\`#696969\`): Muted text, secondary descriptions
+
+### Shadows
+- **Soft Wide** (\`rgba(0,0,0,0.1) 0px 0px 32px\`): Primary card elevation \u2014 cloud-like
+- **Button Lift** (\`rgba(0,0,0,0.1) 0px 5px 20px\`): Button default shadow
+- **Subtle** (\`rgba(0,0,0,0.2) 0px 1px 10px\`): Light elevation
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: \`Salesforce-Avant-Garde\`, fallbacks: \`system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans\`
+- **Body / UI**: \`Salesforce-Sans\`, same fallback stack
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | SF-Avant-Garde | 64px (4.00rem) | 700 | 1.12 (tight) | -0.768px | Maximum impact |
+| Display Secondary | SF-Avant-Garde | 58px (3.63rem) | 600 | 1.25 (tight) | -0.464px | Sub-hero |
+| Section Heading | SF-Avant-Garde | 50px (3.13rem) | 700 | 1.12 (tight) | -0.6px | Feature sections |
+| Sub-heading | SF-Avant-Garde | 32px (2.00rem) | 700 | 1.25 (tight) | -0.256px | Card headings |
+| Card Title | SF-Avant-Garde | 24px (1.50rem) | 700 | 1.33 | -0.096px | Smaller headings |
+| Feature Label | SF-Avant-Garde | 18px (1.13rem) | 600 | 1.56 | -0.0216px | Feature emphasis |
+| Body Bold | Salesforce-Sans | 18px (1.13rem) | 700 | 1.55\u20131.67 | -0.072px | Strong body |
+| Body | Salesforce-Sans | 18px (1.13rem) | 400 | 1.55 | -0.0216px | Standard reading |
+| Body Light | Salesforce-Sans | 18px (1.13rem) | 300 | \u2014 | \u2014 | Light variant |
+| Button Large | SF-Avant-Garde / SF-Sans | 18px (1.13rem) | 700 | \u2014 | \u2014 | Primary CTA |
+| Button | Salesforce-Sans | 16px (1.00rem) | 700 | 1.38 | 0.2px | Standard button |
+| Nav Bold | Salesforce-Sans | 15px (0.94rem) | 700 | 1.55 | -0.0216px | Navigation |
+| Caption | Salesforce-Sans | 14px (0.88rem) | 400\u2013700 | 1.30\u20131.55 | 0.1px | Metadata |
+| Uppercase Label | Salesforce-Sans | 14px (0.88rem) | 700 | 1.29 (tight) | 0.798px | \`text-transform: uppercase\` |
+| Uppercase Small | Salesforce-Sans | 12px (0.75rem) | 700 | 1.00 (tight) | 0.96px | \`text-transform: uppercase\` |
+
+### Principles
+- **Dual-font Salesforce system**: Avant-Garde for display authority, Sans for body reliability. The enterprise weight of Salesforce's type system gives Slack corporate credibility.
+- **Negative tracking on display**: -0.256px to -0.768px on headings creates compressed, impactful titles.
+- **Positive tracking on labels**: +0.2px to +0.96px on uppercase labels creates the structured enterprise labeling system.
+- **Weight 700 dominant for headings**: Both fonts use bold as the primary heading weight \u2014 confident, not subtle.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Lavender**
+- Background: \`#f9f0ff\` (soft lavender)
+- Text: \`#000000\`
+- Padding: 10px 30px
+- Shadow: \`rgba(0,0,0,0.1) 0px 5px 20px\`
+- Hover: background \`#4a154b\` (aubergine), text white, border \`2px solid #1264a3\`, translate(3px)
+- Active: text \`#1264a3\`, inset ring \`rgb(255,255,255) 0px 0px 0px 2px inset\`, dotted outline \`#611f69\`
+- The signature button \u2014 lavender to aubergine on hover
+
+**Pill Button (90px radius)**
+- Salesforce-Sans 16px weight 700
+- Various background treatments
+- 90px radius creates large pill shape
+
+**Uppercase Small**
+- Salesforce-Sans 12px weight 700
+- \`text-transform: uppercase\`
+- Letter-spacing: 0.96px
+- 4px radius
+
+### Cards & Containers
+- Background: white
+- Radius: 16px (cards), 48px (large panels)
+- Shadow: \`rgba(0,0,0,0.1) 0px 0px 32px\` (soft, wide)
+- Border: \`1px solid rgba(0,0,0,0.04)\` (ultra-subtle)
+- Product screenshots as primary card content
+
+### Navigation
+- Dark aubergine header or white header
+- Salesforce-Sans 15px weight 700 for nav links
+- Slack/Salesforce logo left-aligned
+- Lavender CTA button right-aligned
+- Mobile: hamburger with 4px radius toggle
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 4px, 5px, 6px, 8px, 10px, 12px, 16px, 19px, 20px, 23px, 24px, 28px
+
+### Grid & Container
+- Centered content with generous max-width
+- Product demo sections with screenshots
+- Stat counter sections with large numbers
+- Trust bar with company logos
+- Full-width aubergine footer
+
+### Whitespace Philosophy
+- **Enterprise generosity**: Wide spacing between sections creates a professional, unhurried pace that communicates stability.
+- **Demo-forward**: Product screenshots and UI demos get generous space to breathe.
+
+### Border Radius Scale
+- Minimal (2px): Close buttons, small utility
+- Subtle (4px): Standard buttons, search
+- Standard (8px): List items, video containers
+- Comfortable (12px): Video, medium panels
+- Card (16px): Feature cards, navigation
+- Large (48px): Hero panels, large containers
+- Pill (90px): Primary CTA buttons
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Default surfaces |
+| Soft Wide (Level 1) | \`rgba(0,0,0,0.1) 0px 0px 32px\` | Cards, demo panels |
+| Button (Level 2) | \`rgba(0,0,0,0.1) 0px 5px 20px\` | CTA buttons |
+| Subtle (Level 3) | \`rgba(0,0,0,0.2) 0px 1px 10px\` | Dropdowns |
+| Purple Inset | \`rgb(97,31,105) 0px 0px 0px 1px inset\` | Active state ring |
+
+**Shadow Philosophy**: Slack uses notably wide-radius shadows (32px blur) at low opacity (0.1), creating a cloud-like floating quality. Elements don't appear elevated \u2014 they appear to gently hover, reflecting the "Slack is where work happens in the cloud" metaphor.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use aubergine (\`#481a54\` / \`#4a154b\`) as the primary brand color \u2014 it's Slack's identity
+- Apply the lavender-to-aubergine hover transition on primary buttons
+- Use Salesforce-Avant-Garde for display headings only, Salesforce-Sans for everything else
+- Apply uppercase + positive letter-spacing (0.8px\u20130.96px) for labels and small buttons
+- Use wide-radius shadows (32px blur) for cloud-like elevation
+- Include the translate(3px) hover animation on buttons
+- Use Sidebar Blue (\`#1264a3\`) for secondary interactive accents
+
+### Don't
+- Don't use standard blue as the primary brand color \u2014 aubergine is non-negotiable
+- Don't skip the hover animation (translate + color shift) on primary buttons
+- Don't use heavy/sharp shadows \u2014 Slack's elevation is soft and wide
+- Don't apply negative letter-spacing to button labels \u2014 buttons use positive tracking
+- Don't use aubergine as body text color \u2014 it's for surfaces and dark sections
+- Don't mix Avant-Garde into body text \u2014 it's display-only
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <479px | Single column, hamburger nav |
+| Mobile Large | 479\u2013768px | Slight adjustments |
+| Tablet | 768\u20131024px | 2-column layouts begin |
+| Desktop | 1024\u20131280px | Standard desktop layout |
+| Large Desktop | 1280\u20131440px | Expanded |
+| Ultra-wide | >1440px | Maximum width |
+
+### Collapsing Strategy
+- Hero: 64px \u2192 50px \u2192 scales down
+- Navigation: horizontal \u2192 hamburger (4px radius toggle)
+- Feature sections: side-by-side \u2192 stacked
+- Stats: horizontal counters \u2192 vertical
+- Buttons: maintain pill shape, full-width on mobile
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand: Aubergine (\`#481a54\`)
+- Button: Lavender (\`#f9f0ff\`)
+- Button hover: Aubergine Dark (\`#4a154b\`)
+- Interactive: Sidebar Blue (\`#1264a3\`)
+- Text light: White (\`#ffffff\`)
+- Text dark: Near Black (\`#1d1d1d\`)
+- Muted: Mid Gray (\`#696969\`)
+
+### Example Component Prompts
+- "Create a hero: white background. Headline at 64px Salesforce-Avant-Garde weight 700, line-height 1.12, letter-spacing -0.768px, black text. Lavender CTA button (#f9f0ff, 10px 30px padding, shadow rgba(0,0,0,0.1) 0px 5px 20px). On hover: aubergine (#4a154b) background, white text, translate(3px)."
+- "Design an aubergine section: #481a54 background. White text at 32px SF-Avant-Garde weight 700. Stat counters at 50px weight 700."
+- "Build uppercase label: 12px Salesforce-Sans weight 700, text-transform uppercase, letter-spacing 0.96px."
+- "Create a card: white background, 16px radius, shadow rgba(0,0,0,0.1) 0px 0px 32px. Product screenshot inside."
+
+### Iteration Guide
+1. Aubergine purple is the signature \u2014 every design should include it somewhere
+2. Lavender (#f9f0ff) buttons with aubergine hover = the Slack interaction
+3. Salesforce-Avant-Garde for display, Salesforce-Sans for body \u2014 strict split
+4. Uppercase + positive tracking for labels and small buttons
+5. Soft wide shadows (32px blur) for the cloud-floating quality
+6. translate(3px) on hover for playful enterprise personality
+`;
+export {
+  slackBrief
+};
+//# sourceMappingURL=slack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/slack.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const slackBrief = `# Design System Inspired by Slack\n\n## 1. Visual Theme & Atmosphere\n\nSlack's marketing website is a confident, enterprise-friendly showcase that balances Salesforce's corporate muscle with Slack's original playful personality. The design operates on a white canvas with deep aubergine purple (\\`#481a54\\`, \\`#4a154b\\`) as the signature brand color — a rich, wine-dark hue that distinguishes Slack from every blue-dominated enterprise tool. Product screenshots and animated UI demos punctuate the white space, creating a \"see it in action\" experience.\n\nThe typography reflects Slack's acquisition by Salesforce: Salesforce-Avant-Garde handles display headings at massive scale (64px, weight 700) with negative letter-spacing (-0.768px), while Salesforce-Sans serves as the UI/body workhorse. Both fonts carry Salesforce's geometric precision but retain enough warmth to feel approachable. Uppercase button labels with positive letter-spacing (0.8px–0.96px) create a systematic, enterprise-label voice.\n\nWhat makes Slack distinctive is its hover behavior: buttons transition from a soft lavender (\\`#f9f0ff\\`) to deep aubergine (\\`#4a154b\\`) on hover with a \\`translate(3px)\\` shift — a playful micro-animation that retains Slack's personality within the Salesforce design language. The sidebar highlight blue (\\`#1264a3\\`) provides the secondary interactive accent, and the overall shadow system uses soft, wide-radius shadows (\\`0px 0px 32px\\` at 0.1 opacity) that create a gentle, cloud-like elevation.\n\n**Key Characteristics:**\n- Aubergine purple (\\`#481a54\\`, \\`#4a154b\\`) as singular brand color — distinctive in an ocean of blue enterprise tools\n- Salesforce-Avant-Garde for display (up to 64px, weight 700, negative tracking)\n- Salesforce-Sans for body/UI with both positive and negative letter-spacing variants\n- Soft lavender button (\\`#f9f0ff\\`) → aubergine hover with translate(3px) animation\n- Sidebar Blue (\\`#1264a3\\`) as secondary interactive accent\n- Uppercase labels with wide tracking (0.8px–0.96px) for enterprise structure\n- Soft, wide-radius shadows (32px blur at 0.1 opacity) — cloud-like elevation\n- Purple inset ring (\\`rgb(97,31,105) 0px 0px 0px 1px inset\\`) for active states\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Aubergine** (\\`#481a54\\`): Deep purple brand color — hero backgrounds, dark sections\n- **Aubergine Dark** (\\`#4a154b\\`): Button hover, slightly different shade for depth\n- **Aubergine Link** (\\`#611f69\\`): Purple link text variant\n\n### Interactive\n- **Sidebar Blue** (\\`#1264a3\\`): \\`--sidebar-highlight-color\\`, active states, focus borders\n- **Hover Blue** (\\`#3860be\\`): All link hover states transition to this blue\n- **Lavender Surface** (\\`#f9f0ff\\`): Primary button background — soft, inviting purple tint\n- **Purple Border** (\\`#592466\\`): Button borders on purple context\n- **Purple Inset** (\\`rgb(97, 31, 105)\\`): Inset ring shadow for active/focus\n\n### Text\n- **White** (\\`#ffffff\\`): Primary text on dark/purple surfaces\n- **Near Black** (\\`#1d1d1d\\`): Primary text on light surfaces\n- **Black** (\\`#000000\\`): Secondary, attachment color\n- **Mid Gray** (\\`#696969\\`): Muted text, secondary descriptions\n\n### Shadows\n- **Soft Wide** (\\`rgba(0,0,0,0.1) 0px 0px 32px\\`): Primary card elevation — cloud-like\n- **Button Lift** (\\`rgba(0,0,0,0.1) 0px 5px 20px\\`): Button default shadow\n- **Subtle** (\\`rgba(0,0,0,0.2) 0px 1px 10px\\`): Light elevation\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: \\`Salesforce-Avant-Garde\\`, fallbacks: \\`system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans\\`\n- **Body / UI**: \\`Salesforce-Sans\\`, same fallback stack\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | SF-Avant-Garde | 64px (4.00rem) | 700 | 1.12 (tight) | -0.768px | Maximum impact |\n| Display Secondary | SF-Avant-Garde | 58px (3.63rem) | 600 | 1.25 (tight) | -0.464px | Sub-hero |\n| Section Heading | SF-Avant-Garde | 50px (3.13rem) | 700 | 1.12 (tight) | -0.6px | Feature sections |\n| Sub-heading | SF-Avant-Garde | 32px (2.00rem) | 700 | 1.25 (tight) | -0.256px | Card headings |\n| Card Title | SF-Avant-Garde | 24px (1.50rem) | 700 | 1.33 | -0.096px | Smaller headings |\n| Feature Label | SF-Avant-Garde | 18px (1.13rem) | 600 | 1.56 | -0.0216px | Feature emphasis |\n| Body Bold | Salesforce-Sans | 18px (1.13rem) | 700 | 1.55–1.67 | -0.072px | Strong body |\n| Body | Salesforce-Sans | 18px (1.13rem) | 400 | 1.55 | -0.0216px | Standard reading |\n| Body Light | Salesforce-Sans | 18px (1.13rem) | 300 | — | — | Light variant |\n| Button Large | SF-Avant-Garde / SF-Sans | 18px (1.13rem) | 700 | — | — | Primary CTA |\n| Button | Salesforce-Sans | 16px (1.00rem) | 700 | 1.38 | 0.2px | Standard button |\n| Nav Bold | Salesforce-Sans | 15px (0.94rem) | 700 | 1.55 | -0.0216px | Navigation |\n| Caption | Salesforce-Sans | 14px (0.88rem) | 400–700 | 1.30–1.55 | 0.1px | Metadata |\n| Uppercase Label | Salesforce-Sans | 14px (0.88rem) | 700 | 1.29 (tight) | 0.798px | \\`text-transform: uppercase\\` |\n| Uppercase Small | Salesforce-Sans | 12px (0.75rem) | 700 | 1.00 (tight) | 0.96px | \\`text-transform: uppercase\\` |\n\n### Principles\n- **Dual-font Salesforce system**: Avant-Garde for display authority, Sans for body reliability. The enterprise weight of Salesforce's type system gives Slack corporate credibility.\n- **Negative tracking on display**: -0.256px to -0.768px on headings creates compressed, impactful titles.\n- **Positive tracking on labels**: +0.2px to +0.96px on uppercase labels creates the structured enterprise labeling system.\n- **Weight 700 dominant for headings**: Both fonts use bold as the primary heading weight — confident, not subtle.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Lavender**\n- Background: \\`#f9f0ff\\` (soft lavender)\n- Text: \\`#000000\\`\n- Padding: 10px 30px\n- Shadow: \\`rgba(0,0,0,0.1) 0px 5px 20px\\`\n- Hover: background \\`#4a154b\\` (aubergine), text white, border \\`2px solid #1264a3\\`, translate(3px)\n- Active: text \\`#1264a3\\`, inset ring \\`rgb(255,255,255) 0px 0px 0px 2px inset\\`, dotted outline \\`#611f69\\`\n- The signature button — lavender to aubergine on hover\n\n**Pill Button (90px radius)**\n- Salesforce-Sans 16px weight 700\n- Various background treatments\n- 90px radius creates large pill shape\n\n**Uppercase Small**\n- Salesforce-Sans 12px weight 700\n- \\`text-transform: uppercase\\`\n- Letter-spacing: 0.96px\n- 4px radius\n\n### Cards & Containers\n- Background: white\n- Radius: 16px (cards), 48px (large panels)\n- Shadow: \\`rgba(0,0,0,0.1) 0px 0px 32px\\` (soft, wide)\n- Border: \\`1px solid rgba(0,0,0,0.04)\\` (ultra-subtle)\n- Product screenshots as primary card content\n\n### Navigation\n- Dark aubergine header or white header\n- Salesforce-Sans 15px weight 700 for nav links\n- Slack/Salesforce logo left-aligned\n- Lavender CTA button right-aligned\n- Mobile: hamburger with 4px radius toggle\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 5px, 6px, 8px, 10px, 12px, 16px, 19px, 20px, 23px, 24px, 28px\n\n### Grid & Container\n- Centered content with generous max-width\n- Product demo sections with screenshots\n- Stat counter sections with large numbers\n- Trust bar with company logos\n- Full-width aubergine footer\n\n### Whitespace Philosophy\n- **Enterprise generosity**: Wide spacing between sections creates a professional, unhurried pace that communicates stability.\n- **Demo-forward**: Product screenshots and UI demos get generous space to breathe.\n\n### Border Radius Scale\n- Minimal (2px): Close buttons, small utility\n- Subtle (4px): Standard buttons, search\n- Standard (8px): List items, video containers\n- Comfortable (12px): Video, medium panels\n- Card (16px): Feature cards, navigation\n- Large (48px): Hero panels, large containers\n- Pill (90px): Primary CTA buttons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default surfaces |\n| Soft Wide (Level 1) | \\`rgba(0,0,0,0.1) 0px 0px 32px\\` | Cards, demo panels |\n| Button (Level 2) | \\`rgba(0,0,0,0.1) 0px 5px 20px\\` | CTA buttons |\n| Subtle (Level 3) | \\`rgba(0,0,0,0.2) 0px 1px 10px\\` | Dropdowns |\n| Purple Inset | \\`rgb(97,31,105) 0px 0px 0px 1px inset\\` | Active state ring |\n\n**Shadow Philosophy**: Slack uses notably wide-radius shadows (32px blur) at low opacity (0.1), creating a cloud-like floating quality. Elements don't appear elevated — they appear to gently hover, reflecting the \"Slack is where work happens in the cloud\" metaphor.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use aubergine (\\`#481a54\\` / \\`#4a154b\\`) as the primary brand color — it's Slack's identity\n- Apply the lavender-to-aubergine hover transition on primary buttons\n- Use Salesforce-Avant-Garde for display headings only, Salesforce-Sans for everything else\n- Apply uppercase + positive letter-spacing (0.8px–0.96px) for labels and small buttons\n- Use wide-radius shadows (32px blur) for cloud-like elevation\n- Include the translate(3px) hover animation on buttons\n- Use Sidebar Blue (\\`#1264a3\\`) for secondary interactive accents\n\n### Don't\n- Don't use standard blue as the primary brand color — aubergine is non-negotiable\n- Don't skip the hover animation (translate + color shift) on primary buttons\n- Don't use heavy/sharp shadows — Slack's elevation is soft and wide\n- Don't apply negative letter-spacing to button labels — buttons use positive tracking\n- Don't use aubergine as body text color — it's for surfaces and dark sections\n- Don't mix Avant-Garde into body text — it's display-only\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <479px | Single column, hamburger nav |\n| Mobile Large | 479–768px | Slight adjustments |\n| Tablet | 768–1024px | 2-column layouts begin |\n| Desktop | 1024–1280px | Standard desktop layout |\n| Large Desktop | 1280–1440px | Expanded |\n| Ultra-wide | >1440px | Maximum width |\n\n### Collapsing Strategy\n- Hero: 64px → 50px → scales down\n- Navigation: horizontal → hamburger (4px radius toggle)\n- Feature sections: side-by-side → stacked\n- Stats: horizontal counters → vertical\n- Buttons: maintain pill shape, full-width on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand: Aubergine (\\`#481a54\\`)\n- Button: Lavender (\\`#f9f0ff\\`)\n- Button hover: Aubergine Dark (\\`#4a154b\\`)\n- Interactive: Sidebar Blue (\\`#1264a3\\`)\n- Text light: White (\\`#ffffff\\`)\n- Text dark: Near Black (\\`#1d1d1d\\`)\n- Muted: Mid Gray (\\`#696969\\`)\n\n### Example Component Prompts\n- \"Create a hero: white background. Headline at 64px Salesforce-Avant-Garde weight 700, line-height 1.12, letter-spacing -0.768px, black text. Lavender CTA button (#f9f0ff, 10px 30px padding, shadow rgba(0,0,0,0.1) 0px 5px 20px). On hover: aubergine (#4a154b) background, white text, translate(3px).\"\n- \"Design an aubergine section: #481a54 background. White text at 32px SF-Avant-Garde weight 700. Stat counters at 50px weight 700.\"\n- \"Build uppercase label: 12px Salesforce-Sans weight 700, text-transform uppercase, letter-spacing 0.96px.\"\n- \"Create a card: white background, 16px radius, shadow rgba(0,0,0,0.1) 0px 0px 32px. Product screenshot inside.\"\n\n### Iteration Guide\n1. Aubergine purple is the signature — every design should include it somewhere\n2. Lavender (#f9f0ff) buttons with aubergine hover = the Slack interaction\n3. Salesforce-Avant-Garde for display, Salesforce-Sans for body — strict split\n4. Uppercase + positive tracking for labels and small buttons\n5. Soft wide shadows (32px blur) for the cloud-floating quality\n6. translate(3px) on hover for playful enterprise personality\n`;\n"],"mappings":";AACO,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/presets/_briefs/spacex.d.ts

@@ -0,0 +1,3 @@
+declare const spacexBrief = "# Design System Inspired by SpaceX\n\n## 1. Visual Theme & Atmosphere\n\nSpaceX's website is a full-screen cinematic experience that treats aerospace engineering like a film \u2014 every section is a scene, every photograph is a frame, and the interface disappears entirely behind the imagery. The design is pure black (`#000000`) with photography of rockets, space, and planets occupying 100% of the viewport. Text overlays sit directly on these photographs with no background panels, cards, or containers \u2014 just type on image, bold and unapologetic.\n\nThe typography system uses D-DIN, an industrial geometric typeface with DIN heritage (the German industrial standard). The defining characteristic is that virtually ALL text is uppercase with positive letter-spacing (0.96px\u20131.17px), creating a military/aerospace labeling system where every word feels stenciled onto a spacecraft hull. D-DIN-Bold at 48px with uppercase and 0.96px tracking for the hero creates headlines that feel like mission briefing titles. Even body text at 16px maintains the uppercase/tracked treatment at smaller scales.\n\nWhat makes SpaceX distinctive is its radical minimalism: no shadows, no borders (except one ghost button border at `rgba(240,240,250,0.35)`), no color (only black and a spectral near-white `#f0f0fa`), no cards, no grids. The only visual element is photography + text. The ghost button with `rgba(240,240,250,0.1)` background and 32px radius is the sole interactive element \u2014 barely visible, floating over the imagery like a heads-up display. This isn't a design system in the traditional sense \u2014 it's a photographic exhibition with a type system and a single button.\n\n**Key Characteristics:**\n- Pure black canvas with full-viewport cinematic photography \u2014 the interface is invisible\n- D-DIN / D-DIN-Bold \u2014 industrial DIN-heritage typeface\n- Universal uppercase + positive letter-spacing (0.96px\u20131.17px) \u2014 aerospace stencil aesthetic\n- Near-white spectral text (`#f0f0fa`) \u2014 not pure white, a slight blue-violet tint\n- Zero shadows, zero cards, zero containers \u2014 text on image only\n- Single ghost button: `rgba(240,240,250,0.1)` background with spectral border\n- Full-viewport sections \u2014 each section is a cinematic \"scene\"\n- No decorative elements \u2014 every pixel serves the photography\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Space Black** (`#000000`): Page background, the void of space \u2014 at 50% opacity for overlay gradient\n- **Spectral White** (`#f0f0fa`): Text color \u2014 not pure white, a slight blue-violet tint that mimics starlight\n\n### Interactive\n- **Ghost Surface** (`rgba(240, 240, 250, 0.1)`): Button background \u2014 nearly invisible, 10% opacity\n- **Ghost Border** (`rgba(240, 240, 250, 0.35)`): Button border \u2014 spectral, 35% opacity\n- **Hover White** (`var(--white-100)`): Link hover state \u2014 full spectral white\n\n### Gradient\n- **Dark Overlay** (`rgba(0, 0, 0, 0.5)`): Gradient overlay on photographs to ensure text legibility\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `D-DIN-Bold` \u2014 bold industrial geometric\n- **Body / UI**: `D-DIN`, fallbacks: `Arial, Verdana`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | D-DIN-Bold | 48px (3.00rem) | 700 | 1.00 (tight) | 0.96px | `text-transform: uppercase` |\n| Body | D-DIN | 16px (1.00rem) | 400 | 1.50\u20131.70 | normal | Standard reading text |\n| Nav Link Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | `text-transform: uppercase` |\n| Nav Link | D-DIN | 12px (0.75rem) | 400 | 2.00 (relaxed) | normal | `text-transform: uppercase` |\n| Caption Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | `text-transform: uppercase` |\n| Caption | D-DIN | 12px (0.75rem) | 400 | 1.00 (tight) | normal | `text-transform: uppercase` |\n| Micro | D-DIN | 10px (0.63rem) | 400 | 0.94 (tight) | 1px | `text-transform: uppercase` |\n\n### Principles\n- **Universal uppercase**: Nearly every text element uses `text-transform: uppercase`. This creates a systematic military/aerospace voice where all communication feels like official documentation.\n- **Positive letter-spacing as identity**: 0.96px on display, 1.17px on nav \u2014 the wide tracking creates the stenciled, industrial feel that connects to DIN's heritage as a German engineering standard.\n- **Two weights, strict hierarchy**: D-DIN-Bold (700) for headlines and nav emphasis, D-DIN (400) for body. No medium or semibold weights exist in the system.\n- **Tight line-heights**: 0.94\u20131.00 across most text \u2014 compressed, efficient, mission-critical communication.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Ghost Button**\n- Background: `rgba(240, 240, 250, 0.1)` (barely visible)\n- Text: Spectral White (`#f0f0fa`)\n- Padding: 18px\n- Radius: 32px\n- Border: `1px solid rgba(240, 240, 250, 0.35)`\n- Hover: background brightens, text to `var(--white-100)`\n- Use: The only button variant \u2014 \"LEARN MORE\" CTAs on photography\n\n### Cards & Containers\n- **None.** SpaceX does not use cards, panels, or containers. All content is text directly on full-viewport photographs. The absence of containers IS the design.\n\n### Inputs & Forms\n- Not present on the homepage. The site is purely presentational.\n\n### Navigation\n- Transparent overlay nav on photography\n- D-DIN 13px weight 700, uppercase, 1.17px tracking\n- Spectral white text on dark imagery\n- Logo: SpaceX wordmark at 147x19px\n- Mobile: hamburger collapse\n\n### Image Treatment\n- Full-viewport (100vh) photography sections\n- Professional aerospace photography: rockets, Mars, space\n- Dark gradient overlays (`rgba(0,0,0,0.5)`) for text legibility\n- Each section = one full-screen photograph with text overlay\n- No border radius, no frames \u2014 edge-to-edge imagery\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 3px, 5px, 12px, 15px, 18px, 20px, 24px, 30px\n- Minimal scale \u2014 spacing is not the organizing principle; photography is\n\n### Grid & Container\n- No traditional grid \u2014 each section is a full-viewport cinematic frame\n- Text is positioned absolutely or with generous padding over imagery\n- Left-aligned text blocks on photography backgrounds\n- No max-width container \u2014 content bleeds to viewport edges\n\n### Whitespace Philosophy\n- **Photography IS the whitespace**: Empty space in the design is never empty \u2014 it's filled with the dark expanse of space, the curve of a planet, or the flame of a rocket engine. Traditional whitespace concepts don't apply.\n- **Vertical pacing through viewport**: Each section is exactly one viewport tall, creating a rhythmic scroll where each \"page\" reveals a new scene.\n\n### Border Radius Scale\n- Sharp (4px): Small dividers, utility elements\n- Button (32px): Ghost buttons \u2014 the only rounded element\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Photography (Level 0) | Full-viewport imagery | Background layer \u2014 always present |\n| Overlay (Level 1) | `rgba(0, 0, 0, 0.5)` gradient | Text legibility layer over photography |\n| Text (Level 2) | Spectral white text, no shadow | Content layer \u2014 text floats directly on image |\n| Ghost (Level 3) | `rgba(240, 240, 250, 0.1)` surface | Barely-visible interactive layer |\n\n**Shadow Philosophy**: SpaceX uses ZERO shadows. In a design built entirely on photography, shadows are meaningless \u2014 every surface is already a photograph with natural lighting. Depth comes from the photographic content itself: the receding curvature of Earth, the diminishing trail of a rocket, the atmospheric haze around Mars.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use full-viewport photography as the primary design element \u2014 every section is a scene\n- Apply uppercase + positive letter-spacing to ALL text \u2014 the aerospace stencil voice\n- Use D-DIN exclusively \u2014 no other fonts exist in the system\n- Keep the color palette to black + spectral white (`#f0f0fa`) only\n- Use ghost buttons (`rgba(240,240,250,0.1)`) as the sole interactive element\n- Apply dark gradient overlays for text legibility on photographs\n- Let photography carry the emotional weight \u2014 the type system is functional, not expressive\n\n### Don't\n- Don't add cards, panels, or containers \u2014 text sits directly on photography\n- Don't use shadows \u2014 they have no meaning in a photographic context\n- Don't introduce colors \u2014 the palette is strictly achromatic with spectral tint\n- Don't use sentence case \u2014 everything is uppercase\n- Don't use negative letter-spacing \u2014 all tracking is positive (0.96px\u20131.17px)\n- Don't reduce photography to thumbnails \u2014 every image is full-viewport\n- Don't add decorative elements (icons, badges, dividers) \u2014 the design is photography + type + one button\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <600px | Stacked, reduced padding, smaller type |\n| Tablet Small | 600\u2013960px | Adjusted layout |\n| Tablet | 960\u20131280px | Standard scaling |\n| Desktop | 1280\u20131350px | Full layout |\n| Large Desktop | 1350\u20131500px | Expanded |\n| Ultra-wide | >1500px | Maximum viewport |\n\n### Touch Targets\n- Ghost buttons: 18px padding provides adequate touch area\n- Navigation links: uppercase with generous letter-spacing aids readability\n\n### Collapsing Strategy\n- Photography: maintains full-viewport at all sizes, content reposition\n- Hero text: 48px \u2192 scales down proportionally\n- Navigation: horizontal \u2192 hamburger\n- Text blocks: reposition but maintain overlay-on-photography pattern\n- Full-viewport sections maintained on mobile\n\n### Image Behavior\n- Edge-to-edge photography at all viewport sizes\n- Background-size: cover with center focus\n- Dark overlay gradients adapt to content position\n- No art direction changes \u2014 same photographs, responsive positioning\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Space Black (`#000000`)\n- Text: Spectral White (`#f0f0fa`)\n- Button background: Ghost (`rgba(240, 240, 250, 0.1)`)\n- Button border: Ghost Border (`rgba(240, 240, 250, 0.35)`)\n- Overlay: `rgba(0, 0, 0, 0.5)`\n\n### Example Component Prompts\n- \"Create a full-viewport hero: background-image covering 100vh, dark gradient overlay rgba(0,0,0,0.5). Headline at 48px D-DIN-Bold, uppercase, letter-spacing 0.96px, spectral white (#f0f0fa) text. Ghost CTA button: rgba(240,240,250,0.1) bg, 1px solid rgba(240,240,250,0.35) border, 32px radius, 18px padding.\"\n- \"Design a navigation: transparent over photography. D-DIN 13px weight 700, uppercase, letter-spacing 1.17px, spectral white text. SpaceX wordmark left-aligned.\"\n- \"Build a content section: full-viewport height, background photography with dark overlay. Left-aligned text block with 48px D-DIN-Bold uppercase heading, 16px D-DIN body text, and ghost button below.\"\n- \"Create a micro label: D-DIN 10px, uppercase, letter-spacing 1px, spectral white, line-height 0.94.\"\n\n### Iteration Guide\n1. Start with photography \u2014 the image IS the design\n2. All text is uppercase with positive letter-spacing \u2014 no exceptions\n3. Only two colors: black and spectral white (#f0f0fa)\n4. Ghost buttons are the only interactive element \u2014 transparent, spectral-bordered\n5. Zero shadows, zero cards, zero decorative elements\n6. Every section is full-viewport (100vh) \u2014 cinematic pacing\n";
+
+export { spacexBrief };

package/dist/presets/_briefs/spacex.js

@@ -0,0 +1,200 @@
+// src/presets/_briefs/spacex.ts
+var spacexBrief = `# Design System Inspired by SpaceX
+
+## 1. Visual Theme & Atmosphere
+
+SpaceX's website is a full-screen cinematic experience that treats aerospace engineering like a film \u2014 every section is a scene, every photograph is a frame, and the interface disappears entirely behind the imagery. The design is pure black (\`#000000\`) with photography of rockets, space, and planets occupying 100% of the viewport. Text overlays sit directly on these photographs with no background panels, cards, or containers \u2014 just type on image, bold and unapologetic.
+
+The typography system uses D-DIN, an industrial geometric typeface with DIN heritage (the German industrial standard). The defining characteristic is that virtually ALL text is uppercase with positive letter-spacing (0.96px\u20131.17px), creating a military/aerospace labeling system where every word feels stenciled onto a spacecraft hull. D-DIN-Bold at 48px with uppercase and 0.96px tracking for the hero creates headlines that feel like mission briefing titles. Even body text at 16px maintains the uppercase/tracked treatment at smaller scales.
+
+What makes SpaceX distinctive is its radical minimalism: no shadows, no borders (except one ghost button border at \`rgba(240,240,250,0.35)\`), no color (only black and a spectral near-white \`#f0f0fa\`), no cards, no grids. The only visual element is photography + text. The ghost button with \`rgba(240,240,250,0.1)\` background and 32px radius is the sole interactive element \u2014 barely visible, floating over the imagery like a heads-up display. This isn't a design system in the traditional sense \u2014 it's a photographic exhibition with a type system and a single button.
+
+**Key Characteristics:**
+- Pure black canvas with full-viewport cinematic photography \u2014 the interface is invisible
+- D-DIN / D-DIN-Bold \u2014 industrial DIN-heritage typeface
+- Universal uppercase + positive letter-spacing (0.96px\u20131.17px) \u2014 aerospace stencil aesthetic
+- Near-white spectral text (\`#f0f0fa\`) \u2014 not pure white, a slight blue-violet tint
+- Zero shadows, zero cards, zero containers \u2014 text on image only
+- Single ghost button: \`rgba(240,240,250,0.1)\` background with spectral border
+- Full-viewport sections \u2014 each section is a cinematic "scene"
+- No decorative elements \u2014 every pixel serves the photography
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Space Black** (\`#000000\`): Page background, the void of space \u2014 at 50% opacity for overlay gradient
+- **Spectral White** (\`#f0f0fa\`): Text color \u2014 not pure white, a slight blue-violet tint that mimics starlight
+
+### Interactive
+- **Ghost Surface** (\`rgba(240, 240, 250, 0.1)\`): Button background \u2014 nearly invisible, 10% opacity
+- **Ghost Border** (\`rgba(240, 240, 250, 0.35)\`): Button border \u2014 spectral, 35% opacity
+- **Hover White** (\`var(--white-100)\`): Link hover state \u2014 full spectral white
+
+### Gradient
+- **Dark Overlay** (\`rgba(0, 0, 0, 0.5)\`): Gradient overlay on photographs to ensure text legibility
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: \`D-DIN-Bold\` \u2014 bold industrial geometric
+- **Body / UI**: \`D-DIN\`, fallbacks: \`Arial, Verdana\`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | D-DIN-Bold | 48px (3.00rem) | 700 | 1.00 (tight) | 0.96px | \`text-transform: uppercase\` |
+| Body | D-DIN | 16px (1.00rem) | 400 | 1.50\u20131.70 | normal | Standard reading text |
+| Nav Link Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | \`text-transform: uppercase\` |
+| Nav Link | D-DIN | 12px (0.75rem) | 400 | 2.00 (relaxed) | normal | \`text-transform: uppercase\` |
+| Caption Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | \`text-transform: uppercase\` |
+| Caption | D-DIN | 12px (0.75rem) | 400 | 1.00 (tight) | normal | \`text-transform: uppercase\` |
+| Micro | D-DIN | 10px (0.63rem) | 400 | 0.94 (tight) | 1px | \`text-transform: uppercase\` |
+
+### Principles
+- **Universal uppercase**: Nearly every text element uses \`text-transform: uppercase\`. This creates a systematic military/aerospace voice where all communication feels like official documentation.
+- **Positive letter-spacing as identity**: 0.96px on display, 1.17px on nav \u2014 the wide tracking creates the stenciled, industrial feel that connects to DIN's heritage as a German engineering standard.
+- **Two weights, strict hierarchy**: D-DIN-Bold (700) for headlines and nav emphasis, D-DIN (400) for body. No medium or semibold weights exist in the system.
+- **Tight line-heights**: 0.94\u20131.00 across most text \u2014 compressed, efficient, mission-critical communication.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Ghost Button**
+- Background: \`rgba(240, 240, 250, 0.1)\` (barely visible)
+- Text: Spectral White (\`#f0f0fa\`)
+- Padding: 18px
+- Radius: 32px
+- Border: \`1px solid rgba(240, 240, 250, 0.35)\`
+- Hover: background brightens, text to \`var(--white-100)\`
+- Use: The only button variant \u2014 "LEARN MORE" CTAs on photography
+
+### Cards & Containers
+- **None.** SpaceX does not use cards, panels, or containers. All content is text directly on full-viewport photographs. The absence of containers IS the design.
+
+### Inputs & Forms
+- Not present on the homepage. The site is purely presentational.
+
+### Navigation
+- Transparent overlay nav on photography
+- D-DIN 13px weight 700, uppercase, 1.17px tracking
+- Spectral white text on dark imagery
+- Logo: SpaceX wordmark at 147x19px
+- Mobile: hamburger collapse
+
+### Image Treatment
+- Full-viewport (100vh) photography sections
+- Professional aerospace photography: rockets, Mars, space
+- Dark gradient overlays (\`rgba(0,0,0,0.5)\`) for text legibility
+- Each section = one full-screen photograph with text overlay
+- No border radius, no frames \u2014 edge-to-edge imagery
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 3px, 5px, 12px, 15px, 18px, 20px, 24px, 30px
+- Minimal scale \u2014 spacing is not the organizing principle; photography is
+
+### Grid & Container
+- No traditional grid \u2014 each section is a full-viewport cinematic frame
+- Text is positioned absolutely or with generous padding over imagery
+- Left-aligned text blocks on photography backgrounds
+- No max-width container \u2014 content bleeds to viewport edges
+
+### Whitespace Philosophy
+- **Photography IS the whitespace**: Empty space in the design is never empty \u2014 it's filled with the dark expanse of space, the curve of a planet, or the flame of a rocket engine. Traditional whitespace concepts don't apply.
+- **Vertical pacing through viewport**: Each section is exactly one viewport tall, creating a rhythmic scroll where each "page" reveals a new scene.
+
+### Border Radius Scale
+- Sharp (4px): Small dividers, utility elements
+- Button (32px): Ghost buttons \u2014 the only rounded element
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Photography (Level 0) | Full-viewport imagery | Background layer \u2014 always present |
+| Overlay (Level 1) | \`rgba(0, 0, 0, 0.5)\` gradient | Text legibility layer over photography |
+| Text (Level 2) | Spectral white text, no shadow | Content layer \u2014 text floats directly on image |
+| Ghost (Level 3) | \`rgba(240, 240, 250, 0.1)\` surface | Barely-visible interactive layer |
+
+**Shadow Philosophy**: SpaceX uses ZERO shadows. In a design built entirely on photography, shadows are meaningless \u2014 every surface is already a photograph with natural lighting. Depth comes from the photographic content itself: the receding curvature of Earth, the diminishing trail of a rocket, the atmospheric haze around Mars.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use full-viewport photography as the primary design element \u2014 every section is a scene
+- Apply uppercase + positive letter-spacing to ALL text \u2014 the aerospace stencil voice
+- Use D-DIN exclusively \u2014 no other fonts exist in the system
+- Keep the color palette to black + spectral white (\`#f0f0fa\`) only
+- Use ghost buttons (\`rgba(240,240,250,0.1)\`) as the sole interactive element
+- Apply dark gradient overlays for text legibility on photographs
+- Let photography carry the emotional weight \u2014 the type system is functional, not expressive
+
+### Don't
+- Don't add cards, panels, or containers \u2014 text sits directly on photography
+- Don't use shadows \u2014 they have no meaning in a photographic context
+- Don't introduce colors \u2014 the palette is strictly achromatic with spectral tint
+- Don't use sentence case \u2014 everything is uppercase
+- Don't use negative letter-spacing \u2014 all tracking is positive (0.96px\u20131.17px)
+- Don't reduce photography to thumbnails \u2014 every image is full-viewport
+- Don't add decorative elements (icons, badges, dividers) \u2014 the design is photography + type + one button
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <600px | Stacked, reduced padding, smaller type |
+| Tablet Small | 600\u2013960px | Adjusted layout |
+| Tablet | 960\u20131280px | Standard scaling |
+| Desktop | 1280\u20131350px | Full layout |
+| Large Desktop | 1350\u20131500px | Expanded |
+| Ultra-wide | >1500px | Maximum viewport |
+
+### Touch Targets
+- Ghost buttons: 18px padding provides adequate touch area
+- Navigation links: uppercase with generous letter-spacing aids readability
+
+### Collapsing Strategy
+- Photography: maintains full-viewport at all sizes, content reposition
+- Hero text: 48px \u2192 scales down proportionally
+- Navigation: horizontal \u2192 hamburger
+- Text blocks: reposition but maintain overlay-on-photography pattern
+- Full-viewport sections maintained on mobile
+
+### Image Behavior
+- Edge-to-edge photography at all viewport sizes
+- Background-size: cover with center focus
+- Dark overlay gradients adapt to content position
+- No art direction changes \u2014 same photographs, responsive positioning
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: Space Black (\`#000000\`)
+- Text: Spectral White (\`#f0f0fa\`)
+- Button background: Ghost (\`rgba(240, 240, 250, 0.1)\`)
+- Button border: Ghost Border (\`rgba(240, 240, 250, 0.35)\`)
+- Overlay: \`rgba(0, 0, 0, 0.5)\`
+
+### Example Component Prompts
+- "Create a full-viewport hero: background-image covering 100vh, dark gradient overlay rgba(0,0,0,0.5). Headline at 48px D-DIN-Bold, uppercase, letter-spacing 0.96px, spectral white (#f0f0fa) text. Ghost CTA button: rgba(240,240,250,0.1) bg, 1px solid rgba(240,240,250,0.35) border, 32px radius, 18px padding."
+- "Design a navigation: transparent over photography. D-DIN 13px weight 700, uppercase, letter-spacing 1.17px, spectral white text. SpaceX wordmark left-aligned."
+- "Build a content section: full-viewport height, background photography with dark overlay. Left-aligned text block with 48px D-DIN-Bold uppercase heading, 16px D-DIN body text, and ghost button below."
+- "Create a micro label: D-DIN 10px, uppercase, letter-spacing 1px, spectral white, line-height 0.94."
+
+### Iteration Guide
+1. Start with photography \u2014 the image IS the design
+2. All text is uppercase with positive letter-spacing \u2014 no exceptions
+3. Only two colors: black and spectral white (#f0f0fa)
+4. Ghost buttons are the only interactive element \u2014 transparent, spectral-bordered
+5. Zero shadows, zero cards, zero decorative elements
+6. Every section is full-viewport (100vh) \u2014 cinematic pacing
+`;
+export {
+  spacexBrief
+};
+//# sourceMappingURL=spacex.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/spacex.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const spacexBrief = `# Design System Inspired by SpaceX\n\n## 1. Visual Theme & Atmosphere\n\nSpaceX's website is a full-screen cinematic experience that treats aerospace engineering like a film — every section is a scene, every photograph is a frame, and the interface disappears entirely behind the imagery. The design is pure black (\\`#000000\\`) with photography of rockets, space, and planets occupying 100% of the viewport. Text overlays sit directly on these photographs with no background panels, cards, or containers — just type on image, bold and unapologetic.\n\nThe typography system uses D-DIN, an industrial geometric typeface with DIN heritage (the German industrial standard). The defining characteristic is that virtually ALL text is uppercase with positive letter-spacing (0.96px–1.17px), creating a military/aerospace labeling system where every word feels stenciled onto a spacecraft hull. D-DIN-Bold at 48px with uppercase and 0.96px tracking for the hero creates headlines that feel like mission briefing titles. Even body text at 16px maintains the uppercase/tracked treatment at smaller scales.\n\nWhat makes SpaceX distinctive is its radical minimalism: no shadows, no borders (except one ghost button border at \\`rgba(240,240,250,0.35)\\`), no color (only black and a spectral near-white \\`#f0f0fa\\`), no cards, no grids. The only visual element is photography + text. The ghost button with \\`rgba(240,240,250,0.1)\\` background and 32px radius is the sole interactive element — barely visible, floating over the imagery like a heads-up display. This isn't a design system in the traditional sense — it's a photographic exhibition with a type system and a single button.\n\n**Key Characteristics:**\n- Pure black canvas with full-viewport cinematic photography — the interface is invisible\n- D-DIN / D-DIN-Bold — industrial DIN-heritage typeface\n- Universal uppercase + positive letter-spacing (0.96px–1.17px) — aerospace stencil aesthetic\n- Near-white spectral text (\\`#f0f0fa\\`) — not pure white, a slight blue-violet tint\n- Zero shadows, zero cards, zero containers — text on image only\n- Single ghost button: \\`rgba(240,240,250,0.1)\\` background with spectral border\n- Full-viewport sections — each section is a cinematic \"scene\"\n- No decorative elements — every pixel serves the photography\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Space Black** (\\`#000000\\`): Page background, the void of space — at 50% opacity for overlay gradient\n- **Spectral White** (\\`#f0f0fa\\`): Text color — not pure white, a slight blue-violet tint that mimics starlight\n\n### Interactive\n- **Ghost Surface** (\\`rgba(240, 240, 250, 0.1)\\`): Button background — nearly invisible, 10% opacity\n- **Ghost Border** (\\`rgba(240, 240, 250, 0.35)\\`): Button border — spectral, 35% opacity\n- **Hover White** (\\`var(--white-100)\\`): Link hover state — full spectral white\n\n### Gradient\n- **Dark Overlay** (\\`rgba(0, 0, 0, 0.5)\\`): Gradient overlay on photographs to ensure text legibility\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: \\`D-DIN-Bold\\` — bold industrial geometric\n- **Body / UI**: \\`D-DIN\\`, fallbacks: \\`Arial, Verdana\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | D-DIN-Bold | 48px (3.00rem) | 700 | 1.00 (tight) | 0.96px | \\`text-transform: uppercase\\` |\n| Body | D-DIN | 16px (1.00rem) | 400 | 1.50–1.70 | normal | Standard reading text |\n| Nav Link Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | \\`text-transform: uppercase\\` |\n| Nav Link | D-DIN | 12px (0.75rem) | 400 | 2.00 (relaxed) | normal | \\`text-transform: uppercase\\` |\n| Caption Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | \\`text-transform: uppercase\\` |\n| Caption | D-DIN | 12px (0.75rem) | 400 | 1.00 (tight) | normal | \\`text-transform: uppercase\\` |\n| Micro | D-DIN | 10px (0.63rem) | 400 | 0.94 (tight) | 1px | \\`text-transform: uppercase\\` |\n\n### Principles\n- **Universal uppercase**: Nearly every text element uses \\`text-transform: uppercase\\`. This creates a systematic military/aerospace voice where all communication feels like official documentation.\n- **Positive letter-spacing as identity**: 0.96px on display, 1.17px on nav — the wide tracking creates the stenciled, industrial feel that connects to DIN's heritage as a German engineering standard.\n- **Two weights, strict hierarchy**: D-DIN-Bold (700) for headlines and nav emphasis, D-DIN (400) for body. No medium or semibold weights exist in the system.\n- **Tight line-heights**: 0.94–1.00 across most text — compressed, efficient, mission-critical communication.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Ghost Button**\n- Background: \\`rgba(240, 240, 250, 0.1)\\` (barely visible)\n- Text: Spectral White (\\`#f0f0fa\\`)\n- Padding: 18px\n- Radius: 32px\n- Border: \\`1px solid rgba(240, 240, 250, 0.35)\\`\n- Hover: background brightens, text to \\`var(--white-100)\\`\n- Use: The only button variant — \"LEARN MORE\" CTAs on photography\n\n### Cards & Containers\n- **None.** SpaceX does not use cards, panels, or containers. All content is text directly on full-viewport photographs. The absence of containers IS the design.\n\n### Inputs & Forms\n- Not present on the homepage. The site is purely presentational.\n\n### Navigation\n- Transparent overlay nav on photography\n- D-DIN 13px weight 700, uppercase, 1.17px tracking\n- Spectral white text on dark imagery\n- Logo: SpaceX wordmark at 147x19px\n- Mobile: hamburger collapse\n\n### Image Treatment\n- Full-viewport (100vh) photography sections\n- Professional aerospace photography: rockets, Mars, space\n- Dark gradient overlays (\\`rgba(0,0,0,0.5)\\`) for text legibility\n- Each section = one full-screen photograph with text overlay\n- No border radius, no frames — edge-to-edge imagery\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 3px, 5px, 12px, 15px, 18px, 20px, 24px, 30px\n- Minimal scale — spacing is not the organizing principle; photography is\n\n### Grid & Container\n- No traditional grid — each section is a full-viewport cinematic frame\n- Text is positioned absolutely or with generous padding over imagery\n- Left-aligned text blocks on photography backgrounds\n- No max-width container — content bleeds to viewport edges\n\n### Whitespace Philosophy\n- **Photography IS the whitespace**: Empty space in the design is never empty — it's filled with the dark expanse of space, the curve of a planet, or the flame of a rocket engine. Traditional whitespace concepts don't apply.\n- **Vertical pacing through viewport**: Each section is exactly one viewport tall, creating a rhythmic scroll where each \"page\" reveals a new scene.\n\n### Border Radius Scale\n- Sharp (4px): Small dividers, utility elements\n- Button (32px): Ghost buttons — the only rounded element\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Photography (Level 0) | Full-viewport imagery | Background layer — always present |\n| Overlay (Level 1) | \\`rgba(0, 0, 0, 0.5)\\` gradient | Text legibility layer over photography |\n| Text (Level 2) | Spectral white text, no shadow | Content layer — text floats directly on image |\n| Ghost (Level 3) | \\`rgba(240, 240, 250, 0.1)\\` surface | Barely-visible interactive layer |\n\n**Shadow Philosophy**: SpaceX uses ZERO shadows. In a design built entirely on photography, shadows are meaningless — every surface is already a photograph with natural lighting. Depth comes from the photographic content itself: the receding curvature of Earth, the diminishing trail of a rocket, the atmospheric haze around Mars.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use full-viewport photography as the primary design element — every section is a scene\n- Apply uppercase + positive letter-spacing to ALL text — the aerospace stencil voice\n- Use D-DIN exclusively — no other fonts exist in the system\n- Keep the color palette to black + spectral white (\\`#f0f0fa\\`) only\n- Use ghost buttons (\\`rgba(240,240,250,0.1)\\`) as the sole interactive element\n- Apply dark gradient overlays for text legibility on photographs\n- Let photography carry the emotional weight — the type system is functional, not expressive\n\n### Don't\n- Don't add cards, panels, or containers — text sits directly on photography\n- Don't use shadows — they have no meaning in a photographic context\n- Don't introduce colors — the palette is strictly achromatic with spectral tint\n- Don't use sentence case — everything is uppercase\n- Don't use negative letter-spacing — all tracking is positive (0.96px–1.17px)\n- Don't reduce photography to thumbnails — every image is full-viewport\n- Don't add decorative elements (icons, badges, dividers) — the design is photography + type + one button\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <600px | Stacked, reduced padding, smaller type |\n| Tablet Small | 600–960px | Adjusted layout |\n| Tablet | 960–1280px | Standard scaling |\n| Desktop | 1280–1350px | Full layout |\n| Large Desktop | 1350–1500px | Expanded |\n| Ultra-wide | >1500px | Maximum viewport |\n\n### Touch Targets\n- Ghost buttons: 18px padding provides adequate touch area\n- Navigation links: uppercase with generous letter-spacing aids readability\n\n### Collapsing Strategy\n- Photography: maintains full-viewport at all sizes, content reposition\n- Hero text: 48px → scales down proportionally\n- Navigation: horizontal → hamburger\n- Text blocks: reposition but maintain overlay-on-photography pattern\n- Full-viewport sections maintained on mobile\n\n### Image Behavior\n- Edge-to-edge photography at all viewport sizes\n- Background-size: cover with center focus\n- Dark overlay gradients adapt to content position\n- No art direction changes — same photographs, responsive positioning\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Space Black (\\`#000000\\`)\n- Text: Spectral White (\\`#f0f0fa\\`)\n- Button background: Ghost (\\`rgba(240, 240, 250, 0.1)\\`)\n- Button border: Ghost Border (\\`rgba(240, 240, 250, 0.35)\\`)\n- Overlay: \\`rgba(0, 0, 0, 0.5)\\`\n\n### Example Component Prompts\n- \"Create a full-viewport hero: background-image covering 100vh, dark gradient overlay rgba(0,0,0,0.5). Headline at 48px D-DIN-Bold, uppercase, letter-spacing 0.96px, spectral white (#f0f0fa) text. Ghost CTA button: rgba(240,240,250,0.1) bg, 1px solid rgba(240,240,250,0.35) border, 32px radius, 18px padding.\"\n- \"Design a navigation: transparent over photography. D-DIN 13px weight 700, uppercase, letter-spacing 1.17px, spectral white text. SpaceX wordmark left-aligned.\"\n- \"Build a content section: full-viewport height, background photography with dark overlay. Left-aligned text block with 48px D-DIN-Bold uppercase heading, 16px D-DIN body text, and ghost button below.\"\n- \"Create a micro label: D-DIN 10px, uppercase, letter-spacing 1px, spectral white, line-height 0.94.\"\n\n### Iteration Guide\n1. Start with photography — the image IS the design\n2. All text is uppercase with positive letter-spacing — no exceptions\n3. Only two colors: black and spectral white (#f0f0fa)\n4. Ghost buttons are the only interactive element — transparent, spectral-bordered\n5. Zero shadows, zero cards, zero decorative elements\n6. Every section is full-viewport (100vh) — cinematic pacing\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/presets/_briefs/spotify.d.ts

@@ -0,0 +1,3 @@
+declare const spotifyBrief = "# Design System Inspired by Spotify\n\n## 1. Visual Theme & Atmosphere\n\nSpotify's web interface is a dark, immersive music player that wraps listeners in a near-black cocoon (`#121212`, `#181818`, `#1f1f1f`) where album art and content become the primary source of color. The design philosophy is \"content-first darkness\" \u2014 the UI recedes into shadow so that music, podcasts, and playlists can glow. Every surface is a shade of charcoal, creating a theater-like environment where the only true color comes from the iconic Spotify Green (`#1ed760`) and the album artwork itself.\n\nThe typography uses SpotifyMixUI and SpotifyMixUITitle \u2014 proprietary fonts from the CircularSp family (Circular by Lineto, customized for Spotify) with an extensive fallback stack that includes Arabic, Hebrew, Cyrillic, Greek, Devanagari, and CJK fonts, reflecting Spotify's global reach. The type system is compact and functional: 700 (bold) for emphasis and navigation, 600 (semibold) for secondary emphasis, and 400 (regular) for body. Buttons use uppercase with positive letter-spacing (1.4px\u20132px) for a systematic, label-like quality.\n\nWhat distinguishes Spotify is its pill-and-circle geometry. Primary buttons use 500px\u20139999px radius (full pill), circular play buttons use 50% radius, and search inputs are 500px pills. Combined with heavy shadows (`rgba(0,0,0,0.5) 0px 8px 24px`) on elevated elements and a unique inset border-shadow combo (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`), the result is an interface that feels like a premium audio device \u2014 tactile, rounded, and built for touch.\n\n**Key Characteristics:**\n- Near-black immersive dark theme (`#121212`\u2013`#1f1f1f`) \u2014 UI disappears behind content\n- Spotify Green (`#1ed760`) as singular brand accent \u2014 never decorative, always functional\n- SpotifyMixUI/CircularSp font family with global script support\n- Pill buttons (500px\u20139999px) and circular controls (50%) \u2014 rounded, touch-optimized\n- Uppercase button labels with wide letter-spacing (1.4px\u20132px)\n- Heavy shadows on elevated elements (`rgba(0,0,0,0.5) 0px 8px 24px`)\n- Semantic colors: negative red (`#f3727f`), warning orange (`#ffa42b`), announcement blue (`#539df5`)\n- Album art as the primary color source \u2014 the UI is achromatic by design\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Spotify Green** (`#1ed760`): Primary brand accent \u2014 play buttons, active states, CTAs\n- **Near Black** (`#121212`): Deepest background surface\n- **Dark Surface** (`#181818`): Cards, containers, elevated surfaces\n- **Mid Dark** (`#1f1f1f`): Button backgrounds, interactive surfaces\n\n### Text\n- **White** (`#ffffff`): `--text-base`, primary text\n- **Silver** (`#b3b3b3`): Secondary text, muted labels, inactive nav\n- **Near White** (`#cbcbcb`): Slightly brighter secondary text\n- **Light** (`#fdfdfd`): Near-pure white for maximum emphasis\n\n### Semantic\n- **Negative Red** (`#f3727f`): `--text-negative`, error states\n- **Warning Orange** (`#ffa42b`): `--text-warning`, warning states\n- **Announcement Blue** (`#539df5`): `--text-announcement`, info states\n\n### Surface & Border\n- **Dark Card** (`#252525`): Elevated card surface\n- **Mid Card** (`#272727`): Alternate card surface\n- **Border Gray** (`#4d4d4d`): Button borders on dark\n- **Light Border** (`#7c7c7c`): Outlined button borders, muted links\n- **Separator** (`#b3b3b3`): Divider lines\n- **Light Surface** (`#eeeeee`): Light-mode buttons (rare)\n- **Spotify Green Border** (`#1db954`): Green accent border variant\n\n### Shadows\n- **Heavy** (`rgba(0,0,0,0.5) 0px 8px 24px`): Dialogs, menus, elevated panels\n- **Medium** (`rgba(0,0,0,0.3) 0px 8px 8px`): Cards, dropdowns\n- **Inset Border** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`): Input border-shadow combo\n\n## 3. Typography Rules\n\n### Font Families\n- **Title**: `SpotifyMixUITitle`, fallbacks: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`\n- **UI / Body**: `SpotifyMixUI`, same fallback stack\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Section Title | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Bold title weight |\n| Feature Heading | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (tight) | normal | Semibold section heads |\n| Body Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Emphasized text |\n| Body | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Standard body |\n| Button Uppercase | SpotifyMixUI | 14px (0.88rem) | 600\u2013700 | 1.00 (tight) | 1.4px\u20132px | `text-transform: uppercase` |\n| Button | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Standard button |\n| Nav Link Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigation |\n| Nav Link | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Inactive nav |\n| Caption Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50\u20131.54 | normal | Bold metadata |\n| Caption | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadata |\n| Small Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tags, counts |\n| Small | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Fine print |\n| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |\n| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Smallest text |\n\n### Principles\n- **Bold/regular binary**: Most text is either 700 (bold) or 400 (regular), with 600 used sparingly. This creates a clear visual hierarchy through weight contrast rather than size variation.\n- **Uppercase buttons as system**: Button labels use uppercase + wide letter-spacing (1.4px\u20132px), creating a systematic \"label\" voice distinct from content text.\n- **Compact sizing**: The range is 10px\u201324px \u2014 narrower than most systems. Spotify's type is compact and functional, designed for scanning playlists, not reading articles.\n- **Global script support**: The extensive fallback stack (Arabic, Hebrew, Cyrillic, Greek, Devanagari, CJK) reflects Spotify's 180+ market reach.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Dark Pill**\n- Background: `#1f1f1f`\n- Text: `#ffffff` or `#b3b3b3`\n- Padding: 8px 16px\n- Radius: 9999px (full pill)\n- Use: Navigation pills, secondary actions\n\n**Dark Large Pill**\n- Background: `#181818`\n- Text: `#ffffff`\n- Padding: 0px 43px\n- Radius: 500px\n- Use: Primary app navigation buttons\n\n**Light Pill**\n- Background: `#eeeeee`\n- Text: `#181818`\n- Radius: 500px\n- Use: Light-mode CTAs (cookie consent, marketing)\n\n**Outlined Pill**\n- Background: transparent\n- Text: `#ffffff`\n- Border: `1px solid #7c7c7c`\n- Padding: 4px 16px 4px 36px (asymmetric for icon)\n- Radius: 9999px\n- Use: Follow buttons, secondary actions\n\n**Circular Play**\n- Background: `#1f1f1f`\n- Text: `#ffffff`\n- Padding: 12px\n- Radius: 50% (circle)\n- Use: Play/pause controls\n\n### Cards & Containers\n- Background: `#181818` or `#1f1f1f`\n- Radius: 6px\u20138px\n- No visible borders on most cards\n- Hover: slight background lightening\n- Shadow: `rgba(0,0,0,0.3) 0px 8px 8px` on elevated\n\n### Inputs\n- Search input: `#1f1f1f` background, `#ffffff` text\n- Radius: 500px (pill)\n- Padding: 12px 96px 12px 48px (icon-aware)\n- Focus: border becomes `#000000`, outline `1px solid`\n\n### Navigation\n- Dark sidebar with SpotifyMixUI 14px weight 700 for active, 400 for inactive\n- `#b3b3b3` muted color for inactive items, `#ffffff` for active\n- Circular icon buttons (50% radius)\n- Spotify logo top-left in green\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px\n\n### Grid & Container\n- Sidebar (fixed) + main content area\n- Grid-based album/playlist cards\n- Full-width now-playing bar at bottom\n- Responsive content area fills remaining space\n\n### Whitespace Philosophy\n- **Dark compression**: Spotify packs content densely \u2014 playlist grids, track lists, and navigation are all tightly spaced. The dark background provides visual rest between elements without needing large gaps.\n- **Content density over breathing room**: This is an app, not a marketing site. Every pixel serves the listening experience.\n\n### Border Radius Scale\n- Minimal (2px): Badges, explicit tags\n- Subtle (4px): Inputs, small elements\n- Standard (6px): Album art containers, cards\n- Comfortable (8px): Sections, dialogs\n- Medium (10px\u201320px): Panels, overlay elements\n- Large (100px): Large pill buttons\n- Pill (500px): Primary buttons, search input\n- Full Pill (9999px): Navigation pills, search\n- Circle (50%): Play buttons, avatars, icons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Base (Level 0) | `#121212` background | Deepest layer, page background |\n| Surface (Level 1) | `#181818` or `#1f1f1f` | Cards, sidebar, containers |\n| Elevated (Level 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | Dropdown menus, hover cards |\n| Dialog (Level 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | Modals, overlays, menus |\n| Inset (Border) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | Input borders |\n\n**Shadow Philosophy**: Spotify uses notably heavy shadows for a dark-themed app. The 0.5 opacity shadow at 24px blur creates a dramatic \"floating in darkness\" effect for dialogs and menus, while the 0.3 opacity at 8px blur provides a more subtle card lift. The unique inset border-shadow combination on inputs creates a recessed, tactile quality.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use near-black backgrounds (`#121212`\u2013`#1f1f1f`) \u2014 depth through shade variation\n- Apply Spotify Green (`#1ed760`) only for play controls, active states, and primary CTAs\n- Use pill shape (500px\u20139999px) for all buttons \u2014 circular (50%) for play controls\n- Apply uppercase + wide letter-spacing (1.4px\u20132px) on button labels\n- Keep typography compact (10px\u201324px range) \u2014 this is an app, not a magazine\n- Use heavy shadows (`0.3\u20130.5 opacity`) for elevated elements on dark backgrounds\n- Let album art provide color \u2014 the UI itself is achromatic\n\n### Don't\n- Don't use Spotify Green decoratively or on backgrounds \u2014 it's functional only\n- Don't use light backgrounds for primary surfaces \u2014 the dark immersion is core\n- Don't skip the pill/circle geometry on buttons \u2014 square buttons break the identity\n- Don't use thin/subtle shadows \u2014 on dark backgrounds, shadows need to be heavy to be visible\n- Don't add additional brand colors \u2014 green + achromatic grays is the complete palette\n- Don't use relaxed line-heights \u2014 Spotify's typography is compact and dense\n- Don't expose raw gray borders \u2014 use shadow-based or inset borders instead\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <425px | Compact mobile layout |\n| Mobile | 425\u2013576px | Standard mobile |\n| Tablet | 576\u2013768px | 2-column grid |\n| Tablet Large | 768\u2013896px | Expanded layout |\n| Desktop Small | 896\u20131024px | Sidebar visible |\n| Desktop | 1024\u20131280px | Full desktop layout |\n| Large Desktop | >1280px | Expanded grid |\n\n### Collapsing Strategy\n- Sidebar: full \u2192 collapsed \u2192 hidden\n- Album grid: 5 columns \u2192 3 \u2192 2 \u2192 1\n- Now-playing bar: maintained at all sizes\n- Search: pill input maintained, width adjusts\n- Navigation: sidebar \u2192 bottom bar on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Near Black (`#121212`)\n- Surface: Dark Card (`#181818`)\n- Text: White (`#ffffff`)\n- Secondary text: Silver (`#b3b3b3`)\n- Accent: Spotify Green (`#1ed760`)\n- Border: `#4d4d4d`\n- Error: Negative Red (`#f3727f`)\n\n### Example Component Prompts\n- \"Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover.\"\n- \"Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px.\"\n- \"Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding.\"\n- \"Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset.\"\n- \"Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3.\"\n\n### Iteration Guide\n1. Start with #121212 \u2014 everything lives in near-black darkness\n2. Spotify Green for functional highlights only (play, active, CTA)\n3. Pill everything \u2014 500px for large, 9999px for small, 50% for circular\n4. Uppercase + wide tracking on buttons \u2014 the systematic label voice\n5. Heavy shadows (0.3\u20130.5 opacity) for elevation \u2014 light shadows are invisible on dark\n6. Album art provides all the color \u2014 the UI stays achromatic\n";
+
+export { spotifyBrief };