@hex-core/themes 0.1.0 → 0.2.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/raycast.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const raycastBrief = `# Design System Inspired by Raycast\n\n## 1. Visual Theme & Atmosphere\n\nRaycast's marketing site feels like the dark interior of a precision instrument — a Swiss watch case carved from obsidian. The background isn't just dark, it's an almost-black blue-tint (\\`#07080a\\`) that creates a sense of being inside a macOS native application rather than a website. Every surface, every border, every shadow is calibrated to evoke the feeling of a high-performance desktop utility: fast, minimal, trustworthy.\n\nThe signature move is the layered shadow system borrowed from macOS window chrome: multi-layer box-shadows with inset highlights that simulate physical depth, as if cards and buttons are actual pressed or raised glass elements on a dark desk. Combined with Raycast Red (\\`#FF6363\\`) — deployed almost exclusively in the hero's iconic diagonal stripe pattern — the palette creates a brand that reads as \"powerful tool with personality.\" The red doesn't dominate; it punctuates.\n\nInter is used everywhere — headings, body, buttons, captions — with extensive OpenType features (\\`calt\\`, \\`kern\\`, \\`liga\\`, \\`ss03\\`) creating a consistent, readable typographic voice. The positive letter-spacing (0.2px–0.4px on body text) is unusual for a dark UI and gives the text an airy, breathable quality that counterbalances the dense, dark surfaces. GeistMono appears for code elements, reinforcing the developer-tool identity.\n\n**Key Characteristics:**\n- Near-black blue-tinted background (\\`#07080a\\`) — not pure black, subtly blue-shifted\n- macOS-native shadow system with multi-layer inset highlights simulating physical depth\n- Raycast Red (\\`#FF6363\\`) as a punctuation color — hero stripes, not pervasive\n- Inter with positive letter-spacing (0.2px) for an airy, readable dark-mode experience\n- Radix UI component primitives powering the interaction layer\n- Subtle rgba white borders (0.06–0.1 opacity) for containment on dark surfaces\n- Keyboard shortcut styling with gradient key caps and heavy shadows\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Near-Black Blue** (\\`#07080a\\`): Primary page background — the foundational void with a subtle blue-cold undertone\n- **Pure White** (\\`#ffffff\\`): Primary heading text, high-emphasis elements\n- **Raycast Red** (\\`#FF6363\\` / \\`hsl(0, 100%, 69%)\\`): Brand accent — hero stripes, danger states, critical highlights\n\n### Secondary & Accent\n- **Raycast Blue** (\\`hsl(202, 100%, 67%)\\` / ~\\`#55b3ff\\`): Interactive accent — links, focus states, selected items\n- **Raycast Green** (\\`hsl(151, 59%, 59%)\\` / ~\\`#5fc992\\`): Success states, positive indicators\n- **Raycast Yellow** (\\`hsl(43, 100%, 60%)\\` / ~\\`#ffbc33\\`): Warning accents, highlights\n- **Blue Transparent** (\\`hsla(202, 100%, 67%, 0.15)\\`): Blue tint overlay for interactive surfaces\n- **Red Transparent** (\\`hsla(0, 100%, 69%, 0.15)\\`): Red tint overlay for danger/error surfaces\n\n### Surface & Background\n- **Deep Background** (\\`#07080a\\`): Page canvas, the darkest surface\n- **Surface 100** (\\`#101111\\`): Elevated surface, card backgrounds\n- **Key Start** (\\`#121212\\`): Keyboard key gradient start\n- **Key End** (\\`#0d0d0d\\`): Keyboard key gradient end\n- **Card Surface** (\\`#1b1c1e\\`): Badge backgrounds, tag fills, elevated containers\n- **Button Foreground** (\\`#18191a\\`): Dark surface for button text on light backgrounds\n\n### Neutrals & Text\n- **Near White** (\\`#f9f9f9\\` / \\`hsl(240, 11%, 96%)\\`): Primary body text, high-emphasis content\n- **Light Gray** (\\`#cecece\\` / \\`#cdcdce\\`): Secondary body text, descriptions\n- **Silver** (\\`#c0c0c0\\`): Tertiary text, subdued labels\n- **Medium Gray** (\\`#9c9c9d\\`): Link default color, secondary navigation\n- **Dim Gray** (\\`#6a6b6c\\`): Disabled text, low-emphasis labels\n- **Dark Gray** (\\`#434345\\`): Muted borders, inactive navigation links\n- **Border** (\\`hsl(195, 5%, 15%)\\` / ~\\`#252829\\`): Standard border color for cards and dividers\n- **Dark Border** (\\`#2f3031\\`): Separator lines, table borders\n\n### Semantic & Accent\n- **Error Red** (\\`hsl(0, 100%, 69%)\\`): Error states, destructive actions\n- **Success Green** (\\`hsl(151, 59%, 59%)\\`): Success confirmations, positive states\n- **Warning Yellow** (\\`hsl(43, 100%, 60%)\\`): Warnings, attention-needed states\n- **Info Blue** (\\`hsl(202, 100%, 67%)\\`): Informational highlights, links\n\n### Gradient System\n- **Keyboard Key Gradient**: Linear gradient from \\`#121212\\` (top) to \\`#0d0d0d\\` (bottom) — simulates physical key depth\n- **Warm Glow**: \\`rgba(215, 201, 175, 0.05)\\` radial spread — subtle warm ambient glow behind featured elements\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: \\`Inter\\` — humanist sans-serif, used everywhere. Fallbacks: \\`Inter Fallback\\`, system sans-serif\n- **System**: \\`SF Pro Text\\` — Apple system font for select macOS-native UI elements. Fallbacks: \\`SF Pro Icons\\`, \\`Inter\\`, \\`Inter Fallback\\`\n- **Monospace**: \\`GeistMono\\` — Vercel's monospace font for code elements. Fallbacks: \\`ui-monospace\\`, \\`SFMono-Regular\\`, \\`Roboto Mono\\`, \\`Menlo\\`, \\`Monaco\\`\n- **OpenType features**: \\`calt\\`, \\`kern\\`, \\`liga\\`, \\`ss03\\` enabled globally; \\`ss02\\`, \\`ss08\\` on display text; \\`liga\\` disabled (\\`\"liga\" 0\\`) on hero headings\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Display Hero | 64px | 600 | 1.10 | 0px | OpenType: liga 0, ss02, ss08 |\n| Section Display | 56px | 400 | 1.17 | 0.2px | OpenType: calt, kern, liga, ss03 |\n| Section Heading | 24px | 500 | normal | 0.2px | OpenType: calt, kern, liga, ss03 |\n| Card Heading | 22px | 400 | 1.15 | 0px | OpenType: calt, kern, liga, ss03 |\n| Sub-heading | 20px | 500 | 1.60 | 0.2px | Relaxed line-height for readability |\n| Body Large | 18px | 400 | 1.15 | 0.2px | OpenType: calt, kern, liga, ss03 |\n| Body | 16px | 500 | 1.60 | 0.2px | Primary body text, relaxed rhythm |\n| Body Tight | 16px | 400 | 1.15 | 0.1px | UI labels, compact contexts |\n| Button | 16px | 600 | 1.15 | 0.3px | Semibold, slightly wider tracking |\n| Nav Link | 16px | 500 | 1.40 | 0.3px | Links in navigation |\n| Caption | 14px | 500 | 1.14 | 0.2px | Small labels, metadata |\n| Caption Bold | 14px | 600 | 1.40 | 0px | Emphasized captions |\n| Small | 12px | 600 | 1.33 | 0px | Badges, tags, micro-labels |\n| Small Link | 12px | 400 | 1.50 | 0.4px | Footer links, fine print |\n| Code | 14px (GeistMono) | 500 | 1.60 | 0.3px | Code blocks, technical content |\n| Code Small | 12px (GeistMono) | 400 | 1.60 | 0.2px | Inline code, terminal output |\n\n### Principles\n- **Positive tracking on dark**: Unlike most dark UIs that use tight or neutral letter-spacing, Raycast applies +0.2px to +0.4px — creating an airy, readable feel that compensates for the dark background\n- **Weight 500 as baseline**: Most body text uses medium weight (500), not regular (400) — subtle extra heft improves legibility on dark surfaces\n- **Display restraint**: Hero text at 64px/600 is confident but not oversized — Raycast avoids typographic spectacle in favor of functional elegance\n- **OpenType everywhere**: \\`ss03\\` (stylistic set 3) is enabled globally across Inter, giving the typeface a slightly more geometric, tool-like quality\n\n## 4. Component Stylings\n\n### Buttons\n- **Primary Pill**: Transparent background, white text, pill shape (86px radius), multi-layer inset shadow (\\`rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset\\`). Hover: opacity 0.6\n- **Secondary Button**: Transparent background, white text, 6px radius, \\`1px solid rgba(255, 255, 255, 0.1)\\` border, subtle drop shadow (\\`rgba(0, 0, 0, 0.03) 0px 7px 3px\\`). Hover: opacity 0.6\n- **Ghost Button**: No background or border, gray text (\\`#6a6b6c\\`), 86px radius, same inset shadow. Hover: opacity 0.6, text brightens to white\n- **CTA (Download)**: Semi-transparent white background (\\`hsla(0, 0%, 100%, 0.815)\\`), dark text (\\`#18191a\\`), pill shape. Hover: full white background (\\`hsl(0, 0%, 100%)\\`)\n- **Transition**: All buttons use opacity transition for hover rather than background-color change — a signature Raycast interaction pattern\n\n### Cards & Containers\n- **Standard Card**: \\`#101111\\` surface, \\`1px solid rgba(255, 255, 255, 0.06)\\` border, 12px–16px border-radius\n- **Elevated Card**: Ring shadow \\`rgb(27, 28, 30) 0px 0px 0px 1px\\` outer + \\`rgb(7, 8, 10) 0px 0px 0px 1px inset\\` inner — creates a double-ring containment\n- **Feature Card**: 16px–20px border-radius, subtle warm glow (\\`rgba(215, 201, 175, 0.05) 0px 0px 20px 5px\\`) behind hero elements\n- **Hover**: Cards brighten slightly via border opacity increase or subtle shadow enhancement\n\n### Inputs & Forms\n- Dark input fields with \\`#07080a\\` background, \\`1px solid rgba(255, 255, 255, 0.08)\\` border, 8px border-radius\n- Focus state: Border brightens, blue glow (\\`hsla(202, 100%, 67%, 0.15)\\`) ring appears\n- Text: \\`#f9f9f9\\` input color, \\`#6a6b6c\\` placeholder\n- Labels: \\`#9c9c9d\\` at 14px weight 500\n\n### Navigation\n- **Top nav**: Dark background blending with page, white text links at 16px weight 500\n- **Nav links**: Gray text (\\`#9c9c9d\\`) → white on hover, underline decoration on hover\n- **CTA button**: Semi-transparent white pill at nav end\n- **Mobile**: Collapses to hamburger, maintains dark theme\n- **Sticky**: Nav fixed at top with subtle border separator\n\n### Image Treatment\n- **Product screenshots**: macOS window chrome style — rounded corners (12px), deep shadows simulating floating windows\n- **Full-bleed sections**: Dark screenshots blend seamlessly into the dark background\n- **Hero illustration**: Diagonal stripe pattern in Raycast Red — abstract, geometric, brand-defining\n- **App UI embeds**: Showing actual Raycast command palette and extensions — product as content\n\n### Keyboard Shortcut Keys\n- **Key cap styling**: Gradient background (\\`#121212\\` → \\`#0d0d0d\\`), heavy multi-layer shadow (\\`rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px\\` + inset shadows), creating realistic physical key appearance\n- Border-radius: 4px–6px for individual keys\n\n### Badges & Tags\n- **Neutral badge**: \\`#1b1c1e\\` background, white text, 6px radius, 14px font at weight 500, \\`0px 6px\\` padding\n- Compact, pill-like treatment for categorization\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 1px, 2px, 3px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px\n- **Section padding**: 80px–120px vertical between major sections\n- **Card padding**: 16px–32px internal spacing\n- **Component gaps**: 8px–16px between related elements\n\n### Grid & Container\n- **Max width**: ~1200px container (breakpoint at 1204px), centered\n- **Column patterns**: Single-column hero, 2–3 column feature grids, full-width showcase sections\n- **App showcase**: Product UI presented in centered window frames\n\n### Whitespace Philosophy\n- **Dramatic negative space**: Sections float in vast dark void, creating cinematic pacing between features\n- **Dense product, sparse marketing**: The product UI screenshots are information-dense, but the surrounding marketing copy uses minimal text with generous spacing\n- **Vertical rhythm**: Consistent 24px–32px gaps between elements within sections\n\n### Border Radius Scale\n- **2px–3px**: Micro-elements, code spans, tiny indicators\n- **4px–5px**: Keyboard keys, small interactive elements\n- **6px**: Buttons, badges, tags — the workhorse radius\n- **8px**: Input fields, inline components\n- **9px–11px**: Images, medium containers\n- **12px**: Standard cards, product screenshots\n- **16px**: Large cards, feature sections\n- **20px**: Hero cards, prominent containers\n- **86px+**: Pill buttons, nav CTAs — full pill shape\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Void) | No shadow, \\`#07080a\\` surface | Page background |\n| Level 1 (Subtle) | \\`rgba(0, 0, 0, 0.28) 0px 1.189px 2.377px\\` | Minimal lift, inline elements |\n| Level 2 (Ring) | \\`rgb(27, 28, 30) 0px 0px 0px 1px\\` outer + \\`rgb(7, 8, 10) 0px 0px 0px 1px inset\\` inner | Card containment, double-ring technique |\n| Level 3 (Button) | \\`rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset\\` + \\`rgba(255, 255, 255, 0.25) 0px 0px 0px 1px\\` + \\`rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset\\` | macOS-native button press — white highlight top, dark inset bottom |\n| Level 4 (Key) | 5-layer shadow stack with inset press effects | Keyboard shortcut key caps — physical 3D appearance |\n| Level 5 (Floating) | \\`rgba(0, 0, 0, 0.5) 0px 0px 0px 2px\\` + \\`rgba(255, 255, 255, 0.19) 0px 0px 14px\\` + insets | Command palette, floating panels — heavy depth with glow |\n\n### Shadow Philosophy\nRaycast's shadow system is the most macOS-native on the web. Multi-layer shadows combine:\n- **Outer rings** for containment (replacing traditional borders)\n- **Inset top highlights** (\\`rgba(255, 255, 255, 0.05–0.25)\\`) simulating light source from above\n- **Inset bottom darks** (\\`rgba(0, 0, 0, 0.2)\\`) simulating shadow underneath\n- The effect is physical: elements feel like glass or brushed metal, not flat rectangles\n\n### Decorative Depth\n- **Warm glow**: \\`rgba(215, 201, 175, 0.05) 0px 0px 20px 5px\\` behind featured elements — a subtle warm aura on the cold dark canvas\n- **Blue info glow**: \\`rgba(0, 153, 255, 0.15)\\` for interactive state emphasis\n- **Red danger glow**: \\`rgba(255, 99, 99, 0.15)\\` for error/destructive state emphasis\n\n## 7. Do's and Don'ts\n\n### Do\n- Use \\`#07080a\\` (not pure black) as the background — the blue-cold tint is essential to the Raycast feel\n- Apply positive letter-spacing (+0.2px) on body text — this is deliberately different from most dark UIs\n- Use multi-layer shadows with inset highlights for interactive elements — the macOS-native depth is signature\n- Keep Raycast Red (\\`#FF6363\\`) as punctuation, not pervasive — reserve it for hero moments and error states\n- Use \\`rgba(255, 255, 255, 0.06)\\` borders for card containment — barely visible, structurally essential\n- Apply weight 500 as the body text baseline — medium weight improves dark-mode legibility\n- Use pill shapes (86px+ radius) for primary CTAs, rectangular shapes (6px–8px) for secondary actions\n- Enable OpenType features \\`calt\\`, \\`kern\\`, \\`liga\\`, \\`ss03\\` on all Inter text\n- Use opacity transitions (hover: opacity 0.6) for button interactions, not color changes\n\n### Don't\n- Use pure black (\\`#000000\\`) as the background — the blue tint differentiates Raycast from generic dark themes\n- Apply negative letter-spacing on body text — Raycast deliberately uses positive spacing for readability\n- Use Raycast Blue as the primary accent for everything — blue is for interactive/info, red is the brand color\n- Create single-layer flat shadows — the multi-layer inset system is core to the macOS-native aesthetic\n- Use regular weight (400) for body text when 500 is available — the extra weight prevents dark-mode text from feeling thin\n- Mix warm and cool borders — stick to the cool gray (\\`hsl(195, 5%, 15%)\\`) border palette\n- Apply heavy drop shadows without inset companions — shadows always come in pairs (outer + inset)\n- Use decorative elements, gradients, or colorful backgrounds — the dark void is the stage, content is the performer\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <600px | Single column, stacked cards, hamburger nav, hero text reduces to ~40px |\n| Small Tablet | 600px–768px | 2-column grid begins, nav partially visible |\n| Tablet | 768px–1024px | 2–3 column features, nav expanding, screenshots scale |\n| Desktop | 1024px–1200px | Full layout, all nav links visible, 64px hero display |\n| Large Desktop | >1200px | Max-width container centered, generous side margins |\n\n### Touch Targets\n- Pill buttons: 86px radius with 20px padding — well above 44px minimum\n- Secondary buttons: 8px padding minimum, but border provides visual target expansion\n- Nav links: 16px text with surrounding padding for accessible touch targets\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav → hamburger at mobile with slide-out menu\n- **Hero**: 64px display → 48px → 36px across breakpoints\n- **Feature grids**: 3-column → 2-column → single-column stack\n- **Product screenshots**: Scale within containers, maintaining macOS window chrome proportions\n- **Keyboard shortcut displays**: Simplify or hide on mobile where keyboard shortcuts are irrelevant\n\n### Image Behavior\n- Product screenshots scale responsively within fixed-ratio containers\n- Hero diagonal stripe pattern scales proportionally\n- macOS window chrome rounded corners maintained at all sizes\n- No lazy-loading artifacts — images are critical to the product narrative\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Background: Near-Black Blue (\\`#07080a\\`)\n- Primary Text: Near White (\\`#f9f9f9\\`)\n- Brand Accent: Raycast Red (\\`#FF6363\\`)\n- Interactive Blue: Raycast Blue (\\`hsl(202, 100%, 67%)\\` / ~\\`#55b3ff\\`)\n- Secondary Text: Medium Gray (\\`#9c9c9d\\`)\n- Card Surface: Surface 100 (\\`#101111\\`)\n- Border: Dark Border (\\`hsl(195, 5%, 15%)\\` / ~\\`#252829\\`)\n\n### Example Component Prompts\n- \"Create a hero section on #07080a background with 64px Inter heading (weight 600, line-height 1.1), near-white text (#f9f9f9), and a semi-transparent white pill CTA button (hsla(0,0%,100%,0.815), 86px radius, dark text #18191a)\"\n- \"Design a feature card with #101111 background, 1px solid rgba(255,255,255,0.06) border, 16px border-radius, double-ring shadow (rgb(27,28,30) 0px 0px 0px 1px outer), 22px Inter heading, and #9c9c9d body text\"\n- \"Build a navigation bar on dark background (#07080a), Inter links at 16px weight 500 in #9c9c9d, hover to white, and a translucent white pill button at the right end\"\n- \"Create a keyboard shortcut display with key caps using gradient background (#121212→#0d0d0d), 5-layer shadow for physical depth, 4px radius, Inter 12px weight 600 text\"\n- \"Design an alert card with #101111 surface, Raycast Red (#FF6363) left border accent, translucent red glow (hsla(0,100%,69%,0.15)), white heading, and #cecece description text\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Check the background is \\`#07080a\\` not pure black — the blue tint is critical\n2. Verify letter-spacing is positive (+0.2px) on body text — negative spacing breaks the Raycast aesthetic\n3. Ensure shadows have both outer and inset layers — single-layer shadows look flat and wrong\n4. Confirm Inter has OpenType features \\`calt\\`, \\`kern\\`, \\`liga\\`, \\`ss03\\` enabled\n5. Test that hover states use opacity transitions (0.6) not color swaps — this is a core interaction pattern\n`;\n"],"mappings":";AACO,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/renault.d.ts

@@ -0,0 +1,3 @@
+declare const renaultBrief = "# Design System Inspired by Renault\n\n## 1. Visual Theme & Atmosphere\n\nRenault's website is a vibrant digital showroom that balances French automotive elegance with bold, forward-leaning energy \u2014 a departure from the monochromatic austerity of German or Italian luxury brands. The page opens with a full-screen hero that washes the viewport in a sweeping aurora gradient \u2014 ribbons of magenta, violet, and teal bleeding across the frame behind a dramatically lit vehicle. This chromatic expressiveness is the site's signature: while the interface structure is disciplined (NouvelR typography, black-and-white CTA framework, zero-radius buttons), the content is alive with color \u2014 gradient washes on hero slides, saturated vehicle photography, and splashes of Renault Yellow (`#EFDF00`) on accent CTAs. The effect is a showroom that feels energized rather than hushed.\n\nThe layout follows a card-based editorial rhythm. Below the hero carousel, content is organized into a grid of PromoCards \u2014 each a full-bleed photographic panel with a dark gradient overlay at top (fading from `rgba(0,0,0,0.6)` to transparent) to ensure white heading text remains legible over vivid imagery. These cards alternate between light and dark modes: white editorial panels with black text sit beside black `is-alternative-mode` sections with white text, creating a chessboard-like visual cadence. The grid is generous \u2014 large card formats dominate, giving each vehicle or campaign its own visual territory. The lower sections shift to a fully dark canvas (Absolute Black backgrounds) for the E-Tech electric and technology showcases, establishing a deliberate mood shift: electrification lives in darkness, tradition in light.\n\nTypography is unified under NouvelR \u2014 a proprietary geometric sans-serif designed by Black[Foundry] exclusively for Renault's rebrand. The typeface features a distinctive \"radical r\" with a terminal cut at 28 degrees to echo the Renault diamond logo's angles. Available in 6 weights from Light to Extrabold, the site primarily uses Bold (700) for headings and Regular (400) for body. Display headlines run large \u2014 56px/0.95 line-height for hero titles, creating dense, impactful text blocks that sit tight against each other. The font supports Latin, Greek, Cyrillic, Hebrew, Arabic, and Korean, reflecting Renault's global market reach. All text rendering feels precise and engineered, with the geometric proportions lending a sense of modernity that aligns with Renault's electric-first brand positioning.\n\n**Key Characteristics:**\n- Full-screen hero carousel with vivid aurora gradient backgrounds (magenta/violet/teal) behind vehicle imagery\n- NouvelR proprietary typeface with 28-degree \"radical r\" cut matching the diamond logo geometry\n- Renault Yellow (`#EFDF00`) as the super-primary accent \u2014 used sparingly for highest-priority CTAs\n- Zero border-radius on all buttons \u2014 sharp rectangular forms expressing precision engineering\n- Card-based editorial grid with full-bleed photography and dark gradient overlays\n- Binary black/white CTA system: primary (black bg/white text) and ghost (transparent/white border)\n- PromoCard dark-mode alternation creating a chessboard rhythm between light and dark sections\n- PrimeReact (21 components) + Element Plus (19 components) powering interactive elements\n- Link hover state in Renault Blue (`#1883FD`) \u2014 the sole chromatic interaction color\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Renault Yellow** (`#EFDF00`): The brand's signature Pantone \u2014 a vivid, saturated yellow used for super-primary CTAs and the highest-priority action buttons. Appears as `--CtaLink-background-color` on `.is-cta-super-primary` class. Carries the energy of the diamond logo\n- **Absolute Black** (`#000000`): Primary button background, heading text on light surfaces, and the dominant dark section surface. The structural anchor of the entire interface\n- **Pure White** (`#FFFFFF`): Primary surface for editorial content, inverted button backgrounds, hero text color, and the dominant light-mode canvas (--rt-color-white)\n\n### Secondary & Accent\n- **Soft Yellow** (`#F8EB4C`): Lighter, warmer variant of Renault Yellow \u2014 used for hover/pressed states on yellow CTAs and secondary accent contexts\n- **Renault Blue** (`#1883FD`): Link hover color across all link variants \u2014 a bright, confident blue that signals interactivity without competing with the yellow brand accent\n- **Warm Gray** (`#D9D9D6`): Subtle warm neutral used for disabled states, inactive UI elements, and soft borders \u2014 carries a slight warmth that distinguishes it from cold grays\n\n### Surface & Background\n- **Pure White** (`#FFFFFF`): Page background, light editorial sections, navigation bar, and footer\n- **Absolute Black** (`#000000`): Hero backgrounds, PromoCard dark-mode sections (`is-alternative-mode`), and E-Tech showcase areas\n- **Charcoal** (`#222222`): Secondary dark surface for text-heavy dark sections and footer sub-regions (--rt-color-dark)\n- **Pale Silver** (`#F2F2F2`): Subtle alternate light surface for section differentiation and card borders\n\n### Neutrals & Text\n- **Absolute Black** (`#000000`): Primary heading and body text on light surfaces \u2014 Renault uses true black rather than near-black\n- **Pure White** (`#FFFFFF`): Primary text on dark surfaces \u2014 hero headlines, dark-section headings, and inverted button labels\n- **Warm Gray** (`#D9D9D6`): Tertiary text, metadata, and subdued labels\n- **Border Gray** (`#D1D1D1`): Input field borders and subtle separators\n\n### Semantic & Accent\n- **Success Green** (`#8DC572`): Positive status indicators and confirmation messages (--rt-color-success)\n- **Error Rose** (`#BE6464`): Form validation errors and warning states (--rt-color-error)\n- **Warning Amber** (`#F0AD4E`): Cautionary alerts and attention-requiring states (--rt-color-warning)\n- **Info Blue** (`#337AB7`): Informational callouts and neutral status messaging (--rt-color-info)\n\n### Gradient System\n- **Hero Aurora**: Sweeping multi-color gradients (magenta \u2192 violet \u2192 teal) applied to hero slide backgrounds \u2014 the site's most distinctive visual element. These are photographic/composited rather than CSS gradients\n- **PromoCard Overlay**: `linear-gradient(rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%)` \u2014 applied to card tops to ensure heading text legibility over photography\n- No flat CSS gradients on surfaces \u2014 depth comes from photographic treatment and the black/white alternation\n\n## 3. Typography Rules\n\n### Font Family\n- **NouvelR**: The sole typeface. A proprietary geometric sans-serif designed by Black[Foundry] for Renault's 2021+ rebrand. Features a distinctive \"radical r\" with a 28-degree terminal cut matching the diamond logo angle. Available in 6 weights (Light to Extrabold), supports 6 writing systems. Fallback: `sans-serif`. Declared as `\"NouvelR, sans-serif\"` in CSS\n- **No secondary typeface**: Unlike Ferrari (FerrariSans + Body-Font) or Lamborghini (LamboType + Open Sans), Renault uses a single font family for all text \u2014 headings, body, buttons, captions, and navigation\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Hero Title | 56px (3.50rem) | 700 | 0.95 (53.2px) | normal | NouvelR, white on dark hero, all-caps model names |\n| Section Heading | 40px (2.50rem) | 700 | 0.95 (38px) | normal | NouvelR, PromoCard headings on dark/light sections |\n| Card Heading | 32px (2.00rem) | 700 | 0.95 | normal | NouvelR, medium-scale card headings |\n| Subheading | 24px (1.50rem) | 700 | 0.95 | normal | NouvelR, section sub-titles |\n| Module Title | 21.92px (1.37rem) | 600 | 1.20 | normal | NouvelR, component headings |\n| Content Title | 20px (1.25rem) | 700 | 0.95 | normal | NouvelR, smaller section titles |\n| UI Heading | 19.2px (1.20rem) | 600 | 1.30 | normal | NouvelR, card UI headings |\n| Emphasis | 18px (1.13rem) | 700 | 1.00 | normal | NouvelR, emphasized inline text and links |\n| Body Heading | 16px (1.00rem) | 700 | 1.40 | normal | NouvelR, paragraph-level headings |\n| Body Text | 14px (0.88rem) | 400 | 1.40 | normal | NouvelR, paragraph and descriptive content |\n| Body Bold | 14px (0.88rem) | 700 | 1.57 | normal | NouvelR, emphasized body text |\n| Button Label | 14.4px (0.90rem) | 700 | 1.00 | 0.144px | NouvelR, primary button text |\n| Nav Link | 13px (0.81rem) | 700 | 1.50 | normal | NouvelR, navigation and footer links |\n| Caption | 12.8px (0.80rem) | 400 | 1.10 | normal | NouvelR, small descriptive text |\n| Small Label | 12px (0.75rem) | 700 | 1.00 | normal | NouvelR, labels and tags |\n| Micro Text | 10px (0.63rem) | 700 | 1.45 | normal | NouvelR, smallest UI text, legal fine print |\n| Micro Caption | 8.5px (0.53rem) | 400 | normal | normal | NouvelR, absolute smallest text (legal) |\n\n### Principles\n- **Single-family discipline**: NouvelR handles everything from 56px hero headlines to 8.5px legal captions \u2014 the font's geometric precision allows it to scale across this extreme range without losing character\n- **Bold-default headings**: Weight 700 dominates the heading hierarchy. Unlike brands that use medium (500) for headings, Renault's Bold weight creates a more assertive, energetic reading experience\n- **Ultra-tight display line-heights**: 0.95 line-height on hero and section headings \u2014 the lines nearly collide, creating a compressed, punchy typographic texture that feels urgent and modern\n- **28-degree radical r**: The typeface's signature detail \u2014 the lowercase \"r\" terminal is cut at precisely 28 degrees to mirror the angles of the Renault diamond logo, embedding brand identity into every word\n- **Capitalize transform on captions**: Some caption text uses `text-transform: capitalize` for editorial labeling, while micro text uses `lowercase` \u2014 a deliberate inversion for hierarchy signaling\n\n## 4. Component Stylings\n\n### Buttons\nRenault's buttons are sharp-edged rectangles with zero border-radius \u2014 the industrial precision of a pressed metal body panel.\n\n**Super Primary (Yellow)** \u2014 The highest-emphasis CTA:\n- Default: bg `#EFDF00` (Renault Yellow), text `#000000`, borderRadius 0px, padding 10px 15px, border 1px solid `#EFDF00`\n- Inverted: bg `#EFDF00`, text `#000000` \u2014 same yellow on dark backgrounds\n- fontSize 16px (NouvelR), fontWeight 700, minHeight 46px, minWidth 46px\n- Used for: Primary conversion actions (configure, buy now)\n\n**Primary (Black)** \u2014 The default action button:\n- Default: bg `#000000`, text `#FFFFFF`, borderRadius 0px, padding 10px 15px, border 1px solid `#000000`\n- Inverted: bg `#FFFFFF`, text `#000000`, border 1px solid `#FFFFFF` \u2014 white fill on dark backgrounds\n- fontSize 16px (NouvelR), fontWeight 700\n- Used for: \"ke\u015Ffedin\" (explore), secondary conversion actions\n\n**Ghost** \u2014 Transparent outline button:\n- Default (on dark): bg transparent, text `#FFFFFF`, border 1px solid `#FFFFFF`, borderRadius 0px, padding 10px 15px\n- Default (on light): bg transparent, text `#000000`, border 1px solid `#000000`\n- fontSize 16px (NouvelR), fontWeight 700\n- Used for: \"ilk sen \u00F6\u011Fren\" (be the first to know), \"sat\u0131n al\u0131n\" (buy), secondary actions\n\n**Text Link** \u2014 Inline navigation:\n- Default (light): text `#000000`, no border, no background\n- Default (dark): text `#FFFFFF`\n- Hover: color shifts to `#1883FD` (Renault Blue), text-decoration none\n- All link variants hover to the same blue \u2014 consistent interactive feedback\n\n### Cards & Containers\n\n**PromoCard (Light)** \u2014 Editorial content card:\n- Background: white or transparent\n- Full-bleed photography with dark gradient overlay at top: `linear-gradient(rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%)`\n- Heading: NouvelR 40px/700, white text positioned over gradient\n- Border-radius: 0px \u2014 sharp rectangular containers\n- No shadow, no visible border\n\n**PromoCard (Dark / `is-alternative-mode`)** \u2014 Cinematic card:\n- Background: `#000000` (Absolute Black)\n- Same gradient overlay treatment\n- Heading: white NouvelR text\n- CTA buttons: inverted primary (white bg) or ghost (white border)\n\n**VehicleRangeCard** \u2014 Vehicle showcase:\n- Background: transparent\n- Vehicle image above, model name and price/spec below\n- No shadow, no border, clean flat treatment\n- Spacing between cards via grid gap\n\n### Inputs & Forms\n\n**Search/Text Input:**\n- Background: `#FFFFFF`\n- Text: `#000000`\n- Border: 1px solid `#D1D1D1` (Border Gray)\n- Border-radius: 50px (pill-shaped \u2014 unusual deviation from the zero-radius button system)\n- Padding: 6px 35px 6px 15px (extra right padding for search icon)\n- Font: NouvelR, 12.8px\n- Focus: standard browser focus ring\n\n### Navigation\n- **Desktop**: Renault diamond logo centered/left, horizontal nav links, sticky positioning\n- **Background**: white, no shadow at rest\n- **Links**: NouvelR, 13px, weight 700, black text\n- **Hover**: color shifts to `#1883FD` (Renault Blue)\n- **Mobile**: Hamburger collapse to full-screen navigation drawer\n- **CTA in nav**: Primary black button for main conversion action\n\n### Image Treatment\n- **Hero**: Full-viewport carousel with dramatic aurora-gradient backgrounds and art-directed vehicle photography \u2014 edge-to-edge, no padding\n- **PromoCards**: Full-bleed photography within card bounds, dark gradient overlay at top for text legibility\n- **Vehicle images**: Transparent-background renders on neutral/gradient backgrounds\n- **Aspect ratios**: Mixed \u2014 hero at roughly 16:9 viewport, promo cards at various ratios from square to wide panoramic\n- **Lazy loading**: Below-fold sections use lazy loading (framework-handled)\n\n### Carousel Component\n- Full-screen hero carousel with auto-advancing slides\n- Each slide: background gradient/photo + vehicle image + headline + CTA buttons\n- Dot indicators for slide position\n- Navigation arrows at edges\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px (detected system base)\n- **Scale**: 1px, 4px, 5px, 6px, 6.25px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 32px, 40px\n- **Button padding**: 10px 15px \u2014 consistent across all button variants\n- **Section padding**: Generous vertical spacing (40\u201380px) between major content blocks\n- **Card gaps**: 16\u201324px between grid items\n- **Minimum interactive size**: 46px (minWidth and minHeight on all buttons)\n\n### Grid & Container\n- **Max width**: 1440px (largest defined breakpoint)\n- **Hero**: Full-bleed, edge-to-edge, viewport-height\n- **PromoCard grid**: 2-up and 3-up layouts with mixed card sizes\n- **Vehicle range**: Horizontal scrollable card row or grid\n- **Footer**: Multi-column layout on white background\n\n### Whitespace Philosophy\nRenault uses whitespace moderately \u2014 more generously than Ferrari but less extremely than Tesla. The card-based layout means content is organized into defined containers rather than floating in void. The visual breathing room comes primarily from the large card formats and the full-bleed hero carousel, which gives each vehicle its own cinematic moment. Between sections, spacing is consistent (32\u201340px) creating a rhythmic scroll experience. The alternation between light and dark sections also creates perceived whitespace \u2014 the mode switch itself acts as a visual separator.\n\n### Border Radius Scale\n| Value | Context |\n|-------|---------|\n| 0px | All buttons, PromoCards, most containers \u2014 the zero-radius default |\n| 2px | Small UI elements (region controls) |\n| 3px | Content panels (div, tabpanel) |\n| 4px | Labels and tag elements |\n| 46px | Pill-shaped elements (search input, filter chips) |\n| 50px | Full pill for search/input fields |\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow | Default for PromoCards, buttons, most containers |\n| Level 1 (Soft) | `rgba(0,0,0,0.2) 0px 4px 8px` | Card hover states, subtle lift effect |\n| Level 2 (Medium) | `rgba(0,0,0,0.2) 0px 0px 18px` | Floating UI elements, dropdown menus |\n| Level 3 (Layered) | `rgba(0,0,0,0) 0px 2px 4px, rgba(50,50,93,0.1) 0px 7px 14px` | Compound shadow for elevated cards and modals |\n| Level 4 (Deep) | `rgba(0,0,0,0.15) 0px 40px 80px` | Large floating panels, configurator overlays |\n| Level 5 (Directional) | `rgba(0,0,0,0.2) 5px 5px 8px` | Offset directional shadow for specific components |\n| Level 6 (Ambient) | `rgb(199,197,199) 0px 0px 12px 2px` | Ambient glow effect for highlighted elements |\n\n### Shadow Philosophy\nRenault uses a richer shadow system than Ferrari or Tesla \u2014 seven distinct shadow tokens reflecting a more layered, dimensional interface. The shadows progress from subtle 4px hover lifts to dramatic 80px deep panels. The compound shadow (Level 3) with its dual-layer approach (a tight dark shadow plus a wider purple-tinted one from `rgba(50,50,93,0.1)`) is particularly refined \u2014 it creates a photorealistic floating effect. The ambient glow (Level 6) in warm gray adds a unique touch that connects to Renault's warmer color personality.\n\n### Decorative Depth\n- **Hero aurora gradients**: The primary decorative depth element \u2014 vivid color gradients create atmospheric depth behind vehicle imagery\n- **PromoCard overlays**: `linear-gradient(rgba(0,0,0,0.6) \u2192 transparent)` creates depth within cards through transparency\n- **No blur effects** on UI elements \u2014 depth is communicated through shadow and color contrast\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Renault Yellow (`#EFDF00`) exclusively for super-primary CTAs \u2014 it carries the full weight of the diamond logo's identity\n- Maintain zero border-radius on all buttons \u2014 sharp edges are non-negotiable in the Renault system\n- Use NouvelR Bold (700) as the default heading weight \u2014 the assertive weight is central to the brand's energetic personality\n- Apply the dark gradient overlay (`rgba(0,0,0,0.6) \u2192 transparent`) on PromoCards to ensure text legibility over photography\n- Keep hero line-heights ultra-tight (0.95) for display text \u2014 the compressed texture feels urgent and modern\n- Alternate between black and white sections to create the signature chessboard rhythm\n- Use `#1883FD` (Renault Blue) consistently for all link hover states \u2014 one interactive color signal\n- Set minimum interactive size at 46\u00D746px for all buttons \u2014 accessibility built into the component spec\n- Reserve pill-shaped radius (46\u201350px) exclusively for search inputs and filter elements \u2014 never for buttons\n- Use the PromoCard gradient overlay on every card that has text over photography\n\n### Don't\n- Apply Renault Yellow as a background color for sections or surfaces \u2014 it's a CTA signal, not an atmosphere color\n- Add border-radius to buttons \u2014 the zero-radius rectangle is a core brand marker\n- Use any typeface besides NouvelR \u2014 the single-family discipline is a brand pillar\n- Mix multiple chromatic accent colors in a single section \u2014 the palette is monochrome-plus-yellow\n- Soften heading weights to 400 or 500 \u2014 NouvelR Bold is the brand voice, lighter weights read as off-brand\n- Add decorative borders to PromoCards or content containers \u2014 separation comes from background color alternation\n- Use the semantic colors (Success Green, Error Rose) for decorative purposes \u2014 they're reserved for form states\n- Apply the 56px hero size to anything below the fold \u2014 hero typography scale is reserved for the carousel\n- Create rounded-pill buttons \u2014 pill shapes are reserved for inputs, never for action elements\n- Use flat CSS gradients on UI surfaces \u2014 the only gradients should be the photographic hero auroras and the text-legibility overlays\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | \u2264425px | Single-column, full-width cards, hero text scales to ~32px, stacked CTAs, hamburger nav |\n| Mobile | 426\u2013640px | Single-column, slightly larger cards, hero text at 32\u201340px |\n| Tablet Small | 641\u2013768px | 2-column PromoCard grid begins, hero maintains full-width |\n| Tablet | 769\u2013896px | Full 2-column layout, vehicle range shows 2\u20133 cards |\n| Desktop Small | 897\u20131024px | Navigation fully expanded, hero at 56px, 2-up card grid |\n| Desktop | 1025\u20131280px | Full layout, 3-up card grid, generous whitespace |\n| Large Desktop | 1281\u20131440px | Maximum content width, centered container, hero at full cinematic scale |\n\n### Touch Targets\n- All buttons: minimum 46\u00D746px (`minWidth: 46px, minHeight: 46px`) \u2014 exceeds WCAG AAA 44\u00D744px requirement\n- Search input pill: adequate touch target with 50px border-radius creating a large tappable area\n- Navigation links: NouvelR 13px with adequate spacing between items\n- Carousel navigation: large arrow targets at viewport edges\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav collapses to Renault diamond logo + hamburger menu on mobile\n- **Hero carousel**: Full-width at all breakpoints, headline scales from 56px (desktop) to ~32px (mobile)\n- **PromoCard grid**: 3-up \u2192 2-up \u2192 single-column as viewport narrows\n- **Vehicle range**: Horizontal scroll maintained at all sizes, visible cards reduce\n- **CTA pairs**: Side-by-side buttons stack vertically on mobile\n- **Footer**: Multi-column collapses to single-column accordion on mobile\n\n### Image Behavior\n- Hero images: full-bleed at all breakpoints with `object-fit: cover`\n- PromoCard images: responsive within card containers, gradient overlay scales proportionally\n- Vehicle images: transparent-background renders scale proportionally within grid cells\n- Art direction: mobile may crop to tighter vehicle views, reducing environmental context\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA (Super): \"Renault Yellow (#EFDF00)\"\n- Primary CTA (Default): \"Absolute Black (#000000)\"\n- Background Light: \"Pure White (#FFFFFF)\"\n- Background Dark: \"Absolute Black (#000000)\"\n- Secondary Dark: \"Charcoal (#222222)\"\n- Heading text (light bg): \"Absolute Black (#000000)\"\n- Body text: \"Absolute Black (#000000)\"\n- Link Hover: \"Renault Blue (#1883FD)\"\n- Border: \"Pale Silver (#F2F2F2)\"\n- Semantic Error: \"Error Rose (#BE6464)\"\n\n### Example Component Prompts\n- \"Create a hero section with a full-viewport aurora gradient background (magenta to violet to teal), a centered vehicle image, a NouvelR Bold headline at 56px with 0.95 line-height in white, and two buttons: a Primary (white bg, black text, 0px radius) 'Explore' and a Ghost (transparent bg, white border, white text, 0px radius) 'Learn More'\"\n- \"Design a PromoCard with a full-bleed photography background, a dark gradient overlay (rgba(0,0,0,0.6) top to transparent at 40%), a NouvelR Bold 40px white heading, a 14px body text line in white, and a Primary inverted button (white bg, black text, 0px radius, 10px 15px padding)\"\n- \"Build a vehicle range grid with 3 columns on white background, each card showing a transparent-background car render above a NouvelR Bold 24px model name in black, a 14px price caption, and a ghost button (black border, black text, 0px radius) labeled 'Configure'\"\n- \"Create a dark E-Tech section on Absolute Black (#000000) with a NouvelR Bold 40px white heading 'E-Tech electric powertrain', a 14px subtitle in white, and a Renault Yellow (#EFDF00) super-primary button with black text, 0px radius, and 10px 15px padding\"\n- \"Design a search input as a pill-shaped field (50px border-radius) with white background, 1px solid #D1D1D1 border, NouvelR 12.8px text, 6px 35px 6px 15px padding, and a search icon positioned inside the right padding area\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time \u2014 Renault's system has clear component boundaries (PromoCard, VehicleRangeCard, CTA variants)\n2. Reference specific color names and hex codes \u2014 the palette is small but each color has a precise function\n3. Use natural language descriptions, not CSS values \u2014 \"sharp zero-radius rectangle\" conveys intent better than \"border-radius: 0\"\n4. Describe the desired \"feel\" alongside specific measurements \u2014 \"assertive automotive energy\" communicates the NouvelR Bold heading personality better than \"font-weight: 700\"\n5. Always check whether a section should be light or dark \u2014 the chessboard alternation is a core pattern\n6. Reserve Renault Yellow for ONE button per screen \u2014 if yellow appears in more than one CTA, the hierarchy collapses\n";
+
+export { renaultBrief };

package/dist/presets/_briefs/renault.js

@@ -0,0 +1,317 @@
+// src/presets/_briefs/renault.ts
+var renaultBrief = `# Design System Inspired by Renault
+
+## 1. Visual Theme & Atmosphere
+
+Renault's website is a vibrant digital showroom that balances French automotive elegance with bold, forward-leaning energy \u2014 a departure from the monochromatic austerity of German or Italian luxury brands. The page opens with a full-screen hero that washes the viewport in a sweeping aurora gradient \u2014 ribbons of magenta, violet, and teal bleeding across the frame behind a dramatically lit vehicle. This chromatic expressiveness is the site's signature: while the interface structure is disciplined (NouvelR typography, black-and-white CTA framework, zero-radius buttons), the content is alive with color \u2014 gradient washes on hero slides, saturated vehicle photography, and splashes of Renault Yellow (\`#EFDF00\`) on accent CTAs. The effect is a showroom that feels energized rather than hushed.
+
+The layout follows a card-based editorial rhythm. Below the hero carousel, content is organized into a grid of PromoCards \u2014 each a full-bleed photographic panel with a dark gradient overlay at top (fading from \`rgba(0,0,0,0.6)\` to transparent) to ensure white heading text remains legible over vivid imagery. These cards alternate between light and dark modes: white editorial panels with black text sit beside black \`is-alternative-mode\` sections with white text, creating a chessboard-like visual cadence. The grid is generous \u2014 large card formats dominate, giving each vehicle or campaign its own visual territory. The lower sections shift to a fully dark canvas (Absolute Black backgrounds) for the E-Tech electric and technology showcases, establishing a deliberate mood shift: electrification lives in darkness, tradition in light.
+
+Typography is unified under NouvelR \u2014 a proprietary geometric sans-serif designed by Black[Foundry] exclusively for Renault's rebrand. The typeface features a distinctive "radical r" with a terminal cut at 28 degrees to echo the Renault diamond logo's angles. Available in 6 weights from Light to Extrabold, the site primarily uses Bold (700) for headings and Regular (400) for body. Display headlines run large \u2014 56px/0.95 line-height for hero titles, creating dense, impactful text blocks that sit tight against each other. The font supports Latin, Greek, Cyrillic, Hebrew, Arabic, and Korean, reflecting Renault's global market reach. All text rendering feels precise and engineered, with the geometric proportions lending a sense of modernity that aligns with Renault's electric-first brand positioning.
+
+**Key Characteristics:**
+- Full-screen hero carousel with vivid aurora gradient backgrounds (magenta/violet/teal) behind vehicle imagery
+- NouvelR proprietary typeface with 28-degree "radical r" cut matching the diamond logo geometry
+- Renault Yellow (\`#EFDF00\`) as the super-primary accent \u2014 used sparingly for highest-priority CTAs
+- Zero border-radius on all buttons \u2014 sharp rectangular forms expressing precision engineering
+- Card-based editorial grid with full-bleed photography and dark gradient overlays
+- Binary black/white CTA system: primary (black bg/white text) and ghost (transparent/white border)
+- PromoCard dark-mode alternation creating a chessboard rhythm between light and dark sections
+- PrimeReact (21 components) + Element Plus (19 components) powering interactive elements
+- Link hover state in Renault Blue (\`#1883FD\`) \u2014 the sole chromatic interaction color
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Renault Yellow** (\`#EFDF00\`): The brand's signature Pantone \u2014 a vivid, saturated yellow used for super-primary CTAs and the highest-priority action buttons. Appears as \`--CtaLink-background-color\` on \`.is-cta-super-primary\` class. Carries the energy of the diamond logo
+- **Absolute Black** (\`#000000\`): Primary button background, heading text on light surfaces, and the dominant dark section surface. The structural anchor of the entire interface
+- **Pure White** (\`#FFFFFF\`): Primary surface for editorial content, inverted button backgrounds, hero text color, and the dominant light-mode canvas (--rt-color-white)
+
+### Secondary & Accent
+- **Soft Yellow** (\`#F8EB4C\`): Lighter, warmer variant of Renault Yellow \u2014 used for hover/pressed states on yellow CTAs and secondary accent contexts
+- **Renault Blue** (\`#1883FD\`): Link hover color across all link variants \u2014 a bright, confident blue that signals interactivity without competing with the yellow brand accent
+- **Warm Gray** (\`#D9D9D6\`): Subtle warm neutral used for disabled states, inactive UI elements, and soft borders \u2014 carries a slight warmth that distinguishes it from cold grays
+
+### Surface & Background
+- **Pure White** (\`#FFFFFF\`): Page background, light editorial sections, navigation bar, and footer
+- **Absolute Black** (\`#000000\`): Hero backgrounds, PromoCard dark-mode sections (\`is-alternative-mode\`), and E-Tech showcase areas
+- **Charcoal** (\`#222222\`): Secondary dark surface for text-heavy dark sections and footer sub-regions (--rt-color-dark)
+- **Pale Silver** (\`#F2F2F2\`): Subtle alternate light surface for section differentiation and card borders
+
+### Neutrals & Text
+- **Absolute Black** (\`#000000\`): Primary heading and body text on light surfaces \u2014 Renault uses true black rather than near-black
+- **Pure White** (\`#FFFFFF\`): Primary text on dark surfaces \u2014 hero headlines, dark-section headings, and inverted button labels
+- **Warm Gray** (\`#D9D9D6\`): Tertiary text, metadata, and subdued labels
+- **Border Gray** (\`#D1D1D1\`): Input field borders and subtle separators
+
+### Semantic & Accent
+- **Success Green** (\`#8DC572\`): Positive status indicators and confirmation messages (--rt-color-success)
+- **Error Rose** (\`#BE6464\`): Form validation errors and warning states (--rt-color-error)
+- **Warning Amber** (\`#F0AD4E\`): Cautionary alerts and attention-requiring states (--rt-color-warning)
+- **Info Blue** (\`#337AB7\`): Informational callouts and neutral status messaging (--rt-color-info)
+
+### Gradient System
+- **Hero Aurora**: Sweeping multi-color gradients (magenta \u2192 violet \u2192 teal) applied to hero slide backgrounds \u2014 the site's most distinctive visual element. These are photographic/composited rather than CSS gradients
+- **PromoCard Overlay**: \`linear-gradient(rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%)\` \u2014 applied to card tops to ensure heading text legibility over photography
+- No flat CSS gradients on surfaces \u2014 depth comes from photographic treatment and the black/white alternation
+
+## 3. Typography Rules
+
+### Font Family
+- **NouvelR**: The sole typeface. A proprietary geometric sans-serif designed by Black[Foundry] for Renault's 2021+ rebrand. Features a distinctive "radical r" with a 28-degree terminal cut matching the diamond logo angle. Available in 6 weights (Light to Extrabold), supports 6 writing systems. Fallback: \`sans-serif\`. Declared as \`"NouvelR, sans-serif"\` in CSS
+- **No secondary typeface**: Unlike Ferrari (FerrariSans + Body-Font) or Lamborghini (LamboType + Open Sans), Renault uses a single font family for all text \u2014 headings, body, buttons, captions, and navigation
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Hero Title | 56px (3.50rem) | 700 | 0.95 (53.2px) | normal | NouvelR, white on dark hero, all-caps model names |
+| Section Heading | 40px (2.50rem) | 700 | 0.95 (38px) | normal | NouvelR, PromoCard headings on dark/light sections |
+| Card Heading | 32px (2.00rem) | 700 | 0.95 | normal | NouvelR, medium-scale card headings |
+| Subheading | 24px (1.50rem) | 700 | 0.95 | normal | NouvelR, section sub-titles |
+| Module Title | 21.92px (1.37rem) | 600 | 1.20 | normal | NouvelR, component headings |
+| Content Title | 20px (1.25rem) | 700 | 0.95 | normal | NouvelR, smaller section titles |
+| UI Heading | 19.2px (1.20rem) | 600 | 1.30 | normal | NouvelR, card UI headings |
+| Emphasis | 18px (1.13rem) | 700 | 1.00 | normal | NouvelR, emphasized inline text and links |
+| Body Heading | 16px (1.00rem) | 700 | 1.40 | normal | NouvelR, paragraph-level headings |
+| Body Text | 14px (0.88rem) | 400 | 1.40 | normal | NouvelR, paragraph and descriptive content |
+| Body Bold | 14px (0.88rem) | 700 | 1.57 | normal | NouvelR, emphasized body text |
+| Button Label | 14.4px (0.90rem) | 700 | 1.00 | 0.144px | NouvelR, primary button text |
+| Nav Link | 13px (0.81rem) | 700 | 1.50 | normal | NouvelR, navigation and footer links |
+| Caption | 12.8px (0.80rem) | 400 | 1.10 | normal | NouvelR, small descriptive text |
+| Small Label | 12px (0.75rem) | 700 | 1.00 | normal | NouvelR, labels and tags |
+| Micro Text | 10px (0.63rem) | 700 | 1.45 | normal | NouvelR, smallest UI text, legal fine print |
+| Micro Caption | 8.5px (0.53rem) | 400 | normal | normal | NouvelR, absolute smallest text (legal) |
+
+### Principles
+- **Single-family discipline**: NouvelR handles everything from 56px hero headlines to 8.5px legal captions \u2014 the font's geometric precision allows it to scale across this extreme range without losing character
+- **Bold-default headings**: Weight 700 dominates the heading hierarchy. Unlike brands that use medium (500) for headings, Renault's Bold weight creates a more assertive, energetic reading experience
+- **Ultra-tight display line-heights**: 0.95 line-height on hero and section headings \u2014 the lines nearly collide, creating a compressed, punchy typographic texture that feels urgent and modern
+- **28-degree radical r**: The typeface's signature detail \u2014 the lowercase "r" terminal is cut at precisely 28 degrees to mirror the angles of the Renault diamond logo, embedding brand identity into every word
+- **Capitalize transform on captions**: Some caption text uses \`text-transform: capitalize\` for editorial labeling, while micro text uses \`lowercase\` \u2014 a deliberate inversion for hierarchy signaling
+
+## 4. Component Stylings
+
+### Buttons
+Renault's buttons are sharp-edged rectangles with zero border-radius \u2014 the industrial precision of a pressed metal body panel.
+
+**Super Primary (Yellow)** \u2014 The highest-emphasis CTA:
+- Default: bg \`#EFDF00\` (Renault Yellow), text \`#000000\`, borderRadius 0px, padding 10px 15px, border 1px solid \`#EFDF00\`
+- Inverted: bg \`#EFDF00\`, text \`#000000\` \u2014 same yellow on dark backgrounds
+- fontSize 16px (NouvelR), fontWeight 700, minHeight 46px, minWidth 46px
+- Used for: Primary conversion actions (configure, buy now)
+
+**Primary (Black)** \u2014 The default action button:
+- Default: bg \`#000000\`, text \`#FFFFFF\`, borderRadius 0px, padding 10px 15px, border 1px solid \`#000000\`
+- Inverted: bg \`#FFFFFF\`, text \`#000000\`, border 1px solid \`#FFFFFF\` \u2014 white fill on dark backgrounds
+- fontSize 16px (NouvelR), fontWeight 700
+- Used for: "ke\u015Ffedin" (explore), secondary conversion actions
+
+**Ghost** \u2014 Transparent outline button:
+- Default (on dark): bg transparent, text \`#FFFFFF\`, border 1px solid \`#FFFFFF\`, borderRadius 0px, padding 10px 15px
+- Default (on light): bg transparent, text \`#000000\`, border 1px solid \`#000000\`
+- fontSize 16px (NouvelR), fontWeight 700
+- Used for: "ilk sen \xF6\u011Fren" (be the first to know), "sat\u0131n al\u0131n" (buy), secondary actions
+
+**Text Link** \u2014 Inline navigation:
+- Default (light): text \`#000000\`, no border, no background
+- Default (dark): text \`#FFFFFF\`
+- Hover: color shifts to \`#1883FD\` (Renault Blue), text-decoration none
+- All link variants hover to the same blue \u2014 consistent interactive feedback
+
+### Cards & Containers
+
+**PromoCard (Light)** \u2014 Editorial content card:
+- Background: white or transparent
+- Full-bleed photography with dark gradient overlay at top: \`linear-gradient(rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%)\`
+- Heading: NouvelR 40px/700, white text positioned over gradient
+- Border-radius: 0px \u2014 sharp rectangular containers
+- No shadow, no visible border
+
+**PromoCard (Dark / \`is-alternative-mode\`)** \u2014 Cinematic card:
+- Background: \`#000000\` (Absolute Black)
+- Same gradient overlay treatment
+- Heading: white NouvelR text
+- CTA buttons: inverted primary (white bg) or ghost (white border)
+
+**VehicleRangeCard** \u2014 Vehicle showcase:
+- Background: transparent
+- Vehicle image above, model name and price/spec below
+- No shadow, no border, clean flat treatment
+- Spacing between cards via grid gap
+
+### Inputs & Forms
+
+**Search/Text Input:**
+- Background: \`#FFFFFF\`
+- Text: \`#000000\`
+- Border: 1px solid \`#D1D1D1\` (Border Gray)
+- Border-radius: 50px (pill-shaped \u2014 unusual deviation from the zero-radius button system)
+- Padding: 6px 35px 6px 15px (extra right padding for search icon)
+- Font: NouvelR, 12.8px
+- Focus: standard browser focus ring
+
+### Navigation
+- **Desktop**: Renault diamond logo centered/left, horizontal nav links, sticky positioning
+- **Background**: white, no shadow at rest
+- **Links**: NouvelR, 13px, weight 700, black text
+- **Hover**: color shifts to \`#1883FD\` (Renault Blue)
+- **Mobile**: Hamburger collapse to full-screen navigation drawer
+- **CTA in nav**: Primary black button for main conversion action
+
+### Image Treatment
+- **Hero**: Full-viewport carousel with dramatic aurora-gradient backgrounds and art-directed vehicle photography \u2014 edge-to-edge, no padding
+- **PromoCards**: Full-bleed photography within card bounds, dark gradient overlay at top for text legibility
+- **Vehicle images**: Transparent-background renders on neutral/gradient backgrounds
+- **Aspect ratios**: Mixed \u2014 hero at roughly 16:9 viewport, promo cards at various ratios from square to wide panoramic
+- **Lazy loading**: Below-fold sections use lazy loading (framework-handled)
+
+### Carousel Component
+- Full-screen hero carousel with auto-advancing slides
+- Each slide: background gradient/photo + vehicle image + headline + CTA buttons
+- Dot indicators for slide position
+- Navigation arrows at edges
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px (detected system base)
+- **Scale**: 1px, 4px, 5px, 6px, 6.25px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 32px, 40px
+- **Button padding**: 10px 15px \u2014 consistent across all button variants
+- **Section padding**: Generous vertical spacing (40\u201380px) between major content blocks
+- **Card gaps**: 16\u201324px between grid items
+- **Minimum interactive size**: 46px (minWidth and minHeight on all buttons)
+
+### Grid & Container
+- **Max width**: 1440px (largest defined breakpoint)
+- **Hero**: Full-bleed, edge-to-edge, viewport-height
+- **PromoCard grid**: 2-up and 3-up layouts with mixed card sizes
+- **Vehicle range**: Horizontal scrollable card row or grid
+- **Footer**: Multi-column layout on white background
+
+### Whitespace Philosophy
+Renault uses whitespace moderately \u2014 more generously than Ferrari but less extremely than Tesla. The card-based layout means content is organized into defined containers rather than floating in void. The visual breathing room comes primarily from the large card formats and the full-bleed hero carousel, which gives each vehicle its own cinematic moment. Between sections, spacing is consistent (32\u201340px) creating a rhythmic scroll experience. The alternation between light and dark sections also creates perceived whitespace \u2014 the mode switch itself acts as a visual separator.
+
+### Border Radius Scale
+| Value | Context |
+|-------|---------|
+| 0px | All buttons, PromoCards, most containers \u2014 the zero-radius default |
+| 2px | Small UI elements (region controls) |
+| 3px | Content panels (div, tabpanel) |
+| 4px | Labels and tag elements |
+| 46px | Pill-shaped elements (search input, filter chips) |
+| 50px | Full pill for search/input fields |
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Flat) | No shadow | Default for PromoCards, buttons, most containers |
+| Level 1 (Soft) | \`rgba(0,0,0,0.2) 0px 4px 8px\` | Card hover states, subtle lift effect |
+| Level 2 (Medium) | \`rgba(0,0,0,0.2) 0px 0px 18px\` | Floating UI elements, dropdown menus |
+| Level 3 (Layered) | \`rgba(0,0,0,0) 0px 2px 4px, rgba(50,50,93,0.1) 0px 7px 14px\` | Compound shadow for elevated cards and modals |
+| Level 4 (Deep) | \`rgba(0,0,0,0.15) 0px 40px 80px\` | Large floating panels, configurator overlays |
+| Level 5 (Directional) | \`rgba(0,0,0,0.2) 5px 5px 8px\` | Offset directional shadow for specific components |
+| Level 6 (Ambient) | \`rgb(199,197,199) 0px 0px 12px 2px\` | Ambient glow effect for highlighted elements |
+
+### Shadow Philosophy
+Renault uses a richer shadow system than Ferrari or Tesla \u2014 seven distinct shadow tokens reflecting a more layered, dimensional interface. The shadows progress from subtle 4px hover lifts to dramatic 80px deep panels. The compound shadow (Level 3) with its dual-layer approach (a tight dark shadow plus a wider purple-tinted one from \`rgba(50,50,93,0.1)\`) is particularly refined \u2014 it creates a photorealistic floating effect. The ambient glow (Level 6) in warm gray adds a unique touch that connects to Renault's warmer color personality.
+
+### Decorative Depth
+- **Hero aurora gradients**: The primary decorative depth element \u2014 vivid color gradients create atmospheric depth behind vehicle imagery
+- **PromoCard overlays**: \`linear-gradient(rgba(0,0,0,0.6) \u2192 transparent)\` creates depth within cards through transparency
+- **No blur effects** on UI elements \u2014 depth is communicated through shadow and color contrast
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Renault Yellow (\`#EFDF00\`) exclusively for super-primary CTAs \u2014 it carries the full weight of the diamond logo's identity
+- Maintain zero border-radius on all buttons \u2014 sharp edges are non-negotiable in the Renault system
+- Use NouvelR Bold (700) as the default heading weight \u2014 the assertive weight is central to the brand's energetic personality
+- Apply the dark gradient overlay (\`rgba(0,0,0,0.6) \u2192 transparent\`) on PromoCards to ensure text legibility over photography
+- Keep hero line-heights ultra-tight (0.95) for display text \u2014 the compressed texture feels urgent and modern
+- Alternate between black and white sections to create the signature chessboard rhythm
+- Use \`#1883FD\` (Renault Blue) consistently for all link hover states \u2014 one interactive color signal
+- Set minimum interactive size at 46\xD746px for all buttons \u2014 accessibility built into the component spec
+- Reserve pill-shaped radius (46\u201350px) exclusively for search inputs and filter elements \u2014 never for buttons
+- Use the PromoCard gradient overlay on every card that has text over photography
+
+### Don't
+- Apply Renault Yellow as a background color for sections or surfaces \u2014 it's a CTA signal, not an atmosphere color
+- Add border-radius to buttons \u2014 the zero-radius rectangle is a core brand marker
+- Use any typeface besides NouvelR \u2014 the single-family discipline is a brand pillar
+- Mix multiple chromatic accent colors in a single section \u2014 the palette is monochrome-plus-yellow
+- Soften heading weights to 400 or 500 \u2014 NouvelR Bold is the brand voice, lighter weights read as off-brand
+- Add decorative borders to PromoCards or content containers \u2014 separation comes from background color alternation
+- Use the semantic colors (Success Green, Error Rose) for decorative purposes \u2014 they're reserved for form states
+- Apply the 56px hero size to anything below the fold \u2014 hero typography scale is reserved for the carousel
+- Create rounded-pill buttons \u2014 pill shapes are reserved for inputs, never for action elements
+- Use flat CSS gradients on UI surfaces \u2014 the only gradients should be the photographic hero auroras and the text-legibility overlays
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | \u2264425px | Single-column, full-width cards, hero text scales to ~32px, stacked CTAs, hamburger nav |
+| Mobile | 426\u2013640px | Single-column, slightly larger cards, hero text at 32\u201340px |
+| Tablet Small | 641\u2013768px | 2-column PromoCard grid begins, hero maintains full-width |
+| Tablet | 769\u2013896px | Full 2-column layout, vehicle range shows 2\u20133 cards |
+| Desktop Small | 897\u20131024px | Navigation fully expanded, hero at 56px, 2-up card grid |
+| Desktop | 1025\u20131280px | Full layout, 3-up card grid, generous whitespace |
+| Large Desktop | 1281\u20131440px | Maximum content width, centered container, hero at full cinematic scale |
+
+### Touch Targets
+- All buttons: minimum 46\xD746px (\`minWidth: 46px, minHeight: 46px\`) \u2014 exceeds WCAG AAA 44\xD744px requirement
+- Search input pill: adequate touch target with 50px border-radius creating a large tappable area
+- Navigation links: NouvelR 13px with adequate spacing between items
+- Carousel navigation: large arrow targets at viewport edges
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav collapses to Renault diamond logo + hamburger menu on mobile
+- **Hero carousel**: Full-width at all breakpoints, headline scales from 56px (desktop) to ~32px (mobile)
+- **PromoCard grid**: 3-up \u2192 2-up \u2192 single-column as viewport narrows
+- **Vehicle range**: Horizontal scroll maintained at all sizes, visible cards reduce
+- **CTA pairs**: Side-by-side buttons stack vertically on mobile
+- **Footer**: Multi-column collapses to single-column accordion on mobile
+
+### Image Behavior
+- Hero images: full-bleed at all breakpoints with \`object-fit: cover\`
+- PromoCard images: responsive within card containers, gradient overlay scales proportionally
+- Vehicle images: transparent-background renders scale proportionally within grid cells
+- Art direction: mobile may crop to tighter vehicle views, reducing environmental context
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA (Super): "Renault Yellow (#EFDF00)"
+- Primary CTA (Default): "Absolute Black (#000000)"
+- Background Light: "Pure White (#FFFFFF)"
+- Background Dark: "Absolute Black (#000000)"
+- Secondary Dark: "Charcoal (#222222)"
+- Heading text (light bg): "Absolute Black (#000000)"
+- Body text: "Absolute Black (#000000)"
+- Link Hover: "Renault Blue (#1883FD)"
+- Border: "Pale Silver (#F2F2F2)"
+- Semantic Error: "Error Rose (#BE6464)"
+
+### Example Component Prompts
+- "Create a hero section with a full-viewport aurora gradient background (magenta to violet to teal), a centered vehicle image, a NouvelR Bold headline at 56px with 0.95 line-height in white, and two buttons: a Primary (white bg, black text, 0px radius) 'Explore' and a Ghost (transparent bg, white border, white text, 0px radius) 'Learn More'"
+- "Design a PromoCard with a full-bleed photography background, a dark gradient overlay (rgba(0,0,0,0.6) top to transparent at 40%), a NouvelR Bold 40px white heading, a 14px body text line in white, and a Primary inverted button (white bg, black text, 0px radius, 10px 15px padding)"
+- "Build a vehicle range grid with 3 columns on white background, each card showing a transparent-background car render above a NouvelR Bold 24px model name in black, a 14px price caption, and a ghost button (black border, black text, 0px radius) labeled 'Configure'"
+- "Create a dark E-Tech section on Absolute Black (#000000) with a NouvelR Bold 40px white heading 'E-Tech electric powertrain', a 14px subtitle in white, and a Renault Yellow (#EFDF00) super-primary button with black text, 0px radius, and 10px 15px padding"
+- "Design a search input as a pill-shaped field (50px border-radius) with white background, 1px solid #D1D1D1 border, NouvelR 12.8px text, 6px 35px 6px 15px padding, and a search icon positioned inside the right padding area"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time \u2014 Renault's system has clear component boundaries (PromoCard, VehicleRangeCard, CTA variants)
+2. Reference specific color names and hex codes \u2014 the palette is small but each color has a precise function
+3. Use natural language descriptions, not CSS values \u2014 "sharp zero-radius rectangle" conveys intent better than "border-radius: 0"
+4. Describe the desired "feel" alongside specific measurements \u2014 "assertive automotive energy" communicates the NouvelR Bold heading personality better than "font-weight: 700"
+5. Always check whether a section should be light or dark \u2014 the chessboard alternation is a core pattern
+6. Reserve Renault Yellow for ONE button per screen \u2014 if yellow appears in more than one CTA, the hierarchy collapses
+`;
+export {
+  renaultBrief
+};
+//# sourceMappingURL=renault.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/renault.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const renaultBrief = `# Design System Inspired by Renault\n\n## 1. Visual Theme & Atmosphere\n\nRenault's website is a vibrant digital showroom that balances French automotive elegance with bold, forward-leaning energy — a departure from the monochromatic austerity of German or Italian luxury brands. The page opens with a full-screen hero that washes the viewport in a sweeping aurora gradient — ribbons of magenta, violet, and teal bleeding across the frame behind a dramatically lit vehicle. This chromatic expressiveness is the site's signature: while the interface structure is disciplined (NouvelR typography, black-and-white CTA framework, zero-radius buttons), the content is alive with color — gradient washes on hero slides, saturated vehicle photography, and splashes of Renault Yellow (\\`#EFDF00\\`) on accent CTAs. The effect is a showroom that feels energized rather than hushed.\n\nThe layout follows a card-based editorial rhythm. Below the hero carousel, content is organized into a grid of PromoCards — each a full-bleed photographic panel with a dark gradient overlay at top (fading from \\`rgba(0,0,0,0.6)\\` to transparent) to ensure white heading text remains legible over vivid imagery. These cards alternate between light and dark modes: white editorial panels with black text sit beside black \\`is-alternative-mode\\` sections with white text, creating a chessboard-like visual cadence. The grid is generous — large card formats dominate, giving each vehicle or campaign its own visual territory. The lower sections shift to a fully dark canvas (Absolute Black backgrounds) for the E-Tech electric and technology showcases, establishing a deliberate mood shift: electrification lives in darkness, tradition in light.\n\nTypography is unified under NouvelR — a proprietary geometric sans-serif designed by Black[Foundry] exclusively for Renault's rebrand. The typeface features a distinctive \"radical r\" with a terminal cut at 28 degrees to echo the Renault diamond logo's angles. Available in 6 weights from Light to Extrabold, the site primarily uses Bold (700) for headings and Regular (400) for body. Display headlines run large — 56px/0.95 line-height for hero titles, creating dense, impactful text blocks that sit tight against each other. The font supports Latin, Greek, Cyrillic, Hebrew, Arabic, and Korean, reflecting Renault's global market reach. All text rendering feels precise and engineered, with the geometric proportions lending a sense of modernity that aligns with Renault's electric-first brand positioning.\n\n**Key Characteristics:**\n- Full-screen hero carousel with vivid aurora gradient backgrounds (magenta/violet/teal) behind vehicle imagery\n- NouvelR proprietary typeface with 28-degree \"radical r\" cut matching the diamond logo geometry\n- Renault Yellow (\\`#EFDF00\\`) as the super-primary accent — used sparingly for highest-priority CTAs\n- Zero border-radius on all buttons — sharp rectangular forms expressing precision engineering\n- Card-based editorial grid with full-bleed photography and dark gradient overlays\n- Binary black/white CTA system: primary (black bg/white text) and ghost (transparent/white border)\n- PromoCard dark-mode alternation creating a chessboard rhythm between light and dark sections\n- PrimeReact (21 components) + Element Plus (19 components) powering interactive elements\n- Link hover state in Renault Blue (\\`#1883FD\\`) — the sole chromatic interaction color\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Renault Yellow** (\\`#EFDF00\\`): The brand's signature Pantone — a vivid, saturated yellow used for super-primary CTAs and the highest-priority action buttons. Appears as \\`--CtaLink-background-color\\` on \\`.is-cta-super-primary\\` class. Carries the energy of the diamond logo\n- **Absolute Black** (\\`#000000\\`): Primary button background, heading text on light surfaces, and the dominant dark section surface. The structural anchor of the entire interface\n- **Pure White** (\\`#FFFFFF\\`): Primary surface for editorial content, inverted button backgrounds, hero text color, and the dominant light-mode canvas (--rt-color-white)\n\n### Secondary & Accent\n- **Soft Yellow** (\\`#F8EB4C\\`): Lighter, warmer variant of Renault Yellow — used for hover/pressed states on yellow CTAs and secondary accent contexts\n- **Renault Blue** (\\`#1883FD\\`): Link hover color across all link variants — a bright, confident blue that signals interactivity without competing with the yellow brand accent\n- **Warm Gray** (\\`#D9D9D6\\`): Subtle warm neutral used for disabled states, inactive UI elements, and soft borders — carries a slight warmth that distinguishes it from cold grays\n\n### Surface & Background\n- **Pure White** (\\`#FFFFFF\\`): Page background, light editorial sections, navigation bar, and footer\n- **Absolute Black** (\\`#000000\\`): Hero backgrounds, PromoCard dark-mode sections (\\`is-alternative-mode\\`), and E-Tech showcase areas\n- **Charcoal** (\\`#222222\\`): Secondary dark surface for text-heavy dark sections and footer sub-regions (--rt-color-dark)\n- **Pale Silver** (\\`#F2F2F2\\`): Subtle alternate light surface for section differentiation and card borders\n\n### Neutrals & Text\n- **Absolute Black** (\\`#000000\\`): Primary heading and body text on light surfaces — Renault uses true black rather than near-black\n- **Pure White** (\\`#FFFFFF\\`): Primary text on dark surfaces — hero headlines, dark-section headings, and inverted button labels\n- **Warm Gray** (\\`#D9D9D6\\`): Tertiary text, metadata, and subdued labels\n- **Border Gray** (\\`#D1D1D1\\`): Input field borders and subtle separators\n\n### Semantic & Accent\n- **Success Green** (\\`#8DC572\\`): Positive status indicators and confirmation messages (--rt-color-success)\n- **Error Rose** (\\`#BE6464\\`): Form validation errors and warning states (--rt-color-error)\n- **Warning Amber** (\\`#F0AD4E\\`): Cautionary alerts and attention-requiring states (--rt-color-warning)\n- **Info Blue** (\\`#337AB7\\`): Informational callouts and neutral status messaging (--rt-color-info)\n\n### Gradient System\n- **Hero Aurora**: Sweeping multi-color gradients (magenta → violet → teal) applied to hero slide backgrounds — the site's most distinctive visual element. These are photographic/composited rather than CSS gradients\n- **PromoCard Overlay**: \\`linear-gradient(rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%)\\` — applied to card tops to ensure heading text legibility over photography\n- No flat CSS gradients on surfaces — depth comes from photographic treatment and the black/white alternation\n\n## 3. Typography Rules\n\n### Font Family\n- **NouvelR**: The sole typeface. A proprietary geometric sans-serif designed by Black[Foundry] for Renault's 2021+ rebrand. Features a distinctive \"radical r\" with a 28-degree terminal cut matching the diamond logo angle. Available in 6 weights (Light to Extrabold), supports 6 writing systems. Fallback: \\`sans-serif\\`. Declared as \\`\"NouvelR, sans-serif\"\\` in CSS\n- **No secondary typeface**: Unlike Ferrari (FerrariSans + Body-Font) or Lamborghini (LamboType + Open Sans), Renault uses a single font family for all text — headings, body, buttons, captions, and navigation\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Hero Title | 56px (3.50rem) | 700 | 0.95 (53.2px) | normal | NouvelR, white on dark hero, all-caps model names |\n| Section Heading | 40px (2.50rem) | 700 | 0.95 (38px) | normal | NouvelR, PromoCard headings on dark/light sections |\n| Card Heading | 32px (2.00rem) | 700 | 0.95 | normal | NouvelR, medium-scale card headings |\n| Subheading | 24px (1.50rem) | 700 | 0.95 | normal | NouvelR, section sub-titles |\n| Module Title | 21.92px (1.37rem) | 600 | 1.20 | normal | NouvelR, component headings |\n| Content Title | 20px (1.25rem) | 700 | 0.95 | normal | NouvelR, smaller section titles |\n| UI Heading | 19.2px (1.20rem) | 600 | 1.30 | normal | NouvelR, card UI headings |\n| Emphasis | 18px (1.13rem) | 700 | 1.00 | normal | NouvelR, emphasized inline text and links |\n| Body Heading | 16px (1.00rem) | 700 | 1.40 | normal | NouvelR, paragraph-level headings |\n| Body Text | 14px (0.88rem) | 400 | 1.40 | normal | NouvelR, paragraph and descriptive content |\n| Body Bold | 14px (0.88rem) | 700 | 1.57 | normal | NouvelR, emphasized body text |\n| Button Label | 14.4px (0.90rem) | 700 | 1.00 | 0.144px | NouvelR, primary button text |\n| Nav Link | 13px (0.81rem) | 700 | 1.50 | normal | NouvelR, navigation and footer links |\n| Caption | 12.8px (0.80rem) | 400 | 1.10 | normal | NouvelR, small descriptive text |\n| Small Label | 12px (0.75rem) | 700 | 1.00 | normal | NouvelR, labels and tags |\n| Micro Text | 10px (0.63rem) | 700 | 1.45 | normal | NouvelR, smallest UI text, legal fine print |\n| Micro Caption | 8.5px (0.53rem) | 400 | normal | normal | NouvelR, absolute smallest text (legal) |\n\n### Principles\n- **Single-family discipline**: NouvelR handles everything from 56px hero headlines to 8.5px legal captions — the font's geometric precision allows it to scale across this extreme range without losing character\n- **Bold-default headings**: Weight 700 dominates the heading hierarchy. Unlike brands that use medium (500) for headings, Renault's Bold weight creates a more assertive, energetic reading experience\n- **Ultra-tight display line-heights**: 0.95 line-height on hero and section headings — the lines nearly collide, creating a compressed, punchy typographic texture that feels urgent and modern\n- **28-degree radical r**: The typeface's signature detail — the lowercase \"r\" terminal is cut at precisely 28 degrees to mirror the angles of the Renault diamond logo, embedding brand identity into every word\n- **Capitalize transform on captions**: Some caption text uses \\`text-transform: capitalize\\` for editorial labeling, while micro text uses \\`lowercase\\` — a deliberate inversion for hierarchy signaling\n\n## 4. Component Stylings\n\n### Buttons\nRenault's buttons are sharp-edged rectangles with zero border-radius — the industrial precision of a pressed metal body panel.\n\n**Super Primary (Yellow)** — The highest-emphasis CTA:\n- Default: bg \\`#EFDF00\\` (Renault Yellow), text \\`#000000\\`, borderRadius 0px, padding 10px 15px, border 1px solid \\`#EFDF00\\`\n- Inverted: bg \\`#EFDF00\\`, text \\`#000000\\` — same yellow on dark backgrounds\n- fontSize 16px (NouvelR), fontWeight 700, minHeight 46px, minWidth 46px\n- Used for: Primary conversion actions (configure, buy now)\n\n**Primary (Black)** — The default action button:\n- Default: bg \\`#000000\\`, text \\`#FFFFFF\\`, borderRadius 0px, padding 10px 15px, border 1px solid \\`#000000\\`\n- Inverted: bg \\`#FFFFFF\\`, text \\`#000000\\`, border 1px solid \\`#FFFFFF\\` — white fill on dark backgrounds\n- fontSize 16px (NouvelR), fontWeight 700\n- Used for: \"keşfedin\" (explore), secondary conversion actions\n\n**Ghost** — Transparent outline button:\n- Default (on dark): bg transparent, text \\`#FFFFFF\\`, border 1px solid \\`#FFFFFF\\`, borderRadius 0px, padding 10px 15px\n- Default (on light): bg transparent, text \\`#000000\\`, border 1px solid \\`#000000\\`\n- fontSize 16px (NouvelR), fontWeight 700\n- Used for: \"ilk sen öğren\" (be the first to know), \"satın alın\" (buy), secondary actions\n\n**Text Link** — Inline navigation:\n- Default (light): text \\`#000000\\`, no border, no background\n- Default (dark): text \\`#FFFFFF\\`\n- Hover: color shifts to \\`#1883FD\\` (Renault Blue), text-decoration none\n- All link variants hover to the same blue — consistent interactive feedback\n\n### Cards & Containers\n\n**PromoCard (Light)** — Editorial content card:\n- Background: white or transparent\n- Full-bleed photography with dark gradient overlay at top: \\`linear-gradient(rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%)\\`\n- Heading: NouvelR 40px/700, white text positioned over gradient\n- Border-radius: 0px — sharp rectangular containers\n- No shadow, no visible border\n\n**PromoCard (Dark / \\`is-alternative-mode\\`)** — Cinematic card:\n- Background: \\`#000000\\` (Absolute Black)\n- Same gradient overlay treatment\n- Heading: white NouvelR text\n- CTA buttons: inverted primary (white bg) or ghost (white border)\n\n**VehicleRangeCard** — Vehicle showcase:\n- Background: transparent\n- Vehicle image above, model name and price/spec below\n- No shadow, no border, clean flat treatment\n- Spacing between cards via grid gap\n\n### Inputs & Forms\n\n**Search/Text Input:**\n- Background: \\`#FFFFFF\\`\n- Text: \\`#000000\\`\n- Border: 1px solid \\`#D1D1D1\\` (Border Gray)\n- Border-radius: 50px (pill-shaped — unusual deviation from the zero-radius button system)\n- Padding: 6px 35px 6px 15px (extra right padding for search icon)\n- Font: NouvelR, 12.8px\n- Focus: standard browser focus ring\n\n### Navigation\n- **Desktop**: Renault diamond logo centered/left, horizontal nav links, sticky positioning\n- **Background**: white, no shadow at rest\n- **Links**: NouvelR, 13px, weight 700, black text\n- **Hover**: color shifts to \\`#1883FD\\` (Renault Blue)\n- **Mobile**: Hamburger collapse to full-screen navigation drawer\n- **CTA in nav**: Primary black button for main conversion action\n\n### Image Treatment\n- **Hero**: Full-viewport carousel with dramatic aurora-gradient backgrounds and art-directed vehicle photography — edge-to-edge, no padding\n- **PromoCards**: Full-bleed photography within card bounds, dark gradient overlay at top for text legibility\n- **Vehicle images**: Transparent-background renders on neutral/gradient backgrounds\n- **Aspect ratios**: Mixed — hero at roughly 16:9 viewport, promo cards at various ratios from square to wide panoramic\n- **Lazy loading**: Below-fold sections use lazy loading (framework-handled)\n\n### Carousel Component\n- Full-screen hero carousel with auto-advancing slides\n- Each slide: background gradient/photo + vehicle image + headline + CTA buttons\n- Dot indicators for slide position\n- Navigation arrows at edges\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px (detected system base)\n- **Scale**: 1px, 4px, 5px, 6px, 6.25px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 32px, 40px\n- **Button padding**: 10px 15px — consistent across all button variants\n- **Section padding**: Generous vertical spacing (40–80px) between major content blocks\n- **Card gaps**: 16–24px between grid items\n- **Minimum interactive size**: 46px (minWidth and minHeight on all buttons)\n\n### Grid & Container\n- **Max width**: 1440px (largest defined breakpoint)\n- **Hero**: Full-bleed, edge-to-edge, viewport-height\n- **PromoCard grid**: 2-up and 3-up layouts with mixed card sizes\n- **Vehicle range**: Horizontal scrollable card row or grid\n- **Footer**: Multi-column layout on white background\n\n### Whitespace Philosophy\nRenault uses whitespace moderately — more generously than Ferrari but less extremely than Tesla. The card-based layout means content is organized into defined containers rather than floating in void. The visual breathing room comes primarily from the large card formats and the full-bleed hero carousel, which gives each vehicle its own cinematic moment. Between sections, spacing is consistent (32–40px) creating a rhythmic scroll experience. The alternation between light and dark sections also creates perceived whitespace — the mode switch itself acts as a visual separator.\n\n### Border Radius Scale\n| Value | Context |\n|-------|---------|\n| 0px | All buttons, PromoCards, most containers — the zero-radius default |\n| 2px | Small UI elements (region controls) |\n| 3px | Content panels (div, tabpanel) |\n| 4px | Labels and tag elements |\n| 46px | Pill-shaped elements (search input, filter chips) |\n| 50px | Full pill for search/input fields |\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow | Default for PromoCards, buttons, most containers |\n| Level 1 (Soft) | \\`rgba(0,0,0,0.2) 0px 4px 8px\\` | Card hover states, subtle lift effect |\n| Level 2 (Medium) | \\`rgba(0,0,0,0.2) 0px 0px 18px\\` | Floating UI elements, dropdown menus |\n| Level 3 (Layered) | \\`rgba(0,0,0,0) 0px 2px 4px, rgba(50,50,93,0.1) 0px 7px 14px\\` | Compound shadow for elevated cards and modals |\n| Level 4 (Deep) | \\`rgba(0,0,0,0.15) 0px 40px 80px\\` | Large floating panels, configurator overlays |\n| Level 5 (Directional) | \\`rgba(0,0,0,0.2) 5px 5px 8px\\` | Offset directional shadow for specific components |\n| Level 6 (Ambient) | \\`rgb(199,197,199) 0px 0px 12px 2px\\` | Ambient glow effect for highlighted elements |\n\n### Shadow Philosophy\nRenault uses a richer shadow system than Ferrari or Tesla — seven distinct shadow tokens reflecting a more layered, dimensional interface. The shadows progress from subtle 4px hover lifts to dramatic 80px deep panels. The compound shadow (Level 3) with its dual-layer approach (a tight dark shadow plus a wider purple-tinted one from \\`rgba(50,50,93,0.1)\\`) is particularly refined — it creates a photorealistic floating effect. The ambient glow (Level 6) in warm gray adds a unique touch that connects to Renault's warmer color personality.\n\n### Decorative Depth\n- **Hero aurora gradients**: The primary decorative depth element — vivid color gradients create atmospheric depth behind vehicle imagery\n- **PromoCard overlays**: \\`linear-gradient(rgba(0,0,0,0.6) → transparent)\\` creates depth within cards through transparency\n- **No blur effects** on UI elements — depth is communicated through shadow and color contrast\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Renault Yellow (\\`#EFDF00\\`) exclusively for super-primary CTAs — it carries the full weight of the diamond logo's identity\n- Maintain zero border-radius on all buttons — sharp edges are non-negotiable in the Renault system\n- Use NouvelR Bold (700) as the default heading weight — the assertive weight is central to the brand's energetic personality\n- Apply the dark gradient overlay (\\`rgba(0,0,0,0.6) → transparent\\`) on PromoCards to ensure text legibility over photography\n- Keep hero line-heights ultra-tight (0.95) for display text — the compressed texture feels urgent and modern\n- Alternate between black and white sections to create the signature chessboard rhythm\n- Use \\`#1883FD\\` (Renault Blue) consistently for all link hover states — one interactive color signal\n- Set minimum interactive size at 46×46px for all buttons — accessibility built into the component spec\n- Reserve pill-shaped radius (46–50px) exclusively for search inputs and filter elements — never for buttons\n- Use the PromoCard gradient overlay on every card that has text over photography\n\n### Don't\n- Apply Renault Yellow as a background color for sections or surfaces — it's a CTA signal, not an atmosphere color\n- Add border-radius to buttons — the zero-radius rectangle is a core brand marker\n- Use any typeface besides NouvelR — the single-family discipline is a brand pillar\n- Mix multiple chromatic accent colors in a single section — the palette is monochrome-plus-yellow\n- Soften heading weights to 400 or 500 — NouvelR Bold is the brand voice, lighter weights read as off-brand\n- Add decorative borders to PromoCards or content containers — separation comes from background color alternation\n- Use the semantic colors (Success Green, Error Rose) for decorative purposes — they're reserved for form states\n- Apply the 56px hero size to anything below the fold — hero typography scale is reserved for the carousel\n- Create rounded-pill buttons — pill shapes are reserved for inputs, never for action elements\n- Use flat CSS gradients on UI surfaces — the only gradients should be the photographic hero auroras and the text-legibility overlays\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | ≤425px | Single-column, full-width cards, hero text scales to ~32px, stacked CTAs, hamburger nav |\n| Mobile | 426–640px | Single-column, slightly larger cards, hero text at 32–40px |\n| Tablet Small | 641–768px | 2-column PromoCard grid begins, hero maintains full-width |\n| Tablet | 769–896px | Full 2-column layout, vehicle range shows 2–3 cards |\n| Desktop Small | 897–1024px | Navigation fully expanded, hero at 56px, 2-up card grid |\n| Desktop | 1025–1280px | Full layout, 3-up card grid, generous whitespace |\n| Large Desktop | 1281–1440px | Maximum content width, centered container, hero at full cinematic scale |\n\n### Touch Targets\n- All buttons: minimum 46×46px (\\`minWidth: 46px, minHeight: 46px\\`) — exceeds WCAG AAA 44×44px requirement\n- Search input pill: adequate touch target with 50px border-radius creating a large tappable area\n- Navigation links: NouvelR 13px with adequate spacing between items\n- Carousel navigation: large arrow targets at viewport edges\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav collapses to Renault diamond logo + hamburger menu on mobile\n- **Hero carousel**: Full-width at all breakpoints, headline scales from 56px (desktop) to ~32px (mobile)\n- **PromoCard grid**: 3-up → 2-up → single-column as viewport narrows\n- **Vehicle range**: Horizontal scroll maintained at all sizes, visible cards reduce\n- **CTA pairs**: Side-by-side buttons stack vertically on mobile\n- **Footer**: Multi-column collapses to single-column accordion on mobile\n\n### Image Behavior\n- Hero images: full-bleed at all breakpoints with \\`object-fit: cover\\`\n- PromoCard images: responsive within card containers, gradient overlay scales proportionally\n- Vehicle images: transparent-background renders scale proportionally within grid cells\n- Art direction: mobile may crop to tighter vehicle views, reducing environmental context\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA (Super): \"Renault Yellow (#EFDF00)\"\n- Primary CTA (Default): \"Absolute Black (#000000)\"\n- Background Light: \"Pure White (#FFFFFF)\"\n- Background Dark: \"Absolute Black (#000000)\"\n- Secondary Dark: \"Charcoal (#222222)\"\n- Heading text (light bg): \"Absolute Black (#000000)\"\n- Body text: \"Absolute Black (#000000)\"\n- Link Hover: \"Renault Blue (#1883FD)\"\n- Border: \"Pale Silver (#F2F2F2)\"\n- Semantic Error: \"Error Rose (#BE6464)\"\n\n### Example Component Prompts\n- \"Create a hero section with a full-viewport aurora gradient background (magenta to violet to teal), a centered vehicle image, a NouvelR Bold headline at 56px with 0.95 line-height in white, and two buttons: a Primary (white bg, black text, 0px radius) 'Explore' and a Ghost (transparent bg, white border, white text, 0px radius) 'Learn More'\"\n- \"Design a PromoCard with a full-bleed photography background, a dark gradient overlay (rgba(0,0,0,0.6) top to transparent at 40%), a NouvelR Bold 40px white heading, a 14px body text line in white, and a Primary inverted button (white bg, black text, 0px radius, 10px 15px padding)\"\n- \"Build a vehicle range grid with 3 columns on white background, each card showing a transparent-background car render above a NouvelR Bold 24px model name in black, a 14px price caption, and a ghost button (black border, black text, 0px radius) labeled 'Configure'\"\n- \"Create a dark E-Tech section on Absolute Black (#000000) with a NouvelR Bold 40px white heading 'E-Tech electric powertrain', a 14px subtitle in white, and a Renault Yellow (#EFDF00) super-primary button with black text, 0px radius, and 10px 15px padding\"\n- \"Design a search input as a pill-shaped field (50px border-radius) with white background, 1px solid #D1D1D1 border, NouvelR 12.8px text, 6px 35px 6px 15px padding, and a search icon positioned inside the right padding area\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time — Renault's system has clear component boundaries (PromoCard, VehicleRangeCard, CTA variants)\n2. Reference specific color names and hex codes — the palette is small but each color has a precise function\n3. Use natural language descriptions, not CSS values — \"sharp zero-radius rectangle\" conveys intent better than \"border-radius: 0\"\n4. Describe the desired \"feel\" alongside specific measurements — \"assertive automotive energy\" communicates the NouvelR Bold heading personality better than \"font-weight: 700\"\n5. Always check whether a section should be light or dark — the chessboard alternation is a core pattern\n6. Reserve Renault Yellow for ONE button per screen — if yellow appears in more than one CTA, the hierarchy collapses\n`;\n"],"mappings":";AACO,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/replicate.d.ts

@@ -0,0 +1,3 @@
+declare const replicateBrief = "# Design System Inspired by Replicate\n\n## 1. Visual Theme & Atmosphere\n\nReplicate's interface is a developer playground crackling with creative energy \u2014 a bold, high-contrast design that feels more like a music festival poster than a typical API platform. The hero section explodes with a vibrant orange-red-magenta gradient that immediately signals \"this is where AI models come alive,\" while the body of the page grounds itself in a clean white canvas where code snippets and model galleries take center stage.\n\nThe design personality is defined by two extreme choices: **massive display typography** (up to 128px) using the custom rb-freigeist-neue face, and **exclusively pill-shaped geometry** (9999px radius on everything). The display font is thick, bold, and confident \u2014 its heavy weight at enormous sizes creates text that feels like it's shouting with joy rather than whispering authority. Combined with basier-square for body text (a clean geometric sans) and JetBrains Mono for code, the system serves developers who want power and playfulness in equal measure.\n\nWhat makes Replicate distinctive is its community-powered energy. The model gallery with AI-generated images, the dotted-underline links, the green status badges, and the \"Imagine what you can build\" closing manifesto all create a space that feels alive and participatory \u2014 not a corporate product page but a launchpad for creative developers.\n\n**Key Characteristics:**\n- Explosive orange-red-magenta gradient hero (#ea2804 brand anchor)\n- Massive display typography (128px) in heavy rb-freigeist-neue\n- Exclusively pill-shaped geometry: 9999px radius on EVERYTHING\n- High-contrast black (#202020) and white palette with red brand accent\n- Developer-community energy: model galleries, code examples, dotted-underline links\n- Green status badges (#2b9a66) for live/operational indicators\n- Bold/heavy font weights (600-700) creating maximum typographic impact\n- Playful closing manifesto: \"Imagine what you can build.\"\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Replicate Dark** (`#202020`): The primary text color and dark surface \u2014 a near-black that's the anchor of all text and borders. Slightly warmer than pure #000.\n- **Replicate Red** (`#ea2804`): The core brand color \u2014 a vivid, saturated orange-red used in the hero gradient, accent borders, and high-signal moments.\n- **Secondary Red** (`#dd4425`): A slightly warmer variant for button borders and link hover states.\n\n### Secondary & Accent\n- **Status Green** (`#2b9a66`): Badge/pill background for \"running\" or operational status indicators.\n- **GitHub Dark** (`#24292e`): A blue-tinted dark used for code block backgrounds and developer contexts.\n\n### Surface & Background\n- **Pure White** (`#ffffff`): The primary page body background.\n- **Near White** (`#fcfcfc`): Button text on dark surfaces and the lightest content.\n- **Hero Gradient**: A dramatic orange \u2192 red \u2192 magenta \u2192 pink gradient for the hero section. Transitions from warm (#ea2804 family) through hot pink.\n\n### Neutrals & Text\n- **Medium Gray** (`#646464`): Secondary body text and de-emphasized content.\n- **Warm Gray** (`#4e4e4e`): Emphasized secondary text.\n- **Mid Silver** (`#8d8d8d`): Tertiary text, footnotes.\n- **Light Silver** (`#bbbbbb`): Dotted-underline link decoration color, muted metadata.\n- **Pure Black** (`#000000`): Maximum-emphasis borders and occasional text.\n\n### Gradient System\n- **Hero Blaze**: A dramatic multi-stop gradient flowing through orange (`#ea2804`) \u2192 red \u2192 magenta \u2192 hot pink. This gradient occupies the full hero section and is the most visually dominant element on the page.\n- **Dark Sections**: Deep dark (#202020) sections with white/near-white text provide contrast against the white body.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: `rb-freigeist-neue`, with fallbacks: `ui-sans-serif, system-ui`\n- **Body / UI**: `basier-square`, with fallbacks: `ui-sans-serif, system-ui`\n- **Code**: `jetbrains-mono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Mega | rb-freigeist-neue | 128px (8rem) | 700 | 1.00 (tight) | normal | The maximum: closing manifesto |\n| Display / Hero | rb-freigeist-neue | 72px (4.5rem) | 700 | 1.00 (tight) | -1.8px | Hero section headline |\n| Section Heading | rb-freigeist-neue | 48px (3rem) | 400\u2013700 | 1.00 (tight) | normal | Feature section titles |\n| Sub-heading | rb-freigeist-neue | 30px (1.88rem) | 600 | 1.20 (tight) | normal | Card headings |\n| Sub-heading Sans | basier-square | 38.4px (2.4rem) | 400 | 0.83 (ultra-tight) | normal | Large body headings |\n| Feature Title | basier-square / rb-freigeist-neue | 18px (1.13rem) | 600 | 1.56 | normal | Small section titles, labels |\n| Body Large | basier-square | 20px (1.25rem) | 400 | 1.40 | normal | Intro paragraphs |\n| Body / Button | basier-square | 16\u201318px (1\u20131.13rem) | 400\u2013600 | 1.50\u20131.56 | normal | Standard text, buttons |\n| Caption | basier-square | 14px (0.88rem) | 400\u2013600 | 1.43 | -0.35px to normal | Metadata, descriptions |\n| Small / Tag | basier-square | 12px (0.75rem) | 400 | 1.33 | normal | Tags (lowercase transform) |\n| Code | jetbrains-mono | 14px (0.88rem) | 400 | 1.43 | normal | Code snippets, API examples |\n| Code Small | jetbrains-mono | 11px (0.69rem) | 400 | 1.50 | normal | Tiny code references |\n\n### Principles\n- **Heavy display, light body**: rb-freigeist-neue at 700 weight creates thundering headlines, while basier-square at 400 handles body text with quiet efficiency. The contrast is extreme and intentional.\n- **128px is a real size**: The closing manifesto \"Imagine what you can build.\" uses 128px \u2014 bigger than most mobile screens. This is the design equivalent of shouting from a rooftop.\n- **Negative tracking on hero**: -1.8px letter-spacing at 72px creates dense, impactful hero text.\n- **Lowercase tags**: 12px basier-square uses `text-transform: lowercase` \u2014 an unusual choice that creates a casual, developer-friendly vibe.\n- **Weight 600 as emphasis**: When basier-square needs emphasis, it uses 600 (semibold) \u2014 never bold (700), which is reserved for rb-freigeist-neue display text.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Dark Solid**\n- Background: Replicate Dark (`#202020`)\n- Text: Near White (`#fcfcfc`)\n- Padding: 0px 4px (extremely compact)\n- Outline: Replicate Dark 4px solid\n- Radius: pill-shaped (implied by system)\n- Maximum emphasis \u2014 dark pill on light surface\n\n**White Outlined**\n- Background: Pure White (`#ffffff`)\n- Text: Replicate Dark (`#202020`)\n- Border: `1px solid #202020`\n- Radius: pill-shaped\n- Clean outlined pill for secondary actions\n\n**Transparent Glass**\n- Background: `rgba(255, 255, 255, 0.1)` (frosted glass)\n- Text: Replicate Dark (`#202020`)\n- Padding: 6px 56px 6px 28px (asymmetric \u2014 icon/search layout)\n- Border: transparent\n- Outline: Light Silver (`#bbbbbb`) 1px solid\n- Used for search/input-like buttons\n\n### Cards & Containers\n- Background: Pure White or subtle gray\n- Border: `1px solid #202020` for prominent containment\n- Radius: pill-shaped (9999px) for badges, labels, images\n- Shadow: minimal standard shadows\n- Model gallery: grid of AI-generated image thumbnails\n- Accent border: `1px solid #ea2804` for highlighted/featured items\n\n### Inputs & Forms\n- Background: `rgba(255, 255, 255, 0.1)` (frosted glass)\n- Text: Replicate Dark (`#202020`)\n- Border: transparent with outline\n- Padding: 6px 56px 6px 28px (search-bar style)\n\n### Navigation\n- Clean horizontal nav on white\n- Logo: Replicate wordmark in dark\n- Links: dark text with dotted underline on hover\n- CTA: Dark pill button\n- GitHub link and sign-in\n\n### Image Treatment\n- AI-generated model output images in a gallery grid\n- Pill-shaped image containers (9999px)\n- Full-width gradient hero section\n- Product screenshots with dark backgrounds\n\n### Distinctive Components\n\n**Model Gallery Grid**\n- Horizontal scrolling or grid of AI-generated images\n- Each image in a pill-shaped container\n- Model names and run counts displayed\n- The visual heart of the community platform\n\n**Dotted Underline Links**\n- Links use `text-decoration: underline dotted #bbbbbb`\n- A distinctive, developer-notebook aesthetic\n- Lighter and more casual than solid underlines\n\n**Status Badges**\n- Status Green (`#2b9a66`) background with white text\n- Pill-shaped (9999px)\n- 14px font size\n- Indicates model availability/operational status\n\n**Manifesto Section**\n- \"Imagine what you can build.\" at 128px\n- Dark background with white text\n- Images embedded between words\n- The emotional climax of the page\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 160px, 192px\n- Button padding: varies widely (0px 4px to 6px 56px)\n- Section vertical spacing: very generous (96\u2013192px)\n\n### Grid & Container\n- Fluid width with responsive constraints\n- Hero: full-width gradient with centered content\n- Model gallery: multi-column responsive grid\n- Feature sections: mixed layouts\n- Code examples: contained dark blocks\n\n### Whitespace Philosophy\n- **Bold and generous**: Massive spacing between sections (up to 192px) creates distinct zones.\n- **Dense within galleries**: Model images are tightly packed in the grid for browsable density.\n- **The gradient IS the whitespace**: The hero gradient section occupies significant vertical space as a colored void.\n\n### Border Radius Scale\n- **Pill (9999px)**: The ONLY radius in the system. Everything interactive, every image, every badge, every label, every container uses 9999px. This is the most extreme pill-radius commitment in any major tech brand.\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | White body, text blocks |\n| Bordered (Level 1) | `1px solid #202020` | Cards, buttons, containers |\n| Accent Border (Level 2) | `1px solid #ea2804` | Featured/highlighted items |\n| Gradient Hero (Level 3) | Full-width blaze gradient | Hero section, maximum visual impact |\n| Dark Section (Level 4) | Dark bg (#202020) with light text | Manifesto, footer, feature sections |\n\n**Shadow Philosophy**: Replicate relies on **borders and background color** for depth rather than shadows. The `1px solid #202020` border is the primary containment mechanism. The dramatic gradient hero and dark/light section alternation provide all the depth the design needs.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use pill-shaped (9999px) radius on EVERYTHING \u2014 buttons, images, badges, containers\n- Use rb-freigeist-neue at weight 700 for display text \u2014 go big (72px+) or go home\n- Use the orange-red brand gradient for hero sections\n- Use Replicate Dark (#202020) as the primary dark \u2014 not pure black\n- Apply dotted underline decoration on text links (#bbbbbb)\n- Use Status Green (#2b9a66) for operational/success badges\n- Keep body text in basier-square at 400\u2013600 weight\n- Use JetBrains Mono for all code content\n- Create a \"manifesto\" section with 128px type for emotional impact\n\n### Don't\n- Don't use any border-radius other than 9999px \u2014 the pill system is absolute\n- Don't use the brand red (#ea2804) as a surface/background color \u2014 it's for gradients and accent borders\n- Don't reduce display text below 48px on desktop \u2014 the heavy display font needs size to breathe\n- Don't use light/thin font weights on rb-freigeist-neue \u2014 600\u2013700 is the range\n- Don't use solid underlines on links \u2014 dotted is the signature\n- Don't add drop shadows \u2014 depth comes from borders and background color\n- Don't use warm neutrals \u2014 the gray scale is purely neutral (#202020 \u2192 #bbbbbb)\n- Don't skip the code examples \u2014 they're primary content, not decoration\n- Don't make the hero gradient subtle \u2014 it should be BOLD and vibrant\n\n## 8. Responsive Behavior\n\n### Breakpoints\n*No explicit breakpoints detected \u2014 likely using fluid/container-query responsive system.*\n\n### Touch Targets\n- Pill buttons with generous padding\n- Gallery images as large touch targets\n- Navigation adequately spaced\n\n### Collapsing Strategy\n- **Hero text**: 128px \u2192 72px \u2192 48px progressive scaling\n- **Model gallery**: Grid reduces columns\n- **Navigation**: Collapses to hamburger\n- **Manifesto**: Scales down but maintains impact\n\n### Image Behavior\n- AI-generated images scale within pill containers\n- Gallery reflows to fewer columns on narrow screens\n- Hero gradient maintained at all sizes\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text: \"Replicate Dark (#202020)\"\n- Page Background: \"Pure White (#ffffff)\"\n- Brand Accent: \"Replicate Red (#ea2804)\"\n- Secondary Text: \"Medium Gray (#646464)\"\n- Muted/Decoration: \"Light Silver (#bbbbbb)\"\n- Status: \"Status Green (#2b9a66)\"\n- Dark Surface: \"Replicate Dark (#202020)\"\n\n### Example Component Prompts\n- \"Create a hero section with a vibrant orange-red-magenta gradient background. Headline at 72px rb-freigeist-neue weight 700, white text, -1.8px letter-spacing. Include a dark pill CTA button and a white outlined pill button.\"\n- \"Design a model card with pill-shaped (9999px) image container, model name at 16px basier-square weight 600, run count at 14px in Medium Gray. Border: 1px solid #202020.\"\n- \"Build a status badge: pill-shaped (9999px), Status Green (#2b9a66) background, white text at 14px basier-square.\"\n- \"Create a manifesto section on Replicate Dark (#202020) with 'Imagine what you can build.' at 128px rb-freigeist-neue weight 700, white text. Embed small AI-generated images between the words.\"\n- \"Design a code block: dark background (#24292e), JetBrains Mono at 14px, white text. Pill-shaped container.\"\n\n### Iteration Guide\n1. Everything is pill-shaped \u2014 never specify any other border-radius\n2. Display text is HEAVY \u2014 weight 700, sizes 48px+\n3. Links use dotted underline (#bbbbbb) \u2014 never solid\n4. The gradient hero is the visual anchor \u2014 make it bold\n5. Use basier-square for body, rb-freigeist-neue for display, JetBrains Mono for code\n";
+
+export { replicateBrief };