@hex-core/themes 0.2.3 → 0.2.6

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/minimax.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const minimaxBrief = `# Design System Inspired by MiniMax\n\n## 1. Visual Theme & Atmosphere\n\nMiniMax's website is a clean, product-showcase platform for a Chinese AI technology company that bridges consumer-friendly appeal with technical credibility. The design language is predominantly white-space-driven with a light, airy feel — pure white backgrounds (\\`#ffffff\\`) dominate, letting colorful product cards and AI model illustrations serve as the visual anchors. The overall aesthetic sits at the intersection of Apple's product marketing clarity and a playful, rounded design language that makes AI technology feel approachable.\n\nThe typography system is notably multi-font: DM Sans serves as the primary UI workhorse, Outfit handles display headings with geometric elegance, Poppins appears for mid-tier headings, and Roboto handles data-heavy contexts. This variety reflects a brand in rapid growth — each font serves a distinct communicative purpose rather than competing for attention. The hero heading at 80px weight 500 in both DM Sans and Outfit with a tight 1.10 line-height creates a bold but not aggressive opening statement.\n\nWhat makes MiniMax distinctive is its pill-button geometry (9999px radius) for navigation and primary actions, combined with softer 8px–24px radiused cards for product showcases. The product cards themselves are richly colorful — vibrant gradients in pink, purple, orange, and blue — creating a \"gallery of AI capabilities\" feel. Against the white canvas, these colorful cards pop like app icons on a phone home screen, making each AI model/product feel like a self-contained creative tool.\n\n**Key Characteristics:**\n- White-dominant layout with colorful product card accents\n- Multi-font system: DM Sans (UI), Outfit (display), Poppins (mid-tier), Roboto (data)\n- Pill buttons (9999px radius) for primary navigation and CTAs\n- Generous rounded cards (20px–24px radius) for product showcases\n- Brand blue spectrum: from \\`#1456f0\\` (brand-6) through \\`#3b82f6\\` (primary-500) to \\`#60a5fa\\` (light)\n- Brand pink (\\`#ea5ec1\\`) as secondary accent\n- Near-black text (\\`#222222\\`, \\`#18181b\\`) on white backgrounds\n- Purple-tinted shadows (\\`rgba(44, 30, 116, 0.16)\\`) creating subtle brand-colored depth\n- Dark footer section (\\`#181e25\\`) with product/company links\n\n## 2. Color Palette & Roles\n\n### Brand Primary\n- **Brand Blue** (\\`#1456f0\\`): \\`--brand-6\\`, primary brand identity color\n- **Sky Blue** (\\`#3daeff\\`): \\`--col-brand00\\`, lighter brand variant for accents\n- **Brand Pink** (\\`#ea5ec1\\`): \\`--col-brand02\\`, secondary brand accent\n\n### Blue Scale (Primary)\n- **Primary 200** (\\`#bfdbfe\\`): \\`--color-primary-200\\`, light blue backgrounds\n- **Primary Light** (\\`#60a5fa\\`): \\`--color-primary-light\\`, active states, highlights\n- **Primary 500** (\\`#3b82f6\\`): \\`--color-primary-500\\`, standard blue actions\n- **Primary 600** (\\`#2563eb\\`): \\`--color-primary-600\\`, hover states\n- **Primary 700** (\\`#1d4ed8\\`): \\`--color-primary-700\\`, pressed/active states\n- **Brand Deep** (\\`#17437d\\`): \\`--brand-3\\`, deep blue for emphasis\n\n### Text Colors\n- **Near Black** (\\`#222222\\`): \\`--col-text00\\`, primary text\n- **Dark** (\\`#18181b\\`): Button text, headings\n- **Charcoal** (\\`#181e25\\`): Dark surface text, footer background\n- **Dark Gray** (\\`#45515e\\`): \\`--col-text04\\`, secondary text\n- **Mid Gray** (\\`#8e8e93\\`): Tertiary text, muted labels\n- **Light Gray** (\\`#5f5f5f\\`): \\`--brand-2\\`, helper text\n\n### Surface & Background\n- **Pure White** (\\`#ffffff\\`): \\`--col-bg13\\`, primary background\n- **Light Gray** (\\`#f0f0f0\\`): Secondary button backgrounds\n- **Glass White** (\\`hsla(0, 0%, 100%, 0.4)\\`): \\`--fill-bg-white\\`, frosted glass overlay\n- **Border Light** (\\`#f2f3f5\\`): Subtle section dividers\n- **Border Gray** (\\`#e5e7eb\\`): Component borders\n\n### Semantic\n- **Success Background** (\\`#e8ffea\\`): \\`--success-bg\\`, positive state backgrounds\n\n### Shadows\n- **Standard** (\\`rgba(0, 0, 0, 0.08) 0px 4px 6px\\`): Default card shadow\n- **Soft Glow** (\\`rgba(0, 0, 0, 0.08) 0px 0px 22.576px\\`): Ambient soft shadow\n- **Brand Purple** (\\`rgba(44, 30, 116, 0.16) 0px 0px 15px\\`): Brand-tinted glow\n- **Brand Purple Offset** (\\`rgba(44, 30, 116, 0.11) 6.5px 2px 17.5px\\`): Directional brand glow\n- **Card Elevation** (\\`rgba(36, 36, 36, 0.08) 0px 12px 16px -4px\\`): Lifted card shadow\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary UI**: \\`DM Sans\\`, with fallbacks: \\`Helvetica Neue, Helvetica, Arial\\`\n- **Display**: \\`Outfit\\`, with fallbacks: \\`Helvetica Neue, Helvetica, Arial\\`\n- **Mid-tier**: \\`Poppins\\`\n- **Data/Technical**: \\`Roboto\\`, with fallbacks: \\`Helvetica Neue, Helvetica, Arial\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Notes |\n|------|------|------|--------|-------------|-------|\n| Display Hero | DM Sans / Outfit | 80px (5.00rem) | 500 | 1.10 (tight) | Hero headlines |\n| Section Heading | Outfit | 31px (1.94rem) | 600 | 1.50 | Feature section titles |\n| Section Heading Alt | Roboto / DM Sans | 32px (2.00rem) | 600 | 0.88 (tight) | Compact headers |\n| Card Title | Outfit | 28px (1.75rem) | 500–600 | 1.71 (relaxed) | Product card headings |\n| Sub-heading | Poppins | 24px (1.50rem) | 500 | 1.50 | Mid-tier headings |\n| Feature Label | Poppins | 18px (1.13rem) | 500 | 1.50 | Feature names |\n| Body Large | DM Sans | 20px (1.25rem) | 500 | 1.50 | Emphasized body |\n| Body | DM Sans | 16px (1.00rem) | 400–500 | 1.50 | Standard body text |\n| Body Bold | DM Sans | 16px (1.00rem) | 700 | 1.50 | Strong emphasis |\n| Nav/Link | DM Sans | 14px (0.88rem) | 400–500 | 1.50 | Navigation, links |\n| Button Small | DM Sans | 13px (0.81rem) | 600 | 1.50 | Compact buttons |\n| Caption | DM Sans / Poppins | 13px (0.81rem) | 400 | 1.70 (relaxed) | Metadata |\n| Small Label | DM Sans | 12px (0.75rem) | 500–600 | 1.25–1.50 | Tags, badges |\n| Micro | DM Sans / Outfit | 10px (0.63rem) | 400–500 | 1.50–1.80 | Tiny annotations |\n\n### Principles\n- **Multi-font purpose**: DM Sans = UI workhorse (body, nav, buttons); Outfit = geometric display (headings, product names); Poppins = friendly mid-tier (sub-headings, features); Roboto = technical/data contexts.\n- **Universal 1.50 line-height**: The overwhelming majority of text uses 1.50 line-height, creating a consistent reading rhythm regardless of font or size. Exceptions: display (1.10 tight) and some captions (1.70 relaxed).\n- **Weight 500 as default emphasis**: Most headings use 500 (medium) rather than bold, creating a modern, approachable tone. 600 for section titles, 700 reserved for strong emphasis.\n- **Compact hierarchy**: The size scale jumps from 80px display straight to 28–32px section, then 16–20px body — a deliberate compression that keeps the visual hierarchy feeling efficient.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Pill Primary Dark**\n- Background: \\`#181e25\\`\n- Text: \\`#ffffff\\`\n- Padding: 11px 20px\n- Radius: 8px\n- Use: Primary CTA (\"Get Started\", \"Learn More\")\n\n**Pill Nav**\n- Background: \\`rgba(0, 0, 0, 0.05)\\` (subtle tint)\n- Text: \\`#18181b\\`\n- Radius: 9999px (full pill)\n- Use: Navigation tabs, filter toggles\n\n**Pill White**\n- Background: \\`#ffffff\\`\n- Text: \\`rgba(24, 30, 37, 0.8)\\`\n- Radius: 9999px\n- Opacity: 0.5 (default state)\n- Use: Secondary nav, inactive tabs\n\n**Secondary Light**\n- Background: \\`#f0f0f0\\`\n- Text: \\`#333333\\`\n- Padding: 11px 20px\n- Radius: 8px\n- Use: Secondary actions\n\n### Product Cards\n- Background: Vibrant gradients (pink/purple/orange/blue)\n- Radius: 20px–24px (generous rounding)\n- Shadow: \\`rgba(44, 30, 116, 0.16) 0px 0px 15px\\` (brand purple glow)\n- Content: Product name, model version, descriptive text\n- Each card has its own color palette matching the product identity\n\n### AI Product Cards (Matrix)\n- Background: white with subtle shadow\n- Radius: 13px–16px\n- Shadow: \\`rgba(0, 0, 0, 0.08) 0px 4px 6px\\`\n- Icon/illustration centered above product name\n- Product name in DM Sans 14–16px weight 500\n\n### Links\n- **Primary**: \\`#18181b\\` or \\`#181e25\\`, underline on dark text\n- **Secondary**: \\`#8e8e93\\`, muted for less emphasis\n- **On Dark**: \\`rgba(255, 255, 255, 0.8)\\` for footer and dark sections\n\n### Navigation\n- Clean horizontal nav on white background\n- MiniMax logo left-aligned (red accent in logo)\n- DM Sans 14px weight 500 for nav items\n- Pill-shaped active indicators (9999px radius)\n- \"Login\" text link, minimal right-side actions\n- Sticky header behavior\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 14px, 16px, 24px, 32px, 40px, 50px, 64px, 80px\n\n### Grid & Container\n- Max content width centered on page\n- Product card grids: horizontal scroll or 3–4 column layout\n- Full-width white sections with contained content\n- Dark footer at full-width\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <768px | Single column, stacked cards |\n| Tablet | 768–1024px | 2-column grids |\n| Desktop | >1024px | Full layout, horizontal card scrolls |\n\n### Whitespace Philosophy\n- **Gallery spacing**: Products are presented like gallery items with generous white space between cards, letting each AI model breathe as its own showcase.\n- **Section rhythm**: Large vertical gaps (64px–80px) between major sections create distinct \"chapters\" of content.\n- **Card breathing**: Product cards use internal padding of 16px–24px with ample whitespace around text.\n\n### Border Radius Scale\n- Minimal (4px): Small tags, micro badges\n- Standard (8px): Buttons, small cards\n- Comfortable (11px–13px): Medium cards, panels\n- Generous (16px–20px): Large product cards\n- Large (22px–24px): Hero product cards, major containers\n- Pill (30px–32px): Badge pills, rounded panels\n- Full (9999px): Buttons, nav tabs\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | White background, text blocks |\n| Subtle (Level 1) | \\`rgba(0, 0, 0, 0.08) 0px 4px 6px\\` | Standard cards, containers |\n| Ambient (Level 2) | \\`rgba(0, 0, 0, 0.08) 0px 0px 22.576px\\` | Soft glow around elements |\n| Brand Glow (Level 3) | \\`rgba(44, 30, 116, 0.16) 0px 0px 15px\\` | Featured product cards |\n| Elevated (Level 4) | \\`rgba(36, 36, 36, 0.08) 0px 12px 16px -4px\\` | Lifted cards, hover states |\n\n**Shadow Philosophy**: MiniMax uses a distinctive purple-tinted shadow (\\`rgba(44, 30, 116, ...)\\`) for featured elements, creating a subtle brand-color glow that connects the shadow system to the blue brand identity. Standard shadows use neutral black but at low opacity (0.08), keeping everything feeling light and airy. The directional shadow variant (6.5px offset) adds dimensional interest to hero product cards.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use white as the dominant background — let product cards provide the color\n- Apply pill radius (9999px) for navigation tabs and toggle buttons\n- Use generous border radius (20px–24px) for product showcase cards\n- Employ the purple-tinted shadow for featured/hero product cards\n- Keep body text at DM Sans weight 400–500 — heavier weights for buttons only\n- Use Outfit for display headings, DM Sans for everything functional\n- Maintain the universal 1.50 line-height across body text\n- Let colorful product illustrations/gradients serve as the primary visual interest\n\n### Don't\n- Don't add colored backgrounds to main content sections — white is structural\n- Don't use sharp corners (0–4px radius) on product cards — the rounded aesthetic is core\n- Don't apply the brand pink (\\`#ea5ec1\\`) to text or buttons — it's for logo and decorative accents only\n- Don't mix more than one display font per section (Outfit OR Poppins, not both)\n- Don't use weight 700 for headings — 500–600 is the range, 700 is reserved for strong emphasis in body text\n- Don't darken shadows beyond 0.16 opacity — the light, airy feel requires restraint\n- Don't use Roboto for headings — it's the data/technical context font only\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <768px | Single column, stacked product cards, hamburger nav |\n| Tablet | 768–1024px | 2-column product grids, condensed spacing |\n| Desktop | >1024px | Full horizontal card layouts, expanded spacing |\n\n### Collapsing Strategy\n- Hero: 80px → responsive scaling to ~40px on mobile\n- Product card grid: horizontal scroll → 2-column → single column stacked\n- Navigation: horizontal → hamburger menu\n- Footer: multi-column → stacked sections\n- Spacing: 64–80px gaps → 32–40px on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: \\`#ffffff\\` (primary), \\`#181e25\\` (dark/footer)\n- Text: \\`#222222\\` (primary), \\`#45515e\\` (secondary), \\`#8e8e93\\` (muted)\n- Brand Blue: \\`#1456f0\\` (brand), \\`#3b82f6\\` (primary-500), \\`#2563eb\\` (hover)\n- Brand Pink: \\`#ea5ec1\\` (accent only)\n- Borders: \\`#e5e7eb\\`, \\`#f2f3f5\\`\n\n### Example Component Prompts\n- \"Create a hero section on white background. Headline at 80px Outfit weight 500, line-height 1.10, near-black (#222222) text. Sub-text at 16px DM Sans weight 400, line-height 1.50, #45515e. Dark CTA button (#181e25, 8px radius, 11px 20px padding, white text).\"\n- \"Design a product card grid: white cards with 20px border-radius, shadow rgba(44,30,116,0.16) 0px 0px 15px. Product name at 28px Outfit weight 600. Internal gradient background for the product illustration area.\"\n- \"Build navigation bar: white background, DM Sans 14px weight 500 for links, #18181b text. Pill-shaped active tab (9999px radius, rgba(0,0,0,0.05) background). MiniMax logo left-aligned.\"\n- \"Create an AI product matrix: 4-column grid of cards with 13px radius, subtle shadow rgba(0,0,0,0.08) 0px 4px 6px. Centered icon above product name in DM Sans 16px weight 500.\"\n- \"Design footer on dark (#181e25) background. Product links in DM Sans 14px, rgba(255,255,255,0.8). Multi-column layout.\"\n\n### Iteration Guide\n1. Start with white — color comes from product cards and illustrations only\n2. Pill buttons (9999px) for nav/tabs, standard radius (8px) for CTA buttons\n3. Purple-tinted shadows for featured cards, neutral shadows for everything else\n4. DM Sans handles 70% of text — Outfit is display-only, Poppins is mid-tier only\n5. Keep weights moderate (500–600 for headings) — the brand tone is confident but approachable\n6. Large radius cards (20–24px) for products, smaller radius (8–13px) for UI elements\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;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/minimax.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const minimaxBrief = `# Design System Inspired by MiniMax\n\n## 1. Visual Theme & Atmosphere\n\nMiniMax's website is a clean, product-showcase platform for a Chinese AI technology company that bridges consumer-friendly appeal with technical credibility. The design language is predominantly white-space-driven with a light, airy feel — pure white backgrounds (\\`#ffffff\\`) dominate, letting colorful product cards and AI model illustrations serve as the visual anchors. The overall aesthetic sits at the intersection of Apple's product marketing clarity and a playful, rounded design language that makes AI technology feel approachable.\n\nThe typography system is notably multi-font: DM Sans serves as the primary UI workhorse, Outfit handles display headings with geometric elegance, Poppins appears for mid-tier headings, and Roboto handles data-heavy contexts. This variety reflects a brand in rapid growth — each font serves a distinct communicative purpose rather than competing for attention. The hero heading at 80px weight 500 in both DM Sans and Outfit with a tight 1.10 line-height creates a bold but not aggressive opening statement.\n\nWhat makes MiniMax distinctive is its pill-button geometry (9999px radius) for navigation and primary actions, combined with softer 8px–24px radiused cards for product showcases. The product cards themselves are richly colorful — vibrant gradients in pink, purple, orange, and blue — creating a \"gallery of AI capabilities\" feel. Against the white canvas, these colorful cards pop like app icons on a phone home screen, making each AI model/product feel like a self-contained creative tool.\n\n**Key Characteristics:**\n- White-dominant layout with colorful product card accents\n- Multi-font system: DM Sans (UI), Outfit (display), Poppins (mid-tier), Roboto (data)\n- Pill buttons (9999px radius) for primary navigation and CTAs\n- Generous rounded cards (20px–24px radius) for product showcases\n- Brand blue spectrum: from \\`#1456f0\\` (brand-6) through \\`#3b82f6\\` (primary-500) to \\`#60a5fa\\` (light)\n- Brand pink (\\`#ea5ec1\\`) as secondary accent\n- Near-black text (\\`#222222\\`, \\`#18181b\\`) on white backgrounds\n- Purple-tinted shadows (\\`rgba(44, 30, 116, 0.16)\\`) creating subtle brand-colored depth\n- Dark footer section (\\`#181e25\\`) with product/company links\n\n## 2. Color Palette & Roles\n\n### Brand Primary\n- **Brand Blue** (\\`#1456f0\\`): \\`--brand-6\\`, primary brand identity color\n- **Sky Blue** (\\`#3daeff\\`): \\`--col-brand00\\`, lighter brand variant for accents\n- **Brand Pink** (\\`#ea5ec1\\`): \\`--col-brand02\\`, secondary brand accent\n\n### Blue Scale (Primary)\n- **Primary 200** (\\`#bfdbfe\\`): \\`--color-primary-200\\`, light blue backgrounds\n- **Primary Light** (\\`#60a5fa\\`): \\`--color-primary-light\\`, active states, highlights\n- **Primary 500** (\\`#3b82f6\\`): \\`--color-primary-500\\`, standard blue actions\n- **Primary 600** (\\`#2563eb\\`): \\`--color-primary-600\\`, hover states\n- **Primary 700** (\\`#1d4ed8\\`): \\`--color-primary-700\\`, pressed/active states\n- **Brand Deep** (\\`#17437d\\`): \\`--brand-3\\`, deep blue for emphasis\n\n### Text Colors\n- **Near Black** (\\`#222222\\`): \\`--col-text00\\`, primary text\n- **Dark** (\\`#18181b\\`): Button text, headings\n- **Charcoal** (\\`#181e25\\`): Dark surface text, footer background\n- **Dark Gray** (\\`#45515e\\`): \\`--col-text04\\`, secondary text\n- **Mid Gray** (\\`#8e8e93\\`): Tertiary text, muted labels\n- **Light Gray** (\\`#5f5f5f\\`): \\`--brand-2\\`, helper text\n\n### Surface & Background\n- **Pure White** (\\`#ffffff\\`): \\`--col-bg13\\`, primary background\n- **Light Gray** (\\`#f0f0f0\\`): Secondary button backgrounds\n- **Glass White** (\\`hsla(0, 0%, 100%, 0.4)\\`): \\`--fill-bg-white\\`, frosted glass overlay\n- **Border Light** (\\`#f2f3f5\\`): Subtle section dividers\n- **Border Gray** (\\`#e5e7eb\\`): Component borders\n\n### Semantic\n- **Success Background** (\\`#e8ffea\\`): \\`--success-bg\\`, positive state backgrounds\n\n### Shadows\n- **Standard** (\\`rgba(0, 0, 0, 0.08) 0px 4px 6px\\`): Default card shadow\n- **Soft Glow** (\\`rgba(0, 0, 0, 0.08) 0px 0px 22.576px\\`): Ambient soft shadow\n- **Brand Purple** (\\`rgba(44, 30, 116, 0.16) 0px 0px 15px\\`): Brand-tinted glow\n- **Brand Purple Offset** (\\`rgba(44, 30, 116, 0.11) 6.5px 2px 17.5px\\`): Directional brand glow\n- **Card Elevation** (\\`rgba(36, 36, 36, 0.08) 0px 12px 16px -4px\\`): Lifted card shadow\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary UI**: \\`DM Sans\\`, with fallbacks: \\`Helvetica Neue, Helvetica, Arial\\`\n- **Display**: \\`Outfit\\`, with fallbacks: \\`Helvetica Neue, Helvetica, Arial\\`\n- **Mid-tier**: \\`Poppins\\`\n- **Data/Technical**: \\`Roboto\\`, with fallbacks: \\`Helvetica Neue, Helvetica, Arial\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Notes |\n|------|------|------|--------|-------------|-------|\n| Display Hero | DM Sans / Outfit | 80px (5.00rem) | 500 | 1.10 (tight) | Hero headlines |\n| Section Heading | Outfit | 31px (1.94rem) | 600 | 1.50 | Feature section titles |\n| Section Heading Alt | Roboto / DM Sans | 32px (2.00rem) | 600 | 0.88 (tight) | Compact headers |\n| Card Title | Outfit | 28px (1.75rem) | 500–600 | 1.71 (relaxed) | Product card headings |\n| Sub-heading | Poppins | 24px (1.50rem) | 500 | 1.50 | Mid-tier headings |\n| Feature Label | Poppins | 18px (1.13rem) | 500 | 1.50 | Feature names |\n| Body Large | DM Sans | 20px (1.25rem) | 500 | 1.50 | Emphasized body |\n| Body | DM Sans | 16px (1.00rem) | 400–500 | 1.50 | Standard body text |\n| Body Bold | DM Sans | 16px (1.00rem) | 700 | 1.50 | Strong emphasis |\n| Nav/Link | DM Sans | 14px (0.88rem) | 400–500 | 1.50 | Navigation, links |\n| Button Small | DM Sans | 13px (0.81rem) | 600 | 1.50 | Compact buttons |\n| Caption | DM Sans / Poppins | 13px (0.81rem) | 400 | 1.70 (relaxed) | Metadata |\n| Small Label | DM Sans | 12px (0.75rem) | 500–600 | 1.25–1.50 | Tags, badges |\n| Micro | DM Sans / Outfit | 10px (0.63rem) | 400–500 | 1.50–1.80 | Tiny annotations |\n\n### Principles\n- **Multi-font purpose**: DM Sans = UI workhorse (body, nav, buttons); Outfit = geometric display (headings, product names); Poppins = friendly mid-tier (sub-headings, features); Roboto = technical/data contexts.\n- **Universal 1.50 line-height**: The overwhelming majority of text uses 1.50 line-height, creating a consistent reading rhythm regardless of font or size. Exceptions: display (1.10 tight) and some captions (1.70 relaxed).\n- **Weight 500 as default emphasis**: Most headings use 500 (medium) rather than bold, creating a modern, approachable tone. 600 for section titles, 700 reserved for strong emphasis.\n- **Compact hierarchy**: The size scale jumps from 80px display straight to 28–32px section, then 16–20px body — a deliberate compression that keeps the visual hierarchy feeling efficient.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Pill Primary Dark**\n- Background: \\`#181e25\\`\n- Text: \\`#ffffff\\`\n- Padding: 11px 20px\n- Radius: 8px\n- Use: Primary CTA (\"Get Started\", \"Learn More\")\n\n**Pill Nav**\n- Background: \\`rgba(0, 0, 0, 0.05)\\` (subtle tint)\n- Text: \\`#18181b\\`\n- Radius: 9999px (full pill)\n- Use: Navigation tabs, filter toggles\n\n**Pill White**\n- Background: \\`#ffffff\\`\n- Text: \\`rgba(24, 30, 37, 0.8)\\`\n- Radius: 9999px\n- Opacity: 0.5 (default state)\n- Use: Secondary nav, inactive tabs\n\n**Secondary Light**\n- Background: \\`#f0f0f0\\`\n- Text: \\`#333333\\`\n- Padding: 11px 20px\n- Radius: 8px\n- Use: Secondary actions\n\n### Product Cards\n- Background: Vibrant gradients (pink/purple/orange/blue)\n- Radius: 20px–24px (generous rounding)\n- Shadow: \\`rgba(44, 30, 116, 0.16) 0px 0px 15px\\` (brand purple glow)\n- Content: Product name, model version, descriptive text\n- Each card has its own color palette matching the product identity\n\n### AI Product Cards (Matrix)\n- Background: white with subtle shadow\n- Radius: 13px–16px\n- Shadow: \\`rgba(0, 0, 0, 0.08) 0px 4px 6px\\`\n- Icon/illustration centered above product name\n- Product name in DM Sans 14–16px weight 500\n\n### Links\n- **Primary**: \\`#18181b\\` or \\`#181e25\\`, underline on dark text\n- **Secondary**: \\`#8e8e93\\`, muted for less emphasis\n- **On Dark**: \\`rgba(255, 255, 255, 0.8)\\` for footer and dark sections\n\n### Navigation\n- Clean horizontal nav on white background\n- MiniMax logo left-aligned (red accent in logo)\n- DM Sans 14px weight 500 for nav items\n- Pill-shaped active indicators (9999px radius)\n- \"Login\" text link, minimal right-side actions\n- Sticky header behavior\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 14px, 16px, 24px, 32px, 40px, 50px, 64px, 80px\n\n### Grid & Container\n- Max content width centered on page\n- Product card grids: horizontal scroll or 3–4 column layout\n- Full-width white sections with contained content\n- Dark footer at full-width\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <768px | Single column, stacked cards |\n| Tablet | 768–1024px | 2-column grids |\n| Desktop | >1024px | Full layout, horizontal card scrolls |\n\n### Whitespace Philosophy\n- **Gallery spacing**: Products are presented like gallery items with generous white space between cards, letting each AI model breathe as its own showcase.\n- **Section rhythm**: Large vertical gaps (64px–80px) between major sections create distinct \"chapters\" of content.\n- **Card breathing**: Product cards use internal padding of 16px–24px with ample whitespace around text.\n\n### Border Radius Scale\n- Minimal (4px): Small tags, micro badges\n- Standard (8px): Buttons, small cards\n- Comfortable (11px–13px): Medium cards, panels\n- Generous (16px–20px): Large product cards\n- Large (22px–24px): Hero product cards, major containers\n- Pill (30px–32px): Badge pills, rounded panels\n- Full (9999px): Buttons, nav tabs\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | White background, text blocks |\n| Subtle (Level 1) | \\`rgba(0, 0, 0, 0.08) 0px 4px 6px\\` | Standard cards, containers |\n| Ambient (Level 2) | \\`rgba(0, 0, 0, 0.08) 0px 0px 22.576px\\` | Soft glow around elements |\n| Brand Glow (Level 3) | \\`rgba(44, 30, 116, 0.16) 0px 0px 15px\\` | Featured product cards |\n| Elevated (Level 4) | \\`rgba(36, 36, 36, 0.08) 0px 12px 16px -4px\\` | Lifted cards, hover states |\n\n**Shadow Philosophy**: MiniMax uses a distinctive purple-tinted shadow (\\`rgba(44, 30, 116, ...)\\`) for featured elements, creating a subtle brand-color glow that connects the shadow system to the blue brand identity. Standard shadows use neutral black but at low opacity (0.08), keeping everything feeling light and airy. The directional shadow variant (6.5px offset) adds dimensional interest to hero product cards.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use white as the dominant background — let product cards provide the color\n- Apply pill radius (9999px) for navigation tabs and toggle buttons\n- Use generous border radius (20px–24px) for product showcase cards\n- Employ the purple-tinted shadow for featured/hero product cards\n- Keep body text at DM Sans weight 400–500 — heavier weights for buttons only\n- Use Outfit for display headings, DM Sans for everything functional\n- Maintain the universal 1.50 line-height across body text\n- Let colorful product illustrations/gradients serve as the primary visual interest\n\n### Don't\n- Don't add colored backgrounds to main content sections — white is structural\n- Don't use sharp corners (0–4px radius) on product cards — the rounded aesthetic is core\n- Don't apply the brand pink (\\`#ea5ec1\\`) to text or buttons — it's for logo and decorative accents only\n- Don't mix more than one display font per section (Outfit OR Poppins, not both)\n- Don't use weight 700 for headings — 500–600 is the range, 700 is reserved for strong emphasis in body text\n- Don't darken shadows beyond 0.16 opacity — the light, airy feel requires restraint\n- Don't use Roboto for headings — it's the data/technical context font only\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <768px | Single column, stacked product cards, hamburger nav |\n| Tablet | 768–1024px | 2-column product grids, condensed spacing |\n| Desktop | >1024px | Full horizontal card layouts, expanded spacing |\n\n### Collapsing Strategy\n- Hero: 80px → responsive scaling to ~40px on mobile\n- Product card grid: horizontal scroll → 2-column → single column stacked\n- Navigation: horizontal → hamburger menu\n- Footer: multi-column → stacked sections\n- Spacing: 64–80px gaps → 32–40px on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: \\`#ffffff\\` (primary), \\`#181e25\\` (dark/footer)\n- Text: \\`#222222\\` (primary), \\`#45515e\\` (secondary), \\`#8e8e93\\` (muted)\n- Brand Blue: \\`#1456f0\\` (brand), \\`#3b82f6\\` (primary-500), \\`#2563eb\\` (hover)\n- Brand Pink: \\`#ea5ec1\\` (accent only)\n- Borders: \\`#e5e7eb\\`, \\`#f2f3f5\\`\n\n### Example Component Prompts\n- \"Create a hero section on white background. Headline at 80px Outfit weight 500, line-height 1.10, near-black (#222222) text. Sub-text at 16px DM Sans weight 400, line-height 1.50, #45515e. Dark CTA button (#181e25, 8px radius, 11px 20px padding, white text).\"\n- \"Design a product card grid: white cards with 20px border-radius, shadow rgba(44,30,116,0.16) 0px 0px 15px. Product name at 28px Outfit weight 600. Internal gradient background for the product illustration area.\"\n- \"Build navigation bar: white background, DM Sans 14px weight 500 for links, #18181b text. Pill-shaped active tab (9999px radius, rgba(0,0,0,0.05) background). MiniMax logo left-aligned.\"\n- \"Create an AI product matrix: 4-column grid of cards with 13px radius, subtle shadow rgba(0,0,0,0.08) 0px 4px 6px. Centered icon above product name in DM Sans 16px weight 500.\"\n- \"Design footer on dark (#181e25) background. Product links in DM Sans 14px, rgba(255,255,255,0.8). Multi-column layout.\"\n\n### Iteration Guide\n1. Start with white — color comes from product cards and illustrations only\n2. Pill buttons (9999px) for nav/tabs, standard radius (8px) for CTA buttons\n3. Purple-tinted shadows for featured cards, neutral shadows for everything else\n4. DM Sans handles 70% of text — Outfit is display-only, Poppins is mid-tier only\n5. Keep weights moderate (500–600 for headings) — the brand tone is confident but approachable\n6. Large radius cards (20–24px) for products, smaller radius (8–13px) for UI elements\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;","names":[]}

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

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/mongodb.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const mongodbBrief = `# Design System Inspired by MongoDB\n\n## 1. Visual Theme & Atmosphere\n\nMongoDB's website is a deep-forest-meets-terminal experience — 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 — 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 — 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–700), while Source Code Pro serves as the code and label font with distinctive uppercase treatments featuring very wide letter-spacing (1px–3px). This three-font system creates a hierarchy that spans editorial elegance → geometric professionalism → 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–999px 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\\`) — forest-dark, not space-dark\n- Neon MongoDB Green (\\`#00ed64\\`) as the singular brand accent — electric and organic\n- MongoDB Value Serif for hero headlines — 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–3px) for technical labels\n- Teal-tinted shadows: \\`rgba(0, 30, 43, 0.12)\\` — 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 — the deepest teal-black\n- **MongoDB Green** (\\`#00ed64\\`): Primary brand accent — neon green for highlights, underlines, gradients\n- **Dark Green** (\\`#00684a\\`): Button borders, link text on light — muted green for functional use\n\n### Interactive\n- **Action Blue** (\\`#006cfa\\`): Secondary accent — links, interactive highlights\n- **Hover Blue** (\\`#3860be\\`): All link hover states transition to this blue\n- **Teal Active** (\\`#1eaedb\\`): Button hover background — 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 — 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\\` — editorial hero headlines\n- **Body / UI**: \\`Euclid Circular A\\` — geometric sans-serif workhorse\n- **Code / Labels**: \\`Source Code Pro\\` — 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–2.00 | normal | Light-weight reading text |\n| Nav / UI | Euclid Circular A | 16px (1.00rem) | 500 | 1.00–1.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–16px | 500–700 | 1.00 | 0.135px–0.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–500 | 1.14 (tight) | 1px–2px | \\`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 — 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–3px letter-spacing creates technical signposts that feel like database field labels — systematic, structured, classified.\n- **Four-weight range**: 300 (light body) → 400 (standard) → 500 (UI/nav) → 700 (bold CTA) — 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–8px\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–32px 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–32px 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\\` — 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–2px 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–3 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–2px): 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–32px): Image containers\n- Hero (48px): Hero cards\n- Pill (100px–999px): 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 — 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)\\` — 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 — not pure black\n- Apply MongoDB Green (\\`#00ed64\\`) sparingly for maximum electric impact\n- Use MongoDB Value Serif ONLY for hero/display headings — Euclid Circular A for everything else\n- Apply Source Code Pro uppercase with wide tracking (1px–3px) 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 — dramatic contrast between modes\n- Use weight 300 for body text — 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 — always use teal-black (\\`#001e2b\\`)\n- Don't use MongoDB Green (\\`#00ed64\\`) on backgrounds — it's an accent for text, underlines, and small highlights\n- Don't use standard gray shadows — always use teal-tinted (\\`rgba(0,30,43,...)\\`)\n- Don't apply serif font to body text — MongoDB Value Serif is hero-only\n- Don't use narrow letter-spacing on Source Code Pro labels — 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 — the palette is strictly cool (teal, green, blue)\n- Don't forget the green accent underlines — 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–768px | Standard mobile |\n| Tablet | 768–1024px | 2-column grids begin |\n| Desktop | 1024–1280px | Standard layout |\n| Large Desktop | 1280–1440px | 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 → 64px → scales further\n- Navigation: horizontal mega-menu → hamburger\n- Feature cards: multi-column → 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 — use once per section for maximum impact\n3. Serif headlines (MongoDB Value Serif) create the editorial authority — never use for body\n4. Weight 300 body text creates the airy reading experience — don't default to 400\n5. Source Code Pro uppercase with wide tracking for technical labels — the database voice\n6. Teal-tinted shadows keep everything in the MongoDB color world\n`;\n"],"mappings":";AACO,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/mongodb.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const mongodbBrief = `# Design System Inspired by MongoDB\n\n## 1. Visual Theme & Atmosphere\n\nMongoDB's website is a deep-forest-meets-terminal experience — 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 — 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 — 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–700), while Source Code Pro serves as the code and label font with distinctive uppercase treatments featuring very wide letter-spacing (1px–3px). This three-font system creates a hierarchy that spans editorial elegance → geometric professionalism → 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–999px 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\\`) — forest-dark, not space-dark\n- Neon MongoDB Green (\\`#00ed64\\`) as the singular brand accent — electric and organic\n- MongoDB Value Serif for hero headlines — 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–3px) for technical labels\n- Teal-tinted shadows: \\`rgba(0, 30, 43, 0.12)\\` — 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 — the deepest teal-black\n- **MongoDB Green** (\\`#00ed64\\`): Primary brand accent — neon green for highlights, underlines, gradients\n- **Dark Green** (\\`#00684a\\`): Button borders, link text on light — muted green for functional use\n\n### Interactive\n- **Action Blue** (\\`#006cfa\\`): Secondary accent — links, interactive highlights\n- **Hover Blue** (\\`#3860be\\`): All link hover states transition to this blue\n- **Teal Active** (\\`#1eaedb\\`): Button hover background — 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 — 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\\` — editorial hero headlines\n- **Body / UI**: \\`Euclid Circular A\\` — geometric sans-serif workhorse\n- **Code / Labels**: \\`Source Code Pro\\` — 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–2.00 | normal | Light-weight reading text |\n| Nav / UI | Euclid Circular A | 16px (1.00rem) | 500 | 1.00–1.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–16px | 500–700 | 1.00 | 0.135px–0.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–500 | 1.14 (tight) | 1px–2px | \\`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 — 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–3px letter-spacing creates technical signposts that feel like database field labels — systematic, structured, classified.\n- **Four-weight range**: 300 (light body) → 400 (standard) → 500 (UI/nav) → 700 (bold CTA) — 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–8px\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–32px 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–32px 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\\` — 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–2px 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–3 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–2px): 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–32px): Image containers\n- Hero (48px): Hero cards\n- Pill (100px–999px): 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 — 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)\\` — 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 — not pure black\n- Apply MongoDB Green (\\`#00ed64\\`) sparingly for maximum electric impact\n- Use MongoDB Value Serif ONLY for hero/display headings — Euclid Circular A for everything else\n- Apply Source Code Pro uppercase with wide tracking (1px–3px) 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 — dramatic contrast between modes\n- Use weight 300 for body text — 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 — always use teal-black (\\`#001e2b\\`)\n- Don't use MongoDB Green (\\`#00ed64\\`) on backgrounds — it's an accent for text, underlines, and small highlights\n- Don't use standard gray shadows — always use teal-tinted (\\`rgba(0,30,43,...)\\`)\n- Don't apply serif font to body text — MongoDB Value Serif is hero-only\n- Don't use narrow letter-spacing on Source Code Pro labels — 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 — the palette is strictly cool (teal, green, blue)\n- Don't forget the green accent underlines — 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–768px | Standard mobile |\n| Tablet | 768–1024px | 2-column grids begin |\n| Desktop | 1024–1280px | Standard layout |\n| Large Desktop | 1280–1440px | 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 → 64px → scales further\n- Navigation: horizontal mega-menu → hamburger\n- Feature cards: multi-column → 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 — use once per section for maximum impact\n3. Serif headlines (MongoDB Value Serif) create the editorial authority — never use for body\n4. Weight 300 body text creates the airy reading experience — don't default to 400\n5. Source Code Pro uppercase with wide tracking for technical labels — the database voice\n6. Teal-tinted shadows keep everything in the MongoDB color world\n`;\n"],"mappings":";AACO,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/nike.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const nikeBrief = `# Design System Inspired by Nike\n\n## 1. Visual Theme & Atmosphere\n\nNike.com is a kinetic retail cathedral — a site that channels the explosive energy of sport into a digital shopping experience. The design operates on a principle of radical simplicity: strip everything back to black, white, and grey so that athletic photography and product color can dominate without competition. The result feels less like a website and more like a sports editorial laid out with the precision of a luxury magazine. Every pixel of real estate is either selling product or driving toward product.\n\nThe \"Podium CDS\" (Nike's internal Core Design System) establishes an aggressively monochromatic foundation. The UI disappears into black (\\`#111111\\`) text and white surfaces, allowing hero photography — sweating athletes, mid-air shoes, stadium energy — to carry the emotional weight. When color does appear in the UI, it's almost exclusively functional: red for errors, blue for links, green for success. The product itself is the color story. This restraint creates a visual paradox: the most colorful pages on the internet feel the most minimal, because all vibrancy comes from merchandise rather than interface.\n\nThe typography system is the other half of Nike's visual identity. Massive uppercase headlines in Nike Futura ND — a custom condensed Futura variant with impossibly tight line-height (0.90) — punch through hero imagery like a typographic shockwave. Below the headlines, the workhorse Helvetica Now family handles everything from navigation to product descriptions with Swiss-precision clarity. This split between expressive display type and functional body type mirrors Nike's brand duality: inspiration meets execution.\n\n**Key Characteristics:**\n- Monochromatic UI (black/white/grey) that lets product photography be the only color source\n- Massive uppercase display typography (96px, line-height 0.90) that punches through hero images\n- Full-bleed photography with no border radius — imagery fills every available edge\n- Pill-shaped buttons (30px radius) as the primary interactive element\n- 8px spacing grid with athletic discipline — every measurement snaps to the system\n- Category-driven shopping architecture with large navigational image cards\n- Shadow-free, border-minimal elevation model — surface differentiation through grey shifts only\n\n## 2. Color Palette & Roles\n\n### Primary\n\n- **Nike Black** (\\`#111111\\`): The foundation — primary text, button backgrounds, nav text, hero overlays. Deliberately not pure black (#000000), creating a fractionally softer reading experience\n- **Nike White** (\\`#FFFFFF\\`): Primary page canvas, button text on dark, card surfaces, nav bar background\n\n### Surface & Background\n\n- **Snow** (\\`#FAFAFA\\`): Lightest surface, near-white subtle differentiation (--podium-cds-color-grey-50)\n- **Light Gray** (\\`#F5F5F5\\`): Secondary background, search input fill, image placeholder, loading skeleton (--podium-cds-color-grey-100)\n- **Hover Gray** (\\`#E5E5E5\\`): Hover state background, disabled button fill (--podium-cds-color-grey-200)\n- **Dark Surface** (\\`#28282A\\`): Primary background on dark/inverted sections (--podium-cds-color-grey-800)\n- **Deep Charcoal** (\\`#1F1F21\\`): Inverse primary background, darkest non-black surface (--podium-cds-color-grey-900)\n- **Dark Hover** (\\`#39393B\\`): Hover state on dark backgrounds (--podium-cds-color-grey-700)\n\n### Neutrals & Text\n\n- **Primary Text** (\\`#111111\\`): Main body text, headings, nav links (--podium-cds-color-text-primary)\n- **Secondary Text** (\\`#707072\\`): Descriptive copy, metadata, timestamps, price labels (--podium-cds-color-text-secondary)\n- **Disabled Text** (\\`#9E9EA0\\`): Inactive elements, unavailable options (--podium-cds-color-text-disabled)\n- **Disabled Inverse** (\\`#4B4B4D\\`): Disabled text on dark backgrounds (--podium-cds-color-text-disabled-inverse)\n- **Border Primary** (\\`#707072\\`): Standard border color, matching secondary text\n- **Border Secondary** (\\`#CACACB\\`): Subtle borders, input borders, divider lines (--podium-cds-color-grey-300)\n- **Border Disabled** (\\`#CACACB\\`): Inactive border state\n- **Border Active** (\\`#111111\\`): Active/focused border, matching primary text\n\n### Semantic & Accent\n\n- **Nike Red** (\\`#D30005\\`): Critical errors, sale badges, urgent notifications (--podium-cds-color-red-600)\n- **Bright Red** (\\`#EE0005\\`): Red-500, slightly lighter red for emphasis\n- **Nike Orange Badge** (\\`#D33918\\`): Badge text, promotional callouts (--podium-cds-color-text-badge)\n- **Orange Flash** (\\`#FF5000\\`): Expressive orange accent (--podium-cds-color-orange-400)\n- **Success Green** (\\`#007D48\\`): Confirmation, availability, positive states (--podium-cds-color-green-600)\n- **Success Inverse** (\\`#1EAA52\\`): Success on dark backgrounds (--podium-cds-color-green-500)\n- **Link Blue** (\\`#1151FF\\`): Text links, informational highlights (--podium-cds-color-blue-500)\n- **Info Inverse** (\\`#1190FF\\`): Links on dark backgrounds (--podium-cds-color-blue-400)\n- **Warning Yellow** (\\`#FEDF35\\`): Warning backgrounds, attention banners (--podium-cds-color-yellow-200)\n- **Focus Ring** (\\`rgba(39, 93, 197, 1)\\`): Keyboard focus indicator ring\n\n### Extended Color Spectrum (Podium CDS)\n\nEach color ramp runs 50–900 for expressive use in campaigns and product pages:\n\n- **Red**: \\`#FFE5E5\\` → \\`#EE0005\\` → \\`#530300\\`\n- **Orange**: \\`#FFE2D6\\` → \\`#FF5000\\` → \\`#3E1009\\`\n- **Yellow**: \\`#FEF087\\` → \\`#FCA600\\` → \\`#99470A\\`\n- **Green**: \\`#DFFFB9\\` → \\`#1EAA52\\` → \\`#003C2A\\`\n- **Teal**: \\`#D4FFFB\\` → \\`#008E98\\` → \\`#043441\\`\n- **Blue**: \\`#D6EEFF\\` → \\`#1151FF\\` → \\`#020664\\`\n- **Purple**: \\`#E4E1FC\\` → \\`#6E0FF6\\` → \\`#1C0060\\`\n- **Pink**: \\`#FFE1F3\\` → \\`#ED1AA0\\` → \\`#4C012D\\`\n\n### Gradient System\n\nNike avoids UI gradients. When gradients appear, they are photographic — applied to product hero backgrounds (e.g., a red shoe on a red-to-deeper-red gradient). The design system itself is flat-color only.\n\n## 3. Typography Rules\n\n### Font Family\n\n**Display:** Nike Futura ND (custom condensed Futura variant exclusive to Nike)\n- Fallbacks: Helvetica Now Text Medium, Helvetica, Arial\n- Used exclusively for large uppercase display headlines\n- Characteristically tight line-height (0.90) and uppercase transform\n\n**Heading:** Helvetica Now Display Medium\n- Fallbacks: Helvetica, Arial\n- Used for section headings and product titles at 24–32px\n\n**Body Medium:** Helvetica Now Text Medium (weight 500)\n- Fallbacks: Helvetica, Arial\n- Used for links, buttons, captions, emphasized body text\n\n**Body:** Helvetica Now Text (weight 400)\n- Fallbacks: Helvetica, Arial\n- Used for standard body copy, descriptions, metadata\n\n**Arabic:** Neue Frutiger Arabic — locale-specific alternative\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Display | 96px | 500 | 0.90 | — | Nike Futura ND, uppercase, hero headlines |\n| Heading 1 | 32px | 500 | 1.20 | — | Helvetica Now Display Medium, section titles |\n| Heading 2 | 24px | 500 | 1.20 | — | Helvetica Now Display Medium, subsections |\n| Heading 3 | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, card titles |\n| Body | 16px | 400 | 1.75 | — | Helvetica Now Text, product descriptions |\n| Body Medium | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, emphasized text |\n| Link | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, navigation links |\n| Link Small | 14px | 500 | 1.86 | — | Helvetica Now Text Medium, footer/utility links |\n| Button | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, CTA text |\n| Button Small | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, secondary buttons |\n| Caption | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, price labels |\n| Small | 12px | 500 | 1.50 | — | Helvetica Now Text Medium, timestamps |\n| Tiny | 12px | 400 | 1.50 | — | Helvetica Now Text, legal text |\n\n### Principles\n\nNike's typography is a study in tension. The display layer — Nike Futura ND at 96px with a devastating 0.90 line-height — is engineered to feel like a stadium scoreboard: massive, condensed, uppercase, impossible to ignore. It transforms headlines into battle cries. Below the display layer, Helvetica Now provides a clinical counterpoint: Swiss-precision legibility with generous 1.75 line-height for comfortable product browsing. Weight 500 (Medium) dominates throughout the body text, giving Nike's prose a slight assertiveness without the heaviness of bold — every sentence reads like a confident recommendation, not a shout.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary**\n- Background: Nike Black (\\`#111111\\`)\n- Text: White (\\`#FFFFFF\\`), 16px/500, Helvetica Now Text Medium\n- Border: none\n- Border radius: fully rounded pill (30px)\n- Padding: ~12px 24px\n- Hover: background shifts to Grey-500 (\\`#707072\\`), text hover color\n- Active: scale(0) ripple effect with opacity 0.5\n- Focus: 2px box-shadow ring in \\`rgba(39, 93, 197, 1)\\`\n- Transition: background 200ms ease\n\n**Primary on Dark**\n- Background: White (\\`#FFFFFF\\`)\n- Text: Black (\\`#111111\\`)\n- Hover: background shifts to Grey-300 (\\`#CACACB\\`)\n\n**Secondary (Outlined)**\n- Background: transparent\n- Text: Nike Black (\\`#111111\\`)\n- Border: 1.5px solid \\`#CACACB\\` (grey-300)\n- Border radius: 30px\n- Hover: border darkens to \\`#707072\\`, background to grey-200\n\n**Disabled**\n- Background: Grey-200 (\\`#E5E5E5\\`)\n- Text: Grey-400 (\\`#9E9EA0\\`)\n- Cursor: not-allowed\n\n**Icon Button**\n- Background: Grey-100 (\\`#F5F5F5\\`)\n- Shape: 30px radius (or 50% for circular)\n- Padding: 6px\n- Hover: Grey-500 background\n\n### Cards & Containers\n\n- Background: White (\\`#FFFFFF\\`) — no visible card boundary in most cases\n- Border radius: 0px for product image cards (edge-to-edge imagery), 20px for interactive containers\n- Shadow: none — Nike uses no card shadows whatsoever\n- Hover: no lift effect on product cards; underline on text links within cards\n- Product cards: image on top (no radius), text metadata below with 12px gap\n- Category cards: full-bleed photography with text overlay on dark gradient\n- Transition: opacity 200ms ease for image swap on hover\n\n### Inputs & Forms\n\n- Background: Grey-100 (\\`#F5F5F5\\`)\n- Border: 1px solid \\`#CACACB\\` when visible, or borderless on search\n- Border radius: 24px (search inputs), 8px (form inputs)\n- Font: Helvetica Now Text, 16px\n- Focus: border shifts to \\`#111111\\` (border-active), 2px focus ring in \\`rgba(39, 93, 197, 1)\\`\n- Error: border \\`#D30005\\` (critical)\n- Placeholder: Grey-500 (\\`#707072\\`)\n- Transition: border-color 200ms ease\n\n### Navigation\n\n- Background: White (\\`#FFFFFF\\`), sticky\n- Height: ~60px desktop\n- Left: Nike Swoosh logo (24x24px SVG)\n- Center: Category links (New & Featured, Men, Women, Kids, Sale) in 16px/500 Helvetica Now Text Medium\n- Right: Search (24px radius input), Favorites, Cart icons\n- Hover: text color shifts to Grey-500 (\\`#707072\\`)\n- Mobile: hamburger menu, full-screen overlay\n- Top banner: promotional message bar with dark background (#111111) and white text\n\n### Image Treatment\n\n- Hero images: full-bleed, no border radius, edge-to-edge\n- Product grid: square (1:1) or 4:3 aspect ratio, no border radius\n- Category cards: 16:9 or 4:3, full-bleed with text overlay\n- Image placeholder: Grey-100 (\\`#F5F5F5\\`) solid background\n- Lazy loading: native loading=\"lazy\", skeleton uses #F5F5F5 bg\n- Product hover: secondary image swap (front → side view)\n\n### Promotional Banners\n\n- Full-width dark (\\`#111111\\`) background with white text\n- Tight padding (8-12px vertical)\n- Centered text, 12px/500 Helvetica Now Text Medium\n- Used for shipping promotions, member benefits, sale announcements\n\n## 5. Layout Principles\n\n### Spacing System\n\nBase unit: 4px (primary grid is 8px multiples)\n\n| Token | Value | Use |\n|-------|-------|-----|\n| space-1 | 4px | Tight icon gaps, inline spacing |\n| space-2 | 8px | Base unit, button icon gaps |\n| space-3 | 12px | Card internal padding, tight margins |\n| space-4 | 16px | Standard padding, nav spacing |\n| space-5 | 20px | Product card gaps |\n| space-6 | 24px | Section internal padding, grid gaps |\n| space-7 | 32px | Section breaks |\n| space-8 | 48px | Major section padding |\n| space-9 | 64px | Hero section padding |\n| space-10 | 80px | Large section spacing |\n\n### Grid & Container\n\n- Max container width: 1920px\n- Standard content width: ~1440px with horizontal padding\n- Product grid: 3-column on desktop, 2-column on tablet, 1-column on mobile\n- Category grid: 3-column with full-bleed images\n- Grid gap: 4-12px between product cards (intentionally tight)\n- Horizontal padding: 48px desktop, 24px tablet, 16px mobile\n\n### Whitespace Philosophy\n\nNike's whitespace strategy is deliberately aggressive — not in the luxurious, breathing way of a fashion brand, but in a compressed, high-density way that fills every pixel with either content or intentional absence. Product grids use minimal gaps (4-12px) to create a sense of abundance and choice. Section breaks are generous (48-80px) to separate shopping contexts. The overall effect is a store that feels packed with product while remaining navigable — like a well-organized athletic superstore.\n\n### Border Radius Scale\n\n| Value | Context |\n|-------|---------|\n| 0px | Product images, hero photography (sharp edges) |\n| 8px | Form inputs (non-search) |\n| 18px | Small interactive elements |\n| 20px | Containers, cards with UI content |\n| 24px | Search inputs, medium pills |\n| 30px | Buttons, tags, filters (full pill) |\n| 50% | Circular icon buttons, avatar placeholders |\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat | No shadow, no border | Default state for everything |\n| Divider | \\`0px -1px 0px 0px #E5E5E5 inset\\` | Subtle inset line between sections |\n| Focus | \\`0 0 0 2px rgba(39, 93, 197, 1)\\` | Keyboard focus ring |\n| Overlay | Dark scrim over photography | Text-on-image legibility |\n\nNike's elevation philosophy is radically flat. There are no card shadows, no hover lifts, no floating elements. Depth is communicated exclusively through color — dark sections recede, light sections advance, grey shifts indicate state changes. This flatness reinforces the athletic, no-nonsense brand personality: no visual frills, just direct communication. The only \"shadow\" in the entire system is a 1px inset divider line and the accessibility-required focus ring.\n\n### Decorative Depth\n\n- **Hero photography overlays**: Dark gradient scrims over full-bleed photography for text readability\n- **Product background gradients**: Colored backgrounds behind hero product shots (e.g., red shoe on red gradient)\n- **Banner bars**: Solid dark (#111111) promotional strips at page top\n\n## 7. Do's and Don'ts\n\n### Do\n\n- Use Nike Black (#111111) for all primary text — never pure #000000\n- Keep buttons pill-shaped (30px radius) and limited to primary/secondary variants\n- Use full-bleed, edge-to-edge photography for hero sections — no border radius on images\n- Let product photography provide all color vibrancy; keep UI monochromatic\n- Use uppercase Nike Futura ND ONLY for display headlines (96px+)\n- Maintain tight product grid gaps (4-12px) for a dense, abundant feel\n- Use Grey-100 (#F5F5F5) for all input and placeholder backgrounds\n- Reserve color exclusively for semantic meaning (red=error, green=success, blue=link)\n- Use weight 500 (Medium) for all interactive text elements\n\n### Don't\n\n- Don't add shadows to cards — Nike's elevation model is entirely flat\n- Don't use border radius on product imagery — only UI elements get rounded corners\n- Don't introduce brand colors beyond the grey scale for UI elements\n- Don't use Nike Futura ND below 24px — it's exclusively a display face\n- Don't add hover lift effects — Nike cards don't animate on hover\n- Don't use regular weight (400) for buttons or links — always use 500\n- Don't place colored backgrounds behind UI elements — color is reserved for product contexts\n- Don't use more than two levels of text hierarchy per card (title + body)\n- Don't add decorative dividers — the 1px inset is the only divider pattern\n- Don't soften the contrast — Nike's design deliberately pushes black-on-white to maximum\n\n## 8. Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <640px | Single column, hamburger nav, display text scales down, tight 16px padding |\n| Small Tablet | 640-768px | 2-column product grid begins, nav still collapsed |\n| Tablet | 768-960px | 2-column grids, category cards scale, horizontal padding 24px |\n| Small Desktop | 960-1024px | Nav expands to full horizontal, 3-column product grid |\n| Desktop | 1024-1440px | Full layout, expanded nav, 3-column grids, 48px padding |\n| Large Desktop | >1440px | Max-width container centered, increased margins, hero images full-bleed |\n\n### Touch Targets\n\n- Minimum touch target: 44x44px (WCAG AAA)\n- Mobile nav icons: 48x48px touch area\n- Product cards: full surface is tappable\n- Filter pills: minimum 36px height with 12px padding\n\n### Collapsing Strategy\n\n- **Navigation**: Full category links → hamburger menu below 960px; search, favorites, cart icons remain visible\n- **Product grids**: 3-col → 2-col at 960px → 1-col at 640px\n- **Hero sections**: Display text scales from 96px → 64px → 48px; hero images remain full-bleed at all sizes\n- **Category cards**: 3-col → 2-col → 1-col with maintained full-bleed imagery\n- **Section padding**: 80px → 48px → 32px → 24px as viewport narrows\n- **Promotional banner**: text wraps or truncates, maintains dark background\n\n### Image Behavior\n\n- Responsive images via Nike CDN (\\`c.static-nike.com\\`) with width parameters\n- Product images: srcset with multiple resolutions (w_320, w_640, w_960, w_1920)\n- Hero images: full-bleed at all breakpoints, aspect ratio shifts (16:9 desktop → 4:3 mobile)\n- Lazy loading: native loading=\"lazy\", grey-100 placeholder during load\n- Art direction: hero crops change between desktop and mobile compositions\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n\n- Primary CTA: Nike Black (\\`#111111\\`)\n- Background: White (\\`#FFFFFF\\`)\n- Secondary surface: Light Gray (\\`#F5F5F5\\`)\n- Heading text: Nike Black (\\`#111111\\`)\n- Body text / hover: Secondary Text (\\`#707072\\`)\n- Border: Border Secondary (\\`#CACACB\\`)\n- Error: Nike Red (\\`#D30005\\`)\n- Link: Link Blue (\\`#1151FF\\`)\n\n### Example Component Prompts\n\n- \"Create a product hero section with full-bleed edge-to-edge photography, no border radius, a dark gradient overlay for text, and a massive uppercase 96px/500 headline in Nike Futura style with 0.90 line-height and a Nike Black (#111111) pill button (30px radius)\"\n- \"Design a 3-column product card grid with square images (no border radius), 4px gap between cards, product name in 16px/500 Nike Black (#111111), price in 14px/500, and secondary text in Grey-500 (#707072)\"\n- \"Build a sticky white navigation bar with a left-aligned logo, centered category links in 16px/500 (#111111) with hover color #707072, and right-aligned search (24px radius, #F5F5F5 background), favorites, and cart icons\"\n- \"Create a promotional banner strip with #111111 background, white 12px/500 centered text, and 8px vertical padding — full width, no border radius\"\n- \"Design a secondary outlined button with transparent background, 1.5px #CACACB border, 30px pill radius, 16px/500 #111111 text, hover border darkening to #707072\"\n\n### Iteration Guide\n\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time\n2. Reference specific color names and hex codes from this document\n3. Remember: product photography is the color — UI stays monochromatic\n4. Use the grey scale for state changes: #F5F5F5 → #E5E5E5 → #CACACB → #707072\n5. If something feels too colorful in the UI, it probably is — Nike keeps UI greyscale\n6. Display type (Nike Futura) should ALWAYS be uppercase and never below 24px\n7. Body type (Helvetica Now) should almost always be weight 500 for interactive elements\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/nike.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const nikeBrief = `# Design System Inspired by Nike\n\n## 1. Visual Theme & Atmosphere\n\nNike.com is a kinetic retail cathedral — a site that channels the explosive energy of sport into a digital shopping experience. The design operates on a principle of radical simplicity: strip everything back to black, white, and grey so that athletic photography and product color can dominate without competition. The result feels less like a website and more like a sports editorial laid out with the precision of a luxury magazine. Every pixel of real estate is either selling product or driving toward product.\n\nThe \"Podium CDS\" (Nike's internal Core Design System) establishes an aggressively monochromatic foundation. The UI disappears into black (\\`#111111\\`) text and white surfaces, allowing hero photography — sweating athletes, mid-air shoes, stadium energy — to carry the emotional weight. When color does appear in the UI, it's almost exclusively functional: red for errors, blue for links, green for success. The product itself is the color story. This restraint creates a visual paradox: the most colorful pages on the internet feel the most minimal, because all vibrancy comes from merchandise rather than interface.\n\nThe typography system is the other half of Nike's visual identity. Massive uppercase headlines in Nike Futura ND — a custom condensed Futura variant with impossibly tight line-height (0.90) — punch through hero imagery like a typographic shockwave. Below the headlines, the workhorse Helvetica Now family handles everything from navigation to product descriptions with Swiss-precision clarity. This split between expressive display type and functional body type mirrors Nike's brand duality: inspiration meets execution.\n\n**Key Characteristics:**\n- Monochromatic UI (black/white/grey) that lets product photography be the only color source\n- Massive uppercase display typography (96px, line-height 0.90) that punches through hero images\n- Full-bleed photography with no border radius — imagery fills every available edge\n- Pill-shaped buttons (30px radius) as the primary interactive element\n- 8px spacing grid with athletic discipline — every measurement snaps to the system\n- Category-driven shopping architecture with large navigational image cards\n- Shadow-free, border-minimal elevation model — surface differentiation through grey shifts only\n\n## 2. Color Palette & Roles\n\n### Primary\n\n- **Nike Black** (\\`#111111\\`): The foundation — primary text, button backgrounds, nav text, hero overlays. Deliberately not pure black (#000000), creating a fractionally softer reading experience\n- **Nike White** (\\`#FFFFFF\\`): Primary page canvas, button text on dark, card surfaces, nav bar background\n\n### Surface & Background\n\n- **Snow** (\\`#FAFAFA\\`): Lightest surface, near-white subtle differentiation (--podium-cds-color-grey-50)\n- **Light Gray** (\\`#F5F5F5\\`): Secondary background, search input fill, image placeholder, loading skeleton (--podium-cds-color-grey-100)\n- **Hover Gray** (\\`#E5E5E5\\`): Hover state background, disabled button fill (--podium-cds-color-grey-200)\n- **Dark Surface** (\\`#28282A\\`): Primary background on dark/inverted sections (--podium-cds-color-grey-800)\n- **Deep Charcoal** (\\`#1F1F21\\`): Inverse primary background, darkest non-black surface (--podium-cds-color-grey-900)\n- **Dark Hover** (\\`#39393B\\`): Hover state on dark backgrounds (--podium-cds-color-grey-700)\n\n### Neutrals & Text\n\n- **Primary Text** (\\`#111111\\`): Main body text, headings, nav links (--podium-cds-color-text-primary)\n- **Secondary Text** (\\`#707072\\`): Descriptive copy, metadata, timestamps, price labels (--podium-cds-color-text-secondary)\n- **Disabled Text** (\\`#9E9EA0\\`): Inactive elements, unavailable options (--podium-cds-color-text-disabled)\n- **Disabled Inverse** (\\`#4B4B4D\\`): Disabled text on dark backgrounds (--podium-cds-color-text-disabled-inverse)\n- **Border Primary** (\\`#707072\\`): Standard border color, matching secondary text\n- **Border Secondary** (\\`#CACACB\\`): Subtle borders, input borders, divider lines (--podium-cds-color-grey-300)\n- **Border Disabled** (\\`#CACACB\\`): Inactive border state\n- **Border Active** (\\`#111111\\`): Active/focused border, matching primary text\n\n### Semantic & Accent\n\n- **Nike Red** (\\`#D30005\\`): Critical errors, sale badges, urgent notifications (--podium-cds-color-red-600)\n- **Bright Red** (\\`#EE0005\\`): Red-500, slightly lighter red for emphasis\n- **Nike Orange Badge** (\\`#D33918\\`): Badge text, promotional callouts (--podium-cds-color-text-badge)\n- **Orange Flash** (\\`#FF5000\\`): Expressive orange accent (--podium-cds-color-orange-400)\n- **Success Green** (\\`#007D48\\`): Confirmation, availability, positive states (--podium-cds-color-green-600)\n- **Success Inverse** (\\`#1EAA52\\`): Success on dark backgrounds (--podium-cds-color-green-500)\n- **Link Blue** (\\`#1151FF\\`): Text links, informational highlights (--podium-cds-color-blue-500)\n- **Info Inverse** (\\`#1190FF\\`): Links on dark backgrounds (--podium-cds-color-blue-400)\n- **Warning Yellow** (\\`#FEDF35\\`): Warning backgrounds, attention banners (--podium-cds-color-yellow-200)\n- **Focus Ring** (\\`rgba(39, 93, 197, 1)\\`): Keyboard focus indicator ring\n\n### Extended Color Spectrum (Podium CDS)\n\nEach color ramp runs 50–900 for expressive use in campaigns and product pages:\n\n- **Red**: \\`#FFE5E5\\` → \\`#EE0005\\` → \\`#530300\\`\n- **Orange**: \\`#FFE2D6\\` → \\`#FF5000\\` → \\`#3E1009\\`\n- **Yellow**: \\`#FEF087\\` → \\`#FCA600\\` → \\`#99470A\\`\n- **Green**: \\`#DFFFB9\\` → \\`#1EAA52\\` → \\`#003C2A\\`\n- **Teal**: \\`#D4FFFB\\` → \\`#008E98\\` → \\`#043441\\`\n- **Blue**: \\`#D6EEFF\\` → \\`#1151FF\\` → \\`#020664\\`\n- **Purple**: \\`#E4E1FC\\` → \\`#6E0FF6\\` → \\`#1C0060\\`\n- **Pink**: \\`#FFE1F3\\` → \\`#ED1AA0\\` → \\`#4C012D\\`\n\n### Gradient System\n\nNike avoids UI gradients. When gradients appear, they are photographic — applied to product hero backgrounds (e.g., a red shoe on a red-to-deeper-red gradient). The design system itself is flat-color only.\n\n## 3. Typography Rules\n\n### Font Family\n\n**Display:** Nike Futura ND (custom condensed Futura variant exclusive to Nike)\n- Fallbacks: Helvetica Now Text Medium, Helvetica, Arial\n- Used exclusively for large uppercase display headlines\n- Characteristically tight line-height (0.90) and uppercase transform\n\n**Heading:** Helvetica Now Display Medium\n- Fallbacks: Helvetica, Arial\n- Used for section headings and product titles at 24–32px\n\n**Body Medium:** Helvetica Now Text Medium (weight 500)\n- Fallbacks: Helvetica, Arial\n- Used for links, buttons, captions, emphasized body text\n\n**Body:** Helvetica Now Text (weight 400)\n- Fallbacks: Helvetica, Arial\n- Used for standard body copy, descriptions, metadata\n\n**Arabic:** Neue Frutiger Arabic — locale-specific alternative\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Display | 96px | 500 | 0.90 | — | Nike Futura ND, uppercase, hero headlines |\n| Heading 1 | 32px | 500 | 1.20 | — | Helvetica Now Display Medium, section titles |\n| Heading 2 | 24px | 500 | 1.20 | — | Helvetica Now Display Medium, subsections |\n| Heading 3 | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, card titles |\n| Body | 16px | 400 | 1.75 | — | Helvetica Now Text, product descriptions |\n| Body Medium | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, emphasized text |\n| Link | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, navigation links |\n| Link Small | 14px | 500 | 1.86 | — | Helvetica Now Text Medium, footer/utility links |\n| Button | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, CTA text |\n| Button Small | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, secondary buttons |\n| Caption | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, price labels |\n| Small | 12px | 500 | 1.50 | — | Helvetica Now Text Medium, timestamps |\n| Tiny | 12px | 400 | 1.50 | — | Helvetica Now Text, legal text |\n\n### Principles\n\nNike's typography is a study in tension. The display layer — Nike Futura ND at 96px with a devastating 0.90 line-height — is engineered to feel like a stadium scoreboard: massive, condensed, uppercase, impossible to ignore. It transforms headlines into battle cries. Below the display layer, Helvetica Now provides a clinical counterpoint: Swiss-precision legibility with generous 1.75 line-height for comfortable product browsing. Weight 500 (Medium) dominates throughout the body text, giving Nike's prose a slight assertiveness without the heaviness of bold — every sentence reads like a confident recommendation, not a shout.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary**\n- Background: Nike Black (\\`#111111\\`)\n- Text: White (\\`#FFFFFF\\`), 16px/500, Helvetica Now Text Medium\n- Border: none\n- Border radius: fully rounded pill (30px)\n- Padding: ~12px 24px\n- Hover: background shifts to Grey-500 (\\`#707072\\`), text hover color\n- Active: scale(0) ripple effect with opacity 0.5\n- Focus: 2px box-shadow ring in \\`rgba(39, 93, 197, 1)\\`\n- Transition: background 200ms ease\n\n**Primary on Dark**\n- Background: White (\\`#FFFFFF\\`)\n- Text: Black (\\`#111111\\`)\n- Hover: background shifts to Grey-300 (\\`#CACACB\\`)\n\n**Secondary (Outlined)**\n- Background: transparent\n- Text: Nike Black (\\`#111111\\`)\n- Border: 1.5px solid \\`#CACACB\\` (grey-300)\n- Border radius: 30px\n- Hover: border darkens to \\`#707072\\`, background to grey-200\n\n**Disabled**\n- Background: Grey-200 (\\`#E5E5E5\\`)\n- Text: Grey-400 (\\`#9E9EA0\\`)\n- Cursor: not-allowed\n\n**Icon Button**\n- Background: Grey-100 (\\`#F5F5F5\\`)\n- Shape: 30px radius (or 50% for circular)\n- Padding: 6px\n- Hover: Grey-500 background\n\n### Cards & Containers\n\n- Background: White (\\`#FFFFFF\\`) — no visible card boundary in most cases\n- Border radius: 0px for product image cards (edge-to-edge imagery), 20px for interactive containers\n- Shadow: none — Nike uses no card shadows whatsoever\n- Hover: no lift effect on product cards; underline on text links within cards\n- Product cards: image on top (no radius), text metadata below with 12px gap\n- Category cards: full-bleed photography with text overlay on dark gradient\n- Transition: opacity 200ms ease for image swap on hover\n\n### Inputs & Forms\n\n- Background: Grey-100 (\\`#F5F5F5\\`)\n- Border: 1px solid \\`#CACACB\\` when visible, or borderless on search\n- Border radius: 24px (search inputs), 8px (form inputs)\n- Font: Helvetica Now Text, 16px\n- Focus: border shifts to \\`#111111\\` (border-active), 2px focus ring in \\`rgba(39, 93, 197, 1)\\`\n- Error: border \\`#D30005\\` (critical)\n- Placeholder: Grey-500 (\\`#707072\\`)\n- Transition: border-color 200ms ease\n\n### Navigation\n\n- Background: White (\\`#FFFFFF\\`), sticky\n- Height: ~60px desktop\n- Left: Nike Swoosh logo (24x24px SVG)\n- Center: Category links (New & Featured, Men, Women, Kids, Sale) in 16px/500 Helvetica Now Text Medium\n- Right: Search (24px radius input), Favorites, Cart icons\n- Hover: text color shifts to Grey-500 (\\`#707072\\`)\n- Mobile: hamburger menu, full-screen overlay\n- Top banner: promotional message bar with dark background (#111111) and white text\n\n### Image Treatment\n\n- Hero images: full-bleed, no border radius, edge-to-edge\n- Product grid: square (1:1) or 4:3 aspect ratio, no border radius\n- Category cards: 16:9 or 4:3, full-bleed with text overlay\n- Image placeholder: Grey-100 (\\`#F5F5F5\\`) solid background\n- Lazy loading: native loading=\"lazy\", skeleton uses #F5F5F5 bg\n- Product hover: secondary image swap (front → side view)\n\n### Promotional Banners\n\n- Full-width dark (\\`#111111\\`) background with white text\n- Tight padding (8-12px vertical)\n- Centered text, 12px/500 Helvetica Now Text Medium\n- Used for shipping promotions, member benefits, sale announcements\n\n## 5. Layout Principles\n\n### Spacing System\n\nBase unit: 4px (primary grid is 8px multiples)\n\n| Token | Value | Use |\n|-------|-------|-----|\n| space-1 | 4px | Tight icon gaps, inline spacing |\n| space-2 | 8px | Base unit, button icon gaps |\n| space-3 | 12px | Card internal padding, tight margins |\n| space-4 | 16px | Standard padding, nav spacing |\n| space-5 | 20px | Product card gaps |\n| space-6 | 24px | Section internal padding, grid gaps |\n| space-7 | 32px | Section breaks |\n| space-8 | 48px | Major section padding |\n| space-9 | 64px | Hero section padding |\n| space-10 | 80px | Large section spacing |\n\n### Grid & Container\n\n- Max container width: 1920px\n- Standard content width: ~1440px with horizontal padding\n- Product grid: 3-column on desktop, 2-column on tablet, 1-column on mobile\n- Category grid: 3-column with full-bleed images\n- Grid gap: 4-12px between product cards (intentionally tight)\n- Horizontal padding: 48px desktop, 24px tablet, 16px mobile\n\n### Whitespace Philosophy\n\nNike's whitespace strategy is deliberately aggressive — not in the luxurious, breathing way of a fashion brand, but in a compressed, high-density way that fills every pixel with either content or intentional absence. Product grids use minimal gaps (4-12px) to create a sense of abundance and choice. Section breaks are generous (48-80px) to separate shopping contexts. The overall effect is a store that feels packed with product while remaining navigable — like a well-organized athletic superstore.\n\n### Border Radius Scale\n\n| Value | Context |\n|-------|---------|\n| 0px | Product images, hero photography (sharp edges) |\n| 8px | Form inputs (non-search) |\n| 18px | Small interactive elements |\n| 20px | Containers, cards with UI content |\n| 24px | Search inputs, medium pills |\n| 30px | Buttons, tags, filters (full pill) |\n| 50% | Circular icon buttons, avatar placeholders |\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat | No shadow, no border | Default state for everything |\n| Divider | \\`0px -1px 0px 0px #E5E5E5 inset\\` | Subtle inset line between sections |\n| Focus | \\`0 0 0 2px rgba(39, 93, 197, 1)\\` | Keyboard focus ring |\n| Overlay | Dark scrim over photography | Text-on-image legibility |\n\nNike's elevation philosophy is radically flat. There are no card shadows, no hover lifts, no floating elements. Depth is communicated exclusively through color — dark sections recede, light sections advance, grey shifts indicate state changes. This flatness reinforces the athletic, no-nonsense brand personality: no visual frills, just direct communication. The only \"shadow\" in the entire system is a 1px inset divider line and the accessibility-required focus ring.\n\n### Decorative Depth\n\n- **Hero photography overlays**: Dark gradient scrims over full-bleed photography for text readability\n- **Product background gradients**: Colored backgrounds behind hero product shots (e.g., red shoe on red gradient)\n- **Banner bars**: Solid dark (#111111) promotional strips at page top\n\n## 7. Do's and Don'ts\n\n### Do\n\n- Use Nike Black (#111111) for all primary text — never pure #000000\n- Keep buttons pill-shaped (30px radius) and limited to primary/secondary variants\n- Use full-bleed, edge-to-edge photography for hero sections — no border radius on images\n- Let product photography provide all color vibrancy; keep UI monochromatic\n- Use uppercase Nike Futura ND ONLY for display headlines (96px+)\n- Maintain tight product grid gaps (4-12px) for a dense, abundant feel\n- Use Grey-100 (#F5F5F5) for all input and placeholder backgrounds\n- Reserve color exclusively for semantic meaning (red=error, green=success, blue=link)\n- Use weight 500 (Medium) for all interactive text elements\n\n### Don't\n\n- Don't add shadows to cards — Nike's elevation model is entirely flat\n- Don't use border radius on product imagery — only UI elements get rounded corners\n- Don't introduce brand colors beyond the grey scale for UI elements\n- Don't use Nike Futura ND below 24px — it's exclusively a display face\n- Don't add hover lift effects — Nike cards don't animate on hover\n- Don't use regular weight (400) for buttons or links — always use 500\n- Don't place colored backgrounds behind UI elements — color is reserved for product contexts\n- Don't use more than two levels of text hierarchy per card (title + body)\n- Don't add decorative dividers — the 1px inset is the only divider pattern\n- Don't soften the contrast — Nike's design deliberately pushes black-on-white to maximum\n\n## 8. Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <640px | Single column, hamburger nav, display text scales down, tight 16px padding |\n| Small Tablet | 640-768px | 2-column product grid begins, nav still collapsed |\n| Tablet | 768-960px | 2-column grids, category cards scale, horizontal padding 24px |\n| Small Desktop | 960-1024px | Nav expands to full horizontal, 3-column product grid |\n| Desktop | 1024-1440px | Full layout, expanded nav, 3-column grids, 48px padding |\n| Large Desktop | >1440px | Max-width container centered, increased margins, hero images full-bleed |\n\n### Touch Targets\n\n- Minimum touch target: 44x44px (WCAG AAA)\n- Mobile nav icons: 48x48px touch area\n- Product cards: full surface is tappable\n- Filter pills: minimum 36px height with 12px padding\n\n### Collapsing Strategy\n\n- **Navigation**: Full category links → hamburger menu below 960px; search, favorites, cart icons remain visible\n- **Product grids**: 3-col → 2-col at 960px → 1-col at 640px\n- **Hero sections**: Display text scales from 96px → 64px → 48px; hero images remain full-bleed at all sizes\n- **Category cards**: 3-col → 2-col → 1-col with maintained full-bleed imagery\n- **Section padding**: 80px → 48px → 32px → 24px as viewport narrows\n- **Promotional banner**: text wraps or truncates, maintains dark background\n\n### Image Behavior\n\n- Responsive images via Nike CDN (\\`c.static-nike.com\\`) with width parameters\n- Product images: srcset with multiple resolutions (w_320, w_640, w_960, w_1920)\n- Hero images: full-bleed at all breakpoints, aspect ratio shifts (16:9 desktop → 4:3 mobile)\n- Lazy loading: native loading=\"lazy\", grey-100 placeholder during load\n- Art direction: hero crops change between desktop and mobile compositions\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n\n- Primary CTA: Nike Black (\\`#111111\\`)\n- Background: White (\\`#FFFFFF\\`)\n- Secondary surface: Light Gray (\\`#F5F5F5\\`)\n- Heading text: Nike Black (\\`#111111\\`)\n- Body text / hover: Secondary Text (\\`#707072\\`)\n- Border: Border Secondary (\\`#CACACB\\`)\n- Error: Nike Red (\\`#D30005\\`)\n- Link: Link Blue (\\`#1151FF\\`)\n\n### Example Component Prompts\n\n- \"Create a product hero section with full-bleed edge-to-edge photography, no border radius, a dark gradient overlay for text, and a massive uppercase 96px/500 headline in Nike Futura style with 0.90 line-height and a Nike Black (#111111) pill button (30px radius)\"\n- \"Design a 3-column product card grid with square images (no border radius), 4px gap between cards, product name in 16px/500 Nike Black (#111111), price in 14px/500, and secondary text in Grey-500 (#707072)\"\n- \"Build a sticky white navigation bar with a left-aligned logo, centered category links in 16px/500 (#111111) with hover color #707072, and right-aligned search (24px radius, #F5F5F5 background), favorites, and cart icons\"\n- \"Create a promotional banner strip with #111111 background, white 12px/500 centered text, and 8px vertical padding — full width, no border radius\"\n- \"Design a secondary outlined button with transparent background, 1.5px #CACACB border, 30px pill radius, 16px/500 #111111 text, hover border darkening to #707072\"\n\n### Iteration Guide\n\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time\n2. Reference specific color names and hex codes from this document\n3. Remember: product photography is the color — UI stays monochromatic\n4. Use the grey scale for state changes: #F5F5F5 → #E5E5E5 → #CACACB → #707072\n5. If something feels too colorful in the UI, it probably is — Nike keeps UI greyscale\n6. Display type (Nike Futura) should ALWAYS be uppercase and never below 24px\n7. Body type (Helvetica Now) should almost always be weight 500 for interactive elements\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/notion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/notion.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const notionBrief = `# Design System Inspired by Notion\n\n## 1. Visual Theme & Atmosphere\n\nNotion's website embodies the philosophy of the tool itself: a blank canvas that gets out of your way. The design system is built on warm neutrals rather than cold grays, creating a distinctly approachable minimalism that feels like quality paper rather than sterile glass. The page canvas is pure white (\\`#ffffff\\`) but the text isn't pure black -- it's a warm near-black (\\`rgba(0,0,0,0.95)\\`) that softens the reading experience imperceptibly. The warm gray scale (\\`#f6f5f4\\`, \\`#31302e\\`, \\`#615d59\\`, \\`#a39e98\\`) carries subtle yellow-brown undertones, giving the interface a tactile, almost analog warmth.\n\nThe custom NotionInter font (a modified Inter) is the backbone of the system. At display sizes (64px), it uses aggressive negative letter-spacing (-2.125px), creating headlines that feel compressed and precise. The weight range is broader than typical systems: 400 for body, 500 for UI elements, 600 for semi-bold labels, and 700 for display headings. OpenType features \\`\"lnum\"\\` (lining numerals) and \\`\"locl\"\\` (localized forms) are enabled on larger text, adding typographic sophistication that rewards close reading.\n\nWhat makes Notion's visual language distinctive is its border philosophy. Rather than heavy borders or shadows, Notion uses ultra-thin \\`1px solid rgba(0,0,0,0.1)\\` borders -- borders that exist as whispers, barely perceptible division lines that create structure without weight. The shadow system is equally restrained: multi-layer stacks with cumulative opacity never exceeding 0.05, creating depth that's felt rather than seen.\n\n**Key Characteristics:**\n- NotionInter (modified Inter) with negative letter-spacing at display sizes (-2.125px at 64px)\n- Warm neutral palette: grays carry yellow-brown undertones (\\`#f6f5f4\\` warm white, \\`#31302e\\` warm dark)\n- Near-black text via \\`rgba(0,0,0,0.95)\\` -- not pure black, creating micro-warmth\n- Ultra-thin borders: \\`1px solid rgba(0,0,0,0.1)\\` throughout -- whisper-weight division\n- Multi-layer shadow stacks with sub-0.05 opacity for barely-there depth\n- Notion Blue (\\`#0075de\\`) as the singular accent color for CTAs and interactive elements\n- Pill badges (9999px radius) with tinted blue backgrounds for status indicators\n- 8px base spacing unit with an organic, non-rigid scale\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Notion Black** (\\`rgba(0,0,0,0.95)\\` / \\`#000000f2\\`): Primary text, headings, body copy. The 95% opacity softens pure black without sacrificing readability.\n- **Pure White** (\\`#ffffff\\`): Page background, card surfaces, button text on blue.\n- **Notion Blue** (\\`#0075de\\`): Primary CTA, link color, interactive accent -- the only saturated color in the core UI chrome.\n\n### Brand Secondary\n- **Deep Navy** (\\`#213183\\`): Secondary brand color, used sparingly for emphasis and dark feature sections.\n- **Active Blue** (\\`#005bab\\`): Button active/pressed state -- darker variant of Notion Blue.\n\n### Warm Neutral Scale\n- **Warm White** (\\`#f6f5f4\\`): Background surface tint, section alternation, subtle card fill. The yellow undertone is key.\n- **Warm Dark** (\\`#31302e\\`): Dark surface background, dark section text. Warmer than standard grays.\n- **Warm Gray 500** (\\`#615d59\\`): Secondary text, descriptions, muted labels.\n- **Warm Gray 300** (\\`#a39e98\\`): Placeholder text, disabled states, caption text.\n\n### Semantic Accent Colors\n- **Teal** (\\`#2a9d99\\`): Success states, positive indicators.\n- **Green** (\\`#1aae39\\`): Confirmation, completion badges.\n- **Orange** (\\`#dd5b00\\`): Warning states, attention indicators.\n- **Pink** (\\`#ff64c8\\`): Decorative accent, feature highlights.\n- **Purple** (\\`#391c57\\`): Premium features, deep accents.\n- **Brown** (\\`#523410\\`): Earthy accent, warm feature sections.\n\n### Interactive\n- **Link Blue** (\\`#0075de\\`): Primary link color with underline-on-hover.\n- **Link Light Blue** (\\`#62aef0\\`): Lighter link variant for dark backgrounds.\n- **Focus Blue** (\\`#097fe8\\`): Focus ring on interactive elements.\n- **Badge Blue Bg** (\\`#f2f9ff\\`): Pill badge background, tinted blue surface.\n- **Badge Blue Text** (\\`#097fe8\\`): Pill badge text, darker blue for readability.\n\n### Shadows & Depth\n- **Card Shadow** (\\`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px\\`): Multi-layer card elevation.\n- **Deep Shadow** (\\`rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px\\`): Five-layer deep elevation for modals and featured content.\n- **Whisper Border** (\\`1px solid rgba(0,0,0,0.1)\\`): Standard division border -- cards, dividers, sections.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: \\`NotionInter\\`, with fallbacks: \\`Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol\\`\n- **OpenType Features**: \\`\"lnum\"\\` (lining numerals) and \\`\"locl\"\\` (localized forms) enabled on display and heading text.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | NotionInter | 64px (4.00rem) | 700 | 1.00 (tight) | -2.125px | Maximum compression, billboard headlines |\n| Display Secondary | NotionInter | 54px (3.38rem) | 700 | 1.04 (tight) | -1.875px | Secondary hero, feature headlines |\n| Section Heading | NotionInter | 48px (3.00rem) | 700 | 1.00 (tight) | -1.5px | Feature section titles, with \\`\"lnum\"\\` |\n| Sub-heading Large | NotionInter | 40px (2.50rem) | 700 | 1.50 | normal | Card headings, feature sub-sections |\n| Sub-heading | NotionInter | 26px (1.63rem) | 700 | 1.23 (tight) | -0.625px | Section sub-titles, content headers |\n| Card Title | NotionInter | 22px (1.38rem) | 700 | 1.27 (tight) | -0.25px | Feature cards, list titles |\n| Body Large | NotionInter | 20px (1.25rem) | 600 | 1.40 | -0.125px | Introductions, feature descriptions |\n| Body | NotionInter | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |\n| Body Medium | NotionInter | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized UI text |\n| Body Semibold | NotionInter | 16px (1.00rem) | 600 | 1.50 | normal | Strong labels, active states |\n| Body Bold | NotionInter | 16px (1.00rem) | 700 | 1.50 | normal | Headlines at body size |\n| Nav / Button | NotionInter | 15px (0.94rem) | 600 | 1.33 | normal | Navigation links, button text |\n| Caption | NotionInter | 14px (0.88rem) | 500 | 1.43 | normal | Metadata, secondary labels |\n| Caption Light | NotionInter | 14px (0.88rem) | 400 | 1.43 | normal | Body captions, descriptions |\n| Badge | NotionInter | 12px (0.75rem) | 600 | 1.33 | 0.125px | Pill badges, tags, status labels |\n| Micro Label | NotionInter | 12px (0.75rem) | 400 | 1.33 | 0.125px | Small metadata, timestamps |\n\n### Principles\n- **Compression at scale**: NotionInter at display sizes uses -2.125px letter-spacing at 64px, progressively relaxing to -0.625px at 26px and normal at 16px. The compression creates density at headlines while maintaining readability at body sizes.\n- **Four-weight system**: 400 (body/reading), 500 (UI/interactive), 600 (emphasis/navigation), 700 (headings/display). The broader weight range compared to most systems allows nuanced hierarchy.\n- **Warm scaling**: Line height tightens as size increases -- 1.50 at body (16px), 1.23-1.27 at sub-headings, 1.00-1.04 at display. This creates denser, more impactful headlines.\n- **Badge micro-tracking**: The 12px badge text uses positive letter-spacing (0.125px) -- the only positive tracking in the system, creating wider, more legible small text.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Blue**\n- Background: \\`#0075de\\` (Notion Blue)\n- Text: \\`#ffffff\\`\n- Padding: 8px 16px\n- Radius: 4px (subtle)\n- Border: \\`1px solid transparent\\`\n- Hover: background darkens to \\`#005bab\\`\n- Active: scale(0.9) transform\n- Focus: \\`2px solid\\` focus outline, \\`var(--shadow-level-200)\\` shadow\n- Use: Primary CTA (\"Get Notion free\", \"Try it\")\n\n**Secondary / Tertiary**\n- Background: \\`rgba(0,0,0,0.05)\\` (translucent warm gray)\n- Text: \\`#000000\\` (near-black)\n- Padding: 8px 16px\n- Radius: 4px\n- Hover: text color shifts, scale(1.05)\n- Active: scale(0.9) transform\n- Use: Secondary actions, form submissions\n\n**Ghost / Link Button**\n- Background: transparent\n- Text: \\`rgba(0,0,0,0.95)\\`\n- Decoration: underline on hover\n- Use: Tertiary actions, inline links\n\n**Pill Badge Button**\n- Background: \\`#f2f9ff\\` (tinted blue)\n- Text: \\`#097fe8\\`\n- Padding: 4px 8px\n- Radius: 9999px (full pill)\n- Font: 12px weight 600\n- Use: Status badges, feature labels, \"New\" tags\n\n### Cards & Containers\n- Background: \\`#ffffff\\`\n- Border: \\`1px solid rgba(0,0,0,0.1)\\` (whisper border)\n- Radius: 12px (standard cards), 16px (featured/hero cards)\n- Shadow: \\`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px\\`\n- Hover: subtle shadow intensification\n- Image cards: 12px top radius, image fills top half\n\n### Inputs & Forms\n- Background: \\`#ffffff\\`\n- Text: \\`rgba(0,0,0,0.9)\\`\n- Border: \\`1px solid #dddddd\\`\n- Padding: 6px\n- Radius: 4px\n- Focus: blue outline ring\n- Placeholder: warm gray \\`#a39e98\\`\n\n### Navigation\n- Clean horizontal nav on white, not sticky\n- Brand logo left-aligned (33x34px icon + wordmark)\n- Links: NotionInter 15px weight 500-600, near-black text\n- Hover: color shift to \\`var(--color-link-primary-text-hover)\\`\n- CTA: blue pill button (\"Get Notion free\") right-aligned\n- Mobile: hamburger menu collapse\n- Product dropdowns with multi-level categorized menus\n\n### Image Treatment\n- Product screenshots with \\`1px solid rgba(0,0,0,0.1)\\` border\n- Top-rounded images: \\`12px 12px 0px 0px\\` radius\n- Dashboard/workspace preview screenshots dominate feature sections\n- Warm gradient backgrounds behind hero illustrations (decorative character illustrations)\n\n### Distinctive Components\n\n**Feature Cards with Illustrations**\n- Large illustrative headers (The Great Wave, product UI screenshots)\n- 12px radius card with whisper border\n- Title at 22px weight 700, description at 16px weight 400\n- Warm white (\\`#f6f5f4\\`) background variant for alternating sections\n\n**Trust Bar / Logo Grid**\n- Company logos (trusted teams section) in their brand colors\n- Horizontal scroll or grid layout with team counts\n- Metric display: large number + description pattern\n\n**Metric Cards**\n- Large number display (e.g., \"$4,200 ROI\")\n- NotionInter 40px+ weight 700 for the metric\n- Description below in warm gray body text\n- Whisper-bordered card container\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 3px, 4px, 5px, 6px, 7px, 8px, 11px, 12px, 14px, 16px, 24px, 32px\n- Non-rigid organic scale with fractional values (5.6px, 6.4px) for micro-adjustments\n\n### Grid & Container\n- Max content width: approximately 1200px\n- Hero: centered single-column with generous top padding (80-120px)\n- Feature sections: 2-3 column grids for cards\n- Full-width warm white (\\`#f6f5f4\\`) section backgrounds for alternation\n- Code/dashboard screenshots as contained with whisper border\n\n### Whitespace Philosophy\n- **Generous vertical rhythm**: 64-120px between major sections. Notion lets content breathe with vast vertical padding.\n- **Warm alternation**: White sections alternate with warm white (\\`#f6f5f4\\`) sections, creating gentle visual rhythm without harsh color breaks.\n- **Content-first density**: Body text blocks are compact (line-height 1.50) but surrounded by ample margin, creating islands of readable content in a sea of white space.\n\n### Border Radius Scale\n- Micro (4px): Buttons, inputs, functional interactive elements\n- Subtle (5px): Links, list items, menu items\n- Standard (8px): Small cards, containers, inline elements\n- Comfortable (12px): Standard cards, feature containers, image tops\n- Large (16px): Hero cards, featured content, promotional blocks\n- Full Pill (9999px): Badges, pills, status indicators\n- Circle (100%): Tab indicators, avatars\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Page background, text blocks |\n| Whisper (Level 1) | \\`1px solid rgba(0,0,0,0.1)\\` | Standard borders, card outlines, dividers |\n| Soft Card (Level 2) | 4-layer shadow stack (max opacity 0.04) | Content cards, feature blocks |\n| Deep Card (Level 3) | 5-layer shadow stack (max opacity 0.05, 52px blur) | Modals, featured panels, hero elements |\n| Focus (Accessibility) | \\`2px solid var(--focus-color)\\` outline | Keyboard focus on all interactive elements |\n\n**Shadow Philosophy**: Notion's shadow system uses multiple layers with extremely low individual opacity (0.01 to 0.05) that accumulate into soft, natural-looking elevation. The 4-layer card shadow spans from 1.04px to 18px blur, creating a gradient of depth rather than a single hard shadow. The 5-layer deep shadow extends to 52px blur at 0.05 opacity, producing ambient occlusion that feels like natural light rather than computer-generated depth. This layered approach makes elements feel embedded in the page rather than floating above it.\n\n### Decorative Depth\n- Hero section: decorative character illustrations (playful, hand-drawn style)\n- Section alternation: white to warm white (\\`#f6f5f4\\`) background shifts\n- No hard section borders -- separation comes from background color changes and spacing\n\n## 7. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <400px | Tight single column, minimal padding |\n| Mobile | 400-600px | Standard mobile, stacked layout |\n| Tablet Small | 600-768px | 2-column grids begin |\n| Tablet | 768-1080px | Full card grids, expanded padding |\n| Desktop Small | 1080-1200px | Standard desktop layout |\n| Desktop | 1200-1440px | Full layout, maximum content width |\n| Large Desktop | >1440px | Centered, generous margins |\n\n### Touch Targets\n- Buttons use comfortable padding (8px-16px vertical)\n- Navigation links at 15px with adequate spacing\n- Pill badges have 8px horizontal padding for tap targets\n- Mobile menu toggle uses standard hamburger button\n\n### Collapsing Strategy\n- Hero: 64px display -> scales to 40px -> 26px on mobile, maintains proportional letter-spacing\n- Navigation: horizontal links + blue CTA -> hamburger menu\n- Feature cards: 3-column -> 2-column -> single column stacked\n- Product screenshots: maintain aspect ratio with responsive images\n- Trust bar logos: grid -> horizontal scroll on mobile\n- Footer: multi-column -> stacked single column\n- Section spacing: 80px+ -> 48px on mobile\n\n### Image Behavior\n- Workspace screenshots maintain whisper border at all sizes\n- Hero illustrations scale proportionally\n- Product screenshots use responsive images with consistent border radius\n- Full-width warm white sections maintain edge-to-edge treatment\n\n## 8. Accessibility & States\n\n### Focus System\n- All interactive elements receive visible focus indicators\n- Focus outline: \\`2px solid\\` with focus color + shadow level 200\n- Tab navigation supported throughout all interactive components\n- High contrast text: near-black on white exceeds WCAG AAA (>14:1 ratio)\n\n### Interactive States\n- **Default**: Standard appearance with whisper borders\n- **Hover**: Color shift on text, scale(1.05) on buttons, underline on links\n- **Active/Pressed**: scale(0.9) transform, darker background variant\n- **Focus**: Blue outline ring with shadow reinforcement\n- **Disabled**: Warm gray (\\`#a39e98\\`) text, reduced opacity\n\n### Color Contrast\n- Primary text (rgba(0,0,0,0.95)) on white: ~18:1 ratio\n- Secondary text (#615d59) on white: ~5.5:1 ratio (WCAG AA)\n- Blue CTA (#0075de) on white: ~4.6:1 ratio (WCAG AA for large text)\n- Badge text (#097fe8) on badge bg (#f2f9ff): ~4.5:1 ratio (WCAG AA for large text)\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Notion Blue (\\`#0075de\\`)\n- Background: Pure White (\\`#ffffff\\`)\n- Alt Background: Warm White (\\`#f6f5f4\\`)\n- Heading text: Near-Black (\\`rgba(0,0,0,0.95)\\`)\n- Body text: Near-Black (\\`rgba(0,0,0,0.95)\\`)\n- Secondary text: Warm Gray 500 (\\`#615d59\\`)\n- Muted text: Warm Gray 300 (\\`#a39e98\\`)\n- Border: \\`1px solid rgba(0,0,0,0.1)\\`\n- Link: Notion Blue (\\`#0075de\\`)\n- Focus ring: Focus Blue (\\`#097fe8\\`)\n\n### Example Component Prompts\n- \"Create a hero section on white background. Headline at 64px NotionInter weight 700, line-height 1.00, letter-spacing -2.125px, color rgba(0,0,0,0.95). Subtitle at 20px weight 600, line-height 1.40, color #615d59. Blue CTA button (#0075de, 4px radius, 8px 16px padding, white text) and ghost button (transparent bg, near-black text, underline on hover).\"\n- \"Design a card: white background, 1px solid rgba(0,0,0,0.1) border, 12px radius. Use shadow stack: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px. Title at 22px NotionInter weight 700, letter-spacing -0.25px. Body at 16px weight 400, color #615d59.\"\n- \"Build a pill badge: #f2f9ff background, #097fe8 text, 9999px radius, 4px 8px padding, 12px NotionInter weight 600, letter-spacing 0.125px.\"\n- \"Create navigation: white header. NotionInter 15px weight 600 for links, near-black text. Blue pill CTA 'Get Notion free' right-aligned (#0075de bg, white text, 4px radius).\"\n- \"Design an alternating section layout: white sections alternate with warm white (#f6f5f4) sections. Each section has 64-80px vertical padding, max-width 1200px centered. Section heading at 48px weight 700, line-height 1.00, letter-spacing -1.5px.\"\n\n### Iteration Guide\n1. Always use warm neutrals -- Notion's grays have yellow-brown undertones (#f6f5f4, #31302e, #615d59, #a39e98), never blue-gray\n2. Letter-spacing scales with font size: -2.125px at 64px, -1.875px at 54px, -0.625px at 26px, normal at 16px\n3. Four weights: 400 (read), 500 (interact), 600 (emphasize), 700 (announce)\n4. Borders are whispers: 1px solid rgba(0,0,0,0.1) -- never heavier\n5. Shadows use 4-5 layers with individual opacity never exceeding 0.05\n6. The warm white (#f6f5f4) section background is essential for visual rhythm\n7. Pill badges (9999px) for status/tags, 4px radius for buttons and inputs\n8. Notion Blue (#0075de) is the only saturated color in core UI -- use it sparingly for CTAs and links\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/notion.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const notionBrief = `# Design System Inspired by Notion\n\n## 1. Visual Theme & Atmosphere\n\nNotion's website embodies the philosophy of the tool itself: a blank canvas that gets out of your way. The design system is built on warm neutrals rather than cold grays, creating a distinctly approachable minimalism that feels like quality paper rather than sterile glass. The page canvas is pure white (\\`#ffffff\\`) but the text isn't pure black -- it's a warm near-black (\\`rgba(0,0,0,0.95)\\`) that softens the reading experience imperceptibly. The warm gray scale (\\`#f6f5f4\\`, \\`#31302e\\`, \\`#615d59\\`, \\`#a39e98\\`) carries subtle yellow-brown undertones, giving the interface a tactile, almost analog warmth.\n\nThe custom NotionInter font (a modified Inter) is the backbone of the system. At display sizes (64px), it uses aggressive negative letter-spacing (-2.125px), creating headlines that feel compressed and precise. The weight range is broader than typical systems: 400 for body, 500 for UI elements, 600 for semi-bold labels, and 700 for display headings. OpenType features \\`\"lnum\"\\` (lining numerals) and \\`\"locl\"\\` (localized forms) are enabled on larger text, adding typographic sophistication that rewards close reading.\n\nWhat makes Notion's visual language distinctive is its border philosophy. Rather than heavy borders or shadows, Notion uses ultra-thin \\`1px solid rgba(0,0,0,0.1)\\` borders -- borders that exist as whispers, barely perceptible division lines that create structure without weight. The shadow system is equally restrained: multi-layer stacks with cumulative opacity never exceeding 0.05, creating depth that's felt rather than seen.\n\n**Key Characteristics:**\n- NotionInter (modified Inter) with negative letter-spacing at display sizes (-2.125px at 64px)\n- Warm neutral palette: grays carry yellow-brown undertones (\\`#f6f5f4\\` warm white, \\`#31302e\\` warm dark)\n- Near-black text via \\`rgba(0,0,0,0.95)\\` -- not pure black, creating micro-warmth\n- Ultra-thin borders: \\`1px solid rgba(0,0,0,0.1)\\` throughout -- whisper-weight division\n- Multi-layer shadow stacks with sub-0.05 opacity for barely-there depth\n- Notion Blue (\\`#0075de\\`) as the singular accent color for CTAs and interactive elements\n- Pill badges (9999px radius) with tinted blue backgrounds for status indicators\n- 8px base spacing unit with an organic, non-rigid scale\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Notion Black** (\\`rgba(0,0,0,0.95)\\` / \\`#000000f2\\`): Primary text, headings, body copy. The 95% opacity softens pure black without sacrificing readability.\n- **Pure White** (\\`#ffffff\\`): Page background, card surfaces, button text on blue.\n- **Notion Blue** (\\`#0075de\\`): Primary CTA, link color, interactive accent -- the only saturated color in the core UI chrome.\n\n### Brand Secondary\n- **Deep Navy** (\\`#213183\\`): Secondary brand color, used sparingly for emphasis and dark feature sections.\n- **Active Blue** (\\`#005bab\\`): Button active/pressed state -- darker variant of Notion Blue.\n\n### Warm Neutral Scale\n- **Warm White** (\\`#f6f5f4\\`): Background surface tint, section alternation, subtle card fill. The yellow undertone is key.\n- **Warm Dark** (\\`#31302e\\`): Dark surface background, dark section text. Warmer than standard grays.\n- **Warm Gray 500** (\\`#615d59\\`): Secondary text, descriptions, muted labels.\n- **Warm Gray 300** (\\`#a39e98\\`): Placeholder text, disabled states, caption text.\n\n### Semantic Accent Colors\n- **Teal** (\\`#2a9d99\\`): Success states, positive indicators.\n- **Green** (\\`#1aae39\\`): Confirmation, completion badges.\n- **Orange** (\\`#dd5b00\\`): Warning states, attention indicators.\n- **Pink** (\\`#ff64c8\\`): Decorative accent, feature highlights.\n- **Purple** (\\`#391c57\\`): Premium features, deep accents.\n- **Brown** (\\`#523410\\`): Earthy accent, warm feature sections.\n\n### Interactive\n- **Link Blue** (\\`#0075de\\`): Primary link color with underline-on-hover.\n- **Link Light Blue** (\\`#62aef0\\`): Lighter link variant for dark backgrounds.\n- **Focus Blue** (\\`#097fe8\\`): Focus ring on interactive elements.\n- **Badge Blue Bg** (\\`#f2f9ff\\`): Pill badge background, tinted blue surface.\n- **Badge Blue Text** (\\`#097fe8\\`): Pill badge text, darker blue for readability.\n\n### Shadows & Depth\n- **Card Shadow** (\\`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px\\`): Multi-layer card elevation.\n- **Deep Shadow** (\\`rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px\\`): Five-layer deep elevation for modals and featured content.\n- **Whisper Border** (\\`1px solid rgba(0,0,0,0.1)\\`): Standard division border -- cards, dividers, sections.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: \\`NotionInter\\`, with fallbacks: \\`Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol\\`\n- **OpenType Features**: \\`\"lnum\"\\` (lining numerals) and \\`\"locl\"\\` (localized forms) enabled on display and heading text.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | NotionInter | 64px (4.00rem) | 700 | 1.00 (tight) | -2.125px | Maximum compression, billboard headlines |\n| Display Secondary | NotionInter | 54px (3.38rem) | 700 | 1.04 (tight) | -1.875px | Secondary hero, feature headlines |\n| Section Heading | NotionInter | 48px (3.00rem) | 700 | 1.00 (tight) | -1.5px | Feature section titles, with \\`\"lnum\"\\` |\n| Sub-heading Large | NotionInter | 40px (2.50rem) | 700 | 1.50 | normal | Card headings, feature sub-sections |\n| Sub-heading | NotionInter | 26px (1.63rem) | 700 | 1.23 (tight) | -0.625px | Section sub-titles, content headers |\n| Card Title | NotionInter | 22px (1.38rem) | 700 | 1.27 (tight) | -0.25px | Feature cards, list titles |\n| Body Large | NotionInter | 20px (1.25rem) | 600 | 1.40 | -0.125px | Introductions, feature descriptions |\n| Body | NotionInter | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |\n| Body Medium | NotionInter | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized UI text |\n| Body Semibold | NotionInter | 16px (1.00rem) | 600 | 1.50 | normal | Strong labels, active states |\n| Body Bold | NotionInter | 16px (1.00rem) | 700 | 1.50 | normal | Headlines at body size |\n| Nav / Button | NotionInter | 15px (0.94rem) | 600 | 1.33 | normal | Navigation links, button text |\n| Caption | NotionInter | 14px (0.88rem) | 500 | 1.43 | normal | Metadata, secondary labels |\n| Caption Light | NotionInter | 14px (0.88rem) | 400 | 1.43 | normal | Body captions, descriptions |\n| Badge | NotionInter | 12px (0.75rem) | 600 | 1.33 | 0.125px | Pill badges, tags, status labels |\n| Micro Label | NotionInter | 12px (0.75rem) | 400 | 1.33 | 0.125px | Small metadata, timestamps |\n\n### Principles\n- **Compression at scale**: NotionInter at display sizes uses -2.125px letter-spacing at 64px, progressively relaxing to -0.625px at 26px and normal at 16px. The compression creates density at headlines while maintaining readability at body sizes.\n- **Four-weight system**: 400 (body/reading), 500 (UI/interactive), 600 (emphasis/navigation), 700 (headings/display). The broader weight range compared to most systems allows nuanced hierarchy.\n- **Warm scaling**: Line height tightens as size increases -- 1.50 at body (16px), 1.23-1.27 at sub-headings, 1.00-1.04 at display. This creates denser, more impactful headlines.\n- **Badge micro-tracking**: The 12px badge text uses positive letter-spacing (0.125px) -- the only positive tracking in the system, creating wider, more legible small text.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Blue**\n- Background: \\`#0075de\\` (Notion Blue)\n- Text: \\`#ffffff\\`\n- Padding: 8px 16px\n- Radius: 4px (subtle)\n- Border: \\`1px solid transparent\\`\n- Hover: background darkens to \\`#005bab\\`\n- Active: scale(0.9) transform\n- Focus: \\`2px solid\\` focus outline, \\`var(--shadow-level-200)\\` shadow\n- Use: Primary CTA (\"Get Notion free\", \"Try it\")\n\n**Secondary / Tertiary**\n- Background: \\`rgba(0,0,0,0.05)\\` (translucent warm gray)\n- Text: \\`#000000\\` (near-black)\n- Padding: 8px 16px\n- Radius: 4px\n- Hover: text color shifts, scale(1.05)\n- Active: scale(0.9) transform\n- Use: Secondary actions, form submissions\n\n**Ghost / Link Button**\n- Background: transparent\n- Text: \\`rgba(0,0,0,0.95)\\`\n- Decoration: underline on hover\n- Use: Tertiary actions, inline links\n\n**Pill Badge Button**\n- Background: \\`#f2f9ff\\` (tinted blue)\n- Text: \\`#097fe8\\`\n- Padding: 4px 8px\n- Radius: 9999px (full pill)\n- Font: 12px weight 600\n- Use: Status badges, feature labels, \"New\" tags\n\n### Cards & Containers\n- Background: \\`#ffffff\\`\n- Border: \\`1px solid rgba(0,0,0,0.1)\\` (whisper border)\n- Radius: 12px (standard cards), 16px (featured/hero cards)\n- Shadow: \\`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px\\`\n- Hover: subtle shadow intensification\n- Image cards: 12px top radius, image fills top half\n\n### Inputs & Forms\n- Background: \\`#ffffff\\`\n- Text: \\`rgba(0,0,0,0.9)\\`\n- Border: \\`1px solid #dddddd\\`\n- Padding: 6px\n- Radius: 4px\n- Focus: blue outline ring\n- Placeholder: warm gray \\`#a39e98\\`\n\n### Navigation\n- Clean horizontal nav on white, not sticky\n- Brand logo left-aligned (33x34px icon + wordmark)\n- Links: NotionInter 15px weight 500-600, near-black text\n- Hover: color shift to \\`var(--color-link-primary-text-hover)\\`\n- CTA: blue pill button (\"Get Notion free\") right-aligned\n- Mobile: hamburger menu collapse\n- Product dropdowns with multi-level categorized menus\n\n### Image Treatment\n- Product screenshots with \\`1px solid rgba(0,0,0,0.1)\\` border\n- Top-rounded images: \\`12px 12px 0px 0px\\` radius\n- Dashboard/workspace preview screenshots dominate feature sections\n- Warm gradient backgrounds behind hero illustrations (decorative character illustrations)\n\n### Distinctive Components\n\n**Feature Cards with Illustrations**\n- Large illustrative headers (The Great Wave, product UI screenshots)\n- 12px radius card with whisper border\n- Title at 22px weight 700, description at 16px weight 400\n- Warm white (\\`#f6f5f4\\`) background variant for alternating sections\n\n**Trust Bar / Logo Grid**\n- Company logos (trusted teams section) in their brand colors\n- Horizontal scroll or grid layout with team counts\n- Metric display: large number + description pattern\n\n**Metric Cards**\n- Large number display (e.g., \"$4,200 ROI\")\n- NotionInter 40px+ weight 700 for the metric\n- Description below in warm gray body text\n- Whisper-bordered card container\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 3px, 4px, 5px, 6px, 7px, 8px, 11px, 12px, 14px, 16px, 24px, 32px\n- Non-rigid organic scale with fractional values (5.6px, 6.4px) for micro-adjustments\n\n### Grid & Container\n- Max content width: approximately 1200px\n- Hero: centered single-column with generous top padding (80-120px)\n- Feature sections: 2-3 column grids for cards\n- Full-width warm white (\\`#f6f5f4\\`) section backgrounds for alternation\n- Code/dashboard screenshots as contained with whisper border\n\n### Whitespace Philosophy\n- **Generous vertical rhythm**: 64-120px between major sections. Notion lets content breathe with vast vertical padding.\n- **Warm alternation**: White sections alternate with warm white (\\`#f6f5f4\\`) sections, creating gentle visual rhythm without harsh color breaks.\n- **Content-first density**: Body text blocks are compact (line-height 1.50) but surrounded by ample margin, creating islands of readable content in a sea of white space.\n\n### Border Radius Scale\n- Micro (4px): Buttons, inputs, functional interactive elements\n- Subtle (5px): Links, list items, menu items\n- Standard (8px): Small cards, containers, inline elements\n- Comfortable (12px): Standard cards, feature containers, image tops\n- Large (16px): Hero cards, featured content, promotional blocks\n- Full Pill (9999px): Badges, pills, status indicators\n- Circle (100%): Tab indicators, avatars\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Page background, text blocks |\n| Whisper (Level 1) | \\`1px solid rgba(0,0,0,0.1)\\` | Standard borders, card outlines, dividers |\n| Soft Card (Level 2) | 4-layer shadow stack (max opacity 0.04) | Content cards, feature blocks |\n| Deep Card (Level 3) | 5-layer shadow stack (max opacity 0.05, 52px blur) | Modals, featured panels, hero elements |\n| Focus (Accessibility) | \\`2px solid var(--focus-color)\\` outline | Keyboard focus on all interactive elements |\n\n**Shadow Philosophy**: Notion's shadow system uses multiple layers with extremely low individual opacity (0.01 to 0.05) that accumulate into soft, natural-looking elevation. The 4-layer card shadow spans from 1.04px to 18px blur, creating a gradient of depth rather than a single hard shadow. The 5-layer deep shadow extends to 52px blur at 0.05 opacity, producing ambient occlusion that feels like natural light rather than computer-generated depth. This layered approach makes elements feel embedded in the page rather than floating above it.\n\n### Decorative Depth\n- Hero section: decorative character illustrations (playful, hand-drawn style)\n- Section alternation: white to warm white (\\`#f6f5f4\\`) background shifts\n- No hard section borders -- separation comes from background color changes and spacing\n\n## 7. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <400px | Tight single column, minimal padding |\n| Mobile | 400-600px | Standard mobile, stacked layout |\n| Tablet Small | 600-768px | 2-column grids begin |\n| Tablet | 768-1080px | Full card grids, expanded padding |\n| Desktop Small | 1080-1200px | Standard desktop layout |\n| Desktop | 1200-1440px | Full layout, maximum content width |\n| Large Desktop | >1440px | Centered, generous margins |\n\n### Touch Targets\n- Buttons use comfortable padding (8px-16px vertical)\n- Navigation links at 15px with adequate spacing\n- Pill badges have 8px horizontal padding for tap targets\n- Mobile menu toggle uses standard hamburger button\n\n### Collapsing Strategy\n- Hero: 64px display -> scales to 40px -> 26px on mobile, maintains proportional letter-spacing\n- Navigation: horizontal links + blue CTA -> hamburger menu\n- Feature cards: 3-column -> 2-column -> single column stacked\n- Product screenshots: maintain aspect ratio with responsive images\n- Trust bar logos: grid -> horizontal scroll on mobile\n- Footer: multi-column -> stacked single column\n- Section spacing: 80px+ -> 48px on mobile\n\n### Image Behavior\n- Workspace screenshots maintain whisper border at all sizes\n- Hero illustrations scale proportionally\n- Product screenshots use responsive images with consistent border radius\n- Full-width warm white sections maintain edge-to-edge treatment\n\n## 8. Accessibility & States\n\n### Focus System\n- All interactive elements receive visible focus indicators\n- Focus outline: \\`2px solid\\` with focus color + shadow level 200\n- Tab navigation supported throughout all interactive components\n- High contrast text: near-black on white exceeds WCAG AAA (>14:1 ratio)\n\n### Interactive States\n- **Default**: Standard appearance with whisper borders\n- **Hover**: Color shift on text, scale(1.05) on buttons, underline on links\n- **Active/Pressed**: scale(0.9) transform, darker background variant\n- **Focus**: Blue outline ring with shadow reinforcement\n- **Disabled**: Warm gray (\\`#a39e98\\`) text, reduced opacity\n\n### Color Contrast\n- Primary text (rgba(0,0,0,0.95)) on white: ~18:1 ratio\n- Secondary text (#615d59) on white: ~5.5:1 ratio (WCAG AA)\n- Blue CTA (#0075de) on white: ~4.6:1 ratio (WCAG AA for large text)\n- Badge text (#097fe8) on badge bg (#f2f9ff): ~4.5:1 ratio (WCAG AA for large text)\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Notion Blue (\\`#0075de\\`)\n- Background: Pure White (\\`#ffffff\\`)\n- Alt Background: Warm White (\\`#f6f5f4\\`)\n- Heading text: Near-Black (\\`rgba(0,0,0,0.95)\\`)\n- Body text: Near-Black (\\`rgba(0,0,0,0.95)\\`)\n- Secondary text: Warm Gray 500 (\\`#615d59\\`)\n- Muted text: Warm Gray 300 (\\`#a39e98\\`)\n- Border: \\`1px solid rgba(0,0,0,0.1)\\`\n- Link: Notion Blue (\\`#0075de\\`)\n- Focus ring: Focus Blue (\\`#097fe8\\`)\n\n### Example Component Prompts\n- \"Create a hero section on white background. Headline at 64px NotionInter weight 700, line-height 1.00, letter-spacing -2.125px, color rgba(0,0,0,0.95). Subtitle at 20px weight 600, line-height 1.40, color #615d59. Blue CTA button (#0075de, 4px radius, 8px 16px padding, white text) and ghost button (transparent bg, near-black text, underline on hover).\"\n- \"Design a card: white background, 1px solid rgba(0,0,0,0.1) border, 12px radius. Use shadow stack: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px. Title at 22px NotionInter weight 700, letter-spacing -0.25px. Body at 16px weight 400, color #615d59.\"\n- \"Build a pill badge: #f2f9ff background, #097fe8 text, 9999px radius, 4px 8px padding, 12px NotionInter weight 600, letter-spacing 0.125px.\"\n- \"Create navigation: white header. NotionInter 15px weight 600 for links, near-black text. Blue pill CTA 'Get Notion free' right-aligned (#0075de bg, white text, 4px radius).\"\n- \"Design an alternating section layout: white sections alternate with warm white (#f6f5f4) sections. Each section has 64-80px vertical padding, max-width 1200px centered. Section heading at 48px weight 700, line-height 1.00, letter-spacing -1.5px.\"\n\n### Iteration Guide\n1. Always use warm neutrals -- Notion's grays have yellow-brown undertones (#f6f5f4, #31302e, #615d59, #a39e98), never blue-gray\n2. Letter-spacing scales with font size: -2.125px at 64px, -1.875px at 54px, -0.625px at 26px, normal at 16px\n3. Four weights: 400 (read), 500 (interact), 600 (emphasize), 700 (announce)\n4. Borders are whispers: 1px solid rgba(0,0,0,0.1) -- never heavier\n5. Shadows use 4-5 layers with individual opacity never exceeding 0.05\n6. The warm white (#f6f5f4) section background is essential for visual rhythm\n7. Pill badges (9999px) for status/tags, 4px radius for buttons and inputs\n8. Notion Blue (#0075de) is the only saturated color in core UI -- use it sparingly for CTAs and links\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}