@hex-core/themes 0.1.1 → 0.2.1

package/dist/presets/_briefs/resend.js

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

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,3 @@
+declare const revolutBrief = "# Design System Inspired by Revolut\n\n## 1. Visual Theme & Atmosphere\n\nRevolut's website is fintech confidence distilled into pixels \u2014 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 \u2014 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 \u2014 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\u201334px), creating large, confident touch targets. Combined with Inter for body text at various weights and positive letter-spacing (0.16px\u20130.24px), the result is a design that feels both premium and accessible \u2014 banking for the modern era.\n\n**Key Characteristics:**\n- Aeonik Pro display at 136px weight 500 \u2014 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\u20130.24px)\n- Rich semantic color system: blue, teal, pink, yellow, green, brown, danger, warning\n- Zero shadows detected \u2014 depth through color contrast only\n- Tight display line-heights (1.00) with relaxed body (1.50\u20131.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` \u2014 geometric grotesque, no detected fallbacks\n- **Body / UI**: `Inter` \u2014 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 \u2014 no bold. This creates authority through size and tracking, not weight.\n- **Billboard tracking**: -2.72px at 136px is extremely compressed \u2014 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 \u2014 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\u2013120px\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 \u2014 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 \u2014 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 \u2014 Revolut is flat by design\n- Don't use bold (700) for Aeonik Pro headings \u2014 500 is the weight\n- Don't use small buttons \u2014 the generous padding is intentional\n- Don't apply semantic colors to marketing surfaces \u2014 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\u2013720px | Standard mobile |\n| Tablet | 720\u20131024px | 2-column layouts |\n| Desktop | 1024\u20131280px | Standard desktop |\n| Large | 1280\u20131920px | 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 \u2014 never bold\n2. All buttons are pills (9999px) with generous padding\n3. Zero shadows \u2014 flat is the Revolut identity\n4. Near-black + white for marketing, semantic colors for product\n";
+
+export { revolutBrief };

package/dist/presets/_briefs/revolut.js

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

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,3 @@
+declare 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 \u2014 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 \u2014 abcNormal \u2014 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 \u2014 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 \u2014 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 \u2014 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 \u2014 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 \u2014 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 \u2014 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 \u2014 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 \u2014 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\u20131.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\u2013600 | 1.30\u20131.50 | -0.16px to normal | Standard body, nav links |\n| Caption / Label | abcNormal | 14px (0.88rem) | 500\u2013600 | 1.25\u20131.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\u20131.30 \u2014 even body text is relatively compressed. This creates a dense, editorial feel.\n- **Weight 450 \u2014 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 \u2014 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) \u2014 barely visible containment\n- Radius: small (4\u20138px) for functional elements; 16px for alert-style containers\n- Shadow: zero \u2014 no shadows on any element\n- Cards are primarily photographic \u2014 the image IS the card\n\n### Navigation\n- Minimal horizontal nav \u2014 transparent over hero content\n- Logo: Runway wordmark in white/black\n- Links: abcNormal at 16px, weight 400\u2013600\n- Hover: text shifts to white or higher opacity\n- Extremely subtle \u2014 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 \u2014 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 \u2014 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\u201378px)\n- Component gaps: 16\u201324px\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 \u2014 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 \u2014 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 \u2014 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 \u2014 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 \u2014 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 \u2014 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\u20138px) \u2014 the design is NOT pill-shaped\n- Let visual content (photos, videos) dominate \u2014 the UI should be invisible\n- Use weight 450 for micro labels \u2014 the precision matters\n\n### Don't\n- Don't add decorative colors to the interface \u2014 the only color comes from photography\n- Don't use heavy borders or shadows \u2014 the interface must be nearly invisible\n- Don't use pill-shaped radius \u2014 Runway's geometry is subtly rounded, not circular\n- Don't use bold (700+) weight \u2014 400\u2013600 is the full range, with 450 as a precision tool\n- Don't compete with the visual content \u2014 text overlays should be minimal and restrained\n- Don't use gradient backgrounds in the interface \u2014 gradients exist only in photography\n- Don't use more than one typeface \u2014 abcNormal handles everything\n- Don't use body line-height above 1.50 \u2014 the tight, editorial feel is core\n- Don't reduce image quality \u2014 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\u2013768px | 2-column image grids begin |\n| Small Desktop | 768\u20131024px | Standard layout |\n| Desktop | 1024\u20131280px | Full layout, expanded hero |\n| Large Desktop | 1280\u20131600px | 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 \u2192 2-column \u2192 single column\n- **Research articles**: Feature-size cards \u2192 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 \u2014 always include cinematic photography\n2. Use abcNormal for everything \u2014 specify size and weight, never change the font\n3. Keep the interface invisible \u2014 no heavy borders, no shadows, no bright colors\n4. Use the cool slate grays (#767d88, #7d848e) for secondary text \u2014 not warm grays\n5. Uppercase labels need letter-spacing (0.35px) \u2014 never tight uppercase\n6. Dark sections should be truly dark (#000000 or #1a1a1a) \u2014 no medium grays as surfaces\n";
+
+export { runwaymlBrief };