@hex-core/themes 0.1.0 → 0.2.0

package/dist/presets/_briefs/intercom.js

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

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

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

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

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

package/dist/presets/_briefs/kraken.js

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

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

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

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

@@ -0,0 +1,3 @@
+declare const lamborghiniBrief = "# Design System Inspired by Lamborghini\n\n## 1. Visual Theme & Atmosphere\n\nLamborghini's website is a cathedral of darkness \u2014 a digital stage where jet-black surfaces stretch infinitely and every element emerges from the void like a machine under a spotlight. The page is almost entirely black. Not dark gray, not near-black \u2014 true, uncompromising black (`#000000`) that saturates the viewport and refuses to yield. Into this abyss, white type and Lamborghini Gold (`#FFC000`) are deployed with surgical precision, creating a visual language that feels like walking through a nighttime motorsport event where every surface absorbs light except the things that matter.\n\nThe hero is a full-viewport video \u2014 dark, cinematic, immersive \u2014 showing event footage or vehicle reveals with the Lamborghini bull logo floating ethereally above. The navigation is minimal: a centered bull logo, a \"MENU\" hamburger on the left, and search/bookmark icons on the right, all rendered in white against the black canvas. There are no borders, no visible nav containers, no background color on the header \u2014 just white marks floating in darkness. The overall mood is nocturnal luxury: exclusive, theatrical, and deliberately intimidating. Each section transition is a scroll through darkness into the next revelation.\n\nTypography is the voice of this darkness. LamboType \u2014 a custom Neo-Grotesk typeface created by Character Type and design agency Strichpunkt \u2014 is used for everything from 120px uppercase display headlines to 10px micro labels. Its distinctive 12\u00B0 angled terminals are inspired by the aerodynamic lines of Lamborghini's super sports cars, and its proportions range from Normal to Ultracompressed width. Headlines SHOUT in uppercase at enormous scales with tight line-heights (0.92 at 120px), creating dense blocks of text that feel stamped from steel. The typeface carries hexagonal geometric DNA \u2014 constructed from hexagons, three-armed stars, and circles \u2014 that echoes throughout the interface in the hexagonal pause button and UI icons. Built on Bootstrap grid with 68 Element Plus/UI components, the technical infrastructure is substantial beneath the theatrical surface.\n\n**Key Characteristics:**\n- True black (`#000000`) dominant surfaces with white and gold as the only relief colors\n- LamboType custom Neo-Grotesk font with 12\u00B0 angled terminals inspired by aerodynamic car lines\n- Lamborghini Gold (`#FFC000`) as the sole accent color \u2014 used exclusively for primary CTA buttons\n- All-uppercase display typography at extreme scales (120px, 80px, 54px) with tight line-heights\n- Full-viewport video heroes with cinematic event/vehicle content\n- Zero border-radius on buttons \u2014 sharp, angular, uncompromising rectangles\n- Hexagonal motifs in UI elements (pause button, icon system) echoing brand geometry\n- Bootstrap grid system + Element Plus/UI 68 components underneath\n- Transparent ghost buttons with white borders at 50% opacity as the secondary CTA pattern\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Lamborghini Gold** (`#FFC000`): The signature accent color \u2014 a warm, saturated amber-gold (rgb 255, 192, 0) used exclusively for primary action buttons (\"Discover More\", \"Tickets\", \"Start Configuration\"). The only chromatic color in the entire interface, it ignites against the black canvas like a headlight cutting through night\n- **Pure White** (`#FFFFFF`): Primary text color on dark surfaces, logo rendering, nav elements, and light-mode button fills \u2014 the voice that speaks from the darkness\n\n### Secondary & Accent\n- **Dark Gold** (`#917300`): Hover/pressed state for gold buttons \u2014 a deep amber (rgb 145, 115, 0) that darkens the gold to signal interaction\n- **Gold Text** (`#FFCE3E`): Slightly lighter gold variant (rgb 255, 206, 62) used for inline text accents and highlighted labels\n- **Cyan Pulse** (`#29ABE2`): Electric blue-cyan (rgb 41, 171, 226) appearing as an informational accent and interactive element highlight\n- **Link Blue** (`#3860BE`): Medium blue (rgb 56, 96, 190) used universally for link hover states across all text colors\n\n### Surface & Background\n- **Absolute Black** (`#000000`): The dominant surface color \u2014 used for page background, hero sections, header, footer, and most containers\n- **Charcoal** (`#202020`): Elevated dark surface (rgb 32, 32, 32) \u2014 the primary \"dark gray\" for cards, panels, and text containers sitting above the black canvas\n- **Dark Iron** (`#181818`): Subtle surface variant (rgb 24, 24, 24) \u2014 barely distinguishable from black, used for footer and deep sections\n- **Overlay Black** (`rgba(0,0,0,0.7)`): Semi-transparent overlay for modals and video dimming\n- **Near White** (`#F8F8F8`): Rare light surface (rgb 248, 248, 248) for content blocks in white-mode sections\n- **Mist** (`#E6E6E6`): Light gray surface for secondary light-mode containers\n\n### Neutrals & Text\n- **Pure White** (`#FFFFFF`): Primary text on dark backgrounds \u2014 headlines, body, nav labels\n- **Smoke** (`#F5F5F5`): Secondary text on dark surfaces \u2014 slightly softer than pure white\n- **Graphite** (`#494949`): Dark gray text on light surfaces (rgb 73, 73, 73)\n- **Ash** (`#7D7D7D`): Mid-range gray for muted text, timestamps, and metadata (rgb 125, 125, 125)\n- **Steel** (`#969696`): Lighter gray for disabled text and subtle labels (rgb 150, 150, 150)\n- **Slate** (`#666666`): Alternative mid-gray for secondary content\n- **Iron** (`#555555`): Dark mid-gray for body text variants\n- **Shadow** (`#313131`): Very dark gray for text on dark surfaces where white is too strong\n\n### Semantic & Accent\n- **Cyan Pulse** (`#29ABE2`): Used for informational highlights and interactive feedback\n- **Link Blue** (`#3860BE`): Universal hover state for all hyperlinks\n- **Teal Action** (`#1EAEDB`): Button hover background for transparent/ghost variants (rgb 30, 174, 219)\n\n### Gradient System\n- No explicit gradients in the color palette \u2014 the dark-to-light progression is achieved through surface layering: `#000000` \u2192 `#181818` \u2192 `#202020` \u2192 `#494949` \u2192 `#7D7D7D`\n- Video heroes use natural atmospheric gradients from the content itself\n- Top-of-page gradient: subtle dark-to-darker fade at the edges of full-bleed imagery\n\n## 3. Typography Rules\n\n### Font Family\n- **Display & UI**: `LamboType`, Roboto, Helvetica Neue, Arial \u2014 custom Neo-Grotesk typeface by Character Type for Lamborghini's 2024 brand refresh. Available in widths from Normal to Ultracompressed and weights from Light (300) to Black. Features 12\u00B0 angled terminals inspired by aerodynamic car geometry, hexagonal construction logic, and support for 200+ languages including Latin, Cyrillic, and Greek\n- **Fallback/UI**: `Open Sans` \u2014 used for some button/form contexts as system fallback\n- **No italic variants** observed on the marketing site \u2014 the brand voice is always upright\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Hero Display | 120px (7.50rem) | 400 | 0.92 | normal | LamboType, uppercase, maximum impact |\n| Display 2 | 80px (5.00rem) | 400 | 1.13 | normal | LamboType, uppercase, major section titles |\n| Section Title | 54px (3.38rem) | 400 | 1.19 | normal | LamboType, uppercase |\n| Sub-section | 40px (2.50rem) | 400 | 1.15 | normal | LamboType, uppercase |\n| Feature Heading | 27px (1.69rem) | 400 | 1.37 | normal | LamboType, uppercase |\n| Card Title | 24px (1.50rem) | 400 | \u2014 | normal | LamboType |\n| Body Large | 18px (1.13rem) | 400 | 1.56 | normal | LamboType, mixed case and uppercase variants |\n| Body / UI | 16px (1.00rem) | 400/700 | 1.50 | normal/0.16px | LamboType, primary body text |\n| Button Large | 16px (1.00rem) | 400 | 1.50 | normal | Gold CTA buttons |\n| Button Standard | 14.4px (0.90rem) | 300/700 | 1.00 | 0.14\u20130.2px | LamboType, uppercase, ghost buttons |\n| Button Small | 13px (0.81rem) | 300/500 | 1.20 | 0.13\u20130.2px | LamboType, compact button variant |\n| Caption | 14px (0.88rem) | 600/700 | 1.14\u20131.50 | -0.42px | LamboType, uppercase, negative tracking |\n| Label | 12px (0.75rem) | 400/500 | 1.83 | 0.96px | LamboType, uppercase badges and micro labels |\n| Micro | 10px (0.63rem) | 400 | 1.00\u20132.00 | 0.225px | LamboType, uppercase, smallest text |\n\n### Principles\n- **ALL-CAPS is the default voice**: Display and feature headings are universally uppercase. This creates a shouting, commanding tone that matches the brand's aggression\n- **Extreme scale range**: From 120px heroes to 10px micro labels \u2014 a 12:1 ratio that creates dramatic visual hierarchy\n- **Tight line-heights at scale**: Display sizes use 0.92-1.19 line-height, creating dense, compressed blocks of type that feel stamped rather than typeset\n- **Weight 400 dominates**: Unlike many design systems that use bold for emphasis, Lamborghini's regular weight carries the headlines \u2014 the typeface itself is so distinctive it doesn't need weight variation\n- **Negative tracking on captions**: -0.42px letter-spacing on 14px captions creates a compressed, technical aesthetic\n- **Positive tracking on micro text**: +0.225px at 10px ensures legibility at the smallest sizes\n- **Single typeface discipline**: LamboType handles everything \u2014 the 12\u00B0 angled terminals and hexagonal geometry provide visual coherence across all sizes\n\n## 4. Component Stylings\n\n### Buttons\nAll buttons use **zero border-radius** \u2014 sharp, angular rectangles that echo the aggressive lines of Lamborghini vehicles.\n\n**Gold Accent CTA** \u2014 The primary action:\n- Default: bg `#FFC000` (Lamborghini Gold), text `#000000`, padding 24px, fontSize 16px, fontWeight 400, borderRadius 0px, no border\n- Hover: bg `#917300` (Dark Gold), darkens significantly\n- Class: `btn-accent btn-large`\n- Used for: \"Discover More\", \"Tickets\", \"Start Configuration\"\n\n**Transparent Ghost** \u2014 The secondary action on dark backgrounds:\n- Default: bg transparent, text `#FFFFFF`, border 1px solid `#FFFFFF`, padding 16px, opacity 0.5\n- Hover: bg `#1EAEDB` (Teal Action), text white, opacity 0.7\n- Focus: bg `#1EAEDB`, border 1px solid `#000000`, outline 2px solid `#000000`\n- Used for: secondary CTAs on hero sections and dark panels\n\n**White Filled** \u2014 Light-mode primary:\n- Default: bg `#FFFFFF`, text `#202020`, no border\n- Used for: CTAs on dark sections where gold isn't appropriate\n\n**Black Filled** \u2014 Dark filled variant:\n- Default: bg `#000000`, text `#202020`\n- Used for: Inverted CTA on light sections\n\n**Gray Neutral** \u2014 Subtle action:\n- Default: bg `#969696`, text `#202020`\n- Used for: secondary/tertiary actions, badge-like buttons\n\n### Cards & Containers\n- Background: `#202020` (Charcoal) on black canvas, or `#000000` on lighter sections\n- Border: `0px 1px solid #202020` bottom borders for section dividers\n- Border-radius: 0px (completely sharp corners)\n- Shadow: minimal, uses overlay opacity for depth\n- Content: full-bleed photography + overlaid text in white\n\n### Inputs & Forms\n- Minimal form presence on the marketing site\n- Switch elements: border-radius 20px (the only rounded element), border 1px solid `#DDDDDD`\n- Cookie banner input style: white text on black with `#7D7D7D` borders\n\n### Navigation\n- **Desktop**: Centered bull logo, \"MENU\" hamburger with icon on left, search icon + bookmarks icon on right\n- **Background**: Transparent (inherits black page background)\n- **Sticky**: Fixed to top, floats above content\n- **No visible borders or shadows** \u2014 elements float in the darkness\n- **\"MENU\" label**: White text at 14px weight 400, uppercase, accompanies hamburger icon\n- **Hexagonal motifs**: Pause button on hero sections uses hexagonal outline shape\n\n### Image Treatment\n- **Hero**: Full-viewport video sections (100vh) with cinematic event/vehicle footage\n- **Event photography**: Full-bleed aerial shots of Lamborghini Arena events\n- **Vehicle imagery**: High-contrast studio shots on dark backgrounds, full-width\n- **Aspect ratios**: Predominantly 16:9 and wider for cinematic feel\n- **Dark gradient overlays**: Subtle darkening at top/bottom edges of video to ensure text legibility\n\n### Distinctive Components\n- **Hexagonal Pause Button**: Video control uses a hexagonal outline (matching the brand's geometric DNA from the typeface), positioned bottom-right of hero sections\n- **Progress Bar**: Thin white line at bottom of hero sections indicating video/slide progress\n- **Badge/Tag**: bg `#969696`, text white, padding 8px, fontSize 10px, borderRadius 2px \u2014 tiny metallic pills\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Full scale**: 2px, 4px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 32px, 40px, 48px, 56px\n- **Button padding**: 16px (ghost), 24px (gold accent)\n- **Section padding**: 48\u201356px vertical, 40px horizontal\n- **Small spacing**: 2\u20135px for fine adjustments (badge padding, border spacing)\n\n### Grid & Container\n- **Framework**: Bootstrap grid system (container + row + col)\n- **Max width**: 1440px (largest breakpoint)\n- **Columns**: Standard 12-column Bootstrap grid\n- **Full-bleed**: Hero sections break out of grid to fill viewport edge-to-edge\n- **Content areas**: Centered within 1200px max-width containers\n\n### Whitespace Philosophy\nLamborghini uses darkness as whitespace. The generous black expanses between content blocks serve the same function as white space in a light design \u2014 creating breathing room that elevates each element to the status of exhibit. A model name floating in the middle of a black viewport has the same visual weight as a gallery piece on a white wall. The absence of color IS the design.\n\n### Border Radius Scale\n| Value | Context |\n|-------|---------|\n| 0px | Default for everything \u2014 buttons, cards, containers, images |\n| 1px | Subtle span elements |\n| 2px | Badges, close buttons, cookie elements \u2014 barely perceptible |\n| 20px | Toggle switches only \u2014 the sole rounded element |\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Abyss) | `#000000` flat | Page background, deepest layer |\n| Level 1 (Surface) | `#181818` or `#202020` | Cards, content panels, elevated sections |\n| Level 2 (Overlay) | `rgba(0,0,0,0.7)` | Modal backdrops, video dimming |\n| Level 3 (Fog) | `rgba(0,0,0,0.5)` | Lighter overlays, hover states |\n| Level 4 (Mist) | `rgba(0,0,0,0.25)` | Subtle depth hints |\n\n### Shadow Philosophy\nLamborghini achieves depth through surface color layering rather than shadows. On a black canvas, traditional drop shadows are invisible \u2014 instead, the system creates elevation by shifting from absolute black to progressively lighter dark grays: `#000000` \u2192 `#181818` \u2192 `#202020` \u2192 `#494949`. This \"darkness gradient\" approach means that elevated elements are literally lighter than their surroundings, inverting the traditional shadow model.\n\n### Decorative Depth\n- Full-bleed video provides atmospheric depth through cinematic lighting\n- The hexagonal pause button floats with a thin white outline stroke\n- Progress bars at hero section bottoms create a subtle horizon line\n- No gradients, glows, or blur effects on UI elements \u2014 the photography provides all visual richness\n\n## 7. Do's and Don'ts\n\n### Do\n- Use absolute black (`#000000`) as the primary background \u2014 never dark gray as a substitute\n- Apply Lamborghini Gold (`#FFC000`) exclusively for primary CTA buttons \u2014 never for decorative purposes\n- Set all display headings in uppercase with LamboType \u2014 the brand voice is always SHOUTING\n- Use zero border-radius on buttons and cards \u2014 sharp angles are non-negotiable\n- Maintain tight line-heights (0.92\u20131.19) on display type to create dense, architectural text blocks\n- Use the transparent ghost button (white border, 50% opacity) as the secondary CTA on dark backgrounds\n- Let full-viewport video/photography carry emotional weight \u2014 UI is infrastructure, not decoration\n- Reserve hexagonal geometry for UI icons and the video control button\n- Use weight 400 (regular) for headlines \u2014 the typeface is distinctive enough without bold emphasis\n- Keep the gray palette achromatic \u2014 all neutrals are pure gray without color tinting\n\n### Don't\n- Introduce additional accent colors beyond gold \u2014 the monochrome-plus-gold system is sacred\n- Apply border-radius to buttons or cards \u2014 curved edges contradict the angular vehicle aesthetic\n- Use LamboType in italic or decorative styles \u2014 the brand is always upright and direct\n- Add gradients to buttons or surfaces \u2014 depth comes from surface layering, not blending\n- Use light backgrounds as the primary canvas \u2014 darkness is the default state, light is the exception\n- Mix lowercase into display headings \u2014 the uppercase convention communicates authority and power\n- Add hover animations with scale or translate \u2014 interactions should be color-only (background/opacity shifts)\n- Use Open Sans for display text \u2014 LamboType must handle all visible typography\n- Create busy layouts with many small elements \u2014 Lamborghini's design is about singular, bold statements\n- Apply shadows to elements \u2014 on a black canvas, shadows are meaningless; use surface color shifts instead\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <425px | Single column, reduced type scale, stacked buttons |\n| Mobile | 425-576px | Single column, hamburger nav, hero text ~40px |\n| Tablet Small | 576-768px | 2-column grid begins, padding adjusts |\n| Tablet | 768-1024px | 2-column layout, expanded hero, vehicle cards side-by-side |\n| Desktop | 1024-1280px | Full navigation, 3+ column grids, display text at 80px |\n| Desktop Large | 1280-1440px | Full layout, hero at 120px display, max-width containers |\n| Wide | >1440px | Content centered, margins expand, hero fills viewport |\n\n### Touch Targets\n- Gold CTA buttons: 48px+ minimum height with 24px padding (exceeds WCAG 44\u00D744px)\n- Ghost buttons: 48px+ with 16px padding\n- Hamburger menu: large touch target (~48px square)\n- Hexagonal pause button: approximately 48px diameter\n\n### Collapsing Strategy\n- **Navigation**: Always hamburger-based (\"MENU\" + icon) \u2014 no horizontal nav expansion on any breakpoint\n- **Hero video**: Maintains full-viewport height across all breakpoints, adjusting object-fit\n- **Display type**: Scales from 120px (desktop) \u2192 80px (tablet) \u2192 54px/40px (mobile)\n- **Button layout**: Side-by-side on desktop, stacks vertically on mobile\n- **Grid columns**: 3-column \u2192 2-column \u2192 1-column progression\n- **Section spacing**: Reduces from 56px \u2192 40px \u2192 24px vertical padding\n\n### Image Behavior\n- Hero videos use `object-fit: cover` to maintain cinematic framing at all sizes\n- Vehicle images scale within their containers with maintained aspect ratios\n- Event photography crops to viewport width on narrow screens\n- Background images darken at edges to maintain text contrast on all viewports\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: \"Lamborghini Gold (#FFC000)\"\n- Background: \"Absolute Black (#000000)\"\n- Surface: \"Charcoal (#202020)\"\n- Heading text: \"Pure White (#FFFFFF)\"\n- Body text: \"Ash (#7D7D7D)\"\n- Link hover: \"Link Blue (#3860BE)\"\n- Accent: \"Cyan Pulse (#29ABE2)\"\n- Border: \"Pure White (#FFFFFF) at 50% opacity\"\n\n### Example Component Prompts\n- \"Create a hero section with a full-viewport black background, the model name 'TEMERARIO' in LamboType at 120px uppercase weight 400 white text with 0.92 line-height, centered vertically, with a Lamborghini Gold (#FFC000) 'Discover More' button below \u2014 sharp corners, 0px radius, 24px padding, black text\"\n- \"Design a transparent ghost button with 1px solid white border at 50% opacity, white text at 14.4px uppercase with 0.2px letter-spacing, padding 16px, on a black background \u2014 hover state changes to Teal Action (#1EAEDB) background with 70% opacity\"\n- \"Build a navigation bar with zero visible background on absolute black, a centered bull logo, 'MENU' text label with hamburger icon on the left, and search + bookmark icons on the right \u2014 all in white, sticky position\"\n- \"Create a news card grid on charcoal (#202020) background with white headlines at 27px uppercase, body text in #7D7D7D at 16px, and a white underlined 'Read More' link that turns #3860BE on hover\"\n- \"Design a section divider using a 1px solid bottom border in #202020 on a black canvas \u2014 the elevation difference is purely through surface color shift, not shadow\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time \u2014 Lamborghini's system is extreme and every element must feel aggressive\n2. Reference specific color names and hex codes from this document \u2014 the palette has only about 5 active colors\n3. Use natural language descriptions, not CSS values \u2014 \"sharp-cut golden rectangle\" not \"border-radius: 0px; background: #FFC000\"\n4. Describe the desired \"feel\" alongside specific measurements \u2014 \"floating in total darkness\" communicates the black canvas better than \"background: #000000\"\n5. Remember that UPPERCASE IS THE DEFAULT \u2014 if text isn't uppercase at display sizes, it probably should be\n";
+
+export { lamborghiniBrief };