@hex-core/themes 0.1.1 → 0.2.1

package/dist/presets/_briefs/mintlify.js

@@ -0,0 +1,332 @@
+// src/presets/_briefs/mintlify.ts
+var mintlifyBrief = `# Design System Inspired by Mintlify
+
+## 1. Visual Theme & Atmosphere
+
+Mintlify's website is a study in documentation-as-product design \u2014 a white, airy, information-rich surface that treats clarity as its highest aesthetic value. The page opens with a luminous white (\`#ffffff\`) background, near-black (\`#0d0d0d\`) text, and a signature green brand accent (\`#18E299\`) that signals freshness and intelligence without dominating the palette. The overall mood is calm, confident, and engineered for legibility \u2014 a design system that whispers "we care about your developer experience" in every pixel.
+
+The Inter font family carries the entire typographic load. At display sizes (40\u201364px), it uses tight negative letter-spacing (-0.8px to -1.28px) and semibold weight (600), creating headlines that feel focused and compressed like well-written documentation headers. Body text at 16\u201318px with 150% line-height provides generous reading comfort. Geist Mono appears exclusively for code and technical labels \u2014 uppercase, tracked-out, small \u2014 the voice of the terminal inside the marketing page.
+
+What distinguishes Mintlify from other documentation platforms is its atmospheric gradient hero. A soft, cloud-like green-to-white gradient wash behind the hero content creates a sense of ethereal intelligence \u2014 documentation that floats above the noise. Below the hero, the page settles into a disciplined alternation of white sections separated by subtle 5% opacity borders. Cards use generous padding (24px+) with large radii (16px\u201324px) and whisper-thin borders, creating containers that feel open rather than boxed.
+
+**Key Characteristics:**
+- Inter with tight negative tracking at display sizes (-0.8px to -1.28px) \u2014 compressed yet readable
+- Geist Mono for code labels: uppercase, 12px, tracked-out, the terminal voice
+- Brand green (\`#18E299\`) used sparingly \u2014 CTAs, hover states, focus rings, and accent touches
+- Atmospheric gradient hero with cloud-like green-white wash
+- Ultra-round corners: 16px for containers, 24px for featured cards, full-round (9999px) for buttons and pills
+- Subtle 5% opacity borders (\`rgba(0,0,0,0.05)\`) creating barely-there separation
+- 8px base spacing system with generous section padding (48px\u201396px)
+- Clean white canvas \u2014 no gray backgrounds, no color sections, depth through borders and whitespace alone
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Near Black** (\`#0d0d0d\`): Primary text, headings, dark surfaces. Not pure black \u2014 the micro-softness improves reading comfort.
+- **Pure White** (\`#ffffff\`): Page background, card surfaces, input backgrounds.
+- **Brand Green** (\`#18E299\`): The signature accent \u2014 CTAs, links on hover, focus rings, brand identity.
+
+### Secondary Accents
+- **Brand Green Light** (\`#d4fae8\`): Tinted green surface for badges, hover states, subtle backgrounds.
+- **Brand Green Deep** (\`#0fa76e\`): Darker green for text on light-green badges, hover states on brand elements.
+- **Warm Amber** (\`#c37d0d\`): Warning states, caution badges \u2014 \`--twoslash-warn-bg\`.
+- **Soft Blue** (\`#3772cf\`): Tag backgrounds, informational annotations \u2014 \`--twoslash-tag-bg\`.
+- **Error Red** (\`#d45656\`): Error states, destructive actions \u2014 \`--twoslash-error-bg\`.
+
+### Neutral Scale
+- **Gray 900** (\`#0d0d0d\`): Primary heading text, nav links.
+- **Gray 700** (\`#333333\`): Secondary text, descriptions, body copy.
+- **Gray 500** (\`#666666\`): Tertiary text, muted labels.
+- **Gray 400** (\`#888888\`): Placeholder text, disabled states, code annotations.
+- **Gray 200** (\`#e5e5e5\`): Borders, dividers, card outlines.
+- **Gray 100** (\`#f5f5f5\`): Subtle surface backgrounds, hover states.
+- **Gray 50** (\`#fafafa\`): Near-white surface tint.
+
+### Interactive
+- **Link Default** (\`#0d0d0d\`): Links match text color, relying on underline/context.
+- **Link Hover** (\`#18E299\`): Brand green on hover \u2014 \`var(--color-brand)\`.
+- **Focus Ring** (\`#18E299\`): Brand green focus outline for inputs and interactive elements.
+
+### Surface & Overlay
+- **Card Background** (\`#ffffff\`): White cards on white background, separated by borders.
+- **Border Subtle** (\`rgba(0,0,0,0.05)\`): 5% black opacity borders \u2014 the primary separation mechanism.
+- **Border Medium** (\`rgba(0,0,0,0.08)\`): Slightly stronger borders for interactive elements.
+- **Input Border Focus** (\`var(--color-brand)\`): Green ring on focused inputs.
+
+### Shadows & Depth
+- **Card Shadow** (\`rgba(0,0,0,0.03) 0px 2px 4px\`): Barely-there ambient shadow for subtle lift.
+- **Button Shadow** (\`rgba(0,0,0,0.06) 0px 1px 2px\`): Micro-shadow for button depth.
+- **No heavy shadows**: Mintlify relies on borders, not shadows, for depth.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: \`Inter\`, with fallback: \`Inter Fallback, system-ui, -apple-system, sans-serif\`
+- **Monospace**: \`Geist Mono\`, with fallback: \`Geist Mono Fallback, ui-monospace, SFMono-Regular, monospace\`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Inter | 64px (4.00rem) | 600 | 1.15 (tight) | -1.28px | Maximum impact, hero headlines |
+| Section Heading | Inter | 40px (2.50rem) | 600 | 1.10 (tight) | -0.8px | Feature section titles |
+| Sub-heading | Inter | 24px (1.50rem) | 500 | 1.30 (tight) | -0.24px | Card headings, sub-sections |
+| Card Title | Inter | 20px (1.25rem) | 600 | 1.30 (tight) | -0.2px | Feature card titles |
+| Card Title Light | Inter | 20px (1.25rem) | 500 | 1.30 (tight) | -0.2px | Secondary card headings |
+| Body Large | Inter | 18px (1.13rem) | 400 | 1.50 | normal | Hero descriptions, introductions |
+| Body | Inter | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
+| Body Medium | Inter | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized text |
+| Button | Inter | 15px (0.94rem) | 500 | 1.50 | normal | Button labels |
+| Link | Inter | 14px (0.88rem) | 500 | 1.50 | normal | Navigation links, small CTAs |
+| Caption | Inter | 14px (0.88rem) | 400\u2013500 | 1.50\u20131.71 | normal | Metadata, descriptions |
+| Label Uppercase | Inter | 13px (0.81rem) | 500 | 1.50 | 0.65px | \`text-transform: uppercase\`, section labels |
+| Small | Inter | 13px (0.81rem) | 400\u2013500 | 1.50 | -0.26px | Small body text |
+| Mono Code | Geist Mono | 12px (0.75rem) | 500 | 1.50 | 0.6px | \`text-transform: uppercase\`, technical labels |
+| Mono Badge | Geist Mono | 12px (0.75rem) | 600 | 1.50 | 0.6px | \`text-transform: uppercase\`, status badges |
+| Mono Micro | Geist Mono | 10px (0.63rem) | 500 | 1.50 | normal | \`text-transform: uppercase\`, tiny labels |
+
+### Principles
+- **Tight tracking at display sizes**: Inter at 40\u201364px uses -0.8px to -1.28px letter-spacing. This compression creates headlines that feel deliberate and space-efficient \u2014 documentation headings, not billboard copy.
+- **Relaxed reading at body sizes**: 16\u201318px body text uses normal tracking with 150% line-height, creating generous reading lanes. Documentation demands comfort.
+- **Two-font system**: Inter for all human-readable content, Geist Mono exclusively for technical/code contexts. The boundary is strict \u2014 no mixing.
+- **Uppercase as hierarchy signal**: Section labels and technical tags use uppercase + positive tracking (0.6px\u20130.65px) as a clear visual delimiter between content types.
+- **Three weights**: 400 (body/reading), 500 (UI/navigation/emphasis), 600 (headings/titles). No bold (700) in the system.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Brand (Full-round)**
+- Background: \`#0d0d0d\` (near-black)
+- Text: \`#ffffff\`
+- Padding: 8px 24px
+- Radius: 9999px (full pill)
+- Font: Inter 15px weight 500
+- Shadow: \`rgba(0,0,0,0.06) 0px 1px 2px\`
+- Hover: opacity 0.9
+- Use: Primary CTA ("Get Started", "Start Building")
+
+**Secondary / Ghost (Full-round)**
+- Background: \`#ffffff\`
+- Text: \`#0d0d0d\`
+- Padding: 4.5px 12px
+- Radius: 9999px (full pill)
+- Border: \`1px solid rgba(0,0,0,0.08)\`
+- Font: Inter 15px weight 500
+- Hover: opacity 0.9
+- Use: Secondary actions ("Request Demo", "View Docs")
+
+**Transparent / Nav Button**
+- Background: transparent
+- Text: \`#0d0d0d\`
+- Padding: 5px 6px
+- Radius: 8px
+- Border: none or \`1px solid rgba(0,0,0,0.05)\`
+- Use: Navigation items, icon buttons
+
+**Brand Accent Button**
+- Background: \`#18E299\`
+- Text: \`#0d0d0d\`
+- Padding: 8px 24px
+- Radius: 9999px
+- Use: Special promotional CTAs
+
+### Cards & Containers
+
+**Standard Card**
+- Background: \`#ffffff\`
+- Border: \`1px solid rgba(0,0,0,0.05)\`
+- Radius: 16px
+- Padding: 24px
+- Shadow: \`rgba(0,0,0,0.03) 0px 2px 4px\`
+- Hover: subtle border darkening to \`rgba(0,0,0,0.08)\`
+
+**Featured Card**
+- Background: \`#ffffff\`
+- Border: \`1px solid rgba(0,0,0,0.05)\`
+- Radius: 24px
+- Padding: 32px
+- Inner content areas may have their own 16px radius containers
+
+**Logo/Trust Card**
+- Background: \`#fafafa\` or \`#ffffff\`
+- Border: \`1px solid rgba(0,0,0,0.05)\`
+- Radius: 16px
+- Centered logo/icon with consistent sizing
+
+### Inputs & Forms
+
+**Email Input**
+- Background: transparent or \`#ffffff\`
+- Text: \`#0d0d0d\`
+- Padding: 0px 12px (height controlled by line-height)
+- Border: \`1px solid rgba(0,0,0,0.08)\`
+- Radius: 9999px (full pill, matching buttons)
+- Focus: \`1px solid var(--color-brand)\` + \`outline: 1px solid var(--color-brand)\`
+- Placeholder: \`#888888\`
+
+### Navigation
+- Clean horizontal nav on white, sticky with backdrop blur
+- Brand logotype left-aligned
+- Links: Inter 14\u201315px weight 500, \`#0d0d0d\` text
+- Hover: color shifts to brand green \`var(--color-brand)\`
+- CTA: dark pill button right-aligned ("Get Started")
+- Mobile: hamburger menu collapse at 768px
+
+### Image Treatment
+- Product screenshots with subtle 1px borders
+- Rounded containers: 16px\u201324px radius
+- Atmospheric gradient backgrounds behind hero images
+- Cloud/sky imagery with soft green tinting
+
+### Distinctive Components
+
+**Atmospheric Hero**
+- Full-width gradient wash: soft green-to-white cloud-like gradient
+- Centered headline with tight tracking
+- Subtitle in muted gray
+- Dual CTA buttons (dark primary + ghost secondary)
+- The gradient creates a sense of elevation and intelligence
+
+**Trust Bar / Logo Grid**
+- "Loved by your favorite companies" section
+- Company logos in muted grayscale
+- Grid or horizontal layout with consistent sizing
+- Subtle border separation between logos
+
+**Feature Cards with Icons**
+- Icon or illustration at top
+- Title at 20px weight 600
+- Description at 14\u201316px in gray
+- Consistent padding and border treatment
+- Grid layout: 2\u20133 columns on desktop
+
+**CTA Footer Section**
+- Dark or gradient background
+- Large headline: "Make documentation your winning advantage"
+- Email input with pill styling
+- Brand green accent on CTAs
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 24px, 32px, 48px, 64px
+- Section padding: 48px\u201396px vertical
+- Card padding: 24px\u201332px
+- Component gaps: 8px\u201316px
+
+### Grid & Container
+- Max content width: approximately 1200px
+- Hero: centered single-column with generous top padding (96px+)
+- Feature sections: 2\u20133 column CSS Grid for cards
+- Full-width sections with contained content
+- Consistent horizontal padding: 24px (mobile) to 32px (desktop)
+
+### Whitespace Philosophy
+- **Documentation-grade breathing room**: Every element has generous surrounding whitespace. Mintlify sells documentation, so the marketing page itself demonstrates reading comfort.
+- **Sections as chapters**: Each feature section is a self-contained unit with 48px\u201396px vertical padding, creating clear "chapter breaks."
+- **Content density is low**: Unlike developer tools that pack the page, Mintlify uses 1\u20132 key messages per section with supporting imagery.
+
+### Border Radius Scale
+- Small (4px): Inline code, small tags, tooltips
+- Medium (8px): Nav buttons, transparent buttons, small containers
+- Standard (16px): Cards, content containers, image wrappers
+- Large (24px): Featured cards, hero containers, section panels
+- Full Pill (9999px): Buttons, inputs, badges, pills \u2014 the signature shape
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, no border | Page background, text blocks |
+| Subtle Border (Level 1) | \`1px solid rgba(0,0,0,0.05)\` | Standard card borders, dividers |
+| Medium Border (Level 1b) | \`1px solid rgba(0,0,0,0.08)\` | Interactive elements, input borders |
+| Ambient Shadow (Level 2) | \`rgba(0,0,0,0.03) 0px 2px 4px\` | Cards with subtle lift |
+| Button Shadow (Level 2b) | \`rgba(0,0,0,0.06) 0px 1px 2px\` | Button micro-depth |
+| Focus Ring (Accessibility) | \`1px solid #18E299\` outline | Focused inputs, active interactive elements |
+
+**Shadow Philosophy**: Mintlify barely uses shadows. The depth system is almost entirely border-driven \u2014 ultra-subtle 5% opacity borders create separation without visual weight. When shadows appear, they're atmospheric whispers (\`0.03 opacity, 2px blur, 4px spread\`) that add the barest sense of lift. This restraint keeps the page feeling flat and paper-like \u2014 appropriate for a documentation company whose product is about clarity and readability.
+
+### Decorative Depth
+- Hero gradient: atmospheric green-white cloud gradient behind hero content
+- No background color alternation \u2014 white on white throughout
+- Depth comes from border opacity variation (5% \u2192 8%) and whitespace
+
+## 7. Dark Mode
+
+### Color Inversions
+- **Background**: \`#0d0d0d\` (near-black)
+- **Text Primary**: \`#ededed\` (near-white)
+- **Text Secondary**: \`#a0a0a0\` (muted gray)
+- **Brand Green**: \`#18E299\` (unchanged \u2014 the green works on both backgrounds)
+- **Border**: \`rgba(255,255,255,0.08)\` (white at 8% opacity)
+- **Card Background**: \`#141414\` (slightly lighter than page)
+- **Shadow**: \`rgba(0,0,0,0.4) 0px 2px 4px\` (stronger shadow for contrast)
+
+### Key Adjustments
+- Buttons invert: white background dark text becomes dark background light text
+- Badge backgrounds shift to deeper tones with lighter text
+- Focus ring remains brand green
+- Hero gradient shifts to dark-tinted green atmospheric wash
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | Single column, stacked layout, hamburger nav |
+| Tablet | 768\u20131024px | Two-column grids begin, expanded padding |
+| Desktop | >1024px | Full layout, 3-column grids, maximum content width |
+
+### Touch Targets
+- Buttons with full-pill shape have comfortable 8px+ vertical padding
+- Navigation links spaced with adequate 16px+ gaps
+- Mobile menu provides full-width tap targets
+
+### Collapsing Strategy
+- Hero: 64px \u2192 40px headline, maintains tight tracking proportionally
+- Navigation: horizontal links + CTA \u2192 hamburger menu at 768px
+- Feature cards: 3-column \u2192 2-column \u2192 single column stacked
+- Section spacing: 96px \u2192 48px on mobile
+- Footer: multi-column \u2192 stacked single column
+- Trust bar: grid \u2192 horizontal scroll or stacked
+
+### Image Behavior
+- Product screenshots maintain aspect ratio with responsive containers
+- Hero gradient simplifies on mobile
+- Full-width sections maintain edge-to-edge treatment
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: Near Black (\`#0d0d0d\`)
+- Background: Pure White (\`#ffffff\`)
+- Heading text: Near Black (\`#0d0d0d\`)
+- Body text: Gray 700 (\`#333333\`)
+- Border: \`rgba(0,0,0,0.05)\` (5% opacity)
+- Brand accent: Green (\`#18E299\`)
+- Link hover: Brand Green (\`#18E299\`)
+- Focus ring: Brand Green (\`#18E299\`)
+
+### Example Component Prompts
+- "Create a hero section on white background with atmospheric green-white gradient wash. Headline at 64px Inter weight 600, line-height 1.15, letter-spacing -1.28px, color #0d0d0d. Subtitle at 18px Inter weight 400, line-height 1.50, color #666666. Dark pill CTA (#0d0d0d, 9999px radius, 8px 24px padding) and ghost pill button (white, 1px solid rgba(0,0,0,0.08), 9999px radius)."
+- "Design a card: white background, 1px solid rgba(0,0,0,0.05) border, 16px radius, 24px padding, shadow rgba(0,0,0,0.03) 0px 2px 4px. Title at 20px Inter weight 600, letter-spacing -0.2px. Body at 14px weight 400, #666666."
+- "Build a pill badge: #d4fae8 background, #0fa76e text, 9999px radius, 4px 12px padding, 13px Inter weight 500, uppercase."
+- "Create navigation: white sticky header with backdrop-filter blur(12px). Inter 15px weight 500 for links, #0d0d0d text. Dark pill CTA 'Get Started' right-aligned, 9999px radius. Bottom border: 1px solid rgba(0,0,0,0.05)."
+- "Design a trust section showing company logos in muted gray. Grid layout with 16px radius containers, 1px border at 5% opacity. Label above: 'Loved by your favorite companies' at 13px Inter weight 500, uppercase, tracking 0.65px."
+
+### Iteration Guide
+1. Always use full-pill radius (9999px) for buttons and inputs \u2014 this is Mintlify's signature shape
+2. Keep borders at 5% opacity (\`rgba(0,0,0,0.05)\`) \u2014 stronger borders break the airy feeling
+3. Letter-spacing scales with font size: -1.28px at 64px, -0.8px at 40px, -0.24px at 24px, normal at 16px
+4. Three weights only: 400 (read), 500 (interact), 600 (announce)
+5. Brand green (\`#18E299\`) is used sparingly \u2014 CTAs and hover states only, never for decorative fills
+6. Geist Mono uppercase for technical labels, Inter for everything else
+7. Section padding is generous: 64px\u201396px on desktop, 48px on mobile
+8. No gray background sections \u2014 white throughout, separation through borders and whitespace
+`;
+export {
+  mintlifyBrief
+};
+//# sourceMappingURL=mintlify.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/mintlify.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const mintlifyBrief = `# Design System Inspired by Mintlify\n\n## 1. Visual Theme & Atmosphere\n\nMintlify's website is a study in documentation-as-product design — a white, airy, information-rich surface that treats clarity as its highest aesthetic value. The page opens with a luminous white (\\`#ffffff\\`) background, near-black (\\`#0d0d0d\\`) text, and a signature green brand accent (\\`#18E299\\`) that signals freshness and intelligence without dominating the palette. The overall mood is calm, confident, and engineered for legibility — a design system that whispers \"we care about your developer experience\" in every pixel.\n\nThe Inter font family carries the entire typographic load. At display sizes (40–64px), it uses tight negative letter-spacing (-0.8px to -1.28px) and semibold weight (600), creating headlines that feel focused and compressed like well-written documentation headers. Body text at 16–18px with 150% line-height provides generous reading comfort. Geist Mono appears exclusively for code and technical labels — uppercase, tracked-out, small — the voice of the terminal inside the marketing page.\n\nWhat distinguishes Mintlify from other documentation platforms is its atmospheric gradient hero. A soft, cloud-like green-to-white gradient wash behind the hero content creates a sense of ethereal intelligence — documentation that floats above the noise. Below the hero, the page settles into a disciplined alternation of white sections separated by subtle 5% opacity borders. Cards use generous padding (24px+) with large radii (16px–24px) and whisper-thin borders, creating containers that feel open rather than boxed.\n\n**Key Characteristics:**\n- Inter with tight negative tracking at display sizes (-0.8px to -1.28px) — compressed yet readable\n- Geist Mono for code labels: uppercase, 12px, tracked-out, the terminal voice\n- Brand green (\\`#18E299\\`) used sparingly — CTAs, hover states, focus rings, and accent touches\n- Atmospheric gradient hero with cloud-like green-white wash\n- Ultra-round corners: 16px for containers, 24px for featured cards, full-round (9999px) for buttons and pills\n- Subtle 5% opacity borders (\\`rgba(0,0,0,0.05)\\`) creating barely-there separation\n- 8px base spacing system with generous section padding (48px–96px)\n- Clean white canvas — no gray backgrounds, no color sections, depth through borders and whitespace alone\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Near Black** (\\`#0d0d0d\\`): Primary text, headings, dark surfaces. Not pure black — the micro-softness improves reading comfort.\n- **Pure White** (\\`#ffffff\\`): Page background, card surfaces, input backgrounds.\n- **Brand Green** (\\`#18E299\\`): The signature accent — CTAs, links on hover, focus rings, brand identity.\n\n### Secondary Accents\n- **Brand Green Light** (\\`#d4fae8\\`): Tinted green surface for badges, hover states, subtle backgrounds.\n- **Brand Green Deep** (\\`#0fa76e\\`): Darker green for text on light-green badges, hover states on brand elements.\n- **Warm Amber** (\\`#c37d0d\\`): Warning states, caution badges — \\`--twoslash-warn-bg\\`.\n- **Soft Blue** (\\`#3772cf\\`): Tag backgrounds, informational annotations — \\`--twoslash-tag-bg\\`.\n- **Error Red** (\\`#d45656\\`): Error states, destructive actions — \\`--twoslash-error-bg\\`.\n\n### Neutral Scale\n- **Gray 900** (\\`#0d0d0d\\`): Primary heading text, nav links.\n- **Gray 700** (\\`#333333\\`): Secondary text, descriptions, body copy.\n- **Gray 500** (\\`#666666\\`): Tertiary text, muted labels.\n- **Gray 400** (\\`#888888\\`): Placeholder text, disabled states, code annotations.\n- **Gray 200** (\\`#e5e5e5\\`): Borders, dividers, card outlines.\n- **Gray 100** (\\`#f5f5f5\\`): Subtle surface backgrounds, hover states.\n- **Gray 50** (\\`#fafafa\\`): Near-white surface tint.\n\n### Interactive\n- **Link Default** (\\`#0d0d0d\\`): Links match text color, relying on underline/context.\n- **Link Hover** (\\`#18E299\\`): Brand green on hover — \\`var(--color-brand)\\`.\n- **Focus Ring** (\\`#18E299\\`): Brand green focus outline for inputs and interactive elements.\n\n### Surface & Overlay\n- **Card Background** (\\`#ffffff\\`): White cards on white background, separated by borders.\n- **Border Subtle** (\\`rgba(0,0,0,0.05)\\`): 5% black opacity borders — the primary separation mechanism.\n- **Border Medium** (\\`rgba(0,0,0,0.08)\\`): Slightly stronger borders for interactive elements.\n- **Input Border Focus** (\\`var(--color-brand)\\`): Green ring on focused inputs.\n\n### Shadows & Depth\n- **Card Shadow** (\\`rgba(0,0,0,0.03) 0px 2px 4px\\`): Barely-there ambient shadow for subtle lift.\n- **Button Shadow** (\\`rgba(0,0,0,0.06) 0px 1px 2px\\`): Micro-shadow for button depth.\n- **No heavy shadows**: Mintlify relies on borders, not shadows, for depth.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: \\`Inter\\`, with fallback: \\`Inter Fallback, system-ui, -apple-system, sans-serif\\`\n- **Monospace**: \\`Geist Mono\\`, with fallback: \\`Geist Mono Fallback, ui-monospace, SFMono-Regular, monospace\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Inter | 64px (4.00rem) | 600 | 1.15 (tight) | -1.28px | Maximum impact, hero headlines |\n| Section Heading | Inter | 40px (2.50rem) | 600 | 1.10 (tight) | -0.8px | Feature section titles |\n| Sub-heading | Inter | 24px (1.50rem) | 500 | 1.30 (tight) | -0.24px | Card headings, sub-sections |\n| Card Title | Inter | 20px (1.25rem) | 600 | 1.30 (tight) | -0.2px | Feature card titles |\n| Card Title Light | Inter | 20px (1.25rem) | 500 | 1.30 (tight) | -0.2px | Secondary card headings |\n| Body Large | Inter | 18px (1.13rem) | 400 | 1.50 | normal | Hero descriptions, introductions |\n| Body | Inter | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |\n| Body Medium | Inter | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized text |\n| Button | Inter | 15px (0.94rem) | 500 | 1.50 | normal | Button labels |\n| Link | Inter | 14px (0.88rem) | 500 | 1.50 | normal | Navigation links, small CTAs |\n| Caption | Inter | 14px (0.88rem) | 400–500 | 1.50–1.71 | normal | Metadata, descriptions |\n| Label Uppercase | Inter | 13px (0.81rem) | 500 | 1.50 | 0.65px | \\`text-transform: uppercase\\`, section labels |\n| Small | Inter | 13px (0.81rem) | 400–500 | 1.50 | -0.26px | Small body text |\n| Mono Code | Geist Mono | 12px (0.75rem) | 500 | 1.50 | 0.6px | \\`text-transform: uppercase\\`, technical labels |\n| Mono Badge | Geist Mono | 12px (0.75rem) | 600 | 1.50 | 0.6px | \\`text-transform: uppercase\\`, status badges |\n| Mono Micro | Geist Mono | 10px (0.63rem) | 500 | 1.50 | normal | \\`text-transform: uppercase\\`, tiny labels |\n\n### Principles\n- **Tight tracking at display sizes**: Inter at 40–64px uses -0.8px to -1.28px letter-spacing. This compression creates headlines that feel deliberate and space-efficient — documentation headings, not billboard copy.\n- **Relaxed reading at body sizes**: 16–18px body text uses normal tracking with 150% line-height, creating generous reading lanes. Documentation demands comfort.\n- **Two-font system**: Inter for all human-readable content, Geist Mono exclusively for technical/code contexts. The boundary is strict — no mixing.\n- **Uppercase as hierarchy signal**: Section labels and technical tags use uppercase + positive tracking (0.6px–0.65px) as a clear visual delimiter between content types.\n- **Three weights**: 400 (body/reading), 500 (UI/navigation/emphasis), 600 (headings/titles). No bold (700) in the system.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Brand (Full-round)**\n- Background: \\`#0d0d0d\\` (near-black)\n- Text: \\`#ffffff\\`\n- Padding: 8px 24px\n- Radius: 9999px (full pill)\n- Font: Inter 15px weight 500\n- Shadow: \\`rgba(0,0,0,0.06) 0px 1px 2px\\`\n- Hover: opacity 0.9\n- Use: Primary CTA (\"Get Started\", \"Start Building\")\n\n**Secondary / Ghost (Full-round)**\n- Background: \\`#ffffff\\`\n- Text: \\`#0d0d0d\\`\n- Padding: 4.5px 12px\n- Radius: 9999px (full pill)\n- Border: \\`1px solid rgba(0,0,0,0.08)\\`\n- Font: Inter 15px weight 500\n- Hover: opacity 0.9\n- Use: Secondary actions (\"Request Demo\", \"View Docs\")\n\n**Transparent / Nav Button**\n- Background: transparent\n- Text: \\`#0d0d0d\\`\n- Padding: 5px 6px\n- Radius: 8px\n- Border: none or \\`1px solid rgba(0,0,0,0.05)\\`\n- Use: Navigation items, icon buttons\n\n**Brand Accent Button**\n- Background: \\`#18E299\\`\n- Text: \\`#0d0d0d\\`\n- Padding: 8px 24px\n- Radius: 9999px\n- Use: Special promotional CTAs\n\n### Cards & Containers\n\n**Standard Card**\n- Background: \\`#ffffff\\`\n- Border: \\`1px solid rgba(0,0,0,0.05)\\`\n- Radius: 16px\n- Padding: 24px\n- Shadow: \\`rgba(0,0,0,0.03) 0px 2px 4px\\`\n- Hover: subtle border darkening to \\`rgba(0,0,0,0.08)\\`\n\n**Featured Card**\n- Background: \\`#ffffff\\`\n- Border: \\`1px solid rgba(0,0,0,0.05)\\`\n- Radius: 24px\n- Padding: 32px\n- Inner content areas may have their own 16px radius containers\n\n**Logo/Trust Card**\n- Background: \\`#fafafa\\` or \\`#ffffff\\`\n- Border: \\`1px solid rgba(0,0,0,0.05)\\`\n- Radius: 16px\n- Centered logo/icon with consistent sizing\n\n### Inputs & Forms\n\n**Email Input**\n- Background: transparent or \\`#ffffff\\`\n- Text: \\`#0d0d0d\\`\n- Padding: 0px 12px (height controlled by line-height)\n- Border: \\`1px solid rgba(0,0,0,0.08)\\`\n- Radius: 9999px (full pill, matching buttons)\n- Focus: \\`1px solid var(--color-brand)\\` + \\`outline: 1px solid var(--color-brand)\\`\n- Placeholder: \\`#888888\\`\n\n### Navigation\n- Clean horizontal nav on white, sticky with backdrop blur\n- Brand logotype left-aligned\n- Links: Inter 14–15px weight 500, \\`#0d0d0d\\` text\n- Hover: color shifts to brand green \\`var(--color-brand)\\`\n- CTA: dark pill button right-aligned (\"Get Started\")\n- Mobile: hamburger menu collapse at 768px\n\n### Image Treatment\n- Product screenshots with subtle 1px borders\n- Rounded containers: 16px–24px radius\n- Atmospheric gradient backgrounds behind hero images\n- Cloud/sky imagery with soft green tinting\n\n### Distinctive Components\n\n**Atmospheric Hero**\n- Full-width gradient wash: soft green-to-white cloud-like gradient\n- Centered headline with tight tracking\n- Subtitle in muted gray\n- Dual CTA buttons (dark primary + ghost secondary)\n- The gradient creates a sense of elevation and intelligence\n\n**Trust Bar / Logo Grid**\n- \"Loved by your favorite companies\" section\n- Company logos in muted grayscale\n- Grid or horizontal layout with consistent sizing\n- Subtle border separation between logos\n\n**Feature Cards with Icons**\n- Icon or illustration at top\n- Title at 20px weight 600\n- Description at 14–16px in gray\n- Consistent padding and border treatment\n- Grid layout: 2–3 columns on desktop\n\n**CTA Footer Section**\n- Dark or gradient background\n- Large headline: \"Make documentation your winning advantage\"\n- Email input with pill styling\n- Brand green accent on CTAs\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 24px, 32px, 48px, 64px\n- Section padding: 48px–96px vertical\n- Card padding: 24px–32px\n- Component gaps: 8px–16px\n\n### Grid & Container\n- Max content width: approximately 1200px\n- Hero: centered single-column with generous top padding (96px+)\n- Feature sections: 2–3 column CSS Grid for cards\n- Full-width sections with contained content\n- Consistent horizontal padding: 24px (mobile) to 32px (desktop)\n\n### Whitespace Philosophy\n- **Documentation-grade breathing room**: Every element has generous surrounding whitespace. Mintlify sells documentation, so the marketing page itself demonstrates reading comfort.\n- **Sections as chapters**: Each feature section is a self-contained unit with 48px–96px vertical padding, creating clear \"chapter breaks.\"\n- **Content density is low**: Unlike developer tools that pack the page, Mintlify uses 1–2 key messages per section with supporting imagery.\n\n### Border Radius Scale\n- Small (4px): Inline code, small tags, tooltips\n- Medium (8px): Nav buttons, transparent buttons, small containers\n- Standard (16px): Cards, content containers, image wrappers\n- Large (24px): Featured cards, hero containers, section panels\n- Full Pill (9999px): Buttons, inputs, badges, pills — the signature shape\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Page background, text blocks |\n| Subtle Border (Level 1) | \\`1px solid rgba(0,0,0,0.05)\\` | Standard card borders, dividers |\n| Medium Border (Level 1b) | \\`1px solid rgba(0,0,0,0.08)\\` | Interactive elements, input borders |\n| Ambient Shadow (Level 2) | \\`rgba(0,0,0,0.03) 0px 2px 4px\\` | Cards with subtle lift |\n| Button Shadow (Level 2b) | \\`rgba(0,0,0,0.06) 0px 1px 2px\\` | Button micro-depth |\n| Focus Ring (Accessibility) | \\`1px solid #18E299\\` outline | Focused inputs, active interactive elements |\n\n**Shadow Philosophy**: Mintlify barely uses shadows. The depth system is almost entirely border-driven — ultra-subtle 5% opacity borders create separation without visual weight. When shadows appear, they're atmospheric whispers (\\`0.03 opacity, 2px blur, 4px spread\\`) that add the barest sense of lift. This restraint keeps the page feeling flat and paper-like — appropriate for a documentation company whose product is about clarity and readability.\n\n### Decorative Depth\n- Hero gradient: atmospheric green-white cloud gradient behind hero content\n- No background color alternation — white on white throughout\n- Depth comes from border opacity variation (5% → 8%) and whitespace\n\n## 7. Dark Mode\n\n### Color Inversions\n- **Background**: \\`#0d0d0d\\` (near-black)\n- **Text Primary**: \\`#ededed\\` (near-white)\n- **Text Secondary**: \\`#a0a0a0\\` (muted gray)\n- **Brand Green**: \\`#18E299\\` (unchanged — the green works on both backgrounds)\n- **Border**: \\`rgba(255,255,255,0.08)\\` (white at 8% opacity)\n- **Card Background**: \\`#141414\\` (slightly lighter than page)\n- **Shadow**: \\`rgba(0,0,0,0.4) 0px 2px 4px\\` (stronger shadow for contrast)\n\n### Key Adjustments\n- Buttons invert: white background dark text becomes dark background light text\n- Badge backgrounds shift to deeper tones with lighter text\n- Focus ring remains brand green\n- Hero gradient shifts to dark-tinted green atmospheric wash\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <768px | Single column, stacked layout, hamburger nav |\n| Tablet | 768–1024px | Two-column grids begin, expanded padding |\n| Desktop | >1024px | Full layout, 3-column grids, maximum content width |\n\n### Touch Targets\n- Buttons with full-pill shape have comfortable 8px+ vertical padding\n- Navigation links spaced with adequate 16px+ gaps\n- Mobile menu provides full-width tap targets\n\n### Collapsing Strategy\n- Hero: 64px → 40px headline, maintains tight tracking proportionally\n- Navigation: horizontal links + CTA → hamburger menu at 768px\n- Feature cards: 3-column → 2-column → single column stacked\n- Section spacing: 96px → 48px on mobile\n- Footer: multi-column → stacked single column\n- Trust bar: grid → horizontal scroll or stacked\n\n### Image Behavior\n- Product screenshots maintain aspect ratio with responsive containers\n- Hero gradient simplifies on mobile\n- Full-width sections maintain edge-to-edge treatment\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Near Black (\\`#0d0d0d\\`)\n- Background: Pure White (\\`#ffffff\\`)\n- Heading text: Near Black (\\`#0d0d0d\\`)\n- Body text: Gray 700 (\\`#333333\\`)\n- Border: \\`rgba(0,0,0,0.05)\\` (5% opacity)\n- Brand accent: Green (\\`#18E299\\`)\n- Link hover: Brand Green (\\`#18E299\\`)\n- Focus ring: Brand Green (\\`#18E299\\`)\n\n### Example Component Prompts\n- \"Create a hero section on white background with atmospheric green-white gradient wash. Headline at 64px Inter weight 600, line-height 1.15, letter-spacing -1.28px, color #0d0d0d. Subtitle at 18px Inter weight 400, line-height 1.50, color #666666. Dark pill CTA (#0d0d0d, 9999px radius, 8px 24px padding) and ghost pill button (white, 1px solid rgba(0,0,0,0.08), 9999px radius).\"\n- \"Design a card: white background, 1px solid rgba(0,0,0,0.05) border, 16px radius, 24px padding, shadow rgba(0,0,0,0.03) 0px 2px 4px. Title at 20px Inter weight 600, letter-spacing -0.2px. Body at 14px weight 400, #666666.\"\n- \"Build a pill badge: #d4fae8 background, #0fa76e text, 9999px radius, 4px 12px padding, 13px Inter weight 500, uppercase.\"\n- \"Create navigation: white sticky header with backdrop-filter blur(12px). Inter 15px weight 500 for links, #0d0d0d text. Dark pill CTA 'Get Started' right-aligned, 9999px radius. Bottom border: 1px solid rgba(0,0,0,0.05).\"\n- \"Design a trust section showing company logos in muted gray. Grid layout with 16px radius containers, 1px border at 5% opacity. Label above: 'Loved by your favorite companies' at 13px Inter weight 500, uppercase, tracking 0.65px.\"\n\n### Iteration Guide\n1. Always use full-pill radius (9999px) for buttons and inputs — this is Mintlify's signature shape\n2. Keep borders at 5% opacity (\\`rgba(0,0,0,0.05)\\`) — stronger borders break the airy feeling\n3. Letter-spacing scales with font size: -1.28px at 64px, -0.8px at 40px, -0.24px at 24px, normal at 16px\n4. Three weights only: 400 (read), 500 (interact), 600 (announce)\n5. Brand green (\\`#18E299\\`) is used sparingly — CTAs and hover states only, never for decorative fills\n6. Geist Mono uppercase for technical labels, Inter for everything else\n7. Section padding is generous: 64px–96px on desktop, 48px on mobile\n8. No gray background sections — white throughout, separation through borders and whitespace\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/miro.d.ts

@@ -0,0 +1,3 @@
+declare const miroBrief = "# Design System Inspired by Miro\n\n## 1. Visual Theme & Atmosphere\n\nMiro's website is a clean, collaborative-tool-forward platform that communicates \"visual thinking\" through generous whitespace, pastel accent colors, and a confident geometric font. The design uses a predominantly white canvas with near-black text (`#1c1c1e`) and a distinctive pastel color palette \u2014 coral, rose, teal, orange, yellow, moss \u2014 each representing different collaboration contexts.\n\nThe typography uses Roobert PRO Medium as the primary display font with OpenType character variants (`\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`) and negative letter-spacing (-1.68px at 56px). Noto Sans handles body text with its own stylistic set (`\"liga\" 0, \"ss01\", \"ss04\", \"ss05\"`). The design is built with Framer, giving it smooth animations and modern component patterns.\n\n**Key Characteristics:**\n- White canvas with near-black (`#1c1c1e`) text\n- Roobert PRO Medium with multiple OpenType character variants\n- Pastel accent palette: coral, rose, teal, orange, yellow, moss (light + dark pairs)\n- Blue 450 (`#5b76fe`) as primary interactive color\n- Success green (`#00b473`) for positive states\n- Generous border-radius: 8px\u201350px range\n- Framer-built with smooth motion patterns\n- Ring shadow border: `rgb(224,226,232) 0px 0px 0px 1px`\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Near Black** (`#1c1c1e`): Primary text\n- **White** (`#ffffff`): `--tw-color-white`, primary surface\n- **Blue 450** (`#5b76fe`): `--tw-color-blue-450`, primary interactive\n- **Actionable Pressed** (`#2a41b6`): `--tw-color-actionable-pressed`\n\n### Pastel Accents (Light/Dark pairs)\n- **Coral**: Light `#ffc6c6` / Dark `#600000`\n- **Rose**: Light `#ffd8f4` / Dark (implied)\n- **Teal**: Light `#c3faf5` / Dark `#187574`\n- **Orange**: Light `#ffe6cd`\n- **Yellow**: Dark `#746019`\n- **Moss**: Dark `#187574`\n- **Pink** (`#fde0f0`): Soft pink surface\n- **Red** (`#fbd4d4`): Light red surface\n- **Dark Red** (`#e3c5c5`): Muted red\n\n### Semantic\n- **Success** (`#00b473`): `--tw-color-success-accent`\n\n### Neutral\n- **Slate** (`#555a6a`): Secondary text\n- **Input Placeholder** (`#a5a8b5`): `--tw-color-input-placeholder`\n- **Border** (`#c7cad5`): Button borders\n- **Ring** (`rgb(224,226,232)`): Shadow-as-border\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `Roobert PRO Medium`, fallback: Placeholder \u2014 `\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`\n- **Display Variants**: `Roobert PRO SemiBold`, `Roobert PRO SemiBold Italic`, `Roobert PRO`\n- **Body**: `Noto Sans` \u2014 `\"liga\" 0, \"ss01\", \"ss04\", \"ss05\"`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing |\n|------|------|------|--------|-------------|----------------|\n| Display Hero | Roobert PRO Medium | 56px | 400 | 1.15 | -1.68px |\n| Section Heading | Roobert PRO Medium | 48px | 400 | 1.15 | -1.44px |\n| Card Title | Roobert PRO Medium | 24px | 400 | 1.15 | -0.72px |\n| Sub-heading | Noto Sans | 22px | 400 | 1.35 | -0.44px |\n| Feature | Roobert PRO Medium | 18px | 600 | 1.35 | normal |\n| Body | Noto Sans | 18px | 400 | 1.45 | normal |\n| Body Standard | Noto Sans | 16px | 400\u2013600 | 1.50 | -0.16px |\n| Button | Roobert PRO Medium | 17.5px | 700 | 1.29 | 0.175px |\n| Caption | Roobert PRO Medium | 14px | 400 | 1.71 | normal |\n| Small | Roobert PRO Medium | 12px | 400 | 1.15 | -0.36px |\n| Micro Uppercase | Roobert PRO | 10.5px | 400 | 0.90 | uppercase |\n\n## 4. Component Stylings\n\n### Buttons\n- Outlined: transparent bg, `1px solid #c7cad5`, 8px radius, 7px 12px padding\n- White circle: 50% radius, white bg with shadow\n- Blue primary (implied from interactive color)\n\n### Cards: 12px\u201324px radius, pastel backgrounds\n### Inputs: white bg, `1px solid #e9eaef`, 8px radius, 16px padding\n\n## 5. Layout Principles\n- Spacing: 1\u201324px base scale\n- Radius: 8px (buttons), 10px\u201312px (cards), 20px\u201324px (panels), 40px\u201350px (large containers)\n- Ring shadow: `rgb(224,226,232) 0px 0px 0px 1px`\n\n## 6. Depth & Elevation\nMinimal \u2014 ring shadow + pastel surface contrast\n\n## 7. Do's and Don'ts\n### Do\n- Use pastel light/dark pairs for feature sections\n- Apply Roobert PRO with OpenType character variants\n- Use Blue 450 (#5b76fe) for interactive elements\n### Don't\n- Don't use heavy shadows\n- Don't mix more than 2 pastel accents per section\n\n## 8. Responsive Behavior\nBreakpoints: 425px, 576px, 768px, 896px, 1024px, 1200px, 1280px, 1366px, 1700px, 1920px\n\n## 9. Agent Prompt Guide\n### Quick Color Reference\n- Text: Near Black (`#1c1c1e`)\n- Background: White (`#ffffff`)\n- Interactive: Blue 450 (`#5b76fe`)\n- Success: `#00b473`\n- Border: `#c7cad5`\n### Example Component Prompts\n- \"Create hero: white background. Roobert PRO Medium 56px, line-height 1.15, letter-spacing -1.68px. Blue CTA (#5b76fe). Outlined secondary (1px solid #c7cad5, 8px radius).\"\n";
+
+export { miroBrief };

package/dist/presets/_briefs/miro.js

@@ -0,0 +1,114 @@
+// src/presets/_briefs/miro.ts
+var miroBrief = `# Design System Inspired by Miro
+
+## 1. Visual Theme & Atmosphere
+
+Miro's website is a clean, collaborative-tool-forward platform that communicates "visual thinking" through generous whitespace, pastel accent colors, and a confident geometric font. The design uses a predominantly white canvas with near-black text (\`#1c1c1e\`) and a distinctive pastel color palette \u2014 coral, rose, teal, orange, yellow, moss \u2014 each representing different collaboration contexts.
+
+The typography uses Roobert PRO Medium as the primary display font with OpenType character variants (\`"blwf", "cv03", "cv04", "cv09", "cv11"\`) and negative letter-spacing (-1.68px at 56px). Noto Sans handles body text with its own stylistic set (\`"liga" 0, "ss01", "ss04", "ss05"\`). The design is built with Framer, giving it smooth animations and modern component patterns.
+
+**Key Characteristics:**
+- White canvas with near-black (\`#1c1c1e\`) text
+- Roobert PRO Medium with multiple OpenType character variants
+- Pastel accent palette: coral, rose, teal, orange, yellow, moss (light + dark pairs)
+- Blue 450 (\`#5b76fe\`) as primary interactive color
+- Success green (\`#00b473\`) for positive states
+- Generous border-radius: 8px\u201350px range
+- Framer-built with smooth motion patterns
+- Ring shadow border: \`rgb(224,226,232) 0px 0px 0px 1px\`
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Near Black** (\`#1c1c1e\`): Primary text
+- **White** (\`#ffffff\`): \`--tw-color-white\`, primary surface
+- **Blue 450** (\`#5b76fe\`): \`--tw-color-blue-450\`, primary interactive
+- **Actionable Pressed** (\`#2a41b6\`): \`--tw-color-actionable-pressed\`
+
+### Pastel Accents (Light/Dark pairs)
+- **Coral**: Light \`#ffc6c6\` / Dark \`#600000\`
+- **Rose**: Light \`#ffd8f4\` / Dark (implied)
+- **Teal**: Light \`#c3faf5\` / Dark \`#187574\`
+- **Orange**: Light \`#ffe6cd\`
+- **Yellow**: Dark \`#746019\`
+- **Moss**: Dark \`#187574\`
+- **Pink** (\`#fde0f0\`): Soft pink surface
+- **Red** (\`#fbd4d4\`): Light red surface
+- **Dark Red** (\`#e3c5c5\`): Muted red
+
+### Semantic
+- **Success** (\`#00b473\`): \`--tw-color-success-accent\`
+
+### Neutral
+- **Slate** (\`#555a6a\`): Secondary text
+- **Input Placeholder** (\`#a5a8b5\`): \`--tw-color-input-placeholder\`
+- **Border** (\`#c7cad5\`): Button borders
+- **Ring** (\`rgb(224,226,232)\`): Shadow-as-border
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: \`Roobert PRO Medium\`, fallback: Placeholder \u2014 \`"blwf", "cv03", "cv04", "cv09", "cv11"\`
+- **Display Variants**: \`Roobert PRO SemiBold\`, \`Roobert PRO SemiBold Italic\`, \`Roobert PRO\`
+- **Body**: \`Noto Sans\` \u2014 \`"liga" 0, "ss01", "ss04", "ss05"\`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing |
+|------|------|------|--------|-------------|----------------|
+| Display Hero | Roobert PRO Medium | 56px | 400 | 1.15 | -1.68px |
+| Section Heading | Roobert PRO Medium | 48px | 400 | 1.15 | -1.44px |
+| Card Title | Roobert PRO Medium | 24px | 400 | 1.15 | -0.72px |
+| Sub-heading | Noto Sans | 22px | 400 | 1.35 | -0.44px |
+| Feature | Roobert PRO Medium | 18px | 600 | 1.35 | normal |
+| Body | Noto Sans | 18px | 400 | 1.45 | normal |
+| Body Standard | Noto Sans | 16px | 400\u2013600 | 1.50 | -0.16px |
+| Button | Roobert PRO Medium | 17.5px | 700 | 1.29 | 0.175px |
+| Caption | Roobert PRO Medium | 14px | 400 | 1.71 | normal |
+| Small | Roobert PRO Medium | 12px | 400 | 1.15 | -0.36px |
+| Micro Uppercase | Roobert PRO | 10.5px | 400 | 0.90 | uppercase |
+
+## 4. Component Stylings
+
+### Buttons
+- Outlined: transparent bg, \`1px solid #c7cad5\`, 8px radius, 7px 12px padding
+- White circle: 50% radius, white bg with shadow
+- Blue primary (implied from interactive color)
+
+### Cards: 12px\u201324px radius, pastel backgrounds
+### Inputs: white bg, \`1px solid #e9eaef\`, 8px radius, 16px padding
+
+## 5. Layout Principles
+- Spacing: 1\u201324px base scale
+- Radius: 8px (buttons), 10px\u201312px (cards), 20px\u201324px (panels), 40px\u201350px (large containers)
+- Ring shadow: \`rgb(224,226,232) 0px 0px 0px 1px\`
+
+## 6. Depth & Elevation
+Minimal \u2014 ring shadow + pastel surface contrast
+
+## 7. Do's and Don'ts
+### Do
+- Use pastel light/dark pairs for feature sections
+- Apply Roobert PRO with OpenType character variants
+- Use Blue 450 (#5b76fe) for interactive elements
+### Don't
+- Don't use heavy shadows
+- Don't mix more than 2 pastel accents per section
+
+## 8. Responsive Behavior
+Breakpoints: 425px, 576px, 768px, 896px, 1024px, 1200px, 1280px, 1366px, 1700px, 1920px
+
+## 9. Agent Prompt Guide
+### Quick Color Reference
+- Text: Near Black (\`#1c1c1e\`)
+- Background: White (\`#ffffff\`)
+- Interactive: Blue 450 (\`#5b76fe\`)
+- Success: \`#00b473\`
+- Border: \`#c7cad5\`
+### Example Component Prompts
+- "Create hero: white background. Roobert PRO Medium 56px, line-height 1.15, letter-spacing -1.68px. Blue CTA (#5b76fe). Outlined secondary (1px solid #c7cad5, 8px radius)."
+`;
+export {
+  miroBrief
+};
+//# sourceMappingURL=miro.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/miro.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const miroBrief = `# Design System Inspired by Miro\n\n## 1. Visual Theme & Atmosphere\n\nMiro's website is a clean, collaborative-tool-forward platform that communicates \"visual thinking\" through generous whitespace, pastel accent colors, and a confident geometric font. The design uses a predominantly white canvas with near-black text (\\`#1c1c1e\\`) and a distinctive pastel color palette — coral, rose, teal, orange, yellow, moss — each representing different collaboration contexts.\n\nThe typography uses Roobert PRO Medium as the primary display font with OpenType character variants (\\`\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"\\`) and negative letter-spacing (-1.68px at 56px). Noto Sans handles body text with its own stylistic set (\\`\"liga\" 0, \"ss01\", \"ss04\", \"ss05\"\\`). The design is built with Framer, giving it smooth animations and modern component patterns.\n\n**Key Characteristics:**\n- White canvas with near-black (\\`#1c1c1e\\`) text\n- Roobert PRO Medium with multiple OpenType character variants\n- Pastel accent palette: coral, rose, teal, orange, yellow, moss (light + dark pairs)\n- Blue 450 (\\`#5b76fe\\`) as primary interactive color\n- Success green (\\`#00b473\\`) for positive states\n- Generous border-radius: 8px–50px range\n- Framer-built with smooth motion patterns\n- Ring shadow border: \\`rgb(224,226,232) 0px 0px 0px 1px\\`\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Near Black** (\\`#1c1c1e\\`): Primary text\n- **White** (\\`#ffffff\\`): \\`--tw-color-white\\`, primary surface\n- **Blue 450** (\\`#5b76fe\\`): \\`--tw-color-blue-450\\`, primary interactive\n- **Actionable Pressed** (\\`#2a41b6\\`): \\`--tw-color-actionable-pressed\\`\n\n### Pastel Accents (Light/Dark pairs)\n- **Coral**: Light \\`#ffc6c6\\` / Dark \\`#600000\\`\n- **Rose**: Light \\`#ffd8f4\\` / Dark (implied)\n- **Teal**: Light \\`#c3faf5\\` / Dark \\`#187574\\`\n- **Orange**: Light \\`#ffe6cd\\`\n- **Yellow**: Dark \\`#746019\\`\n- **Moss**: Dark \\`#187574\\`\n- **Pink** (\\`#fde0f0\\`): Soft pink surface\n- **Red** (\\`#fbd4d4\\`): Light red surface\n- **Dark Red** (\\`#e3c5c5\\`): Muted red\n\n### Semantic\n- **Success** (\\`#00b473\\`): \\`--tw-color-success-accent\\`\n\n### Neutral\n- **Slate** (\\`#555a6a\\`): Secondary text\n- **Input Placeholder** (\\`#a5a8b5\\`): \\`--tw-color-input-placeholder\\`\n- **Border** (\\`#c7cad5\\`): Button borders\n- **Ring** (\\`rgb(224,226,232)\\`): Shadow-as-border\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: \\`Roobert PRO Medium\\`, fallback: Placeholder — \\`\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"\\`\n- **Display Variants**: \\`Roobert PRO SemiBold\\`, \\`Roobert PRO SemiBold Italic\\`, \\`Roobert PRO\\`\n- **Body**: \\`Noto Sans\\` — \\`\"liga\" 0, \"ss01\", \"ss04\", \"ss05\"\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing |\n|------|------|------|--------|-------------|----------------|\n| Display Hero | Roobert PRO Medium | 56px | 400 | 1.15 | -1.68px |\n| Section Heading | Roobert PRO Medium | 48px | 400 | 1.15 | -1.44px |\n| Card Title | Roobert PRO Medium | 24px | 400 | 1.15 | -0.72px |\n| Sub-heading | Noto Sans | 22px | 400 | 1.35 | -0.44px |\n| Feature | Roobert PRO Medium | 18px | 600 | 1.35 | normal |\n| Body | Noto Sans | 18px | 400 | 1.45 | normal |\n| Body Standard | Noto Sans | 16px | 400–600 | 1.50 | -0.16px |\n| Button | Roobert PRO Medium | 17.5px | 700 | 1.29 | 0.175px |\n| Caption | Roobert PRO Medium | 14px | 400 | 1.71 | normal |\n| Small | Roobert PRO Medium | 12px | 400 | 1.15 | -0.36px |\n| Micro Uppercase | Roobert PRO | 10.5px | 400 | 0.90 | uppercase |\n\n## 4. Component Stylings\n\n### Buttons\n- Outlined: transparent bg, \\`1px solid #c7cad5\\`, 8px radius, 7px 12px padding\n- White circle: 50% radius, white bg with shadow\n- Blue primary (implied from interactive color)\n\n### Cards: 12px–24px radius, pastel backgrounds\n### Inputs: white bg, \\`1px solid #e9eaef\\`, 8px radius, 16px padding\n\n## 5. Layout Principles\n- Spacing: 1–24px base scale\n- Radius: 8px (buttons), 10px–12px (cards), 20px–24px (panels), 40px–50px (large containers)\n- Ring shadow: \\`rgb(224,226,232) 0px 0px 0px 1px\\`\n\n## 6. Depth & Elevation\nMinimal — ring shadow + pastel surface contrast\n\n## 7. Do's and Don'ts\n### Do\n- Use pastel light/dark pairs for feature sections\n- Apply Roobert PRO with OpenType character variants\n- Use Blue 450 (#5b76fe) for interactive elements\n### Don't\n- Don't use heavy shadows\n- Don't mix more than 2 pastel accents per section\n\n## 8. Responsive Behavior\nBreakpoints: 425px, 576px, 768px, 896px, 1024px, 1200px, 1280px, 1366px, 1700px, 1920px\n\n## 9. Agent Prompt Guide\n### Quick Color Reference\n- Text: Near Black (\\`#1c1c1e\\`)\n- Background: White (\\`#ffffff\\`)\n- Interactive: Blue 450 (\\`#5b76fe\\`)\n- Success: \\`#00b473\\`\n- Border: \\`#c7cad5\\`\n### Example Component Prompts\n- \"Create hero: white background. Roobert PRO Medium 56px, line-height 1.15, letter-spacing -1.68px. Blue CTA (#5b76fe). Outlined secondary (1px solid #c7cad5, 8px radius).\"\n`;\n"],"mappings":";AACO,IAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/mistral.d.ts

@@ -0,0 +1,3 @@
+declare const mistralBrief = "# Design System Inspired by Mistral AI\n\n## 1. Visual Theme & Atmosphere\n\nMistral AI's interface is a sun-drenched landscape rendered in code \u2014 a warm, bold, unapologetically European design that trades the typical blue-screen AI aesthetic for golden amber, burnt orange, and the feeling of late-afternoon light in southern France. Every surface glows with warmth: backgrounds fade from pale cream to deep amber, shadows carry golden undertones (`rgba(127, 99, 21, ...)`), and the brand's signature orange (`#fa520f`) burns through the page like a signal fire.\n\nThe design language is maximalist in its warmth but minimalist in its structure. Huge display headlines (82px) crash into the viewport with aggressive negative tracking (-2.05px), creating text blocks that feel like billboards or protest posters \u2014 declarations rather than descriptions. The typography uses Arial (likely a custom font with Arial as fallback) at extreme sizes, creating a raw, unadorned voice that says \"we build frontier AI\" with no decoration needed.\n\nWhat makes Mistral distinctive is the complete commitment to a warm color temperature. The signature \"block\" identity \u2014 a gradient system flowing from bright yellow (`#ffd900`) through amber (`#ffa110`) to burnt orange (`#fa520f`) \u2014 creates a visual identity that's immediately recognizable. Even the shadows are warm, using amber-tinted blacks instead of cool grays. Combined with dramatic landscape photography in golden tones, the design feels less like a tech company and more like a European luxury brand that happens to build language models.\n\n**Key Characteristics:**\n- Golden-amber color universe: every tone from pale cream (#fffaeb) to burnt orange (#fa520f)\n- Massive display typography (82px) with aggressive negative letter-spacing (-2.05px)\n- Warm golden shadow system using amber-tinted rgba values\n- The Mistral \"M\" block identity \u2014 a gradient from yellow to orange\n- Dramatic landscape photography in warm golden tones\n- Uppercase typography used strategically for section labels and CTAs\n- Near-zero border-radius \u2014 sharp, architectural geometry\n- French-European confidence: bold, warm, declarative\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Mistral Orange** (`#fa520f`): The core brand color \u2014 a vivid, saturated orange-red that anchors the entire identity. Used for primary emphasis, the brand block, and the highest-signal moments.\n- **Mistral Flame** (`#fb6424`): A slightly warmer, lighter variant of the brand orange used for secondary brand moments and hover states.\n- **Block Orange** (`#ff8105`): A pure orange used in the gradient block system \u2014 warmer and less red than Mistral Orange.\n\n### Secondary & Accent\n- **Sunshine 900** (`#ff8a00`): Deep golden amber \u2014 the darkest sunshine tone, used for strong accent moments.\n- **Sunshine 700** (`#ffa110`): Warm amber-gold \u2014 the core sunshine accent for backgrounds and interactive elements.\n- **Sunshine 500** (`#ffb83e`): Medium golden \u2014 balanced warmth for mid-level emphasis.\n- **Sunshine 300** (`#ffd06a`): Light golden \u2014 for subtle warm tints and secondary backgrounds.\n- **Block Gold** (`#ffe295`): Pale gold \u2014 soft background accents and gentle warmth.\n- **Bright Yellow** (`#ffd900`): The brightest tone in the gradient \u2014 used at the \"top\" of the block identity.\n\n### Surface & Background\n- **Warm Ivory** (`#fffaeb`): The lightest page background \u2014 barely tinted with warmth, the foundation canvas.\n- **Cream** (`#fff0c2`): The primary warm surface and secondary button background \u2014 noticeably golden.\n- **Pure White** (`#ffffff`): Used for maximum contrast elements and popover surfaces.\n- **Mistral Black** (`#1f1f1f`): The primary dark surface for buttons, text, and dark sections.\n- **Accent Orange** (defined as `hsl(17, 96%, 52%)`): The functional accent color for interactive states.\n\n### Neutrals & Text\n- **Mistral Black** (`#1f1f1f`): Primary text color and dark button backgrounds \u2014 a near-black that's warmer than pure #000.\n- **Black Tint** (defined as `hsl(0, 0%, 24%)`): A medium dark gray for secondary text on light backgrounds.\n- **Pure White** (`#ffffff`): Text on dark surfaces and CTA labels.\n\n### Semantic & Accent\n- **Input Border** (defined as `hsl(240, 5.9%, 90%)`): A cool-tinted light gray for form borders \u2014 one of the few cool tones in the system.\n- **White Overlay** (`oklab(1, 0, 0 / 0.088\u20130.1)`): Semi-transparent white for frosted glass effects and button overlays.\n\n### Gradient System\n- **Mistral Block Gradient**: The signature identity \u2014 a multi-step gradient flowing through Yellow (`#ffd900`) \u2192 Gold (`#ffe295`) \u2192 Amber (`#ffa110`) \u2192 Orange (`#ff8105`) \u2192 Flame (`#fb6424`) \u2192 Mistral Orange (`#fa520f`). This gradient appears in the logo blocks, section backgrounds, and decorative elements.\n- **Golden Landscape Wash**: Photography and backgrounds use warm amber overlays creating a consistent golden temperature across the page.\n- **Warm Shadow Cascade**: Multi-layered golden shadows that build depth with amber-tinted transparency rather than gray.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: Likely a custom font (Font Source detected) with `Arial` as fallback, and extended stack: `ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display / Hero | Arial (custom) | 82px (5.13rem) | 400 | 1.00 (tight) | -2.05px | Maximum impact, billboard scale |\n| Section Heading | Arial (custom) | 56px (3.5rem) | 400 | 0.95 (ultra-tight) | normal | Feature section anchors |\n| Sub-heading Large | Arial (custom) | 48px (3rem) | 400 | 0.95 (ultra-tight) | normal | Secondary section titles |\n| Sub-heading | Arial (custom) | 32px (2rem) | 400 | 1.15 (tight) | normal | Card headings, feature names |\n| Card Title | Arial (custom) | 30px (1.88rem) | 400 | 1.20 (tight) | normal | Mid-level headings |\n| Feature Title | Arial (custom) | 24px (1.5rem) | 400 | 1.33 | normal | Small headings |\n| Body / Button | Arial (custom) | 16px (1rem) | 400 | 1.50 | normal | Standard body, button text |\n| Button Uppercase | Arial (custom) | 16px (1rem) | 400 | 1.50 | normal | Uppercase CTA labels |\n| Caption / Link | Arial (custom) | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, secondary links |\n\n### Principles\n- **Single weight, maximum impact**: The entire system uses weight 400 (regular) \u2014 even at 82px. This creates a surprisingly elegant effect where the size alone carries authority without needing bold weight.\n- **Ultra-tight at scale**: Line-heights of 0.95\u20131.00 at display sizes create text blocks where ascenders nearly touch descenders from the line above \u2014 creating dense, poster-like composition.\n- **Aggressive tracking on display**: -2.05px letter-spacing at 82px compresses the hero text into a monolithic block.\n- **Uppercase as emphasis**: Strategic `text-transform: uppercase` on button labels and section markers creates a formal, European signage quality.\n- **No weight variation**: Unlike most systems that use 300\u2013700 weight range, Mistral uses 400 everywhere. Hierarchy comes from size and color, never weight.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Cream Surface**\n- Background: Cream (`#fff0c2`)\n- Text: Mistral Black (`#1f1f1f`)\n- No visible border\n- The warm, inviting secondary CTA\n\n**Dark Solid**\n- Background: Mistral Black (`#1f1f1f`)\n- Text: Pure White (`#ffffff`)\n- Padding: 12px (all sides)\n- No visible border\n- The primary action button \u2014 dark on warm\n\n**Ghost / Transparent**\n- Background: transparent with slight dark overlay (`oklab(0, 0, 0 / 0.1)`)\n- Text: Mistral Black (`#1f1f1f`)\n- Opacity: 0.4\n- For secondary/de-emphasized actions\n\n**Text / Underline**\n- Background: transparent\n- Text: Mistral Black (`#1f1f1f`)\n- Padding: 8px 0px 0px (top-only)\n- Minimal styling \u2014 text link as button\n- For tertiary navigation actions\n\n### Cards & Containers\n- Background: Warm Ivory (`#fffaeb`), Cream (`#fff0c2`), or Pure White\n- Border: minimal to none \u2014 containers defined by background color\n- Radius: near-zero \u2014 sharp, architectural corners\n- Shadow: warm golden multi-layer (`rgba(127, 99, 21, 0.12) -8px 16px 39px, rgba(127, 99, 21, 0.1) -33px 64px 72px, rgba(127, 99, 21, 0.06) -73px 144px 97px, ...`) \u2014 a dramatic, cascading warm shadow\n- Distinctive: the golden shadow creates a \"golden hour\" lighting effect\n\n### Inputs & Forms\n- Border: `hsl(240, 5.9%, 90%)` \u2014 the sole cool-toned element\n- Focus: accent color ring\n- Minimal styling consistent with sparse aesthetic\n\n### Navigation\n- Transparent nav overlaying the warm hero\n- Logo: Mistral \"M\" wordmark\n- Links: Dark text (white on dark sections)\n- CTA: Dark solid button or cream surface button\n- Minimal, wide-spaced layout\n\n### Image Treatment\n- Dramatic landscape photography in warm golden tones\n- The winding road through golden hills \u2014 a recurring visual motif\n- The Mistral \"M\" rendered at large scale on golden backgrounds\n- Warm color grading on all photography\n- Full-bleed sections with photography\n\n### Distinctive Components\n\n**Mistral Block Identity**\n- A row of colored blocks forming the gradient: yellow \u2192 amber \u2192 orange \u2192 burnt orange\n- Each block gets progressively more orange/red\n- The visual DNA of the brand \u2014 recognizable at any size\n\n**Golden Shadow Cards**\n- Cards elevated with warm amber multi-layered shadows\n- 5 layers of shadow from 16px to 400px offset\n- Creates a \"floating in golden light\" effect unique to Mistral\n\n**Dark Footer Gradient**\n- Footer transitions from warm amber to dark through a dramatic gradient\n- Creates a \"sunset\" effect as the page ends\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 98px, 100px\n- Button padding: 12px or 8px 0px (compact)\n- Section vertical spacing: very generous (80px\u2013100px)\n\n### Grid & Container\n- Max container width: approximately 1280px, centered\n- Hero: full-width with massive typography overlaying warm backgrounds\n- Feature sections: wide-format layouts with dramatic imagery\n- Card grids: 2\u20133 column layouts\n\n### Whitespace Philosophy\n- **Bold declarations**: Huge headlines surrounded by generous whitespace create billboard-like impact \u2014 each statement gets its own breathing space.\n- **Warm void**: Empty space itself feels warm because the backgrounds are tinted ivory/cream rather than pure white.\n- **Photography as space-filler**: Large landscape images serve double duty as content and decorative whitespace.\n\n### Border Radius Scale\n- Near-zero: The dominant radius \u2014 sharp, architectural corners on most elements\n- This extreme sharpness contrasts with the warmth of the colors, creating a tension between soft color and hard geometry.\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page backgrounds, text blocks |\n| Golden Float (Level 1) | Multi-layer warm shadow (5 layers, 12%\u21920% opacity, amber-tinted) | Feature cards, product showcases, elevated content |\n\n**Shadow Philosophy**: Mistral uses a single but extraordinarily complex shadow \u2014 **five cascading layers** of amber-tinted shadow (`rgba(127, 99, 21, ...)`) that build from a close 16px offset to a distant 400px offset. The result is a rich, warm, \"golden hour\" lighting effect that makes elevated elements look like they're bathed in afternoon sunlight. This is the most distinctive shadow system in any major AI brand.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use the warm color spectrum exclusively: ivory, cream, amber, gold, orange\n- Keep display typography at 82px+ with -2.05px letter-spacing for hero sections\n- Use the Mistral block gradient (yellow \u2192 amber \u2192 orange) for brand moments\n- Apply warm golden shadows (amber-tinted rgba) for elevated elements\n- Use Mistral Black (#1f1f1f) for text \u2014 never pure #000000\n- Keep font weight at 400 throughout \u2014 let size and color carry hierarchy\n- Use sharp, architectural corners \u2014 near-zero border-radius\n- Apply uppercase on button labels and section markers for European formality\n- Use warm landscape photography with golden color grading\n\n### Don't\n- Don't introduce cool colors (blue, green, purple) \u2014 the palette is exclusively warm\n- Don't use bold (700+) weight \u2014 400 is the only weight\n- Don't round corners \u2014 the sharp geometry is intentional\n- Don't use cool-toned shadows \u2014 shadows must carry amber warmth\n- Don't use pure white as a page background \u2014 always warm-tinted (#fffaeb minimum)\n- Don't reduce hero text below 48px on desktop \u2014 the billboard scale is core\n- Don't use more than 2 font weights \u2014 size variation replaces weight variation\n- Don't add gradients outside the warm spectrum \u2014 no blue-to-purple, no cool transitions\n- Don't use generic gray for text \u2014 even neutrals should be warm-tinted\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <640px | Single column, stacked everything, hero text reduces to ~32px |\n| Tablet | 640\u2013768px | Minor layout adjustments |\n| Small Desktop | 768\u20131024px | 2-column layouts begin |\n| Desktop | 1024\u20131280px | Full layout with maximum typography scale |\n\n### Touch Targets\n- Buttons use generous padding (12px minimum)\n- Navigation elements adequately spaced\n- Cards serve as large touch targets\n\n### Collapsing Strategy\n- **Navigation**: Collapses to hamburger on mobile\n- **Hero text**: 82px \u2192 56px \u2192 48px \u2192 32px progressive scaling\n- **Feature sections**: Multi-column \u2192 stacked\n- **Photography**: Scales proportionally, may crop on mobile\n- **Block identity**: Scales down proportionally\n\n### Image Behavior\n- Landscape photography scales proportionally\n- Warm color grading maintained at all sizes\n- Block gradient elements resize fluidly\n- No art direction changes \u2014 same warm composition at all sizes\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand Orange: \"Mistral Orange (#fa520f)\"\n- Page Background: \"Warm Ivory (#fffaeb)\"\n- Warm Surface: \"Cream (#fff0c2)\"\n- Primary Text: \"Mistral Black (#1f1f1f)\"\n- Sunshine Amber: \"Sunshine 700 (#ffa110)\"\n- Bright Gold: \"Bright Yellow (#ffd900)\"\n- Text on Dark: \"Pure White (#ffffff)\"\n\n### Example Component Prompts\n- \"Create a hero section on Warm Ivory (#fffaeb) with a massive headline at 82px Arial weight 400, line-height 1.0, letter-spacing -2.05px. Mistral Black (#1f1f1f) text. Add a dark solid CTA button (#1f1f1f bg, white text, 12px padding, sharp corners) and a cream secondary button (#fff0c2 bg).\"\n- \"Design a feature card on Cream (#fff0c2) with sharp corners (no border-radius). Apply the golden shadow system: rgba(127, 99, 21, 0.12) -8px 16px 39px as the primary layer. Title at 32px weight 400, body at 16px.\"\n- \"Build the Mistral block identity: a row of colored blocks from Bright Yellow (#ffd900) through Sunshine 700 (#ffa110) to Mistral Orange (#fa520f). Sharp corners, no gaps.\"\n- \"Create a dark footer section on Mistral Black (#1f1f1f) with Pure White (#ffffff) text. Footer links at 14px. Add a warm gradient from Sunshine 700 (#ffa110) at the top fading to Mistral Black.\"\n\n### Iteration Guide\n1. Keep the warm temperature \u2014 \"shift toward amber\" not \"shift toward gray\"\n2. Use size for hierarchy \u2014 82px \u2192 56px \u2192 48px \u2192 32px \u2192 24px \u2192 16px\n3. Never add border-radius \u2014 sharp corners only\n4. Shadows are always warm: \"golden shadow with amber tones\"\n5. Font weight is always 400 \u2014 describe emphasis through size and color\n";
+
+export { mistralBrief };