@hex-core/themes 0.1.1 → 0.2.1

package/dist/presets/_briefs/lamborghini.js

@@ -0,0 +1,294 @@
+// src/presets/_briefs/lamborghini.ts
+var lamborghiniBrief = `# Design System Inspired by Lamborghini
+
+## 1. Visual Theme & Atmosphere
+
+Lamborghini'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.
+
+The 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.
+
+Typography 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\xB0 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.
+
+**Key Characteristics:**
+- True black (\`#000000\`) dominant surfaces with white and gold as the only relief colors
+- LamboType custom Neo-Grotesk font with 12\xB0 angled terminals inspired by aerodynamic car lines
+- Lamborghini Gold (\`#FFC000\`) as the sole accent color \u2014 used exclusively for primary CTA buttons
+- All-uppercase display typography at extreme scales (120px, 80px, 54px) with tight line-heights
+- Full-viewport video heroes with cinematic event/vehicle content
+- Zero border-radius on buttons \u2014 sharp, angular, uncompromising rectangles
+- Hexagonal motifs in UI elements (pause button, icon system) echoing brand geometry
+- Bootstrap grid system + Element Plus/UI 68 components underneath
+- Transparent ghost buttons with white borders at 50% opacity as the secondary CTA pattern
+
+## 2. Color Palette & Roles
+
+### Primary
+- **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
+- **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
+
+### Secondary & Accent
+- **Dark Gold** (\`#917300\`): Hover/pressed state for gold buttons \u2014 a deep amber (rgb 145, 115, 0) that darkens the gold to signal interaction
+- **Gold Text** (\`#FFCE3E\`): Slightly lighter gold variant (rgb 255, 206, 62) used for inline text accents and highlighted labels
+- **Cyan Pulse** (\`#29ABE2\`): Electric blue-cyan (rgb 41, 171, 226) appearing as an informational accent and interactive element highlight
+- **Link Blue** (\`#3860BE\`): Medium blue (rgb 56, 96, 190) used universally for link hover states across all text colors
+
+### Surface & Background
+- **Absolute Black** (\`#000000\`): The dominant surface color \u2014 used for page background, hero sections, header, footer, and most containers
+- **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
+- **Dark Iron** (\`#181818\`): Subtle surface variant (rgb 24, 24, 24) \u2014 barely distinguishable from black, used for footer and deep sections
+- **Overlay Black** (\`rgba(0,0,0,0.7)\`): Semi-transparent overlay for modals and video dimming
+- **Near White** (\`#F8F8F8\`): Rare light surface (rgb 248, 248, 248) for content blocks in white-mode sections
+- **Mist** (\`#E6E6E6\`): Light gray surface for secondary light-mode containers
+
+### Neutrals & Text
+- **Pure White** (\`#FFFFFF\`): Primary text on dark backgrounds \u2014 headlines, body, nav labels
+- **Smoke** (\`#F5F5F5\`): Secondary text on dark surfaces \u2014 slightly softer than pure white
+- **Graphite** (\`#494949\`): Dark gray text on light surfaces (rgb 73, 73, 73)
+- **Ash** (\`#7D7D7D\`): Mid-range gray for muted text, timestamps, and metadata (rgb 125, 125, 125)
+- **Steel** (\`#969696\`): Lighter gray for disabled text and subtle labels (rgb 150, 150, 150)
+- **Slate** (\`#666666\`): Alternative mid-gray for secondary content
+- **Iron** (\`#555555\`): Dark mid-gray for body text variants
+- **Shadow** (\`#313131\`): Very dark gray for text on dark surfaces where white is too strong
+
+### Semantic & Accent
+- **Cyan Pulse** (\`#29ABE2\`): Used for informational highlights and interactive feedback
+- **Link Blue** (\`#3860BE\`): Universal hover state for all hyperlinks
+- **Teal Action** (\`#1EAEDB\`): Button hover background for transparent/ghost variants (rgb 30, 174, 219)
+
+### Gradient System
+- 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\`
+- Video heroes use natural atmospheric gradients from the content itself
+- Top-of-page gradient: subtle dark-to-darker fade at the edges of full-bleed imagery
+
+## 3. Typography Rules
+
+### Font Family
+- **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\xB0 angled terminals inspired by aerodynamic car geometry, hexagonal construction logic, and support for 200+ languages including Latin, Cyrillic, and Greek
+- **Fallback/UI**: \`Open Sans\` \u2014 used for some button/form contexts as system fallback
+- **No italic variants** observed on the marketing site \u2014 the brand voice is always upright
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Hero Display | 120px (7.50rem) | 400 | 0.92 | normal | LamboType, uppercase, maximum impact |
+| Display 2 | 80px (5.00rem) | 400 | 1.13 | normal | LamboType, uppercase, major section titles |
+| Section Title | 54px (3.38rem) | 400 | 1.19 | normal | LamboType, uppercase |
+| Sub-section | 40px (2.50rem) | 400 | 1.15 | normal | LamboType, uppercase |
+| Feature Heading | 27px (1.69rem) | 400 | 1.37 | normal | LamboType, uppercase |
+| Card Title | 24px (1.50rem) | 400 | \u2014 | normal | LamboType |
+| Body Large | 18px (1.13rem) | 400 | 1.56 | normal | LamboType, mixed case and uppercase variants |
+| Body / UI | 16px (1.00rem) | 400/700 | 1.50 | normal/0.16px | LamboType, primary body text |
+| Button Large | 16px (1.00rem) | 400 | 1.50 | normal | Gold CTA buttons |
+| Button Standard | 14.4px (0.90rem) | 300/700 | 1.00 | 0.14\u20130.2px | LamboType, uppercase, ghost buttons |
+| Button Small | 13px (0.81rem) | 300/500 | 1.20 | 0.13\u20130.2px | LamboType, compact button variant |
+| Caption | 14px (0.88rem) | 600/700 | 1.14\u20131.50 | -0.42px | LamboType, uppercase, negative tracking |
+| Label | 12px (0.75rem) | 400/500 | 1.83 | 0.96px | LamboType, uppercase badges and micro labels |
+| Micro | 10px (0.63rem) | 400 | 1.00\u20132.00 | 0.225px | LamboType, uppercase, smallest text |
+
+### Principles
+- **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
+- **Extreme scale range**: From 120px heroes to 10px micro labels \u2014 a 12:1 ratio that creates dramatic visual hierarchy
+- **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
+- **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
+- **Negative tracking on captions**: -0.42px letter-spacing on 14px captions creates a compressed, technical aesthetic
+- **Positive tracking on micro text**: +0.225px at 10px ensures legibility at the smallest sizes
+- **Single typeface discipline**: LamboType handles everything \u2014 the 12\xB0 angled terminals and hexagonal geometry provide visual coherence across all sizes
+
+## 4. Component Stylings
+
+### Buttons
+All buttons use **zero border-radius** \u2014 sharp, angular rectangles that echo the aggressive lines of Lamborghini vehicles.
+
+**Gold Accent CTA** \u2014 The primary action:
+- Default: bg \`#FFC000\` (Lamborghini Gold), text \`#000000\`, padding 24px, fontSize 16px, fontWeight 400, borderRadius 0px, no border
+- Hover: bg \`#917300\` (Dark Gold), darkens significantly
+- Class: \`btn-accent btn-large\`
+- Used for: "Discover More", "Tickets", "Start Configuration"
+
+**Transparent Ghost** \u2014 The secondary action on dark backgrounds:
+- Default: bg transparent, text \`#FFFFFF\`, border 1px solid \`#FFFFFF\`, padding 16px, opacity 0.5
+- Hover: bg \`#1EAEDB\` (Teal Action), text white, opacity 0.7
+- Focus: bg \`#1EAEDB\`, border 1px solid \`#000000\`, outline 2px solid \`#000000\`
+- Used for: secondary CTAs on hero sections and dark panels
+
+**White Filled** \u2014 Light-mode primary:
+- Default: bg \`#FFFFFF\`, text \`#202020\`, no border
+- Used for: CTAs on dark sections where gold isn't appropriate
+
+**Black Filled** \u2014 Dark filled variant:
+- Default: bg \`#000000\`, text \`#202020\`
+- Used for: Inverted CTA on light sections
+
+**Gray Neutral** \u2014 Subtle action:
+- Default: bg \`#969696\`, text \`#202020\`
+- Used for: secondary/tertiary actions, badge-like buttons
+
+### Cards & Containers
+- Background: \`#202020\` (Charcoal) on black canvas, or \`#000000\` on lighter sections
+- Border: \`0px 1px solid #202020\` bottom borders for section dividers
+- Border-radius: 0px (completely sharp corners)
+- Shadow: minimal, uses overlay opacity for depth
+- Content: full-bleed photography + overlaid text in white
+
+### Inputs & Forms
+- Minimal form presence on the marketing site
+- Switch elements: border-radius 20px (the only rounded element), border 1px solid \`#DDDDDD\`
+- Cookie banner input style: white text on black with \`#7D7D7D\` borders
+
+### Navigation
+- **Desktop**: Centered bull logo, "MENU" hamburger with icon on left, search icon + bookmarks icon on right
+- **Background**: Transparent (inherits black page background)
+- **Sticky**: Fixed to top, floats above content
+- **No visible borders or shadows** \u2014 elements float in the darkness
+- **"MENU" label**: White text at 14px weight 400, uppercase, accompanies hamburger icon
+- **Hexagonal motifs**: Pause button on hero sections uses hexagonal outline shape
+
+### Image Treatment
+- **Hero**: Full-viewport video sections (100vh) with cinematic event/vehicle footage
+- **Event photography**: Full-bleed aerial shots of Lamborghini Arena events
+- **Vehicle imagery**: High-contrast studio shots on dark backgrounds, full-width
+- **Aspect ratios**: Predominantly 16:9 and wider for cinematic feel
+- **Dark gradient overlays**: Subtle darkening at top/bottom edges of video to ensure text legibility
+
+### Distinctive Components
+- **Hexagonal Pause Button**: Video control uses a hexagonal outline (matching the brand's geometric DNA from the typeface), positioned bottom-right of hero sections
+- **Progress Bar**: Thin white line at bottom of hero sections indicating video/slide progress
+- **Badge/Tag**: bg \`#969696\`, text white, padding 8px, fontSize 10px, borderRadius 2px \u2014 tiny metallic pills
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Full scale**: 2px, 4px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 32px, 40px, 48px, 56px
+- **Button padding**: 16px (ghost), 24px (gold accent)
+- **Section padding**: 48\u201356px vertical, 40px horizontal
+- **Small spacing**: 2\u20135px for fine adjustments (badge padding, border spacing)
+
+### Grid & Container
+- **Framework**: Bootstrap grid system (container + row + col)
+- **Max width**: 1440px (largest breakpoint)
+- **Columns**: Standard 12-column Bootstrap grid
+- **Full-bleed**: Hero sections break out of grid to fill viewport edge-to-edge
+- **Content areas**: Centered within 1200px max-width containers
+
+### Whitespace Philosophy
+Lamborghini 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.
+
+### Border Radius Scale
+| Value | Context |
+|-------|---------|
+| 0px | Default for everything \u2014 buttons, cards, containers, images |
+| 1px | Subtle span elements |
+| 2px | Badges, close buttons, cookie elements \u2014 barely perceptible |
+| 20px | Toggle switches only \u2014 the sole rounded element |
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Abyss) | \`#000000\` flat | Page background, deepest layer |
+| Level 1 (Surface) | \`#181818\` or \`#202020\` | Cards, content panels, elevated sections |
+| Level 2 (Overlay) | \`rgba(0,0,0,0.7)\` | Modal backdrops, video dimming |
+| Level 3 (Fog) | \`rgba(0,0,0,0.5)\` | Lighter overlays, hover states |
+| Level 4 (Mist) | \`rgba(0,0,0,0.25)\` | Subtle depth hints |
+
+### Shadow Philosophy
+Lamborghini 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.
+
+### Decorative Depth
+- Full-bleed video provides atmospheric depth through cinematic lighting
+- The hexagonal pause button floats with a thin white outline stroke
+- Progress bars at hero section bottoms create a subtle horizon line
+- No gradients, glows, or blur effects on UI elements \u2014 the photography provides all visual richness
+
+## 7. Do's and Don'ts
+
+### Do
+- Use absolute black (\`#000000\`) as the primary background \u2014 never dark gray as a substitute
+- Apply Lamborghini Gold (\`#FFC000\`) exclusively for primary CTA buttons \u2014 never for decorative purposes
+- Set all display headings in uppercase with LamboType \u2014 the brand voice is always SHOUTING
+- Use zero border-radius on buttons and cards \u2014 sharp angles are non-negotiable
+- Maintain tight line-heights (0.92\u20131.19) on display type to create dense, architectural text blocks
+- Use the transparent ghost button (white border, 50% opacity) as the secondary CTA on dark backgrounds
+- Let full-viewport video/photography carry emotional weight \u2014 UI is infrastructure, not decoration
+- Reserve hexagonal geometry for UI icons and the video control button
+- Use weight 400 (regular) for headlines \u2014 the typeface is distinctive enough without bold emphasis
+- Keep the gray palette achromatic \u2014 all neutrals are pure gray without color tinting
+
+### Don't
+- Introduce additional accent colors beyond gold \u2014 the monochrome-plus-gold system is sacred
+- Apply border-radius to buttons or cards \u2014 curved edges contradict the angular vehicle aesthetic
+- Use LamboType in italic or decorative styles \u2014 the brand is always upright and direct
+- Add gradients to buttons or surfaces \u2014 depth comes from surface layering, not blending
+- Use light backgrounds as the primary canvas \u2014 darkness is the default state, light is the exception
+- Mix lowercase into display headings \u2014 the uppercase convention communicates authority and power
+- Add hover animations with scale or translate \u2014 interactions should be color-only (background/opacity shifts)
+- Use Open Sans for display text \u2014 LamboType must handle all visible typography
+- Create busy layouts with many small elements \u2014 Lamborghini's design is about singular, bold statements
+- Apply shadows to elements \u2014 on a black canvas, shadows are meaningless; use surface color shifts instead
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <425px | Single column, reduced type scale, stacked buttons |
+| Mobile | 425-576px | Single column, hamburger nav, hero text ~40px |
+| Tablet Small | 576-768px | 2-column grid begins, padding adjusts |
+| Tablet | 768-1024px | 2-column layout, expanded hero, vehicle cards side-by-side |
+| Desktop | 1024-1280px | Full navigation, 3+ column grids, display text at 80px |
+| Desktop Large | 1280-1440px | Full layout, hero at 120px display, max-width containers |
+| Wide | >1440px | Content centered, margins expand, hero fills viewport |
+
+### Touch Targets
+- Gold CTA buttons: 48px+ minimum height with 24px padding (exceeds WCAG 44\xD744px)
+- Ghost buttons: 48px+ with 16px padding
+- Hamburger menu: large touch target (~48px square)
+- Hexagonal pause button: approximately 48px diameter
+
+### Collapsing Strategy
+- **Navigation**: Always hamburger-based ("MENU" + icon) \u2014 no horizontal nav expansion on any breakpoint
+- **Hero video**: Maintains full-viewport height across all breakpoints, adjusting object-fit
+- **Display type**: Scales from 120px (desktop) \u2192 80px (tablet) \u2192 54px/40px (mobile)
+- **Button layout**: Side-by-side on desktop, stacks vertically on mobile
+- **Grid columns**: 3-column \u2192 2-column \u2192 1-column progression
+- **Section spacing**: Reduces from 56px \u2192 40px \u2192 24px vertical padding
+
+### Image Behavior
+- Hero videos use \`object-fit: cover\` to maintain cinematic framing at all sizes
+- Vehicle images scale within their containers with maintained aspect ratios
+- Event photography crops to viewport width on narrow screens
+- Background images darken at edges to maintain text contrast on all viewports
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: "Lamborghini Gold (#FFC000)"
+- Background: "Absolute Black (#000000)"
+- Surface: "Charcoal (#202020)"
+- Heading text: "Pure White (#FFFFFF)"
+- Body text: "Ash (#7D7D7D)"
+- Link hover: "Link Blue (#3860BE)"
+- Accent: "Cyan Pulse (#29ABE2)"
+- Border: "Pure White (#FFFFFF) at 50% opacity"
+
+### Example Component Prompts
+- "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"
+- "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"
+- "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"
+- "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"
+- "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"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time \u2014 Lamborghini's system is extreme and every element must feel aggressive
+2. Reference specific color names and hex codes from this document \u2014 the palette has only about 5 active colors
+3. Use natural language descriptions, not CSS values \u2014 "sharp-cut golden rectangle" not "border-radius: 0px; background: #FFC000"
+4. Describe the desired "feel" alongside specific measurements \u2014 "floating in total darkness" communicates the black canvas better than "background: #000000"
+5. Remember that UPPERCASE IS THE DEFAULT \u2014 if text isn't uppercase at display sizes, it probably should be
+`;
+export {
+  lamborghiniBrief
+};
+//# sourceMappingURL=lamborghini.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/lamborghini.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const lamborghiniBrief = `# Design System Inspired by Lamborghini\n\n## 1. Visual Theme & Atmosphere\n\nLamborghini's website is a cathedral of darkness — 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 — 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 — dark, cinematic, immersive — 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 — 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 — a custom Neo-Grotesk typeface created by Character Type and design agency Strichpunkt — is used for everything from 120px uppercase display headlines to 10px micro labels. Its distinctive 12° 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 — constructed from hexagons, three-armed stars, and circles — 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° angled terminals inspired by aerodynamic car lines\n- Lamborghini Gold (\\`#FFC000\\`) as the sole accent color — 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 — 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 — 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 — the voice that speaks from the darkness\n\n### Secondary & Accent\n- **Dark Gold** (\\`#917300\\`): Hover/pressed state for gold buttons — 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 — used for page background, hero sections, header, footer, and most containers\n- **Charcoal** (\\`#202020\\`): Elevated dark surface (rgb 32, 32, 32) — 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) — 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 — headlines, body, nav labels\n- **Smoke** (\\`#F5F5F5\\`): Secondary text on dark surfaces — 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 — the dark-to-light progression is achieved through surface layering: \\`#000000\\` → \\`#181818\\` → \\`#202020\\` → \\`#494949\\` → \\`#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 — 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° 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\\` — used for some button/form contexts as system fallback\n- **No italic variants** observed on the marketing site — 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 | — | 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–0.2px | LamboType, uppercase, ghost buttons |\n| Button Small | 13px (0.81rem) | 300/500 | 1.20 | 0.13–0.2px | LamboType, compact button variant |\n| Caption | 14px (0.88rem) | 600/700 | 1.14–1.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–2.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 — 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 — 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 — the 12° 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** — sharp, angular rectangles that echo the aggressive lines of Lamborghini vehicles.\n\n**Gold Accent CTA** — 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** — 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** — 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** — Dark filled variant:\n- Default: bg \\`#000000\\`, text \\`#202020\\`\n- Used for: Inverted CTA on light sections\n\n**Gray Neutral** — 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** — 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 — 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–56px vertical, 40px horizontal\n- **Small spacing**: 2–5px 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 — 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 — buttons, cards, containers, images |\n| 1px | Subtle span elements |\n| 2px | Badges, close buttons, cookie elements — barely perceptible |\n| 20px | Toggle switches only — 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 — instead, the system creates elevation by shifting from absolute black to progressively lighter dark grays: \\`#000000\\` → \\`#181818\\` → \\`#202020\\` → \\`#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 — 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 — never dark gray as a substitute\n- Apply Lamborghini Gold (\\`#FFC000\\`) exclusively for primary CTA buttons — never for decorative purposes\n- Set all display headings in uppercase with LamboType — the brand voice is always SHOUTING\n- Use zero border-radius on buttons and cards — sharp angles are non-negotiable\n- Maintain tight line-heights (0.92–1.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 — UI is infrastructure, not decoration\n- Reserve hexagonal geometry for UI icons and the video control button\n- Use weight 400 (regular) for headlines — the typeface is distinctive enough without bold emphasis\n- Keep the gray palette achromatic — all neutrals are pure gray without color tinting\n\n### Don't\n- Introduce additional accent colors beyond gold — the monochrome-plus-gold system is sacred\n- Apply border-radius to buttons or cards — curved edges contradict the angular vehicle aesthetic\n- Use LamboType in italic or decorative styles — the brand is always upright and direct\n- Add gradients to buttons or surfaces — depth comes from surface layering, not blending\n- Use light backgrounds as the primary canvas — darkness is the default state, light is the exception\n- Mix lowercase into display headings — the uppercase convention communicates authority and power\n- Add hover animations with scale or translate — interactions should be color-only (background/opacity shifts)\n- Use Open Sans for display text — LamboType must handle all visible typography\n- Create busy layouts with many small elements — Lamborghini's design is about singular, bold statements\n- Apply shadows to elements — 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×44px)\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) — 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) → 80px (tablet) → 54px/40px (mobile)\n- **Button layout**: Side-by-side on desktop, stacks vertically on mobile\n- **Grid columns**: 3-column → 2-column → 1-column progression\n- **Section spacing**: Reduces from 56px → 40px → 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 — 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 — 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 — 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 — 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 — Lamborghini's system is extreme and every element must feel aggressive\n2. Reference specific color names and hex codes from this document — the palette has only about 5 active colors\n3. Use natural language descriptions, not CSS values — \"sharp-cut golden rectangle\" not \"border-radius: 0px; background: #FFC000\"\n4. Describe the desired \"feel\" alongside specific measurements — \"floating in total darkness\" communicates the black canvas better than \"background: #000000\"\n5. Remember that UPPERCASE IS THE DEFAULT — if text isn't uppercase at display sizes, it probably should be\n`;\n"],"mappings":";AACO,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/linear.d.ts

@@ -0,0 +1,3 @@
+declare const linearBrief = "# Design System Inspired by Linear\n\n## 1. Visual Theme & Atmosphere\n\nLinear's website is a masterclass in dark-mode-first product design \u2014 a near-black canvas (`#08090a`) where content emerges from darkness like starlight. The overall impression is one of extreme precision engineering: every element exists in a carefully calibrated hierarchy of luminance, from barely-visible borders (`rgba(255,255,255,0.05)`) to soft, luminous text (`#f7f8f8`). This is not a dark theme applied to a light design \u2014 it is darkness as the native medium, where information density is managed through subtle gradations of white opacity rather than color variation.\n\nThe typography system is built entirely on Inter Variable with OpenType features `\"cv01\"` and `\"ss03\"` enabled globally, giving the typeface a cleaner, more geometric character. Inter is used at a remarkable range of weights \u2014 from 300 (light body) through 510 (medium, Linear's signature weight) to 590 (semibold emphasis). The 510 weight is particularly distinctive: it sits between regular and medium, creating a subtle emphasis that doesn't shout. At display sizes (72px, 64px, 48px), Inter uses aggressive negative letter-spacing (-1.584px to -1.056px), creating compressed, authoritative headlines that feel engineered rather than designed. Berkeley Mono serves as the monospace companion for code and technical labels, with fallbacks to ui-monospace, SF Mono, and Menlo.\n\nThe color system is almost entirely achromatic \u2014 dark backgrounds with white/gray text \u2014 punctuated by a single brand accent: Linear's signature indigo-violet (`#5e6ad2` for backgrounds, `#7170ff` for interactive accents). This accent color is used sparingly and intentionally, appearing only on CTAs, active states, and brand elements. The border system uses ultra-thin, semi-transparent white borders (`rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`) that create structure without visual noise, like wireframes drawn in moonlight.\n\n**Key Characteristics:**\n- Dark-mode-native: `#08090a` marketing background, `#0f1011` panel background, `#191a1b` elevated surfaces\n- Inter Variable with `\"cv01\", \"ss03\"` globally \u2014 geometric alternates for a cleaner aesthetic\n- Signature weight 510 (between regular and medium) for most UI text\n- Aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)\n- Brand indigo-violet: `#5e6ad2` (bg) / `#7170ff` (accent) / `#828fff` (hover) \u2014 the only chromatic color in the system\n- Semi-transparent white borders throughout: `rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`\n- Button backgrounds at near-zero opacity: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)`\n- Multi-layered shadows with inset variants for depth on dark surfaces\n- Radix UI primitives as the component foundation (6 detected primitives)\n- Success green (`#27a644`, `#10b981`) used only for status indicators\n\n## 2. Color Palette & Roles\n\n### Background Surfaces\n- **Marketing Black** (`#010102` / `#08090a`): The deepest background \u2014 the canvas for hero sections and marketing pages. Near-pure black with an imperceptible blue-cool undertone.\n- **Panel Dark** (`#0f1011`): Sidebar and panel backgrounds. One step up from the marketing black.\n- **Level 3 Surface** (`#191a1b`): Elevated surface areas, card backgrounds, dropdowns.\n- **Secondary Surface** (`#28282c`): The lightest dark surface \u2014 used for hover states and slightly elevated components.\n\n### Text & Content\n- **Primary Text** (`#f7f8f8`): Near-white with a barely-warm cast. The default text color \u2014 not pure white, preventing eye strain on dark backgrounds.\n- **Secondary Text** (`#d0d6e0`): Cool silver-gray for body text, descriptions, and secondary content.\n- **Tertiary Text** (`#8a8f98`): Muted gray for placeholders, metadata, and de-emphasized content.\n- **Quaternary Text** (`#62666d`): The most subdued text \u2014 timestamps, disabled states, subtle labels.\n\n### Brand & Accent\n- **Brand Indigo** (`#5e6ad2`): Primary brand color \u2014 used for CTA button backgrounds, brand marks, and key interactive surfaces.\n- **Accent Violet** (`#7170ff`): Brighter variant for interactive elements \u2014 links, active states, selected items.\n- **Accent Hover** (`#828fff`): Lighter, more saturated variant for hover states on accent elements.\n- **Security Lavender** (`#7a7fad`): Muted indigo used specifically for security-related UI elements.\n\n### Status Colors\n- **Green** (`#27a644`): Primary success/active status. Used for \"in progress\" indicators.\n- **Emerald** (`#10b981`): Secondary success \u2014 pill badges, completion states.\n\n### Border & Divider\n- **Border Primary** (`#23252a`): Solid dark border for prominent separations.\n- **Border Secondary** (`#34343a`): Slightly lighter solid border.\n- **Border Tertiary** (`#3e3e44`): Lightest solid border variant.\n- **Border Subtle** (`rgba(255,255,255,0.05)`): Ultra-subtle semi-transparent border \u2014 the default.\n- **Border Standard** (`rgba(255,255,255,0.08)`): Standard semi-transparent border for cards, inputs, code blocks.\n- **Line Tint** (`#141516`): Nearly invisible line for the subtlest divisions.\n- **Line Tertiary** (`#18191a`): Slightly more visible divider line.\n\n### Light Mode Neutrals (for light theme contexts)\n- **Light Background** (`#f7f8f8`): Page background in light mode.\n- **Light Surface** (`#f3f4f5` / `#f5f6f7`): Subtle surface tinting.\n- **Light Border** (`#d0d6e0`): Visible border in light contexts.\n- **Light Border Alt** (`#e6e6e6`): Alternative lighter border.\n- **Pure White** (`#ffffff`): Card surfaces, highlights.\n\n### Overlay\n- **Overlay Primary** (`rgba(0,0,0,0.85)`): Modal/dialog backdrop \u2014 extremely dark for focus isolation.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `Inter Variable`, with fallbacks: `SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue`\n- **Monospace**: `Berkeley Mono`, with fallbacks: `ui-monospace, SF Mono, Menlo`\n- **OpenType Features**: `\"cv01\", \"ss03\"` enabled globally \u2014 cv01 provides an alternate lowercase 'a' (single-story), ss03 adjusts specific letterforms for a cleaner geometric appearance.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display XL | Inter Variable | 72px (4.50rem) | 510 | 1.00 (tight) | -1.584px | Hero headlines, maximum impact |\n| Display Large | Inter Variable | 64px (4.00rem) | 510 | 1.00 (tight) | -1.408px | Secondary hero text |\n| Display | Inter Variable | 48px (3.00rem) | 510 | 1.00 (tight) | -1.056px | Section headlines |\n| Heading 1 | Inter Variable | 32px (2.00rem) | 400 | 1.13 (tight) | -0.704px | Major section titles |\n| Heading 2 | Inter Variable | 24px (1.50rem) | 400 | 1.33 | -0.288px | Sub-section headings |\n| Heading 3 | Inter Variable | 20px (1.25rem) | 590 | 1.33 | -0.24px | Feature titles, card headers |\n| Body Large | Inter Variable | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.165px | Introduction text, feature descriptions |\n| Body Emphasis | Inter Variable | 17px (1.06rem) | 590 | 1.60 (relaxed) | normal | Emphasized body, sub-headings in content |\n| Body | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |\n| Body Medium | Inter Variable | 16px (1.00rem) | 510 | 1.50 | normal | Navigation, labels |\n| Body Semibold | Inter Variable | 16px (1.00rem) | 590 | 1.50 | normal | Strong emphasis |\n| Small | Inter Variable | 15px (0.94rem) | 400 | 1.60 (relaxed) | -0.165px | Secondary body text |\n| Small Medium | Inter Variable | 15px (0.94rem) | 510 | 1.60 (relaxed) | -0.165px | Emphasized small text |\n| Small Semibold | Inter Variable | 15px (0.94rem) | 590 | 1.60 (relaxed) | -0.165px | Strong small text |\n| Small Light | Inter Variable | 15px (0.94rem) | 300 | 1.47 | -0.165px | De-emphasized body |\n| Caption Large | Inter Variable | 14px (0.88rem) | 510\u2013590 | 1.50 | -0.182px | Sub-labels, category headers |\n| Caption | Inter Variable | 13px (0.81rem) | 400\u2013510 | 1.50 | -0.13px | Metadata, timestamps |\n| Label | Inter Variable | 12px (0.75rem) | 400\u2013590 | 1.40 | normal | Button text, small labels |\n| Micro | Inter Variable | 11px (0.69rem) | 510 | 1.40 | normal | Tiny labels |\n| Tiny | Inter Variable | 10px (0.63rem) | 400\u2013510 | 1.50 | -0.15px | Overline text, sometimes uppercase |\n| Link Large | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard links |\n| Link Medium | Inter Variable | 15px (0.94rem) | 510 | 2.67 | normal | Spaced navigation links |\n| Link Small | Inter Variable | 14px (0.88rem) | 510 | 1.50 | normal | Compact links |\n| Link Caption | Inter Variable | 13px (0.81rem) | 400\u2013510 | 1.50 | -0.13px | Footer, metadata links |\n| Mono Body | Berkeley Mono | 14px (0.88rem) | 400 | 1.50 | normal | Code blocks |\n| Mono Caption | Berkeley Mono | 13px (0.81rem) | 400 | 1.50 | normal | Code labels |\n| Mono Label | Berkeley Mono | 12px (0.75rem) | 400 | 1.40 | normal | Code metadata, sometimes uppercase |\n\n### Principles\n- **510 is the signature weight**: Linear uses Inter Variable's 510 weight (between regular 400 and medium 500) as its default emphasis weight. This creates a subtly bolded feel without the heaviness of traditional medium or semibold.\n- **Compression at scale**: Display sizes use progressively tighter letter-spacing \u2014 -1.584px at 72px, -1.408px at 64px, -1.056px at 48px, -0.704px at 32px. Below 24px, spacing relaxes toward normal.\n- **OpenType as identity**: `\"cv01\", \"ss03\"` aren't decorative \u2014 they transform Inter into Linear's distinctive typeface, giving it a more geometric, purposeful character.\n- **Three-tier weight system**: 400 (reading), 510 (emphasis/UI), 590 (strong emphasis). The 300 weight appears only in deliberately de-emphasized contexts.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Ghost Button (Default)**\n- Background: `rgba(255,255,255,0.02)`\n- Text: `#e2e4e7` (near-white)\n- Padding: comfortable\n- Radius: 6px\n- Border: `1px solid rgb(36, 40, 44)`\n- Outline: none\n- Focus shadow: `rgba(0,0,0,0.1) 0px 4px 12px`\n- Use: Standard actions, secondary CTAs\n\n**Subtle Button**\n- Background: `rgba(255,255,255,0.04)`\n- Text: `#d0d6e0` (silver-gray)\n- Padding: 0px 6px\n- Radius: 6px\n- Use: Toolbar actions, contextual buttons\n\n**Primary Brand Button (Inferred)**\n- Background: `#5e6ad2` (brand indigo)\n- Text: `#ffffff`\n- Padding: 8px 16px\n- Radius: 6px\n- Hover: `#828fff` shift\n- Use: Primary CTAs (\"Start building\", \"Sign up\")\n\n**Icon Button (Circle)**\n- Background: `rgba(255,255,255,0.03)` or `rgba(255,255,255,0.05)`\n- Text: `#f7f8f8` or `#ffffff`\n- Radius: 50%\n- Border: `1px solid rgba(255,255,255,0.08)`\n- Use: Close, menu toggle, icon-only actions\n\n**Pill Button**\n- Background: transparent\n- Text: `#d0d6e0`\n- Padding: 0px 10px 0px 5px\n- Radius: 9999px\n- Border: `1px solid rgb(35, 37, 42)`\n- Use: Filter chips, tags, status indicators\n\n**Small Toolbar Button**\n- Background: `rgba(255,255,255,0.05)`\n- Text: `#62666d` (muted)\n- Radius: 2px\n- Border: `1px solid rgba(255,255,255,0.05)`\n- Shadow: `rgba(0,0,0,0.03) 0px 1.2px 0px 0px`\n- Font: 12px weight 510\n- Use: Toolbar actions, quick-access controls\n\n### Cards & Containers\n- Background: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)` (never solid \u2014 always translucent)\n- Border: `1px solid rgba(255,255,255,0.08)` (standard) or `1px solid rgba(255,255,255,0.05)` (subtle)\n- Radius: 8px (standard), 12px (featured), 22px (large panels)\n- Shadow: `rgba(0,0,0,0.2) 0px 0px 0px 1px` or layered multi-shadow stacks\n- Hover: subtle background opacity increase\n\n### Inputs & Forms\n\n**Text Area**\n- Background: `rgba(255,255,255,0.02)`\n- Text: `#d0d6e0`\n- Border: `1px solid rgba(255,255,255,0.08)`\n- Padding: 12px 14px\n- Radius: 6px\n\n**Search Input**\n- Background: transparent\n- Text: `#f7f8f8`\n- Padding: 1px 32px (icon-aware)\n\n**Button-style Input**\n- Text: `#8a8f98`\n- Padding: 1px 6px\n- Radius: 5px\n- Focus shadow: multi-layer stack\n\n### Badges & Pills\n\n**Success Pill**\n- Background: `#10b981`\n- Text: `#f7f8f8`\n- Radius: 50% (circular)\n- Font: 10px weight 510\n- Use: Status dots, completion indicators\n\n**Neutral Pill**\n- Background: transparent\n- Text: `#d0d6e0`\n- Padding: 0px 10px 0px 5px\n- Radius: 9999px\n- Border: `1px solid rgb(35, 37, 42)`\n- Font: 12px weight 510\n- Use: Tags, filter chips, category labels\n\n**Subtle Badge**\n- Background: `rgba(255,255,255,0.05)`\n- Text: `#f7f8f8`\n- Padding: 0px 8px 0px 2px\n- Radius: 2px\n- Border: `1px solid rgba(255,255,255,0.05)`\n- Font: 10px weight 510\n- Use: Inline labels, version tags\n\n### Navigation\n- Dark sticky header on near-black background\n- Linear logomark left-aligned (SVG icon)\n- Links: Inter Variable 13\u201314px weight 510, `#d0d6e0` text\n- Active/hover: text lightens to `#f7f8f8`\n- CTA: Brand indigo button or ghost button\n- Mobile: hamburger collapse\n- Search: command palette trigger (`/` or `Cmd+K`)\n\n### Image Treatment\n- Product screenshots on dark backgrounds with subtle border (`rgba(255,255,255,0.08)`)\n- Top-rounded images: `12px 12px 0px 0px` radius\n- Dashboard/issue previews dominate feature sections\n- Subtle shadow beneath screenshots: `rgba(0,0,0,0.4) 0px 2px 4px`\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 4px, 7px, 8px, 11px, 12px, 16px, 19px, 20px, 22px, 24px, 28px, 32px, 35px\n- The 7px and 11px values suggest micro-adjustments for optical alignment\n- Primary rhythm: 8px, 16px, 24px, 32px (standard 8px grid)\n\n### Grid & Container\n- Max content width: approximately 1200px\n- Hero: centered single-column with generous vertical padding\n- Feature sections: 2\u20133 column grids for feature cards\n- Full-width dark sections with internal max-width constraints\n- Changelog: single-column timeline layout\n\n### Whitespace Philosophy\n- **Darkness as space**: On Linear's dark canvas, empty space isn't white \u2014 it's absence. The near-black background IS the whitespace, and content emerges from it.\n- **Compressed headlines, expanded surroundings**: Display text at 72px with -1.584px tracking is dense and compressed, but sits within vast dark padding. The contrast between typographic density and spatial generosity creates tension.\n- **Section isolation**: Each feature section is separated by generous vertical padding (80px+) with no visible dividers \u2014 the dark background provides natural separation.\n\n### Border Radius Scale\n- Micro (2px): Inline badges, toolbar buttons, subtle tags\n- Standard (4px): Small containers, list items\n- Comfortable (6px): Buttons, inputs, functional elements\n- Card (8px): Cards, dropdowns, popovers\n- Panel (12px): Panels, featured cards, section containers\n- Large (22px): Large panel elements\n- Full Pill (9999px): Chips, filter pills, status tags\n- Circle (50%): Icon buttons, avatars, status dots\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, `#010102` bg | Page background, deepest canvas |\n| Subtle (Level 1) | `rgba(0,0,0,0.03) 0px 1.2px 0px` | Toolbar buttons, micro-elevation |\n| Surface (Level 2) | `rgba(255,255,255,0.05)` bg + `1px solid rgba(255,255,255,0.08)` border | Cards, input fields, containers |\n| Inset (Level 2b) | `rgba(0,0,0,0.2) 0px 0px 12px 0px inset` | Recessed panels, inner shadows |\n| Ring (Level 3) | `rgba(0,0,0,0.2) 0px 0px 0px 1px` | Border-as-shadow technique |\n| Elevated (Level 4) | `rgba(0,0,0,0.4) 0px 2px 4px` | Floating elements, dropdowns |\n| Dialog (Level 5) | Multi-layer stack: `rgba(0,0,0,0) 0px 8px 2px, rgba(0,0,0,0.01) 0px 5px 2px, rgba(0,0,0,0.04) 0px 3px 2px, rgba(0,0,0,0.07) 0px 1px 1px, rgba(0,0,0,0.08) 0px 0px 1px` | Popovers, command palette, modals |\n| Focus | `rgba(0,0,0,0.1) 0px 4px 12px` + additional layers | Keyboard focus on interactive elements |\n\n**Shadow Philosophy**: On dark surfaces, traditional shadows (dark on dark) are nearly invisible. Linear solves this by using semi-transparent white borders as the primary depth indicator. Elevation isn't communicated through shadow darkness but through background luminance steps \u2014 each level slightly increases the white opacity of the surface background (`0.02` \u2192 `0.04` \u2192 `0.05`), creating a subtle stacking effect. The inset shadow technique (`rgba(0,0,0,0.2) 0px 0px 12px 0px inset`) creates a unique \"sunken\" effect for recessed panels, adding dimensional depth that traditional dark themes lack.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Inter Variable with `\"cv01\", \"ss03\"` on ALL text \u2014 these features are fundamental to Linear's typeface identity\n- Use weight 510 as your default emphasis weight \u2014 it's Linear's signature between-weight\n- Apply aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)\n- Build on near-black backgrounds: `#08090a` for marketing, `#0f1011` for panels, `#191a1b` for elevated surfaces\n- Use semi-transparent white borders (`rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`) instead of solid dark borders\n- Keep button backgrounds nearly transparent: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)`\n- Reserve brand indigo (`#5e6ad2` / `#7170ff`) for primary CTAs and interactive accents only\n- Use `#f7f8f8` for primary text \u2014 not pure `#ffffff`, which would be too harsh\n- Apply the luminance stacking model: deeper = darker bg, elevated = slightly lighter bg\n\n### Don't\n- Don't use pure white (`#ffffff`) as primary text \u2014 `#f7f8f8` prevents eye strain\n- Don't use solid colored backgrounds for buttons \u2014 transparency is the system (rgba white at 0.02\u20130.05)\n- Don't apply the brand indigo decoratively \u2014 it's reserved for interactive/CTA elements only\n- Don't use positive letter-spacing on display text \u2014 Inter at large sizes always runs negative\n- Don't use visible/opaque borders on dark backgrounds \u2014 borders should be whisper-thin semi-transparent white\n- Don't skip the OpenType features (`\"cv01\", \"ss03\"`) \u2014 without them, it's generic Inter, not Linear's Inter\n- Don't use weight 700 (bold) \u2014 Linear's maximum weight is 590, with 510 as the workhorse\n- Don't introduce warm colors into the UI chrome \u2014 the palette is cool gray with blue-violet accent only\n- Don't use drop shadows for elevation on dark surfaces \u2014 use background luminance stepping instead\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <600px | Single column, compact padding |\n| Mobile | 600\u2013640px | Standard mobile layout |\n| Tablet | 640\u2013768px | Two-column grids begin |\n| Desktop Small | 768\u20131024px | Full card grids, expanded padding |\n| Desktop | 1024\u20131280px | Standard desktop, full navigation |\n| Large Desktop | >1280px | Full layout, generous margins |\n\n### Touch Targets\n- Buttons use comfortable padding with 6px radius minimum\n- Navigation links at 13\u201314px with adequate spacing\n- Pill tags have 10px horizontal padding for touch accessibility\n- Icon buttons at 50% radius ensure circular, easy-to-tap targets\n- Search trigger is prominently placed with generous hit area\n\n### Collapsing Strategy\n- Hero: 72px \u2192 48px \u2192 32px display text, tracking adjusts proportionally\n- Navigation: horizontal links + CTAs \u2192 hamburger menu at 768px\n- Feature cards: 3-column \u2192 2-column \u2192 single column stacked\n- Product screenshots: maintain aspect ratio, may reduce padding\n- Changelog: timeline maintains single-column through all sizes\n- Footer: multi-column \u2192 stacked single column\n- Section spacing: 80px+ \u2192 48px on mobile\n\n### Image Behavior\n- Dashboard screenshots maintain border treatment at all sizes\n- Hero visuals simplify on mobile (fewer floating UI elements)\n- Product screenshots use responsive sizing with consistent radius\n- Dark background ensures screenshots blend naturally at any viewport\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Brand Indigo (`#5e6ad2`)\n- Page Background: Marketing Black (`#08090a`)\n- Panel Background: Panel Dark (`#0f1011`)\n- Surface: Level 3 (`#191a1b`)\n- Heading text: Primary White (`#f7f8f8`)\n- Body text: Silver Gray (`#d0d6e0`)\n- Muted text: Tertiary Gray (`#8a8f98`)\n- Subtle text: Quaternary Gray (`#62666d`)\n- Accent: Violet (`#7170ff`)\n- Accent Hover: Light Violet (`#828fff`)\n- Border (default): `rgba(255,255,255,0.08)`\n- Border (subtle): `rgba(255,255,255,0.05)`\n- Focus ring: Multi-layer shadow stack\n\n### Example Component Prompts\n- \"Create a hero section on `#08090a` background. Headline at 48px Inter Variable weight 510, line-height 1.00, letter-spacing -1.056px, color `#f7f8f8`, font-feature-settings `'cv01', 'ss03'`. Subtitle at 18px weight 400, line-height 1.60, color `#8a8f98`. Brand CTA button (`#5e6ad2`, 6px radius, 8px 16px padding) and ghost button (`rgba(255,255,255,0.02)` bg, `1px solid rgba(255,255,255,0.08)` border, 6px radius).\"\n- \"Design a card on dark background: `rgba(255,255,255,0.02)` background, `1px solid rgba(255,255,255,0.08)` border, 8px radius. Title at 20px Inter Variable weight 590, letter-spacing -0.24px, color `#f7f8f8`. Body at 15px weight 400, color `#8a8f98`, letter-spacing -0.165px.\"\n- \"Build a pill badge: transparent background, `#d0d6e0` text, 9999px radius, 0px 10px padding, `1px solid #23252a` border, 12px Inter Variable weight 510.\"\n- \"Create navigation: dark sticky header on `#0f1011`. Inter Variable 13px weight 510 for links, `#d0d6e0` text. Brand indigo CTA `#5e6ad2` right-aligned with 6px radius. Bottom border: `1px solid rgba(255,255,255,0.05)`.\"\n- \"Design a command palette: `#191a1b` background, `1px solid rgba(255,255,255,0.08)` border, 12px radius, multi-layer shadow stack. Input at 16px Inter Variable weight 400, `#f7f8f8` text. Results list with 13px weight 510 labels in `#d0d6e0` and 12px metadata in `#62666d`.\"\n\n### Iteration Guide\n1. Always set font-feature-settings `\"cv01\", \"ss03\"` on all Inter text \u2014 this is non-negotiable for Linear's look\n2. Letter-spacing scales with font size: -1.584px at 72px, -1.056px at 48px, -0.704px at 32px, normal below 16px\n3. Three weights: 400 (read), 510 (emphasize/navigate), 590 (announce)\n4. Surface elevation via background opacity: `rgba(255,255,255, 0.02 \u2192 0.04 \u2192 0.05)` \u2014 never solid backgrounds on dark\n5. Brand indigo (`#5e6ad2` / `#7170ff`) is the only chromatic color \u2014 everything else is grayscale\n6. Borders are always semi-transparent white, never solid dark colors on dark backgrounds\n7. Berkeley Mono for any code or technical content, Inter Variable for everything else\n";
+
+export { linearBrief };