@hex-core/themes 0.2.3 → 0.2.6

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

@@ -1 +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":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/raycast.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\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.js.map

@@ -1 +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":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/renault.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\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.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/replicate.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport 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 — 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 — 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 — 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 — 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 — 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 → red → magenta → 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\\`) → red → magenta → 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–700 | 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–18px (1–1.13rem) | 400–600 | 1.50–1.56 | normal | Standard text, buttons |\n| Caption | basier-square | 14px (0.88rem) | 400–600 | 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 — 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\\` — an unusual choice that creates a casual, developer-friendly vibe.\n- **Weight 600 as emphasis**: When basier-square needs emphasis, it uses 600 (semibold) — 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 — 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 — 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–192px)\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 — buttons, images, badges, containers\n- Use rb-freigeist-neue at weight 700 for display text — 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 — 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–600 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 — the pill system is absolute\n- Don't use the brand red (#ea2804) as a surface/background color — it's for gradients and accent borders\n- Don't reduce display text below 48px on desktop — the heavy display font needs size to breathe\n- Don't use light/thin font weights on rb-freigeist-neue — 600–700 is the range\n- Don't use solid underlines on links — dotted is the signature\n- Don't add drop shadows — depth comes from borders and background color\n- Don't use warm neutrals — the gray scale is purely neutral (#202020 → #bbbbbb)\n- Don't skip the code examples — they're primary content, not decoration\n- Don't make the hero gradient subtle — it should be BOLD and vibrant\n\n## 8. Responsive Behavior\n\n### Breakpoints\n*No explicit breakpoints detected — 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 → 72px → 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 — never specify any other border-radius\n2. Display text is HEAVY — weight 700, sizes 48px+\n3. Links use dotted underline (#bbbbbb) — never solid\n4. The gradient hero is the visual anchor — make it bold\n5. Use basier-square for body, rb-freigeist-neue for display, JetBrains Mono for code\n`;\n"],"mappings":";AACO,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/replicate.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport 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 — 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 — 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 — 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 — 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 — 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 → red → magenta → 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\\`) → red → magenta → 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–700 | 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–18px (1–1.13rem) | 400–600 | 1.50–1.56 | normal | Standard text, buttons |\n| Caption | basier-square | 14px (0.88rem) | 400–600 | 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 — 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\\` — an unusual choice that creates a casual, developer-friendly vibe.\n- **Weight 600 as emphasis**: When basier-square needs emphasis, it uses 600 (semibold) — 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 — 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 — 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–192px)\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 — buttons, images, badges, containers\n- Use rb-freigeist-neue at weight 700 for display text — 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 — 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–600 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 — the pill system is absolute\n- Don't use the brand red (#ea2804) as a surface/background color — it's for gradients and accent borders\n- Don't reduce display text below 48px on desktop — the heavy display font needs size to breathe\n- Don't use light/thin font weights on rb-freigeist-neue — 600–700 is the range\n- Don't use solid underlines on links — dotted is the signature\n- Don't add drop shadows — depth comes from borders and background color\n- Don't use warm neutrals — the gray scale is purely neutral (#202020 → #bbbbbb)\n- Don't skip the code examples — they're primary content, not decoration\n- Don't make the hero gradient subtle — it should be BOLD and vibrant\n\n## 8. Responsive Behavior\n\n### Breakpoints\n*No explicit breakpoints detected — 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 → 72px → 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 — never specify any other border-radius\n2. Display text is HEAVY — weight 700, sizes 48px+\n3. Links use dotted underline (#bbbbbb) — never solid\n4. The gradient hero is the visual anchor — make it bold\n5. Use basier-square for body, rb-freigeist-neue for display, JetBrains Mono for code\n`;\n"],"mappings":";AACO,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/resend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/resend.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const resendBrief = `# Design System Inspired by Resend\n\n## 1. Visual Theme & Atmosphere\n\nResend's website is a dark, cinematic canvas that treats email infrastructure like a luxury product. The entire page is draped in pure black (\\`#000000\\`) with text that glows in near-white (\\`#f0f0f0\\`), creating a theater-like experience where content performs on a void stage. This isn't the typical developer-tool darkness — it's the controlled darkness of a photography gallery, where every element is lit with intention and nothing competes for attention.\n\nThe typography system is the star of the show. Three carefully chosen typefaces create a hierarchy that feels both editorial and technical: Domaine Display (a Klim Type Foundry serif) appears at massive 96px for hero headlines with barely-there line-height (1.00) and negative tracking (-0.96px), creating display text that feels like a magazine cover. ABC Favorit (by Dinamo) handles section headings with an even more aggressive letter-spacing (-2.8px at 56px), giving a compressed, engineered quality to mid-tier text. Inter takes over for body and UI, providing the clean readability that lets the display fonts shine. Commit Mono rounds out the family for code blocks.\n\nWhat makes Resend distinctive is its icy, blue-tinted border system. Instead of neutral gray borders, Resend uses \\`rgba(214, 235, 253, 0.19)\\` — a frosty, slightly blue-tinted line at 19% opacity that gives every container and divider a cold, crystalline quality against the black background. Combined with pill-shaped buttons (9999px radius), multi-color accent system (orange, green, blue, yellow, red — each with its own CSS variable scale), and OpenType stylistic sets (\\`\"ss01\"\\`, \\`\"ss03\"\\`, \\`\"ss04\"\\`, \\`\"ss11\"\\`), the result is a design system that feels premium, precise, and quietly confident.\n\n**Key Characteristics:**\n- Pure black background with near-white (\\`#f0f0f0\\`) text — theatrical, gallery-like darkness\n- Three-font hierarchy: Domaine Display (serif hero), ABC Favorit (geometric sections), Inter (body/UI)\n- Icy blue-tinted borders: \\`rgba(214, 235, 253, 0.19)\\` — every border has a cold, crystalline shimmer\n- Multi-color accent system: orange, green, blue, yellow, red — each with numbered CSS variable scales\n- Pill-shaped buttons and tags (9999px radius) with transparent backgrounds\n- OpenType stylistic sets (\\`\"ss01\"\\`, \\`\"ss03\"\\`, \\`\"ss04\"\\`, \\`\"ss11\"\\`) on display fonts\n- Commit Mono for code — monospace as a design element, not an afterthought\n- Whisper-level shadows using blue-tinted ring: \\`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px\\`\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Void Black** (\\`#000000\\`): Page background, the defining canvas color (95% opacity via \\`--color-black-12\\`)\n- **Near White** (\\`#f0f0f0\\`): Primary text, button text, high-contrast elements\n- **Pure White** (\\`#ffffff\\`): \\`--color-white\\`, maximum emphasis text, link highlights\n\n### Accent Scale — Orange\n- **Orange 4** (\\`#ff5900\\`): \\`--color-orange-4\\`, at 22% opacity — subtle warm glow\n- **Orange 10** (\\`#ff801f\\`): \\`--color-orange-10\\`, primary orange accent — warm, energetic\n- **Orange 11** (\\`#ffa057\\`): \\`--color-orange-11\\`, lighter orange for secondary use\n\n### Accent Scale — Green\n- **Green 3** (\\`#22ff99\\`): \\`--color-green-3\\`, at 12% opacity — faint emerald wash\n- **Green 4** (\\`#11ff99\\`): \\`--color-green-4\\`, at 18% opacity — success indicator glow\n\n### Accent Scale — Blue\n- **Blue 4** (\\`#0075ff\\`): \\`--color-blue-4\\`, at 34% opacity — medium blue accent\n- **Blue 5** (\\`#0081fd\\`): \\`--color-blue-5\\`, at 42% opacity — stronger blue\n- **Blue 10** (\\`#3b9eff\\`): \\`--color-blue-10\\`, bright blue — links, interactive elements\n\n### Accent Scale — Other\n- **Yellow 9** (\\`#ffc53d\\`): \\`--color-yellow-9\\`, warm gold for warnings or highlights\n- **Red 5** (\\`#ff2047\\`): \\`--color-red-5\\`, at 34% opacity — error states, destructive actions\n\n### Neutral Scale\n- **Silver** (\\`#a1a4a5\\`): Secondary text, muted links, descriptions\n- **Dark Gray** (\\`#464a4d\\`): Tertiary text, de-emphasized content\n- **Mid Gray** (\\`#5c5c5c\\`): Hover states, subtle emphasis\n- **Medium Gray** (\\`#494949\\`): Quaternary text\n- **Light Gray** (\\`#f8f8f8\\`): Light mode surface (if applicable)\n- **Border Gray** (\\`#eaeaea\\`): Light context borders\n- **Edge Gray** (\\`#ececec\\`): Subtle borders on light surfaces\n- **Mist Gray** (\\`#dedfdf\\`): Light dividers\n- **Soft Gray** (\\`#e5e6e6\\`): Alternate light border\n\n### Surface & Overlay\n- **Frost Primary** (\\`#fcfdff\\`): Primary color token (slight blue tint, 94% opacity)\n- **White Hover** (\\`rgba(255, 255, 255, 0.28)\\`): Button hover state on dark\n- **White 60%** (\\`oklab(0.999994 ... / 0.577)\\`): Semi-transparent white for muted text\n- **White 64%** (\\`oklab(0.999994 ... / 0.642)\\`): Slightly brighter semi-transparent white\n\n### Borders & Shadows\n- **Frost Border** (\\`rgba(214, 235, 253, 0.19)\\`): The signature — icy blue-tinted borders at 19% opacity\n- **Frost Border Alt** (\\`rgba(217, 237, 254, 0.145)\\`): Slightly lighter variant for list items\n- **Ring Shadow** (\\`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px\\`): Blue-tinted shadow-as-border\n- **Focus Ring** (\\`rgb(0, 0, 0) 0px 0px 0px 8px\\`): Heavy black focus ring\n- **Subtle Shadow** (\\`rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px\\`): Minimal card elevation\n\n## 3. Typography Rules\n\n### Font Families\n- **Display Serif**: \\`domaine\\` (Domaine Display by Klim Type Foundry) — hero headlines\n- **Display Sans**: \\`aBCFavorit\\` (ABC Favorit by Dinamo), fallbacks: \\`ui-sans-serif, system-ui\\` — section headings\n- **Body / UI**: \\`inter\\`, fallbacks: \\`ui-sans-serif, system-ui\\` — body text, buttons, navigation\n- **Monospace**: \\`commitMono\\`, fallbacks: \\`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas\\`\n- **Secondary**: \\`Helvetica\\` — fallback for specific UI contexts\n- **System**: \\`-apple-system, system-ui, Segoe UI, Roboto\\` — embedded content\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | domaine | 96px (6.00rem) | 400 | 1.00 (tight) | -0.96px | \\`\"ss01\", \"ss04\", \"ss11\"\\` |\n| Display Hero Mobile | domaine | 76.8px (4.80rem) | 400 | 1.00 (tight) | -0.768px | Scaled for mobile |\n| Section Heading | aBCFavorit | 56px (3.50rem) | 400 | 1.20 (tight) | -2.8px | \\`\"ss01\", \"ss04\", \"ss11\"\\` |\n| Sub-heading | aBCFavorit | 20px (1.25rem) | 400 | 1.30 (tight) | normal | \\`\"ss01\", \"ss04\", \"ss11\"\\` |\n| Sub-heading Compact | aBCFavorit | 16px (1.00rem) | 400 | 1.50 | -0.8px | \\`\"ss01\", \"ss04\", \"ss11\"\\` |\n| Feature Title | inter | 24px (1.50rem) | 500 | 1.50 | normal | Section sub-headings |\n| Body Large | inter | 18px (1.13rem) | 400 | 1.50 | normal | Introductions |\n| Body | inter | 16px (1.00rem) | 400 | 1.50 | normal | Standard body text |\n| Body Semibold | inter | 16px (1.00rem) | 600 | 1.50 | normal | Emphasis, active states |\n| Nav Link | aBCFavorit | 14px (0.88rem) | 500 | 1.43 | 0.35px | \\`\"ss01\", \"ss03\", \"ss04\"\\` — positive tracking |\n| Button / Link | inter | 14px (0.88rem) | 500–600 | 1.43 | normal | Buttons, nav, CTAs |\n| Caption | inter | 14px (0.88rem) | 400 | 1.60 (relaxed) | normal | Descriptions |\n| Helvetica Caption | Helvetica | 14px (0.88rem) | 400–600 | 1.00–1.71 | normal | UI elements |\n| Small | inter | 12px (0.75rem) | 400–500 | 1.33 | normal | Tags, meta, fine print |\n| Small Uppercase | inter | 12px (0.75rem) | 500 | 1.33 | normal | \\`text-transform: uppercase\\` |\n| Small Capitalize | inter | 12px (0.75rem) | 500 | 1.33 | normal | \\`text-transform: capitalize\\` |\n| Code Body | commitMono | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks |\n| Code Small | commitMono | 14px (0.88rem) | 400 | 1.43 | normal | Inline code |\n| Code Tiny | commitMono | 12px (0.75rem) | 400 | 1.33 | normal | Small code labels |\n| Heading (Helvetica) | Helvetica | 24px (1.50rem) | 400 | 1.40 | normal | Alternate heading context |\n\n### Principles\n- **Three-font editorial hierarchy**: Domaine Display (serif, hero), ABC Favorit (geometric sans, sections), Inter (readable body). Each font has a strict role — they never cross lanes.\n- **Aggressive negative tracking on display**: Domaine at -0.96px, ABC Favorit at -2.8px. The display type feels compressed, urgent, and designed — like a magazine masthead.\n- **Positive tracking on nav**: ABC Favorit nav links use +0.35px letter-spacing — the only positive tracking in the system. This creates airy, spaced-out navigation text that contrasts with the compressed headings.\n- **OpenType as identity**: The \\`\"ss01\"\\`, \\`\"ss03\"\\`, \\`\"ss04\"\\`, \\`\"ss11\"\\` stylistic sets are enabled on all ABC Favorit and Domaine text, activating alternate glyphs that give Resend's typography its unique character.\n- **Commit Mono as design element**: The monospace font isn't hidden in code blocks — it's used prominently for code examples and technical content, treated as a first-class visual element.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Transparent Pill**\n- Background: transparent\n- Text: \\`#f0f0f0\\`\n- Padding: 5px 12px\n- Radius: 9999px (full pill)\n- Border: \\`1px solid rgba(214, 235, 253, 0.19)\\` (frost border)\n- Hover: background \\`rgba(255, 255, 255, 0.28)\\` (white glass)\n- Use: Primary CTA on dark backgrounds\n\n**White Solid Pill**\n- Background: \\`#ffffff\\`\n- Text: \\`#000000\\`\n- Padding: 5px 12px\n- Radius: 9999px\n- Use: High-contrast CTA (\"Get started\")\n\n**Ghost Button**\n- Background: transparent\n- Text: \\`#f0f0f0\\`\n- Radius: 4px\n- No border\n- Hover: subtle background tint\n- Use: Secondary actions, tab items\n\n### Cards & Containers\n- Background: transparent or very subtle dark tint\n- Border: \\`1px solid rgba(214, 235, 253, 0.19)\\` (frost border)\n- Radius: 16px (standard cards), 24px (large sections/panels)\n- Shadow: \\`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px\\` (ring shadow)\n- Dark product screenshots and code demos as card content\n- No traditional box-shadow elevation\n\n### Inputs & Forms\n- Text: \\`#f0f0f0\\` on dark, \\`#000000\\` on light\n- Radius: 4px\n- Focus: shadow-based ring\n- Minimal styling — inherits dark theme\n\n### Navigation\n- Sticky dark header with frost border bottom: \\`1px solid rgba(214, 235, 253, 0.19)\\`\n- \"Resend\" wordmark left-aligned\n- ABC Favorit 14px weight 500 with +0.35px tracking for nav links\n- Pill CTAs right-aligned\n- Mobile: hamburger collapse\n\n### Image Treatment\n- Product screenshots and code demos dominate content sections\n- Dark-themed screenshots on dark background — seamless integration\n- Rounded corners: 12px–16px on images\n- Full-width sections with subtle gradient overlays\n\n### Distinctive Components\n\n**Tab Navigation**\n- Horizontal tabs with subtle selection indicator\n- Tab items: 8px radius\n- Active state with subtle background differentiation\n\n**Code Preview Panels**\n- Dark code blocks using Commit Mono\n- Frost borders (\\`rgba(214, 235, 253, 0.19)\\`)\n- Syntax-highlighted with multi-color accent tokens (orange, blue, green, yellow)\n\n**Multi-color Accent Badges**\n- Each product feature has its own accent color from the CSS variable scale\n- Badges use the accent color at low opacity (12–42%) for background, full opacity for text\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 30px, 32px, 40px\n\n### Grid & Container\n- Centered content with generous max-width\n- Full-width black sections with contained inner content\n- Single-column hero, expanding to feature grids below\n- Code preview panels as full-width or contained showcases\n\n### Whitespace Philosophy\n- **Cinematic black space**: The black background IS the whitespace. Generous vertical spacing (80px–120px+) between sections creates a scroll-through-darkness experience where each section emerges like a scene.\n- **Tight content, vast surrounds**: Text blocks and cards are compact internally, but float in vast dark space — creating isolated \"islands\" of content.\n- **Typography-led rhythm**: The massive display fonts (96px) create their own vertical rhythm — each headline is a visual event that anchors the surrounding space.\n\n### Border Radius Scale\n- Sharp (4px): Buttons (ghost), inputs, small interactive elements\n- Subtle (6px): Menu panels, navigation items\n- Standard (8px): Tabs, content blocks\n- Comfortable (10px): Accent elements\n- Card (12px): Clipboard buttons, medium containers\n- Large (16px): Feature cards, images, main buttons\n- Section (24px): Large panels, section containers\n- Pill (9999px): Primary CTAs, tags, badges\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, transparent background | Default — most elements on dark void |\n| Ring (Level 1) | \\`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px\\` | Shadow-as-border for cards, containers |\n| Frost Border (Level 1b) | \\`1px solid rgba(214, 235, 253, 0.19)\\` | Explicit borders — buttons, dividers, tabs |\n| Subtle (Level 2) | \\`rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px\\` | Light card elevation |\n| Focus (Level 3) | \\`rgb(0, 0, 0) 0px 0px 0px 8px\\` | Heavy black focus ring — accessibility |\n\n**Shadow Philosophy**: Resend barely uses shadows at all. On a pure black background, traditional shadows are invisible — you can't cast a shadow into the void. Instead, Resend creates depth through its signature frost borders (\\`rgba(214, 235, 253, 0.19)\\`) — thin, icy blue-tinted lines that catch light against the darkness. This creates a \"glass panel floating in space\" aesthetic where borders are the primary depth mechanism.\n\n### Decorative Depth\n- Subtle warm gradient glows behind hero content (orange/amber tints)\n- Product screenshots create visual depth through their own internal UI\n- No gradient backgrounds — depth comes from border luminance and content contrast\n\n## 7. Do's and Don'ts\n\n### Do\n- Use pure black (\\`#000000\\`) as the page background — the void is the canvas\n- Apply frost borders (\\`rgba(214, 235, 253, 0.19)\\`) for all structural lines — they're the blue-tinted signature\n- Use Domaine Display ONLY for hero headings (96px), ABC Favorit for section headings, Inter for everything else\n- Enable OpenType \\`\"ss01\"\\`, \\`\"ss04\"\\`, \\`\"ss11\"\\` on Domaine and ABC Favorit text\n- Apply pill radius (9999px) to primary CTAs and tags\n- Use the multi-color accent scale (orange/green/blue/yellow/red) with opacity variants for context-specific highlighting\n- Keep shadows at ring level (\\`0px 0px 0px 1px\\`) — on black, traditional shadows don't work\n- Use +0.35px letter-spacing on ABC Favorit nav links — the only positive tracking\n\n### Don't\n- Don't lighten the background above \\`#000000\\` — the pure black void is non-negotiable\n- Don't use neutral gray borders — all borders must have the frost blue tint\n- Don't apply Domaine Display to body text — it's a display-only serif\n- Don't mix accent colors in the same component — each feature gets one accent color\n- Don't use box-shadow for elevation on the dark background — use frost borders instead\n- Don't skip the OpenType stylistic sets — they define the typographic character\n- Don't use negative letter-spacing on nav links — ABC Favorit nav uses positive +0.35px\n- Don't make buttons opaque on dark — transparency with frost border is the pattern\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <480px | Single column, tight padding, 76.8px hero |\n| Mobile | 480–600px | Standard mobile, stacked layout |\n| Desktop | >600px | Full layout, 96px hero, expanded sections |\n\n*Note: Resend uses a minimal breakpoint system — only 480px and 600px detected. The design is desktop-first with a clean mobile collapse.*\n\n### Touch Targets\n- Pill buttons: adequate padding (5px 12px minimum)\n- Tab items: 8px radius with comfortable hit areas\n- Navigation links spaced with 0.35px tracking for visual separation\n\n### Collapsing Strategy\n- Hero: Domaine 96px → 76.8px on mobile\n- Navigation: horizontal → hamburger\n- Feature sections: side-by-side → stacked\n- Code panels: maintain width, horizontal scroll if needed\n- Spacing compresses proportionally\n\n### Image Behavior\n- Product screenshots maintain aspect ratio\n- Dark screenshots blend seamlessly with dark background at all sizes\n- Rounded corners (12px–16px) maintained across breakpoints\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Void Black (\\`#000000\\`)\n- Primary text: Near White (\\`#f0f0f0\\`)\n- Secondary text: Silver (\\`#a1a4a5\\`)\n- Border: Frost Border (\\`rgba(214, 235, 253, 0.19)\\`)\n- Orange accent: \\`#ff801f\\`\n- Green accent: \\`#11ff99\\` (at 18% opacity)\n- Blue accent: \\`#3b9eff\\`\n- Focus ring: \\`rgb(0, 0, 0) 0px 0px 0px 8px\\`\n\n### Example Component Prompts\n- \"Create a hero section on pure black (#000000) background. Headline at 96px Domaine Display weight 400, line-height 1.00, letter-spacing -0.96px, near-white (#f0f0f0) text, OpenType 'ss01 ss04 ss11'. Subtitle at 20px ABC Favorit weight 400, line-height 1.30. Two pill buttons: white solid (#ffffff, 9999px radius) and transparent with frost border (rgba(214,235,253,0.19)).\"\n- \"Design a navigation bar: dark background with frost border bottom (1px solid rgba(214,235,253,0.19)). Nav links at 14px ABC Favorit weight 500, letter-spacing +0.35px, OpenType 'ss01 ss03 ss04'. White pill CTA right-aligned.\"\n- \"Build a feature card: transparent background, frost border (rgba(214,235,253,0.19)), 16px radius. Title at 56px ABC Favorit weight 400, letter-spacing -2.8px. Body at 16px Inter weight 400, #a1a4a5 text.\"\n- \"Create a code block using Commit Mono 16px on dark background. Frost border container (24px radius). Syntax colors: orange (#ff801f), blue (#3b9eff), green (#11ff99), yellow (#ffc53d).\"\n- \"Design an accent badge: background #ff5900 at 22% opacity, text #ffa057, 9999px radius, 12px Inter weight 500.\"\n\n### Iteration Guide\n1. Start with pure black — everything floats in the void\n2. Frost borders (\\`rgba(214, 235, 253, 0.19)\\`) are the universal structural element — not gray, not neutral\n3. Three fonts, three roles: Domaine (hero), ABC Favorit (sections), Inter (body) — never cross\n4. OpenType stylistic sets are mandatory on display fonts — they define the character\n5. Multi-color accents at low opacity (12–42%) for backgrounds, full opacity for text\n6. Pill shape (9999px) for CTAs and badges, standard radius (4px–16px) for containers\n7. No shadows — use frost borders for depth against the void\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/resend.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const resendBrief = `# Design System Inspired by Resend\n\n## 1. Visual Theme & Atmosphere\n\nResend's website is a dark, cinematic canvas that treats email infrastructure like a luxury product. The entire page is draped in pure black (\\`#000000\\`) with text that glows in near-white (\\`#f0f0f0\\`), creating a theater-like experience where content performs on a void stage. This isn't the typical developer-tool darkness — it's the controlled darkness of a photography gallery, where every element is lit with intention and nothing competes for attention.\n\nThe typography system is the star of the show. Three carefully chosen typefaces create a hierarchy that feels both editorial and technical: Domaine Display (a Klim Type Foundry serif) appears at massive 96px for hero headlines with barely-there line-height (1.00) and negative tracking (-0.96px), creating display text that feels like a magazine cover. ABC Favorit (by Dinamo) handles section headings with an even more aggressive letter-spacing (-2.8px at 56px), giving a compressed, engineered quality to mid-tier text. Inter takes over for body and UI, providing the clean readability that lets the display fonts shine. Commit Mono rounds out the family for code blocks.\n\nWhat makes Resend distinctive is its icy, blue-tinted border system. Instead of neutral gray borders, Resend uses \\`rgba(214, 235, 253, 0.19)\\` — a frosty, slightly blue-tinted line at 19% opacity that gives every container and divider a cold, crystalline quality against the black background. Combined with pill-shaped buttons (9999px radius), multi-color accent system (orange, green, blue, yellow, red — each with its own CSS variable scale), and OpenType stylistic sets (\\`\"ss01\"\\`, \\`\"ss03\"\\`, \\`\"ss04\"\\`, \\`\"ss11\"\\`), the result is a design system that feels premium, precise, and quietly confident.\n\n**Key Characteristics:**\n- Pure black background with near-white (\\`#f0f0f0\\`) text — theatrical, gallery-like darkness\n- Three-font hierarchy: Domaine Display (serif hero), ABC Favorit (geometric sections), Inter (body/UI)\n- Icy blue-tinted borders: \\`rgba(214, 235, 253, 0.19)\\` — every border has a cold, crystalline shimmer\n- Multi-color accent system: orange, green, blue, yellow, red — each with numbered CSS variable scales\n- Pill-shaped buttons and tags (9999px radius) with transparent backgrounds\n- OpenType stylistic sets (\\`\"ss01\"\\`, \\`\"ss03\"\\`, \\`\"ss04\"\\`, \\`\"ss11\"\\`) on display fonts\n- Commit Mono for code — monospace as a design element, not an afterthought\n- Whisper-level shadows using blue-tinted ring: \\`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px\\`\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Void Black** (\\`#000000\\`): Page background, the defining canvas color (95% opacity via \\`--color-black-12\\`)\n- **Near White** (\\`#f0f0f0\\`): Primary text, button text, high-contrast elements\n- **Pure White** (\\`#ffffff\\`): \\`--color-white\\`, maximum emphasis text, link highlights\n\n### Accent Scale — Orange\n- **Orange 4** (\\`#ff5900\\`): \\`--color-orange-4\\`, at 22% opacity — subtle warm glow\n- **Orange 10** (\\`#ff801f\\`): \\`--color-orange-10\\`, primary orange accent — warm, energetic\n- **Orange 11** (\\`#ffa057\\`): \\`--color-orange-11\\`, lighter orange for secondary use\n\n### Accent Scale — Green\n- **Green 3** (\\`#22ff99\\`): \\`--color-green-3\\`, at 12% opacity — faint emerald wash\n- **Green 4** (\\`#11ff99\\`): \\`--color-green-4\\`, at 18% opacity — success indicator glow\n\n### Accent Scale — Blue\n- **Blue 4** (\\`#0075ff\\`): \\`--color-blue-4\\`, at 34% opacity — medium blue accent\n- **Blue 5** (\\`#0081fd\\`): \\`--color-blue-5\\`, at 42% opacity — stronger blue\n- **Blue 10** (\\`#3b9eff\\`): \\`--color-blue-10\\`, bright blue — links, interactive elements\n\n### Accent Scale — Other\n- **Yellow 9** (\\`#ffc53d\\`): \\`--color-yellow-9\\`, warm gold for warnings or highlights\n- **Red 5** (\\`#ff2047\\`): \\`--color-red-5\\`, at 34% opacity — error states, destructive actions\n\n### Neutral Scale\n- **Silver** (\\`#a1a4a5\\`): Secondary text, muted links, descriptions\n- **Dark Gray** (\\`#464a4d\\`): Tertiary text, de-emphasized content\n- **Mid Gray** (\\`#5c5c5c\\`): Hover states, subtle emphasis\n- **Medium Gray** (\\`#494949\\`): Quaternary text\n- **Light Gray** (\\`#f8f8f8\\`): Light mode surface (if applicable)\n- **Border Gray** (\\`#eaeaea\\`): Light context borders\n- **Edge Gray** (\\`#ececec\\`): Subtle borders on light surfaces\n- **Mist Gray** (\\`#dedfdf\\`): Light dividers\n- **Soft Gray** (\\`#e5e6e6\\`): Alternate light border\n\n### Surface & Overlay\n- **Frost Primary** (\\`#fcfdff\\`): Primary color token (slight blue tint, 94% opacity)\n- **White Hover** (\\`rgba(255, 255, 255, 0.28)\\`): Button hover state on dark\n- **White 60%** (\\`oklab(0.999994 ... / 0.577)\\`): Semi-transparent white for muted text\n- **White 64%** (\\`oklab(0.999994 ... / 0.642)\\`): Slightly brighter semi-transparent white\n\n### Borders & Shadows\n- **Frost Border** (\\`rgba(214, 235, 253, 0.19)\\`): The signature — icy blue-tinted borders at 19% opacity\n- **Frost Border Alt** (\\`rgba(217, 237, 254, 0.145)\\`): Slightly lighter variant for list items\n- **Ring Shadow** (\\`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px\\`): Blue-tinted shadow-as-border\n- **Focus Ring** (\\`rgb(0, 0, 0) 0px 0px 0px 8px\\`): Heavy black focus ring\n- **Subtle Shadow** (\\`rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px\\`): Minimal card elevation\n\n## 3. Typography Rules\n\n### Font Families\n- **Display Serif**: \\`domaine\\` (Domaine Display by Klim Type Foundry) — hero headlines\n- **Display Sans**: \\`aBCFavorit\\` (ABC Favorit by Dinamo), fallbacks: \\`ui-sans-serif, system-ui\\` — section headings\n- **Body / UI**: \\`inter\\`, fallbacks: \\`ui-sans-serif, system-ui\\` — body text, buttons, navigation\n- **Monospace**: \\`commitMono\\`, fallbacks: \\`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas\\`\n- **Secondary**: \\`Helvetica\\` — fallback for specific UI contexts\n- **System**: \\`-apple-system, system-ui, Segoe UI, Roboto\\` — embedded content\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | domaine | 96px (6.00rem) | 400 | 1.00 (tight) | -0.96px | \\`\"ss01\", \"ss04\", \"ss11\"\\` |\n| Display Hero Mobile | domaine | 76.8px (4.80rem) | 400 | 1.00 (tight) | -0.768px | Scaled for mobile |\n| Section Heading | aBCFavorit | 56px (3.50rem) | 400 | 1.20 (tight) | -2.8px | \\`\"ss01\", \"ss04\", \"ss11\"\\` |\n| Sub-heading | aBCFavorit | 20px (1.25rem) | 400 | 1.30 (tight) | normal | \\`\"ss01\", \"ss04\", \"ss11\"\\` |\n| Sub-heading Compact | aBCFavorit | 16px (1.00rem) | 400 | 1.50 | -0.8px | \\`\"ss01\", \"ss04\", \"ss11\"\\` |\n| Feature Title | inter | 24px (1.50rem) | 500 | 1.50 | normal | Section sub-headings |\n| Body Large | inter | 18px (1.13rem) | 400 | 1.50 | normal | Introductions |\n| Body | inter | 16px (1.00rem) | 400 | 1.50 | normal | Standard body text |\n| Body Semibold | inter | 16px (1.00rem) | 600 | 1.50 | normal | Emphasis, active states |\n| Nav Link | aBCFavorit | 14px (0.88rem) | 500 | 1.43 | 0.35px | \\`\"ss01\", \"ss03\", \"ss04\"\\` — positive tracking |\n| Button / Link | inter | 14px (0.88rem) | 500–600 | 1.43 | normal | Buttons, nav, CTAs |\n| Caption | inter | 14px (0.88rem) | 400 | 1.60 (relaxed) | normal | Descriptions |\n| Helvetica Caption | Helvetica | 14px (0.88rem) | 400–600 | 1.00–1.71 | normal | UI elements |\n| Small | inter | 12px (0.75rem) | 400–500 | 1.33 | normal | Tags, meta, fine print |\n| Small Uppercase | inter | 12px (0.75rem) | 500 | 1.33 | normal | \\`text-transform: uppercase\\` |\n| Small Capitalize | inter | 12px (0.75rem) | 500 | 1.33 | normal | \\`text-transform: capitalize\\` |\n| Code Body | commitMono | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks |\n| Code Small | commitMono | 14px (0.88rem) | 400 | 1.43 | normal | Inline code |\n| Code Tiny | commitMono | 12px (0.75rem) | 400 | 1.33 | normal | Small code labels |\n| Heading (Helvetica) | Helvetica | 24px (1.50rem) | 400 | 1.40 | normal | Alternate heading context |\n\n### Principles\n- **Three-font editorial hierarchy**: Domaine Display (serif, hero), ABC Favorit (geometric sans, sections), Inter (readable body). Each font has a strict role — they never cross lanes.\n- **Aggressive negative tracking on display**: Domaine at -0.96px, ABC Favorit at -2.8px. The display type feels compressed, urgent, and designed — like a magazine masthead.\n- **Positive tracking on nav**: ABC Favorit nav links use +0.35px letter-spacing — the only positive tracking in the system. This creates airy, spaced-out navigation text that contrasts with the compressed headings.\n- **OpenType as identity**: The \\`\"ss01\"\\`, \\`\"ss03\"\\`, \\`\"ss04\"\\`, \\`\"ss11\"\\` stylistic sets are enabled on all ABC Favorit and Domaine text, activating alternate glyphs that give Resend's typography its unique character.\n- **Commit Mono as design element**: The monospace font isn't hidden in code blocks — it's used prominently for code examples and technical content, treated as a first-class visual element.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Transparent Pill**\n- Background: transparent\n- Text: \\`#f0f0f0\\`\n- Padding: 5px 12px\n- Radius: 9999px (full pill)\n- Border: \\`1px solid rgba(214, 235, 253, 0.19)\\` (frost border)\n- Hover: background \\`rgba(255, 255, 255, 0.28)\\` (white glass)\n- Use: Primary CTA on dark backgrounds\n\n**White Solid Pill**\n- Background: \\`#ffffff\\`\n- Text: \\`#000000\\`\n- Padding: 5px 12px\n- Radius: 9999px\n- Use: High-contrast CTA (\"Get started\")\n\n**Ghost Button**\n- Background: transparent\n- Text: \\`#f0f0f0\\`\n- Radius: 4px\n- No border\n- Hover: subtle background tint\n- Use: Secondary actions, tab items\n\n### Cards & Containers\n- Background: transparent or very subtle dark tint\n- Border: \\`1px solid rgba(214, 235, 253, 0.19)\\` (frost border)\n- Radius: 16px (standard cards), 24px (large sections/panels)\n- Shadow: \\`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px\\` (ring shadow)\n- Dark product screenshots and code demos as card content\n- No traditional box-shadow elevation\n\n### Inputs & Forms\n- Text: \\`#f0f0f0\\` on dark, \\`#000000\\` on light\n- Radius: 4px\n- Focus: shadow-based ring\n- Minimal styling — inherits dark theme\n\n### Navigation\n- Sticky dark header with frost border bottom: \\`1px solid rgba(214, 235, 253, 0.19)\\`\n- \"Resend\" wordmark left-aligned\n- ABC Favorit 14px weight 500 with +0.35px tracking for nav links\n- Pill CTAs right-aligned\n- Mobile: hamburger collapse\n\n### Image Treatment\n- Product screenshots and code demos dominate content sections\n- Dark-themed screenshots on dark background — seamless integration\n- Rounded corners: 12px–16px on images\n- Full-width sections with subtle gradient overlays\n\n### Distinctive Components\n\n**Tab Navigation**\n- Horizontal tabs with subtle selection indicator\n- Tab items: 8px radius\n- Active state with subtle background differentiation\n\n**Code Preview Panels**\n- Dark code blocks using Commit Mono\n- Frost borders (\\`rgba(214, 235, 253, 0.19)\\`)\n- Syntax-highlighted with multi-color accent tokens (orange, blue, green, yellow)\n\n**Multi-color Accent Badges**\n- Each product feature has its own accent color from the CSS variable scale\n- Badges use the accent color at low opacity (12–42%) for background, full opacity for text\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 30px, 32px, 40px\n\n### Grid & Container\n- Centered content with generous max-width\n- Full-width black sections with contained inner content\n- Single-column hero, expanding to feature grids below\n- Code preview panels as full-width or contained showcases\n\n### Whitespace Philosophy\n- **Cinematic black space**: The black background IS the whitespace. Generous vertical spacing (80px–120px+) between sections creates a scroll-through-darkness experience where each section emerges like a scene.\n- **Tight content, vast surrounds**: Text blocks and cards are compact internally, but float in vast dark space — creating isolated \"islands\" of content.\n- **Typography-led rhythm**: The massive display fonts (96px) create their own vertical rhythm — each headline is a visual event that anchors the surrounding space.\n\n### Border Radius Scale\n- Sharp (4px): Buttons (ghost), inputs, small interactive elements\n- Subtle (6px): Menu panels, navigation items\n- Standard (8px): Tabs, content blocks\n- Comfortable (10px): Accent elements\n- Card (12px): Clipboard buttons, medium containers\n- Large (16px): Feature cards, images, main buttons\n- Section (24px): Large panels, section containers\n- Pill (9999px): Primary CTAs, tags, badges\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, transparent background | Default — most elements on dark void |\n| Ring (Level 1) | \\`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px\\` | Shadow-as-border for cards, containers |\n| Frost Border (Level 1b) | \\`1px solid rgba(214, 235, 253, 0.19)\\` | Explicit borders — buttons, dividers, tabs |\n| Subtle (Level 2) | \\`rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px\\` | Light card elevation |\n| Focus (Level 3) | \\`rgb(0, 0, 0) 0px 0px 0px 8px\\` | Heavy black focus ring — accessibility |\n\n**Shadow Philosophy**: Resend barely uses shadows at all. On a pure black background, traditional shadows are invisible — you can't cast a shadow into the void. Instead, Resend creates depth through its signature frost borders (\\`rgba(214, 235, 253, 0.19)\\`) — thin, icy blue-tinted lines that catch light against the darkness. This creates a \"glass panel floating in space\" aesthetic where borders are the primary depth mechanism.\n\n### Decorative Depth\n- Subtle warm gradient glows behind hero content (orange/amber tints)\n- Product screenshots create visual depth through their own internal UI\n- No gradient backgrounds — depth comes from border luminance and content contrast\n\n## 7. Do's and Don'ts\n\n### Do\n- Use pure black (\\`#000000\\`) as the page background — the void is the canvas\n- Apply frost borders (\\`rgba(214, 235, 253, 0.19)\\`) for all structural lines — they're the blue-tinted signature\n- Use Domaine Display ONLY for hero headings (96px), ABC Favorit for section headings, Inter for everything else\n- Enable OpenType \\`\"ss01\"\\`, \\`\"ss04\"\\`, \\`\"ss11\"\\` on Domaine and ABC Favorit text\n- Apply pill radius (9999px) to primary CTAs and tags\n- Use the multi-color accent scale (orange/green/blue/yellow/red) with opacity variants for context-specific highlighting\n- Keep shadows at ring level (\\`0px 0px 0px 1px\\`) — on black, traditional shadows don't work\n- Use +0.35px letter-spacing on ABC Favorit nav links — the only positive tracking\n\n### Don't\n- Don't lighten the background above \\`#000000\\` — the pure black void is non-negotiable\n- Don't use neutral gray borders — all borders must have the frost blue tint\n- Don't apply Domaine Display to body text — it's a display-only serif\n- Don't mix accent colors in the same component — each feature gets one accent color\n- Don't use box-shadow for elevation on the dark background — use frost borders instead\n- Don't skip the OpenType stylistic sets — they define the typographic character\n- Don't use negative letter-spacing on nav links — ABC Favorit nav uses positive +0.35px\n- Don't make buttons opaque on dark — transparency with frost border is the pattern\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <480px | Single column, tight padding, 76.8px hero |\n| Mobile | 480–600px | Standard mobile, stacked layout |\n| Desktop | >600px | Full layout, 96px hero, expanded sections |\n\n*Note: Resend uses a minimal breakpoint system — only 480px and 600px detected. The design is desktop-first with a clean mobile collapse.*\n\n### Touch Targets\n- Pill buttons: adequate padding (5px 12px minimum)\n- Tab items: 8px radius with comfortable hit areas\n- Navigation links spaced with 0.35px tracking for visual separation\n\n### Collapsing Strategy\n- Hero: Domaine 96px → 76.8px on mobile\n- Navigation: horizontal → hamburger\n- Feature sections: side-by-side → stacked\n- Code panels: maintain width, horizontal scroll if needed\n- Spacing compresses proportionally\n\n### Image Behavior\n- Product screenshots maintain aspect ratio\n- Dark screenshots blend seamlessly with dark background at all sizes\n- Rounded corners (12px–16px) maintained across breakpoints\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Void Black (\\`#000000\\`)\n- Primary text: Near White (\\`#f0f0f0\\`)\n- Secondary text: Silver (\\`#a1a4a5\\`)\n- Border: Frost Border (\\`rgba(214, 235, 253, 0.19)\\`)\n- Orange accent: \\`#ff801f\\`\n- Green accent: \\`#11ff99\\` (at 18% opacity)\n- Blue accent: \\`#3b9eff\\`\n- Focus ring: \\`rgb(0, 0, 0) 0px 0px 0px 8px\\`\n\n### Example Component Prompts\n- \"Create a hero section on pure black (#000000) background. Headline at 96px Domaine Display weight 400, line-height 1.00, letter-spacing -0.96px, near-white (#f0f0f0) text, OpenType 'ss01 ss04 ss11'. Subtitle at 20px ABC Favorit weight 400, line-height 1.30. Two pill buttons: white solid (#ffffff, 9999px radius) and transparent with frost border (rgba(214,235,253,0.19)).\"\n- \"Design a navigation bar: dark background with frost border bottom (1px solid rgba(214,235,253,0.19)). Nav links at 14px ABC Favorit weight 500, letter-spacing +0.35px, OpenType 'ss01 ss03 ss04'. White pill CTA right-aligned.\"\n- \"Build a feature card: transparent background, frost border (rgba(214,235,253,0.19)), 16px radius. Title at 56px ABC Favorit weight 400, letter-spacing -2.8px. Body at 16px Inter weight 400, #a1a4a5 text.\"\n- \"Create a code block using Commit Mono 16px on dark background. Frost border container (24px radius). Syntax colors: orange (#ff801f), blue (#3b9eff), green (#11ff99), yellow (#ffc53d).\"\n- \"Design an accent badge: background #ff5900 at 22% opacity, text #ffa057, 9999px radius, 12px Inter weight 500.\"\n\n### Iteration Guide\n1. Start with pure black — everything floats in the void\n2. Frost borders (\\`rgba(214, 235, 253, 0.19)\\`) are the universal structural element — not gray, not neutral\n3. Three fonts, three roles: Domaine (hero), ABC Favorit (sections), Inter (body) — never cross\n4. OpenType stylistic sets are mandatory on display fonts — they define the character\n5. Multi-color accents at low opacity (12–42%) for backgrounds, full opacity for text\n6. Pill shape (9999px) for CTAs and badges, standard radius (4px–16px) for containers\n7. No shadows — use frost borders for depth against the void\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/revolut.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/revolut.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const revolutBrief = `# Design System Inspired by Revolut\n\n## 1. Visual Theme & Atmosphere\n\nRevolut's website is fintech confidence distilled into pixels — a design system that communicates \"your money is in capable hands\" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on Aeonik Pro, a geometric grotesque that creates billboard-scale headlines at 136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.\n\nThe color system is built on a comprehensive \\`--rui-*\\` (Revolut UI) token architecture with semantic naming for every state: danger (\\`#e23b4a\\`), warning (\\`#ec7e00\\`), teal (\\`#00a87e\\`), blue (\\`#494fdf\\`), deep-pink (\\`#e61e49\\`), and more. But the marketing surface itself is remarkably restrained — near-black (\\`#191c1f\\`) and pure white (\\`#ffffff\\`) dominate, with the colorful semantic tokens reserved for the product interface, not the marketing page.\n\nWhat distinguishes Revolut is its pill-everything button system. Every button uses 9999px radius — primary dark (\\`#191c1f\\`), secondary light (\\`#f4f4f4\\`), outlined (\\`transparent + 2px solid\\`), and ghost on dark (\\`rgba(244,244,244,0.1) + 2px solid\\`). The padding is generous (14px 32px–34px), creating large, confident touch targets. Combined with Inter for body text at various weights and positive letter-spacing (0.16px–0.24px), the result is a design that feels both premium and accessible — banking for the modern era.\n\n**Key Characteristics:**\n- Aeonik Pro display at 136px weight 500 — billboard-scale fintech headlines\n- Near-black (\\`#191c1f\\`) + white binary with comprehensive \\`--rui-*\\` semantic tokens\n- Universal pill buttons (9999px radius) with generous padding (14px 32px)\n- Inter for body text with positive letter-spacing (0.16px–0.24px)\n- Rich semantic color system: blue, teal, pink, yellow, green, brown, danger, warning\n- Zero shadows detected — depth through color contrast only\n- Tight display line-heights (1.00) with relaxed body (1.50–1.56)\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Revolut Dark** (\\`#191c1f\\`): Primary dark surface, button background, near-black text\n- **Pure White** (\\`#ffffff\\`): \\`--rui-color-action-label\\`, primary light surface\n- **Light Surface** (\\`#f4f4f4\\`): Secondary button background, subtle surface\n\n### Brand / Interactive\n- **Revolut Blue** (\\`#494fdf\\`): \\`--rui-color-blue\\`, primary brand blue\n- **Action Blue** (\\`#4f55f1\\`): \\`--rui-color-action-photo-header-text\\`, header accent\n- **Blue Text** (\\`#376cd5\\`): \\`--website-color-blue-text\\`, link blue\n\n### Semantic\n- **Danger Red** (\\`#e23b4a\\`): \\`--rui-color-danger\\`, error/destructive\n- **Deep Pink** (\\`#e61e49\\`): \\`--rui-color-deep-pink\\`, critical accent\n- **Warning Orange** (\\`#ec7e00\\`): \\`--rui-color-warning\\`, warning states\n- **Yellow** (\\`#b09000\\`): \\`--rui-color-yellow\\`, attention\n- **Teal** (\\`#00a87e\\`): \\`--rui-color-teal\\`, success/positive\n- **Light Green** (\\`#428619\\`): \\`--rui-color-light-green\\`, secondary success\n- **Green Text** (\\`#006400\\`): \\`--website-color-green-text\\`, green text\n- **Light Blue** (\\`#007bc2\\`): \\`--rui-color-light-blue\\`, informational\n- **Brown** (\\`#936d62\\`): \\`--rui-color-brown\\`, warm neutral accent\n- **Red Text** (\\`#8b0000\\`): \\`--website-color-red-text\\`, dark red text\n\n### Neutral Scale\n- **Mid Slate** (\\`#505a63\\`): Secondary text\n- **Cool Gray** (\\`#8d969e\\`): Muted text, tertiary\n- **Gray Tone** (\\`#c9c9cd\\`): \\`--rui-color-grey-tone-20\\`, borders/dividers\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: \\`Aeonik Pro\\` — geometric grotesque, no detected fallbacks\n- **Body / UI**: \\`Inter\\` — standard system sans\n- **Fallback**: \\`Arial\\` for specific button contexts\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Mega | Aeonik Pro | 136px (8.50rem) | 500 | 1.00 (tight) | -2.72px | Stadium-scale hero |\n| Display Hero | Aeonik Pro | 80px (5.00rem) | 500 | 1.00 (tight) | -0.8px | Primary hero |\n| Section Heading | Aeonik Pro | 48px (3.00rem) | 500 | 1.21 (tight) | -0.48px | Feature sections |\n| Sub-heading | Aeonik Pro | 40px (2.50rem) | 500 | 1.20 (tight) | -0.4px | Sub-sections |\n| Card Title | Aeonik Pro | 32px (2.00rem) | 500 | 1.19 (tight) | -0.32px | Card headings |\n| Feature Title | Aeonik Pro | 24px (1.50rem) | 400 | 1.33 | normal | Light headings |\n| Nav / UI | Aeonik Pro | 20px (1.25rem) | 500 | 1.40 | normal | Navigation, buttons |\n| Body Large | Inter | 18px (1.13rem) | 400 | 1.56 | -0.09px | Introductions |\n| Body | Inter | 16px (1.00rem) | 400 | 1.50 | 0.24px | Standard reading |\n| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.50 | 0.16px | Emphasized body |\n| Body Bold Link | Inter | 16px (1.00rem) | 700 | 1.50 | 0.24px | Bold links |\n\n### Principles\n- **Weight 500 as display default**: Aeonik Pro uses medium (500) for ALL headings — no bold. This creates authority through size and tracking, not weight.\n- **Billboard tracking**: -2.72px at 136px is extremely compressed — text designed to be read at a glance, like airport signage.\n- **Positive tracking on body**: Inter uses +0.16px to +0.24px, creating airy, well-spaced reading text that contrasts with the compressed headings.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Dark Pill**\n- Background: \\`#191c1f\\`\n- Text: \\`#ffffff\\`\n- Padding: 14px 32px\n- Radius: 9999px (full pill)\n- Hover: opacity 0.85\n- Focus: \\`0 0 0 0.125rem\\` ring\n\n**Secondary Light Pill**\n- Background: \\`#f4f4f4\\`\n- Text: \\`#000000\\`\n- Padding: 14px 34px\n- Radius: 9999px\n- Hover: opacity 0.85\n\n**Outlined Pill**\n- Background: transparent\n- Text: \\`#191c1f\\`\n- Border: \\`2px solid #191c1f\\`\n- Padding: 14px 32px\n- Radius: 9999px\n\n**Ghost on Dark**\n- Background: \\`rgba(244, 244, 244, 0.1)\\`\n- Text: \\`#f4f4f4\\`\n- Border: \\`2px solid #f4f4f4\\`\n- Padding: 14px 32px\n- Radius: 9999px\n\n### Cards & Containers\n- Radius: 12px (small), 20px (cards)\n- No shadows — flat surfaces with color contrast\n- Dark and light section alternation\n\n### Navigation\n- Aeonik Pro 20px weight 500\n- Clean header, hamburger toggle at 12px radius\n- Pill CTAs right-aligned\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 6px, 8px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 80px, 88px, 120px\n- Large section spacing: 80px–120px\n\n### Border Radius Scale\n- Standard (12px): Navigation, small buttons\n- Card (20px): Feature cards\n- Pill (9999px): All buttons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Everything — Revolut uses zero shadows |\n| Focus | \\`0 0 0 0.125rem\\` ring | Accessibility focus |\n\n**Shadow Philosophy**: Revolut uses ZERO shadows. Depth comes entirely from the dark/light section contrast and the generous whitespace between elements.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Aeonik Pro weight 500 for all display headings\n- Apply 9999px radius to all buttons — pill shape is universal\n- Use generous button padding (14px 32px)\n- Keep the palette to near-black + white for marketing surfaces\n- Apply positive letter-spacing on Inter body text\n\n### Don't\n- Don't use shadows — Revolut is flat by design\n- Don't use bold (700) for Aeonik Pro headings — 500 is the weight\n- Don't use small buttons — the generous padding is intentional\n- Don't apply semantic colors to marketing surfaces — they're for the product\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <400px | Compact, single column |\n| Mobile | 400–720px | Standard mobile |\n| Tablet | 720–1024px | 2-column layouts |\n| Desktop | 1024–1280px | Standard desktop |\n| Large | 1280–1920px | Full layout |\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Dark: Revolut Dark (\\`#191c1f\\`)\n- Light: White (\\`#ffffff\\`)\n- Surface: Light (\\`#f4f4f4\\`)\n- Blue: Revolut Blue (\\`#494fdf\\`)\n- Danger: Red (\\`#e23b4a\\`)\n- Success: Teal (\\`#00a87e\\`)\n\n### Example Component Prompts\n- \"Create a hero: white background. Headline at 136px Aeonik Pro weight 500, line-height 1.00, letter-spacing -2.72px, #191c1f text. Dark pill CTA (#191c1f, 9999px, 14px 32px). Outlined pill secondary (transparent, 2px solid #191c1f).\"\n- \"Build a pill button: #191c1f background, white text, 9999px radius, 14px 32px padding, 20px Aeonik Pro weight 500. Hover: opacity 0.85.\"\n\n### Iteration Guide\n1. Aeonik Pro 500 for headings — never bold\n2. All buttons are pills (9999px) with generous padding\n3. Zero shadows — flat is the Revolut identity\n4. Near-black + white for marketing, semantic colors for product\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;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/revolut.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const revolutBrief = `# Design System Inspired by Revolut\n\n## 1. Visual Theme & Atmosphere\n\nRevolut's website is fintech confidence distilled into pixels — a design system that communicates \"your money is in capable hands\" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on Aeonik Pro, a geometric grotesque that creates billboard-scale headlines at 136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.\n\nThe color system is built on a comprehensive \\`--rui-*\\` (Revolut UI) token architecture with semantic naming for every state: danger (\\`#e23b4a\\`), warning (\\`#ec7e00\\`), teal (\\`#00a87e\\`), blue (\\`#494fdf\\`), deep-pink (\\`#e61e49\\`), and more. But the marketing surface itself is remarkably restrained — near-black (\\`#191c1f\\`) and pure white (\\`#ffffff\\`) dominate, with the colorful semantic tokens reserved for the product interface, not the marketing page.\n\nWhat distinguishes Revolut is its pill-everything button system. Every button uses 9999px radius — primary dark (\\`#191c1f\\`), secondary light (\\`#f4f4f4\\`), outlined (\\`transparent + 2px solid\\`), and ghost on dark (\\`rgba(244,244,244,0.1) + 2px solid\\`). The padding is generous (14px 32px–34px), creating large, confident touch targets. Combined with Inter for body text at various weights and positive letter-spacing (0.16px–0.24px), the result is a design that feels both premium and accessible — banking for the modern era.\n\n**Key Characteristics:**\n- Aeonik Pro display at 136px weight 500 — billboard-scale fintech headlines\n- Near-black (\\`#191c1f\\`) + white binary with comprehensive \\`--rui-*\\` semantic tokens\n- Universal pill buttons (9999px radius) with generous padding (14px 32px)\n- Inter for body text with positive letter-spacing (0.16px–0.24px)\n- Rich semantic color system: blue, teal, pink, yellow, green, brown, danger, warning\n- Zero shadows detected — depth through color contrast only\n- Tight display line-heights (1.00) with relaxed body (1.50–1.56)\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Revolut Dark** (\\`#191c1f\\`): Primary dark surface, button background, near-black text\n- **Pure White** (\\`#ffffff\\`): \\`--rui-color-action-label\\`, primary light surface\n- **Light Surface** (\\`#f4f4f4\\`): Secondary button background, subtle surface\n\n### Brand / Interactive\n- **Revolut Blue** (\\`#494fdf\\`): \\`--rui-color-blue\\`, primary brand blue\n- **Action Blue** (\\`#4f55f1\\`): \\`--rui-color-action-photo-header-text\\`, header accent\n- **Blue Text** (\\`#376cd5\\`): \\`--website-color-blue-text\\`, link blue\n\n### Semantic\n- **Danger Red** (\\`#e23b4a\\`): \\`--rui-color-danger\\`, error/destructive\n- **Deep Pink** (\\`#e61e49\\`): \\`--rui-color-deep-pink\\`, critical accent\n- **Warning Orange** (\\`#ec7e00\\`): \\`--rui-color-warning\\`, warning states\n- **Yellow** (\\`#b09000\\`): \\`--rui-color-yellow\\`, attention\n- **Teal** (\\`#00a87e\\`): \\`--rui-color-teal\\`, success/positive\n- **Light Green** (\\`#428619\\`): \\`--rui-color-light-green\\`, secondary success\n- **Green Text** (\\`#006400\\`): \\`--website-color-green-text\\`, green text\n- **Light Blue** (\\`#007bc2\\`): \\`--rui-color-light-blue\\`, informational\n- **Brown** (\\`#936d62\\`): \\`--rui-color-brown\\`, warm neutral accent\n- **Red Text** (\\`#8b0000\\`): \\`--website-color-red-text\\`, dark red text\n\n### Neutral Scale\n- **Mid Slate** (\\`#505a63\\`): Secondary text\n- **Cool Gray** (\\`#8d969e\\`): Muted text, tertiary\n- **Gray Tone** (\\`#c9c9cd\\`): \\`--rui-color-grey-tone-20\\`, borders/dividers\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: \\`Aeonik Pro\\` — geometric grotesque, no detected fallbacks\n- **Body / UI**: \\`Inter\\` — standard system sans\n- **Fallback**: \\`Arial\\` for specific button contexts\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Mega | Aeonik Pro | 136px (8.50rem) | 500 | 1.00 (tight) | -2.72px | Stadium-scale hero |\n| Display Hero | Aeonik Pro | 80px (5.00rem) | 500 | 1.00 (tight) | -0.8px | Primary hero |\n| Section Heading | Aeonik Pro | 48px (3.00rem) | 500 | 1.21 (tight) | -0.48px | Feature sections |\n| Sub-heading | Aeonik Pro | 40px (2.50rem) | 500 | 1.20 (tight) | -0.4px | Sub-sections |\n| Card Title | Aeonik Pro | 32px (2.00rem) | 500 | 1.19 (tight) | -0.32px | Card headings |\n| Feature Title | Aeonik Pro | 24px (1.50rem) | 400 | 1.33 | normal | Light headings |\n| Nav / UI | Aeonik Pro | 20px (1.25rem) | 500 | 1.40 | normal | Navigation, buttons |\n| Body Large | Inter | 18px (1.13rem) | 400 | 1.56 | -0.09px | Introductions |\n| Body | Inter | 16px (1.00rem) | 400 | 1.50 | 0.24px | Standard reading |\n| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.50 | 0.16px | Emphasized body |\n| Body Bold Link | Inter | 16px (1.00rem) | 700 | 1.50 | 0.24px | Bold links |\n\n### Principles\n- **Weight 500 as display default**: Aeonik Pro uses medium (500) for ALL headings — no bold. This creates authority through size and tracking, not weight.\n- **Billboard tracking**: -2.72px at 136px is extremely compressed — text designed to be read at a glance, like airport signage.\n- **Positive tracking on body**: Inter uses +0.16px to +0.24px, creating airy, well-spaced reading text that contrasts with the compressed headings.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Dark Pill**\n- Background: \\`#191c1f\\`\n- Text: \\`#ffffff\\`\n- Padding: 14px 32px\n- Radius: 9999px (full pill)\n- Hover: opacity 0.85\n- Focus: \\`0 0 0 0.125rem\\` ring\n\n**Secondary Light Pill**\n- Background: \\`#f4f4f4\\`\n- Text: \\`#000000\\`\n- Padding: 14px 34px\n- Radius: 9999px\n- Hover: opacity 0.85\n\n**Outlined Pill**\n- Background: transparent\n- Text: \\`#191c1f\\`\n- Border: \\`2px solid #191c1f\\`\n- Padding: 14px 32px\n- Radius: 9999px\n\n**Ghost on Dark**\n- Background: \\`rgba(244, 244, 244, 0.1)\\`\n- Text: \\`#f4f4f4\\`\n- Border: \\`2px solid #f4f4f4\\`\n- Padding: 14px 32px\n- Radius: 9999px\n\n### Cards & Containers\n- Radius: 12px (small), 20px (cards)\n- No shadows — flat surfaces with color contrast\n- Dark and light section alternation\n\n### Navigation\n- Aeonik Pro 20px weight 500\n- Clean header, hamburger toggle at 12px radius\n- Pill CTAs right-aligned\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 6px, 8px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 80px, 88px, 120px\n- Large section spacing: 80px–120px\n\n### Border Radius Scale\n- Standard (12px): Navigation, small buttons\n- Card (20px): Feature cards\n- Pill (9999px): All buttons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Everything — Revolut uses zero shadows |\n| Focus | \\`0 0 0 0.125rem\\` ring | Accessibility focus |\n\n**Shadow Philosophy**: Revolut uses ZERO shadows. Depth comes entirely from the dark/light section contrast and the generous whitespace between elements.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Aeonik Pro weight 500 for all display headings\n- Apply 9999px radius to all buttons — pill shape is universal\n- Use generous button padding (14px 32px)\n- Keep the palette to near-black + white for marketing surfaces\n- Apply positive letter-spacing on Inter body text\n\n### Don't\n- Don't use shadows — Revolut is flat by design\n- Don't use bold (700) for Aeonik Pro headings — 500 is the weight\n- Don't use small buttons — the generous padding is intentional\n- Don't apply semantic colors to marketing surfaces — they're for the product\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <400px | Compact, single column |\n| Mobile | 400–720px | Standard mobile |\n| Tablet | 720–1024px | 2-column layouts |\n| Desktop | 1024–1280px | Standard desktop |\n| Large | 1280–1920px | Full layout |\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Dark: Revolut Dark (\\`#191c1f\\`)\n- Light: White (\\`#ffffff\\`)\n- Surface: Light (\\`#f4f4f4\\`)\n- Blue: Revolut Blue (\\`#494fdf\\`)\n- Danger: Red (\\`#e23b4a\\`)\n- Success: Teal (\\`#00a87e\\`)\n\n### Example Component Prompts\n- \"Create a hero: white background. Headline at 136px Aeonik Pro weight 500, line-height 1.00, letter-spacing -2.72px, #191c1f text. Dark pill CTA (#191c1f, 9999px, 14px 32px). Outlined pill secondary (transparent, 2px solid #191c1f).\"\n- \"Build a pill button: #191c1f background, white text, 9999px radius, 14px 32px padding, 20px Aeonik Pro weight 500. Hover: opacity 0.85.\"\n\n### Iteration Guide\n1. Aeonik Pro 500 for headings — never bold\n2. All buttons are pills (9999px) with generous padding\n3. Zero shadows — flat is the Revolut identity\n4. Near-black + white for marketing, semantic colors for product\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;","names":[]}

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

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