@hex-core/themes 0.1.1 → 0.2.1

package/dist/presets/_briefs/mistral.js

@@ -0,0 +1,267 @@
+// src/presets/_briefs/mistral.ts
+var mistralBrief = `# Design System Inspired by Mistral AI
+
+## 1. Visual Theme & Atmosphere
+
+Mistral 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.
+
+The 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.
+
+What 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.
+
+**Key Characteristics:**
+- Golden-amber color universe: every tone from pale cream (#fffaeb) to burnt orange (#fa520f)
+- Massive display typography (82px) with aggressive negative letter-spacing (-2.05px)
+- Warm golden shadow system using amber-tinted rgba values
+- The Mistral "M" block identity \u2014 a gradient from yellow to orange
+- Dramatic landscape photography in warm golden tones
+- Uppercase typography used strategically for section labels and CTAs
+- Near-zero border-radius \u2014 sharp, architectural geometry
+- French-European confidence: bold, warm, declarative
+
+## 2. Color Palette & Roles
+
+### Primary
+- **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.
+- **Mistral Flame** (\`#fb6424\`): A slightly warmer, lighter variant of the brand orange used for secondary brand moments and hover states.
+- **Block Orange** (\`#ff8105\`): A pure orange used in the gradient block system \u2014 warmer and less red than Mistral Orange.
+
+### Secondary & Accent
+- **Sunshine 900** (\`#ff8a00\`): Deep golden amber \u2014 the darkest sunshine tone, used for strong accent moments.
+- **Sunshine 700** (\`#ffa110\`): Warm amber-gold \u2014 the core sunshine accent for backgrounds and interactive elements.
+- **Sunshine 500** (\`#ffb83e\`): Medium golden \u2014 balanced warmth for mid-level emphasis.
+- **Sunshine 300** (\`#ffd06a\`): Light golden \u2014 for subtle warm tints and secondary backgrounds.
+- **Block Gold** (\`#ffe295\`): Pale gold \u2014 soft background accents and gentle warmth.
+- **Bright Yellow** (\`#ffd900\`): The brightest tone in the gradient \u2014 used at the "top" of the block identity.
+
+### Surface & Background
+- **Warm Ivory** (\`#fffaeb\`): The lightest page background \u2014 barely tinted with warmth, the foundation canvas.
+- **Cream** (\`#fff0c2\`): The primary warm surface and secondary button background \u2014 noticeably golden.
+- **Pure White** (\`#ffffff\`): Used for maximum contrast elements and popover surfaces.
+- **Mistral Black** (\`#1f1f1f\`): The primary dark surface for buttons, text, and dark sections.
+- **Accent Orange** (defined as \`hsl(17, 96%, 52%)\`): The functional accent color for interactive states.
+
+### Neutrals & Text
+- **Mistral Black** (\`#1f1f1f\`): Primary text color and dark button backgrounds \u2014 a near-black that's warmer than pure #000.
+- **Black Tint** (defined as \`hsl(0, 0%, 24%)\`): A medium dark gray for secondary text on light backgrounds.
+- **Pure White** (\`#ffffff\`): Text on dark surfaces and CTA labels.
+
+### Semantic & Accent
+- **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.
+- **White Overlay** (\`oklab(1, 0, 0 / 0.088\u20130.1)\`): Semi-transparent white for frosted glass effects and button overlays.
+
+### Gradient System
+- **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.
+- **Golden Landscape Wash**: Photography and backgrounds use warm amber overlays creating a consistent golden temperature across the page.
+- **Warm Shadow Cascade**: Multi-layered golden shadows that build depth with amber-tinted transparency rather than gray.
+
+## 3. Typography Rules
+
+### Font Family
+- **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\`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | Arial (custom) | 82px (5.13rem) | 400 | 1.00 (tight) | -2.05px | Maximum impact, billboard scale |
+| Section Heading | Arial (custom) | 56px (3.5rem) | 400 | 0.95 (ultra-tight) | normal | Feature section anchors |
+| Sub-heading Large | Arial (custom) | 48px (3rem) | 400 | 0.95 (ultra-tight) | normal | Secondary section titles |
+| Sub-heading | Arial (custom) | 32px (2rem) | 400 | 1.15 (tight) | normal | Card headings, feature names |
+| Card Title | Arial (custom) | 30px (1.88rem) | 400 | 1.20 (tight) | normal | Mid-level headings |
+| Feature Title | Arial (custom) | 24px (1.5rem) | 400 | 1.33 | normal | Small headings |
+| Body / Button | Arial (custom) | 16px (1rem) | 400 | 1.50 | normal | Standard body, button text |
+| Button Uppercase | Arial (custom) | 16px (1rem) | 400 | 1.50 | normal | Uppercase CTA labels |
+| Caption / Link | Arial (custom) | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, secondary links |
+
+### Principles
+- **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.
+- **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.
+- **Aggressive tracking on display**: -2.05px letter-spacing at 82px compresses the hero text into a monolithic block.
+- **Uppercase as emphasis**: Strategic \`text-transform: uppercase\` on button labels and section markers creates a formal, European signage quality.
+- **No weight variation**: Unlike most systems that use 300\u2013700 weight range, Mistral uses 400 everywhere. Hierarchy comes from size and color, never weight.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Cream Surface**
+- Background: Cream (\`#fff0c2\`)
+- Text: Mistral Black (\`#1f1f1f\`)
+- No visible border
+- The warm, inviting secondary CTA
+
+**Dark Solid**
+- Background: Mistral Black (\`#1f1f1f\`)
+- Text: Pure White (\`#ffffff\`)
+- Padding: 12px (all sides)
+- No visible border
+- The primary action button \u2014 dark on warm
+
+**Ghost / Transparent**
+- Background: transparent with slight dark overlay (\`oklab(0, 0, 0 / 0.1)\`)
+- Text: Mistral Black (\`#1f1f1f\`)
+- Opacity: 0.4
+- For secondary/de-emphasized actions
+
+**Text / Underline**
+- Background: transparent
+- Text: Mistral Black (\`#1f1f1f\`)
+- Padding: 8px 0px 0px (top-only)
+- Minimal styling \u2014 text link as button
+- For tertiary navigation actions
+
+### Cards & Containers
+- Background: Warm Ivory (\`#fffaeb\`), Cream (\`#fff0c2\`), or Pure White
+- Border: minimal to none \u2014 containers defined by background color
+- Radius: near-zero \u2014 sharp, architectural corners
+- 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
+- Distinctive: the golden shadow creates a "golden hour" lighting effect
+
+### Inputs & Forms
+- Border: \`hsl(240, 5.9%, 90%)\` \u2014 the sole cool-toned element
+- Focus: accent color ring
+- Minimal styling consistent with sparse aesthetic
+
+### Navigation
+- Transparent nav overlaying the warm hero
+- Logo: Mistral "M" wordmark
+- Links: Dark text (white on dark sections)
+- CTA: Dark solid button or cream surface button
+- Minimal, wide-spaced layout
+
+### Image Treatment
+- Dramatic landscape photography in warm golden tones
+- The winding road through golden hills \u2014 a recurring visual motif
+- The Mistral "M" rendered at large scale on golden backgrounds
+- Warm color grading on all photography
+- Full-bleed sections with photography
+
+### Distinctive Components
+
+**Mistral Block Identity**
+- A row of colored blocks forming the gradient: yellow \u2192 amber \u2192 orange \u2192 burnt orange
+- Each block gets progressively more orange/red
+- The visual DNA of the brand \u2014 recognizable at any size
+
+**Golden Shadow Cards**
+- Cards elevated with warm amber multi-layered shadows
+- 5 layers of shadow from 16px to 400px offset
+- Creates a "floating in golden light" effect unique to Mistral
+
+**Dark Footer Gradient**
+- Footer transitions from warm amber to dark through a dramatic gradient
+- Creates a "sunset" effect as the page ends
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 2px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 98px, 100px
+- Button padding: 12px or 8px 0px (compact)
+- Section vertical spacing: very generous (80px\u2013100px)
+
+### Grid & Container
+- Max container width: approximately 1280px, centered
+- Hero: full-width with massive typography overlaying warm backgrounds
+- Feature sections: wide-format layouts with dramatic imagery
+- Card grids: 2\u20133 column layouts
+
+### Whitespace Philosophy
+- **Bold declarations**: Huge headlines surrounded by generous whitespace create billboard-like impact \u2014 each statement gets its own breathing space.
+- **Warm void**: Empty space itself feels warm because the backgrounds are tinted ivory/cream rather than pure white.
+- **Photography as space-filler**: Large landscape images serve double duty as content and decorative whitespace.
+
+### Border Radius Scale
+- Near-zero: The dominant radius \u2014 sharp, architectural corners on most elements
+- This extreme sharpness contrasts with the warmth of the colors, creating a tension between soft color and hard geometry.
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page backgrounds, text blocks |
+| Golden Float (Level 1) | Multi-layer warm shadow (5 layers, 12%\u21920% opacity, amber-tinted) | Feature cards, product showcases, elevated content |
+
+**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.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the warm color spectrum exclusively: ivory, cream, amber, gold, orange
+- Keep display typography at 82px+ with -2.05px letter-spacing for hero sections
+- Use the Mistral block gradient (yellow \u2192 amber \u2192 orange) for brand moments
+- Apply warm golden shadows (amber-tinted rgba) for elevated elements
+- Use Mistral Black (#1f1f1f) for text \u2014 never pure #000000
+- Keep font weight at 400 throughout \u2014 let size and color carry hierarchy
+- Use sharp, architectural corners \u2014 near-zero border-radius
+- Apply uppercase on button labels and section markers for European formality
+- Use warm landscape photography with golden color grading
+
+### Don't
+- Don't introduce cool colors (blue, green, purple) \u2014 the palette is exclusively warm
+- Don't use bold (700+) weight \u2014 400 is the only weight
+- Don't round corners \u2014 the sharp geometry is intentional
+- Don't use cool-toned shadows \u2014 shadows must carry amber warmth
+- Don't use pure white as a page background \u2014 always warm-tinted (#fffaeb minimum)
+- Don't reduce hero text below 48px on desktop \u2014 the billboard scale is core
+- Don't use more than 2 font weights \u2014 size variation replaces weight variation
+- Don't add gradients outside the warm spectrum \u2014 no blue-to-purple, no cool transitions
+- Don't use generic gray for text \u2014 even neutrals should be warm-tinted
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, stacked everything, hero text reduces to ~32px |
+| Tablet | 640\u2013768px | Minor layout adjustments |
+| Small Desktop | 768\u20131024px | 2-column layouts begin |
+| Desktop | 1024\u20131280px | Full layout with maximum typography scale |
+
+### Touch Targets
+- Buttons use generous padding (12px minimum)
+- Navigation elements adequately spaced
+- Cards serve as large touch targets
+
+### Collapsing Strategy
+- **Navigation**: Collapses to hamburger on mobile
+- **Hero text**: 82px \u2192 56px \u2192 48px \u2192 32px progressive scaling
+- **Feature sections**: Multi-column \u2192 stacked
+- **Photography**: Scales proportionally, may crop on mobile
+- **Block identity**: Scales down proportionally
+
+### Image Behavior
+- Landscape photography scales proportionally
+- Warm color grading maintained at all sizes
+- Block gradient elements resize fluidly
+- No art direction changes \u2014 same warm composition at all sizes
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand Orange: "Mistral Orange (#fa520f)"
+- Page Background: "Warm Ivory (#fffaeb)"
+- Warm Surface: "Cream (#fff0c2)"
+- Primary Text: "Mistral Black (#1f1f1f)"
+- Sunshine Amber: "Sunshine 700 (#ffa110)"
+- Bright Gold: "Bright Yellow (#ffd900)"
+- Text on Dark: "Pure White (#ffffff)"
+
+### Example Component Prompts
+- "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)."
+- "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."
+- "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."
+- "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."
+
+### Iteration Guide
+1. Keep the warm temperature \u2014 "shift toward amber" not "shift toward gray"
+2. Use size for hierarchy \u2014 82px \u2192 56px \u2192 48px \u2192 32px \u2192 24px \u2192 16px
+3. Never add border-radius \u2014 sharp corners only
+4. Shadows are always warm: "golden shadow with amber tones"
+5. Font weight is always 400 \u2014 describe emphasis through size and color
+`;
+export {
+  mistralBrief
+};
+//# sourceMappingURL=mistral.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/mistral.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport 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 — 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 — 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 — a gradient system flowing from bright yellow (\\`#ffd900\\`) through amber (\\`#ffa110\\`) to burnt orange (\\`#fa520f\\`) — 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 — 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 — 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 — 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 — warmer and less red than Mistral Orange.\n\n### Secondary & Accent\n- **Sunshine 900** (\\`#ff8a00\\`): Deep golden amber — the darkest sunshine tone, used for strong accent moments.\n- **Sunshine 700** (\\`#ffa110\\`): Warm amber-gold — the core sunshine accent for backgrounds and interactive elements.\n- **Sunshine 500** (\\`#ffb83e\\`): Medium golden — balanced warmth for mid-level emphasis.\n- **Sunshine 300** (\\`#ffd06a\\`): Light golden — for subtle warm tints and secondary backgrounds.\n- **Block Gold** (\\`#ffe295\\`): Pale gold — soft background accents and gentle warmth.\n- **Bright Yellow** (\\`#ffd900\\`): The brightest tone in the gradient — used at the \"top\" of the block identity.\n\n### Surface & Background\n- **Warm Ivory** (\\`#fffaeb\\`): The lightest page background — barely tinted with warmth, the foundation canvas.\n- **Cream** (\\`#fff0c2\\`): The primary warm surface and secondary button background — 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 — 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 — one of the few cool tones in the system.\n- **White Overlay** (\\`oklab(1, 0, 0 / 0.088–0.1)\\`): Semi-transparent white for frosted glass effects and button overlays.\n\n### Gradient System\n- **Mistral Block Gradient**: The signature identity — a multi-step gradient flowing through Yellow (\\`#ffd900\\`) → Gold (\\`#ffe295\\`) → Amber (\\`#ffa110\\`) → Orange (\\`#ff8105\\`) → Flame (\\`#fb6424\\`) → 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) — 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–1.00 at display sizes create text blocks where ascenders nearly touch descenders from the line above — 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–700 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 — 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 — 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 — containers defined by background color\n- Radius: near-zero — 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, ...\\`) — 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%)\\` — 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 — 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 → amber → orange → burnt orange\n- Each block gets progressively more orange/red\n- The visual DNA of the brand — 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–100px)\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–3 column layouts\n\n### Whitespace Philosophy\n- **Bold declarations**: Huge headlines surrounded by generous whitespace create billboard-like impact — 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 — 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%→0% opacity, amber-tinted) | Feature cards, product showcases, elevated content |\n\n**Shadow Philosophy**: Mistral uses a single but extraordinarily complex shadow — **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 → amber → orange) for brand moments\n- Apply warm golden shadows (amber-tinted rgba) for elevated elements\n- Use Mistral Black (#1f1f1f) for text — never pure #000000\n- Keep font weight at 400 throughout — let size and color carry hierarchy\n- Use sharp, architectural corners — 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) — the palette is exclusively warm\n- Don't use bold (700+) weight — 400 is the only weight\n- Don't round corners — the sharp geometry is intentional\n- Don't use cool-toned shadows — shadows must carry amber warmth\n- Don't use pure white as a page background — always warm-tinted (#fffaeb minimum)\n- Don't reduce hero text below 48px on desktop — the billboard scale is core\n- Don't use more than 2 font weights — size variation replaces weight variation\n- Don't add gradients outside the warm spectrum — no blue-to-purple, no cool transitions\n- Don't use generic gray for text — 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–768px | Minor layout adjustments |\n| Small Desktop | 768–1024px | 2-column layouts begin |\n| Desktop | 1024–1280px | 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 → 56px → 48px → 32px progressive scaling\n- **Feature sections**: Multi-column → 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 — 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 — \"shift toward amber\" not \"shift toward gray\"\n2. Use size for hierarchy — 82px → 56px → 48px → 32px → 24px → 16px\n3. Never add border-radius — sharp corners only\n4. Shadows are always warm: \"golden shadow with amber tones\"\n5. Font weight is always 400 — describe emphasis through size and color\n`;\n"],"mappings":";AACO,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

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

@@ -0,0 +1,3 @@
+declare const mongodbBrief = "# Design System Inspired by MongoDB\n\n## 1. Visual Theme & Atmosphere\n\nMongoDB's website is a deep-forest-meets-terminal experience \u2014 a design system rooted in the darkest teal-black (`#001e2b`) that evokes both the density of a database and the depth of a forest canopy. Against this near-black canvas, a striking neon green (`#00ed64`) pulses as the brand accent \u2014 bright enough to feel electric, organic enough to feel alive. This isn't the cold neon of cyberpunk; it's the bioluminescent green of something growing in the dark.\n\nThe typography system is architecturally ambitious: MongoDB Value Serif for massive hero headlines (96px) creates an editorial, authoritative presence \u2014 serif type at database-company scale is a bold choice that says \"we're not just another tech company.\" Euclid Circular A handles the heavy lifting of body and UI text with an unusually wide weight range (300\u2013700), while Source Code Pro serves as the code and label font with distinctive uppercase treatments featuring very wide letter-spacing (1px\u20133px). This three-font system creates a hierarchy that spans editorial elegance \u2192 geometric professionalism \u2192 engineering precision.\n\nWhat makes MongoDB distinctive is its dual-mode design: a dark hero/feature section world (`#001e2b` with neon green accents) and a light content world (white with teal-gray borders `#b8c4c2`). The transition between these modes creates dramatic contrast. The shadow system uses teal-tinted dark shadows (`rgba(0, 30, 43, 0.12)`) that maintain the forest-dark atmosphere even on light surfaces. Buttons use pill shapes (100px\u2013999px radius) with MongoDB Green borders (`#00684a`), and the entire component system references the LeafyGreen design system.\n\n**Key Characteristics:**\n- Deep teal-black backgrounds (`#001e2b`) \u2014 forest-dark, not space-dark\n- Neon MongoDB Green (`#00ed64`) as the singular brand accent \u2014 electric and organic\n- MongoDB Value Serif for hero headlines \u2014 editorial authority at tech scale\n- Euclid Circular A for body with weight 300 (light) as a distinctive body weight\n- Source Code Pro with wide uppercase letter-spacing (1px\u20133px) for technical labels\n- Teal-tinted shadows: `rgba(0, 30, 43, 0.12)` \u2014 shadows carry the forest color\n- Dual-mode: dark teal hero sections + light white content sections\n- Pill buttons (100px radius) with green borders (`#00684a`)\n- Link Blue (`#006cfa`) and hover transition to `#3860be`\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Forest Black** (`#001e2b`): Primary dark background \u2014 the deepest teal-black\n- **MongoDB Green** (`#00ed64`): Primary brand accent \u2014 neon green for highlights, underlines, gradients\n- **Dark Green** (`#00684a`): Button borders, link text on light \u2014 muted green for functional use\n\n### Interactive\n- **Action Blue** (`#006cfa`): Secondary accent \u2014 links, interactive highlights\n- **Hover Blue** (`#3860be`): All link hover states transition to this blue\n- **Teal Active** (`#1eaedb`): Button hover background \u2014 bright teal\n\n### Neutral Scale\n- **Deep Teal** (`#1c2d38`): Dark button backgrounds, secondary dark surfaces\n- **Teal Gray** (`#3d4f58`): Dark borders on dark surfaces\n- **Dark Slate** (`#21313c`): Dark link text variant\n- **Cool Gray** (`#5c6c75`): Muted text on dark, secondary button text\n- **Silver Teal** (`#b8c4c2`): Borders on light surfaces, dividers\n- **Light Input** (`#e8edeb`): Input text on dark surfaces\n- **Pure White** (`#ffffff`): Light section background, button text on dark\n- **Black** (`#000000`): Text on light surfaces, darkest elements\n\n### Shadows\n- **Forest Shadow** (`rgba(0, 30, 43, 0.12) 0px 26px 44px, rgba(0, 0, 0, 0.13) 0px 7px 13px`): Primary card elevation \u2014 teal-tinted\n- **Standard Shadow** (`rgba(0, 0, 0, 0.15) 0px 3px 20px`): General elevation\n- **Subtle Shadow** (`rgba(0, 0, 0, 0.1) 0px 2px 4px`): Light card lift\n\n## 3. Typography Rules\n\n### Font Families\n- **Display Serif**: `MongoDB Value Serif` \u2014 editorial hero headlines\n- **Body / UI**: `Euclid Circular A` \u2014 geometric sans-serif workhorse\n- **Code / Labels**: `Source Code Pro` \u2014 monospace with uppercase label treatments\n- **Fallbacks**: `Akzidenz-Grotesk Std` (with CJK: Noto Sans KR/SC/JP), `Times`, `Arial`, `system-ui`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | MongoDB Value Serif | 96px (6.00rem) | 400 | 1.20 (tight) | normal | Serif authority |\n| Display Secondary | MongoDB Value Serif | 64px (4.00rem) | 400 | 1.00 (tight) | normal | Serif sub-hero |\n| Section Heading | Euclid Circular A | 36px (2.25rem) | 500 | 1.33 | normal | Geometric precision |\n| Sub-heading | Euclid Circular A | 24px (1.50rem) | 500 | 1.33 | normal | Feature titles |\n| Body Large | Euclid Circular A | 20px (1.25rem) | 400 | 1.60 (relaxed) | normal | Introductions |\n| Body | Euclid Circular A | 18px (1.13rem) | 400 | 1.33 | normal | Standard body |\n| Body Light | Euclid Circular A | 16px (1.00rem) | 300 | 1.50\u20132.00 | normal | Light-weight reading text |\n| Nav / UI | Euclid Circular A | 16px (1.00rem) | 500 | 1.00\u20131.88 | 0.16px | Navigation, emphasized |\n| Body Bold | Euclid Circular A | 15px (0.94rem) | 700 | 1.50 | normal | Strong emphasis |\n| Button | Euclid Circular A | 13.5px\u201316px | 500\u2013700 | 1.00 | 0.135px\u20130.9px | CTA labels |\n| Caption | Euclid Circular A | 14px (0.88rem) | 400 | 1.71 (relaxed) | normal | Metadata |\n| Small | Euclid Circular A | 11px (0.69rem) | 600 | 1.82 (relaxed) | 0.2px | Tags, annotations |\n| Code Heading | Source Code Pro | 40px (2.50rem) | 400 | 1.60 (relaxed) | normal | Code showcase titles |\n| Code Body | Source Code Pro | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks |\n| Code Label | Source Code Pro | 14px (0.88rem) | 400\u2013500 | 1.14 (tight) | 1px\u20132px | `text-transform: uppercase` |\n| Code Micro | Source Code Pro | 9px (0.56rem) | 600 | 2.67 (relaxed) | 2.5px | `text-transform: uppercase` |\n\n### Principles\n- **Serif for authority**: MongoDB Value Serif at hero scale creates an editorial presence unusual in tech \u2014 it communicates that MongoDB is an institution, not a startup.\n- **Weight 300 as body default**: Euclid Circular A uses light (300) for body text, creating an airy reading experience that contrasts with the dense, dark backgrounds.\n- **Wide-tracked monospace labels**: Source Code Pro uppercase at 1px\u20133px letter-spacing creates technical signposts that feel like database field labels \u2014 systematic, structured, classified.\n- **Four-weight range**: 300 (light body) \u2192 400 (standard) \u2192 500 (UI/nav) \u2192 700 (bold CTA) \u2014 a wider range than most systems, enabling fine-grained hierarchy.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Green (Dark Surface)**\n- Background: `#00684a` (muted MongoDB green)\n- Text: `#000000`\n- Radius: 50% (circular) or 100px (pill)\n- Border: `1px solid #00684a`\n- Shadow: `rgba(0,0,0,0.06) 0px 1px 6px`\n- Hover: scale 1.1\n- Active: scale 0.85\n\n**Dark Teal Button**\n- Background: `#1c2d38`\n- Text: `#5c6c75`\n- Radius: 100px (pill)\n- Border: `1px solid #3d4f58`\n- Hover: background `#1eaedb`, text white, translateX(5px)\n\n**Outlined Button (Light Surface)**\n- Background: transparent\n- Text: `#001e2b`\n- Border: `1px solid #b8c4c2`\n- Radius: 4px\u20138px\n- Hover: background tint\n\n### Cards & Containers\n- Light mode: white background with `1px solid #b8c4c2` border\n- Dark mode: `#001e2b` or `#1c2d38` background with `1px solid #3d4f58`\n- Radius: 16px (standard), 24px (medium), 48px (large/hero)\n- Shadow: `rgba(0,30,43,0.12) 0px 26px 44px` (forest-tinted)\n- Image containers: 30px\u201332px radius\n\n### Inputs & Forms\n- Textarea: text `#e8edeb`, padding 12px 12px 12px 8px\n- Borders: `1px solid #b8c4c2` on light, `1px solid #3d4f58` on dark\n- Input radius: 4px\n\n### Navigation\n- Dark header on forest-black background\n- Euclid Circular A 16px weight 500 for nav links\n- MongoDB logo (leaf icon + wordmark) left-aligned\n- Green CTA pill buttons right-aligned\n- Mega-menu dropdowns with product categories\n\n### Image Treatment\n- Dashboard screenshots on dark backgrounds\n- Green-accented UI elements in screenshots\n- 30px\u201332px radius on image containers\n- Full-width dark sections for product showcases\n\n### Distinctive Components\n\n**Neon Green Accent Underlines**\n- `0px 2px 2px 0px solid #00ed64` \u2014 bottom + right border creating accent underlines\n- Used on feature headings and highlighted text\n- Also appears as `#006cfa` (blue) variant\n\n**Source Code Label System**\n- 14px uppercase Source Code Pro with 1px\u20132px letter-spacing\n- Used as section category markers above headings\n- Creates a \"database field label\" aesthetic\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 4px, 7px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 20px, 24px, 32px\n\n### Grid & Container\n- Max content width centered\n- Dark hero section with contained content\n- Light content sections below\n- Card grids: 2\u20133 columns\n- Full-width dark footer\n\n### Whitespace Philosophy\n- **Dramatic mode transitions**: The shift from dark teal sections to white content creates built-in visual breathing through contrast, not just space.\n- **Generous dark sections**: Dark hero and feature areas use extra vertical padding (80px+) to let the forest-dark background breathe.\n- **Compact light sections**: White content areas are denser, with tighter card grids and less vertical spacing.\n\n### Border Radius Scale\n- Minimal (1px\u20132px): Small spans, badges\n- Subtle (4px): Inputs, small buttons\n- Standard (8px): Cards, links\n- Card (16px): Standard cards, containers\n- Toggle (20px): Switch elements\n- Large (24px): Large panels\n- Image (30px\u201332px): Image containers\n- Hero (48px): Hero cards\n- Pill (100px\u2013999px): Buttons, navigation pills\n- Full (9999px): Maximum pill\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default surfaces |\n| Subtle (Level 1) | `rgba(0,0,0,0.1) 0px 2px 4px` | Light card lift |\n| Standard (Level 2) | `rgba(0,0,0,0.15) 0px 3px 9px` | Standard cards |\n| Prominent (Level 3) | `rgba(0,0,0,0.15) 0px 3px 20px` | Elevated panels |\n| Forest (Level 4) | `rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px` | Hero cards \u2014 teal-tinted |\n\n**Shadow Philosophy**: MongoDB's shadow system is unique in that the primary elevation shadow uses `rgba(0, 30, 43, 0.12)` \u2014 a teal-tinted shadow that carries the forest-dark brand color into the depth system. This means even on white surfaces, shadows feel like they belong to the MongoDB color world rather than being generic neutral black.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use `#001e2b` (forest-black) for dark sections \u2014 not pure black\n- Apply MongoDB Green (`#00ed64`) sparingly for maximum electric impact\n- Use MongoDB Value Serif ONLY for hero/display headings \u2014 Euclid Circular A for everything else\n- Apply Source Code Pro uppercase with wide tracking (1px\u20133px) for technical labels\n- Use teal-tinted shadows (`rgba(0,30,43,0.12)`) for primary card elevation\n- Maintain the dark/light section duality \u2014 dramatic contrast between modes\n- Use weight 300 for body text \u2014 the light weight is the readable voice\n- Apply pill radius (100px) to primary action buttons\n\n### Don't\n- Don't use pure black (`#000000`) for dark backgrounds \u2014 always use teal-black (`#001e2b`)\n- Don't use MongoDB Green (`#00ed64`) on backgrounds \u2014 it's an accent for text, underlines, and small highlights\n- Don't use standard gray shadows \u2014 always use teal-tinted (`rgba(0,30,43,...)`)\n- Don't apply serif font to body text \u2014 MongoDB Value Serif is hero-only\n- Don't use narrow letter-spacing on Source Code Pro labels \u2014 the wide tracking IS the identity\n- Don't mix dark and light section treatments within the same section\n- Don't use warm colors \u2014 the palette is strictly cool (teal, green, blue)\n- Don't forget the green accent underlines \u2014 they're the signature decorative element\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <425px | Tight single column |\n| Mobile | 425\u2013768px | Standard mobile |\n| Tablet | 768\u20131024px | 2-column grids begin |\n| Desktop | 1024\u20131280px | Standard layout |\n| Large Desktop | 1280\u20131440px | Expanded layout |\n| Ultra-wide | >1440px | Maximum width, generous margins |\n\n### Touch Targets\n- Pill buttons with generous padding\n- Navigation links at 16px with adequate spacing\n- Card surfaces as full-area touch targets\n\n### Collapsing Strategy\n- Hero: MongoDB Value Serif 96px \u2192 64px \u2192 scales further\n- Navigation: horizontal mega-menu \u2192 hamburger\n- Feature cards: multi-column \u2192 stacked\n- Dark/light sections maintain their mode at all sizes\n- Source Code Pro labels maintain uppercase treatment\n\n### Image Behavior\n- Dashboard screenshots scale proportionally\n- Dark section backgrounds maintained full-width\n- Image radius maintained across breakpoints\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Dark background: Forest Black (`#001e2b`)\n- Brand accent: MongoDB Green (`#00ed64`)\n- Functional green: Dark Green (`#00684a`)\n- Link blue: Action Blue (`#006cfa`)\n- Text on light: Black (`#000000`)\n- Text on dark: White (`#ffffff`) or Light Input (`#e8edeb`)\n- Border light: Silver Teal (`#b8c4c2`)\n- Border dark: Teal Gray (`#3d4f58`)\n\n### Example Component Prompts\n- \"Create a hero on forest-black (#001e2b) background. Headline at 96px MongoDB Value Serif weight 400, line-height 1.20, white text with 'potential' highlighted in MongoDB Green (#00ed64). Subtitle at 18px Euclid Circular A weight 400. Green pill CTA (#00684a, 100px radius). Neon green gradient glow behind product screenshot.\"\n- \"Design a card on white background: 1px solid #b8c4c2 border, 16px radius, shadow rgba(0,30,43,0.12) 0px 26px 44px. Title at 24px Euclid Circular A weight 500. Body at 16px weight 300. Source Code Pro 14px uppercase label above title with 2px letter-spacing.\"\n- \"Build a dark section: #001e2b background, 1px solid #3d4f58 border on cards. White text. MongoDB Green (#00ed64) accent underlines on headings using bottom-border 2px solid.\"\n- \"Create technical label: Source Code Pro 14px, text-transform uppercase, letter-spacing 2px, weight 500, #00ed64 color on dark background.\"\n- \"Design a pill button: #1c2d38 background, 1px solid #3d4f58 border, 100px radius, #5c6c75 text. Hover: #1eaedb background, white text, translateX(5px).\"\n\n### Iteration Guide\n1. Start with the mode decision: dark (#001e2b) for hero/features, white for content\n2. MongoDB Green (#00ed64) is electric \u2014 use once per section for maximum impact\n3. Serif headlines (MongoDB Value Serif) create the editorial authority \u2014 never use for body\n4. Weight 300 body text creates the airy reading experience \u2014 don't default to 400\n5. Source Code Pro uppercase with wide tracking for technical labels \u2014 the database voice\n6. Teal-tinted shadows keep everything in the MongoDB color world\n";
+
+export { mongodbBrief };

package/dist/presets/_briefs/mongodb.js

@@ -0,0 +1,272 @@
+// src/presets/_briefs/mongodb.ts
+var mongodbBrief = `# Design System Inspired by MongoDB
+
+## 1. Visual Theme & Atmosphere
+
+MongoDB's website is a deep-forest-meets-terminal experience \u2014 a design system rooted in the darkest teal-black (\`#001e2b\`) that evokes both the density of a database and the depth of a forest canopy. Against this near-black canvas, a striking neon green (\`#00ed64\`) pulses as the brand accent \u2014 bright enough to feel electric, organic enough to feel alive. This isn't the cold neon of cyberpunk; it's the bioluminescent green of something growing in the dark.
+
+The typography system is architecturally ambitious: MongoDB Value Serif for massive hero headlines (96px) creates an editorial, authoritative presence \u2014 serif type at database-company scale is a bold choice that says "we're not just another tech company." Euclid Circular A handles the heavy lifting of body and UI text with an unusually wide weight range (300\u2013700), while Source Code Pro serves as the code and label font with distinctive uppercase treatments featuring very wide letter-spacing (1px\u20133px). This three-font system creates a hierarchy that spans editorial elegance \u2192 geometric professionalism \u2192 engineering precision.
+
+What makes MongoDB distinctive is its dual-mode design: a dark hero/feature section world (\`#001e2b\` with neon green accents) and a light content world (white with teal-gray borders \`#b8c4c2\`). The transition between these modes creates dramatic contrast. The shadow system uses teal-tinted dark shadows (\`rgba(0, 30, 43, 0.12)\`) that maintain the forest-dark atmosphere even on light surfaces. Buttons use pill shapes (100px\u2013999px radius) with MongoDB Green borders (\`#00684a\`), and the entire component system references the LeafyGreen design system.
+
+**Key Characteristics:**
+- Deep teal-black backgrounds (\`#001e2b\`) \u2014 forest-dark, not space-dark
+- Neon MongoDB Green (\`#00ed64\`) as the singular brand accent \u2014 electric and organic
+- MongoDB Value Serif for hero headlines \u2014 editorial authority at tech scale
+- Euclid Circular A for body with weight 300 (light) as a distinctive body weight
+- Source Code Pro with wide uppercase letter-spacing (1px\u20133px) for technical labels
+- Teal-tinted shadows: \`rgba(0, 30, 43, 0.12)\` \u2014 shadows carry the forest color
+- Dual-mode: dark teal hero sections + light white content sections
+- Pill buttons (100px radius) with green borders (\`#00684a\`)
+- Link Blue (\`#006cfa\`) and hover transition to \`#3860be\`
+
+## 2. Color Palette & Roles
+
+### Primary Brand
+- **Forest Black** (\`#001e2b\`): Primary dark background \u2014 the deepest teal-black
+- **MongoDB Green** (\`#00ed64\`): Primary brand accent \u2014 neon green for highlights, underlines, gradients
+- **Dark Green** (\`#00684a\`): Button borders, link text on light \u2014 muted green for functional use
+
+### Interactive
+- **Action Blue** (\`#006cfa\`): Secondary accent \u2014 links, interactive highlights
+- **Hover Blue** (\`#3860be\`): All link hover states transition to this blue
+- **Teal Active** (\`#1eaedb\`): Button hover background \u2014 bright teal
+
+### Neutral Scale
+- **Deep Teal** (\`#1c2d38\`): Dark button backgrounds, secondary dark surfaces
+- **Teal Gray** (\`#3d4f58\`): Dark borders on dark surfaces
+- **Dark Slate** (\`#21313c\`): Dark link text variant
+- **Cool Gray** (\`#5c6c75\`): Muted text on dark, secondary button text
+- **Silver Teal** (\`#b8c4c2\`): Borders on light surfaces, dividers
+- **Light Input** (\`#e8edeb\`): Input text on dark surfaces
+- **Pure White** (\`#ffffff\`): Light section background, button text on dark
+- **Black** (\`#000000\`): Text on light surfaces, darkest elements
+
+### Shadows
+- **Forest Shadow** (\`rgba(0, 30, 43, 0.12) 0px 26px 44px, rgba(0, 0, 0, 0.13) 0px 7px 13px\`): Primary card elevation \u2014 teal-tinted
+- **Standard Shadow** (\`rgba(0, 0, 0, 0.15) 0px 3px 20px\`): General elevation
+- **Subtle Shadow** (\`rgba(0, 0, 0, 0.1) 0px 2px 4px\`): Light card lift
+
+## 3. Typography Rules
+
+### Font Families
+- **Display Serif**: \`MongoDB Value Serif\` \u2014 editorial hero headlines
+- **Body / UI**: \`Euclid Circular A\` \u2014 geometric sans-serif workhorse
+- **Code / Labels**: \`Source Code Pro\` \u2014 monospace with uppercase label treatments
+- **Fallbacks**: \`Akzidenz-Grotesk Std\` (with CJK: Noto Sans KR/SC/JP), \`Times\`, \`Arial\`, \`system-ui\`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | MongoDB Value Serif | 96px (6.00rem) | 400 | 1.20 (tight) | normal | Serif authority |
+| Display Secondary | MongoDB Value Serif | 64px (4.00rem) | 400 | 1.00 (tight) | normal | Serif sub-hero |
+| Section Heading | Euclid Circular A | 36px (2.25rem) | 500 | 1.33 | normal | Geometric precision |
+| Sub-heading | Euclid Circular A | 24px (1.50rem) | 500 | 1.33 | normal | Feature titles |
+| Body Large | Euclid Circular A | 20px (1.25rem) | 400 | 1.60 (relaxed) | normal | Introductions |
+| Body | Euclid Circular A | 18px (1.13rem) | 400 | 1.33 | normal | Standard body |
+| Body Light | Euclid Circular A | 16px (1.00rem) | 300 | 1.50\u20132.00 | normal | Light-weight reading text |
+| Nav / UI | Euclid Circular A | 16px (1.00rem) | 500 | 1.00\u20131.88 | 0.16px | Navigation, emphasized |
+| Body Bold | Euclid Circular A | 15px (0.94rem) | 700 | 1.50 | normal | Strong emphasis |
+| Button | Euclid Circular A | 13.5px\u201316px | 500\u2013700 | 1.00 | 0.135px\u20130.9px | CTA labels |
+| Caption | Euclid Circular A | 14px (0.88rem) | 400 | 1.71 (relaxed) | normal | Metadata |
+| Small | Euclid Circular A | 11px (0.69rem) | 600 | 1.82 (relaxed) | 0.2px | Tags, annotations |
+| Code Heading | Source Code Pro | 40px (2.50rem) | 400 | 1.60 (relaxed) | normal | Code showcase titles |
+| Code Body | Source Code Pro | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks |
+| Code Label | Source Code Pro | 14px (0.88rem) | 400\u2013500 | 1.14 (tight) | 1px\u20132px | \`text-transform: uppercase\` |
+| Code Micro | Source Code Pro | 9px (0.56rem) | 600 | 2.67 (relaxed) | 2.5px | \`text-transform: uppercase\` |
+
+### Principles
+- **Serif for authority**: MongoDB Value Serif at hero scale creates an editorial presence unusual in tech \u2014 it communicates that MongoDB is an institution, not a startup.
+- **Weight 300 as body default**: Euclid Circular A uses light (300) for body text, creating an airy reading experience that contrasts with the dense, dark backgrounds.
+- **Wide-tracked monospace labels**: Source Code Pro uppercase at 1px\u20133px letter-spacing creates technical signposts that feel like database field labels \u2014 systematic, structured, classified.
+- **Four-weight range**: 300 (light body) \u2192 400 (standard) \u2192 500 (UI/nav) \u2192 700 (bold CTA) \u2014 a wider range than most systems, enabling fine-grained hierarchy.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Green (Dark Surface)**
+- Background: \`#00684a\` (muted MongoDB green)
+- Text: \`#000000\`
+- Radius: 50% (circular) or 100px (pill)
+- Border: \`1px solid #00684a\`
+- Shadow: \`rgba(0,0,0,0.06) 0px 1px 6px\`
+- Hover: scale 1.1
+- Active: scale 0.85
+
+**Dark Teal Button**
+- Background: \`#1c2d38\`
+- Text: \`#5c6c75\`
+- Radius: 100px (pill)
+- Border: \`1px solid #3d4f58\`
+- Hover: background \`#1eaedb\`, text white, translateX(5px)
+
+**Outlined Button (Light Surface)**
+- Background: transparent
+- Text: \`#001e2b\`
+- Border: \`1px solid #b8c4c2\`
+- Radius: 4px\u20138px
+- Hover: background tint
+
+### Cards & Containers
+- Light mode: white background with \`1px solid #b8c4c2\` border
+- Dark mode: \`#001e2b\` or \`#1c2d38\` background with \`1px solid #3d4f58\`
+- Radius: 16px (standard), 24px (medium), 48px (large/hero)
+- Shadow: \`rgba(0,30,43,0.12) 0px 26px 44px\` (forest-tinted)
+- Image containers: 30px\u201332px radius
+
+### Inputs & Forms
+- Textarea: text \`#e8edeb\`, padding 12px 12px 12px 8px
+- Borders: \`1px solid #b8c4c2\` on light, \`1px solid #3d4f58\` on dark
+- Input radius: 4px
+
+### Navigation
+- Dark header on forest-black background
+- Euclid Circular A 16px weight 500 for nav links
+- MongoDB logo (leaf icon + wordmark) left-aligned
+- Green CTA pill buttons right-aligned
+- Mega-menu dropdowns with product categories
+
+### Image Treatment
+- Dashboard screenshots on dark backgrounds
+- Green-accented UI elements in screenshots
+- 30px\u201332px radius on image containers
+- Full-width dark sections for product showcases
+
+### Distinctive Components
+
+**Neon Green Accent Underlines**
+- \`0px 2px 2px 0px solid #00ed64\` \u2014 bottom + right border creating accent underlines
+- Used on feature headings and highlighted text
+- Also appears as \`#006cfa\` (blue) variant
+
+**Source Code Label System**
+- 14px uppercase Source Code Pro with 1px\u20132px letter-spacing
+- Used as section category markers above headings
+- Creates a "database field label" aesthetic
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 4px, 7px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 20px, 24px, 32px
+
+### Grid & Container
+- Max content width centered
+- Dark hero section with contained content
+- Light content sections below
+- Card grids: 2\u20133 columns
+- Full-width dark footer
+
+### Whitespace Philosophy
+- **Dramatic mode transitions**: The shift from dark teal sections to white content creates built-in visual breathing through contrast, not just space.
+- **Generous dark sections**: Dark hero and feature areas use extra vertical padding (80px+) to let the forest-dark background breathe.
+- **Compact light sections**: White content areas are denser, with tighter card grids and less vertical spacing.
+
+### Border Radius Scale
+- Minimal (1px\u20132px): Small spans, badges
+- Subtle (4px): Inputs, small buttons
+- Standard (8px): Cards, links
+- Card (16px): Standard cards, containers
+- Toggle (20px): Switch elements
+- Large (24px): Large panels
+- Image (30px\u201332px): Image containers
+- Hero (48px): Hero cards
+- Pill (100px\u2013999px): Buttons, navigation pills
+- Full (9999px): Maximum pill
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Default surfaces |
+| Subtle (Level 1) | \`rgba(0,0,0,0.1) 0px 2px 4px\` | Light card lift |
+| Standard (Level 2) | \`rgba(0,0,0,0.15) 0px 3px 9px\` | Standard cards |
+| Prominent (Level 3) | \`rgba(0,0,0,0.15) 0px 3px 20px\` | Elevated panels |
+| Forest (Level 4) | \`rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px\` | Hero cards \u2014 teal-tinted |
+
+**Shadow Philosophy**: MongoDB's shadow system is unique in that the primary elevation shadow uses \`rgba(0, 30, 43, 0.12)\` \u2014 a teal-tinted shadow that carries the forest-dark brand color into the depth system. This means even on white surfaces, shadows feel like they belong to the MongoDB color world rather than being generic neutral black.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use \`#001e2b\` (forest-black) for dark sections \u2014 not pure black
+- Apply MongoDB Green (\`#00ed64\`) sparingly for maximum electric impact
+- Use MongoDB Value Serif ONLY for hero/display headings \u2014 Euclid Circular A for everything else
+- Apply Source Code Pro uppercase with wide tracking (1px\u20133px) for technical labels
+- Use teal-tinted shadows (\`rgba(0,30,43,0.12)\`) for primary card elevation
+- Maintain the dark/light section duality \u2014 dramatic contrast between modes
+- Use weight 300 for body text \u2014 the light weight is the readable voice
+- Apply pill radius (100px) to primary action buttons
+
+### Don't
+- Don't use pure black (\`#000000\`) for dark backgrounds \u2014 always use teal-black (\`#001e2b\`)
+- Don't use MongoDB Green (\`#00ed64\`) on backgrounds \u2014 it's an accent for text, underlines, and small highlights
+- Don't use standard gray shadows \u2014 always use teal-tinted (\`rgba(0,30,43,...)\`)
+- Don't apply serif font to body text \u2014 MongoDB Value Serif is hero-only
+- Don't use narrow letter-spacing on Source Code Pro labels \u2014 the wide tracking IS the identity
+- Don't mix dark and light section treatments within the same section
+- Don't use warm colors \u2014 the palette is strictly cool (teal, green, blue)
+- Don't forget the green accent underlines \u2014 they're the signature decorative element
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <425px | Tight single column |
+| Mobile | 425\u2013768px | Standard mobile |
+| Tablet | 768\u20131024px | 2-column grids begin |
+| Desktop | 1024\u20131280px | Standard layout |
+| Large Desktop | 1280\u20131440px | Expanded layout |
+| Ultra-wide | >1440px | Maximum width, generous margins |
+
+### Touch Targets
+- Pill buttons with generous padding
+- Navigation links at 16px with adequate spacing
+- Card surfaces as full-area touch targets
+
+### Collapsing Strategy
+- Hero: MongoDB Value Serif 96px \u2192 64px \u2192 scales further
+- Navigation: horizontal mega-menu \u2192 hamburger
+- Feature cards: multi-column \u2192 stacked
+- Dark/light sections maintain their mode at all sizes
+- Source Code Pro labels maintain uppercase treatment
+
+### Image Behavior
+- Dashboard screenshots scale proportionally
+- Dark section backgrounds maintained full-width
+- Image radius maintained across breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Dark background: Forest Black (\`#001e2b\`)
+- Brand accent: MongoDB Green (\`#00ed64\`)
+- Functional green: Dark Green (\`#00684a\`)
+- Link blue: Action Blue (\`#006cfa\`)
+- Text on light: Black (\`#000000\`)
+- Text on dark: White (\`#ffffff\`) or Light Input (\`#e8edeb\`)
+- Border light: Silver Teal (\`#b8c4c2\`)
+- Border dark: Teal Gray (\`#3d4f58\`)
+
+### Example Component Prompts
+- "Create a hero on forest-black (#001e2b) background. Headline at 96px MongoDB Value Serif weight 400, line-height 1.20, white text with 'potential' highlighted in MongoDB Green (#00ed64). Subtitle at 18px Euclid Circular A weight 400. Green pill CTA (#00684a, 100px radius). Neon green gradient glow behind product screenshot."
+- "Design a card on white background: 1px solid #b8c4c2 border, 16px radius, shadow rgba(0,30,43,0.12) 0px 26px 44px. Title at 24px Euclid Circular A weight 500. Body at 16px weight 300. Source Code Pro 14px uppercase label above title with 2px letter-spacing."
+- "Build a dark section: #001e2b background, 1px solid #3d4f58 border on cards. White text. MongoDB Green (#00ed64) accent underlines on headings using bottom-border 2px solid."
+- "Create technical label: Source Code Pro 14px, text-transform uppercase, letter-spacing 2px, weight 500, #00ed64 color on dark background."
+- "Design a pill button: #1c2d38 background, 1px solid #3d4f58 border, 100px radius, #5c6c75 text. Hover: #1eaedb background, white text, translateX(5px)."
+
+### Iteration Guide
+1. Start with the mode decision: dark (#001e2b) for hero/features, white for content
+2. MongoDB Green (#00ed64) is electric \u2014 use once per section for maximum impact
+3. Serif headlines (MongoDB Value Serif) create the editorial authority \u2014 never use for body
+4. Weight 300 body text creates the airy reading experience \u2014 don't default to 400
+5. Source Code Pro uppercase with wide tracking for technical labels \u2014 the database voice
+6. Teal-tinted shadows keep everything in the MongoDB color world
+`;
+export {
+  mongodbBrief
+};
+//# sourceMappingURL=mongodb.js.map