@hex-core/themes 0.2.4 → 0.2.6

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/nvidia.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const nvidiaBrief = `# Design System Inspired by NVIDIA\n\n## 1. Visual Theme & Atmosphere\n\nNVIDIA's website is a high-contrast, technology-forward experience that communicates raw computational power through design restraint. The page is built on a stark black (\\`#000000\\`) and white (\\`#ffffff\\`) foundation, punctuated by NVIDIA's signature green (\\`#76b900\\`) -- a color so specific it functions as a brand fingerprint. This is not the lush green of nature; it's the electric, lime-shifted green of GPU-rendered light, a color that sits between chartreuse and kelly green and immediately signals \"NVIDIA\" to anyone in technology.\n\nThe custom NVIDIA-EMEA font family (with Arial and Helvetica fallbacks) creates a clean, industrial typographic voice. Headings at 36px bold with tight 1.25 line-height create dense, authoritative blocks of text. The font lacks the geometric playfulness of Silicon Valley sans-serifs -- it's European, pragmatic, and engineering-focused. Body text runs at 15-16px, comfortable for reading but not generous, maintaining the sense that screen real estate is optimized like GPU memory.\n\nWhat distinguishes NVIDIA's design from other dark-background tech sites is the disciplined use of the green accent. The \\`#76b900\\` appears in borders (\\`2px solid #76b900\\`), link underlines (\\`underline 2px rgb(118, 185, 0)\\`), and CTAs -- but never as backgrounds or large surface areas on the main content. The green is a signal, not a surface. Combined with a deep shadow system (\\`rgba(0, 0, 0, 0.3) 0px 0px 5px\\`) and minimal border radius (1-2px), the overall effect is of precision engineering hardware rendered in pixels.\n\n**Key Characteristics:**\n- NVIDIA Green (\\`#76b900\\`) as pure accent -- borders, underlines, and interactive highlights only\n- Black (\\`#000000\\`) dominant background with white (\\`#ffffff\\`) text on dark sections\n- NVIDIA-EMEA custom font with Arial/Helvetica fallback -- industrial, European, clean\n- Tight line-heights (1.25 for headings) creating dense, authoritative text blocks\n- Minimal border radius (1-2px) -- sharp, engineered corners throughout\n- Green-bordered buttons (\\`2px solid #76b900\\`) as primary interactive pattern\n- Font Awesome 6 Pro/Sharp icon system at weight 900 for sharp iconography\n- Multi-framework architecture (PrimeReact, Fluent UI, Element Plus) enabling rich interactive components\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **NVIDIA Green** (\\`#76b900\\`): The signature -- borders, link underlines, CTA outlines, active indicators. Never used as large surface fills.\n- **True Black** (\\`#000000\\`): Primary page background, text on light surfaces, dominant tone.\n- **Pure White** (\\`#ffffff\\`): Text on dark backgrounds, light section backgrounds, card surfaces.\n\n### Extended Brand Palette\n- **NVIDIA Green Light** (\\`#bff230\\`): Bright lime accent for highlights and hover states.\n- **Orange 400** (\\`#df6500\\`): Warm accent for alerts, featured badges, or energy-related contexts.\n- **Yellow 300** (\\`#ef9100\\`): Secondary warm accent, product category highlights.\n- **Yellow 050** (\\`#feeeb2\\`): Light warm surface for callout backgrounds.\n\n### Status & Semantic\n- **Red 500** (\\`#e52020\\`): Error states, destructive actions, critical alerts.\n- **Red 800** (\\`#650b0b\\`): Deep red for severe warning backgrounds.\n- **Green 500** (\\`#3f8500\\`): Success states, positive indicators (darker than brand green).\n- **Blue 700** (\\`#0046a4\\`): Informational accents, link hover alternative.\n\n### Decorative\n- **Purple 800** (\\`#4d1368\\`): Deep purple for gradient ends, premium/AI contexts.\n- **Purple 100** (\\`#f9d4ff\\`): Light purple surface tint.\n- **Fuchsia 700** (\\`#8c1c55\\`): Rich accent for special promotions or featured content.\n\n### Neutral Scale\n- **Gray 300** (\\`#a7a7a7\\`): Muted text, disabled labels.\n- **Gray 400** (\\`#898989\\`): Secondary text, metadata.\n- **Gray 500** (\\`#757575\\`): Tertiary text, placeholders, footers.\n- **Gray Border** (\\`#5e5e5e\\`): Subtle borders, divider lines.\n- **Near Black** (\\`#1a1a1a\\`): Dark surfaces, card backgrounds on black pages.\n\n### Interactive States\n- **Link Default (dark bg)** (\\`#ffffff\\`): White links on dark backgrounds.\n- **Link Default (light bg)** (\\`#000000\\`): Black links with green underline on light backgrounds.\n- **Link Hover** (\\`#3860be\\`): Blue shift on hover across all link variants.\n- **Button Hover** (\\`#1eaedb\\`): Teal highlight for button hover states.\n- **Button Active** (\\`#007fff\\`): Bright blue for active/pressed button states.\n- **Focus Ring** (\\`#000000 solid 2px\\`): Black outline for keyboard focus.\n\n### Shadows & Depth\n- **Card Shadow** (\\`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px\\`): Subtle ambient shadow for elevated cards.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: \\`NVIDIA-EMEA\\`, with fallbacks: \\`Arial, Helvetica, sans-serif\\`\n- **Icon Font**: \\`Font Awesome 6 Pro\\` (weight 900 for solid icons, 700 for regular)\n- **Icon Sharp**: \\`Font Awesome 6 Sharp\\` (weight 300 for light icons, 400 for regular)\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | NVIDIA-EMEA | 36px (2.25rem) | 700 | 1.25 (tight) | normal | Maximum impact headlines |\n| Section Heading | NVIDIA-EMEA | 24px (1.50rem) | 700 | 1.25 (tight) | normal | Section titles, card headings |\n| Sub-heading | NVIDIA-EMEA | 22px (1.38rem) | 400 | 1.75 (relaxed) | normal | Feature descriptions, subtitles |\n| Card Title | NVIDIA-EMEA | 20px (1.25rem) | 700 | 1.25 (tight) | normal | Card and module headings |\n| Body Large | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.67 (relaxed) | normal | Emphasized body, lead paragraphs |\n| Body | NVIDIA-EMEA | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |\n| Body Bold | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.50 | normal | Strong labels, nav items |\n| Body Small | NVIDIA-EMEA | 15px (0.94rem) | 400 | 1.67 (relaxed) | normal | Secondary content, descriptions |\n| Body Small Bold | NVIDIA-EMEA | 15px (0.94rem) | 700 | 1.50 | normal | Emphasized secondary content |\n| Button Large | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.25 (tight) | normal | Primary CTA buttons |\n| Button | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.25 (tight) | normal | Standard buttons |\n| Button Compact | NVIDIA-EMEA | 14.4px (0.90rem) | 700 | 1.00 (tight) | 0.144px | Small/compact buttons |\n| Link | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | Navigation links |\n| Link Uppercase | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | \\`text-transform: uppercase\\`, nav labels |\n| Caption | NVIDIA-EMEA | 14px (0.88rem) | 600 | 1.50 | normal | Metadata, timestamps |\n| Caption Small | NVIDIA-EMEA | 12px (0.75rem) | 400 | 1.25 (tight) | normal | Fine print, legal |\n| Micro Label | NVIDIA-EMEA | 10px (0.63rem) | 700 | 1.50 | normal | \\`text-transform: uppercase\\`, tiny badges |\n| Micro | NVIDIA-EMEA | 11px (0.69rem) | 700 | 1.00 (tight) | normal | Smallest UI text |\n\n### Principles\n- **Bold as the default voice**: NVIDIA leans heavily on weight 700 for headings, buttons, links, and labels. The 400 weight is reserved for body text and descriptions -- everything else is bold, projecting confidence and authority.\n- **Tight headings, relaxed body**: Heading line-height is consistently 1.25 (tight), while body text relaxes to 1.50-1.67. This contrast creates visual density at the top of content blocks and comfortable readability in paragraphs.\n- **Uppercase for navigation**: Link labels use \\`text-transform: uppercase\\` with weight 700, creating a navigation voice that reads like hardware specification labels.\n- **No decorative tracking**: Letter-spacing is normal throughout, except for compact buttons (0.144px). The font itself carries the industrial character without manipulation.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (Green Border)**\n- Background: \\`transparent\\`\n- Text: \\`#000000\\`\n- Padding: 11px 13px\n- Border: \\`2px solid #76b900\\`\n- Radius: 2px\n- Font: 16px weight 700\n- Hover: background \\`#1eaedb\\`, text \\`#ffffff\\`\n- Active: background \\`#007fff\\`, text \\`#ffffff\\`, border \\`1px solid #003eff\\`, scale(1)\n- Focus: background \\`#1eaedb\\`, text \\`#ffffff\\`, outline \\`#000000 solid 2px\\`, opacity 0.9\n- Use: Primary CTA (\"Learn More\", \"Explore Solutions\")\n\n**Secondary (Green Border Thin)**\n- Background: transparent\n- Border: \\`1px solid #76b900\\`\n- Radius: 2px\n- Use: Secondary actions, alternative CTAs\n\n**Compact / Inline**\n- Font: 14.4px weight 700\n- Letter-spacing: 0.144px\n- Line-height: 1.00\n- Use: Inline CTAs, compact navigation\n\n### Cards & Containers\n- Background: \\`#ffffff\\` (light) or \\`#1a1a1a\\` (dark sections)\n- Border: none (clean edges) or \\`1px solid #5e5e5e\\`\n- Radius: 2px\n- Shadow: \\`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px\\` for elevated cards\n- Hover: shadow intensification\n- Padding: 16-24px internal\n\n### Links\n- **On Dark Background**: \\`#ffffff\\`, no underline, hover shifts to \\`#3860be\\`\n- **On Light Background**: \\`#000000\\` or \\`#1a1a1a\\`, underline \\`2px solid #76b900\\`, hover shifts to \\`#3860be\\`, underline removed\n- **Green Links**: \\`#76b900\\`, hover shifts to \\`#3860be\\`\n- **Muted Links**: \\`#666666\\`, hover shifts to \\`#3860be\\`\n\n### Navigation\n- Dark black background (\\`#000000\\`)\n- Logo left-aligned, prominent NVIDIA wordmark\n- Links: NVIDIA-EMEA 14px weight 700 uppercase, \\`#ffffff\\`\n- Hover: color shift, no underline change\n- Mega-menu dropdowns for product categories\n- Sticky on scroll with backdrop\n\n### Image Treatment\n- Product/GPU renders as hero images, often full-width\n- Screenshot images with subtle shadow for depth\n- Green gradient overlays on dark hero sections\n- Circular avatar containers with 50% radius\n\n### Distinctive Components\n\n**Product Cards**\n- Clean white or dark card with minimal radius (2px)\n- Green accent border or underline on title\n- Bold heading + lighter description pattern\n- CTA with green border at bottom\n\n**Tech Spec Tables**\n- Industrial grid layouts\n- Alternating row backgrounds (subtle gray shift)\n- Bold labels, regular values\n- Green highlights for key metrics\n\n**Cookie/Consent Banner**\n- Fixed bottom positioning\n- Rounded buttons (2px radius)\n- Gray border treatments\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 15px\n- Primary padding values: 8px, 11px, 13px, 16px, 24px, 32px\n- Section spacing: 48-80px vertical padding\n\n### Grid & Container\n- Max content width: approximately 1200px (contained)\n- Full-width hero sections with contained text\n- Feature sections: 2-3 column grids for product cards\n- Single-column for article/blog content\n- Sidebar layouts for documentation\n\n### Whitespace Philosophy\n- **Purposeful density**: NVIDIA uses tighter spacing than typical SaaS sites, reflecting the density of technical content. White space exists to separate concepts, not to create luxury emptiness.\n- **Section rhythm**: Dark sections alternate with white sections, using background color (not just spacing) to separate content blocks.\n- **Card density**: Product cards sit close together with 16-20px gaps, creating a catalog feel rather than a gallery feel.\n\n### Border Radius Scale\n- Micro (1px): Inline spans, tiny elements\n- Standard (2px): Buttons, cards, containers, inputs -- the default for nearly everything\n- Circle (50%): Avatar images, circular tab indicators\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page backgrounds, inline text |\n| Subtle (Level 1) | \\`rgba(0,0,0,0.3) 0px 0px 5px 0px\\` | Standard cards, modals |\n| Border (Level 1b) | \\`1px solid #5e5e5e\\` | Content dividers, section borders |\n| Green accent (Level 2) | \\`2px solid #76b900\\` | Active elements, CTAs, selected items |\n| Focus (Accessibility) | \\`2px solid #000000\\` outline | Keyboard focus ring |\n\n**Shadow Philosophy**: NVIDIA's depth system is minimal and utilitarian. There is essentially one shadow value -- a 5px ambient blur at 30% opacity -- used sparingly for cards and modals. The primary depth signal is not shadow but _color contrast_: black backgrounds next to white sections, green borders on black surfaces. This creates hardware-like visual layering where depth comes from material difference, not simulated light.\n\n### Decorative Depth\n- Green gradient washes behind hero content\n- Dark-to-darker gradients (black to near-black) for section transitions\n- No glassmorphism or blur effects -- clarity over atmosphere\n\n## 7. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <375px | Compact single column, reduced padding |\n| Mobile | 375-425px | Standard mobile layout |\n| Mobile Large | 425-600px | Wider mobile, some 2-col hints |\n| Tablet Small | 600-768px | 2-column grids begin |\n| Tablet | 768-1024px | Full card grids, expanded nav |\n| Desktop | 1024-1350px | Standard desktop layout |\n| Large Desktop | >1350px | Maximum content width, generous margins |\n\n### Touch Targets\n- Buttons use 11px 13px padding for comfortable tap targets\n- Navigation links at 14px uppercase with adequate spacing\n- Green-bordered buttons provide high-contrast touch targets on dark backgrounds\n- Mobile: hamburger menu collapse with full-screen overlay\n\n### Collapsing Strategy\n- Hero: 36px heading scales down proportionally\n- Navigation: full horizontal nav collapses to hamburger menu at ~1024px\n- Product cards: 3-column to 2-column to single column stacked\n- Footer: multi-column grid collapses to single stacked column\n- Section spacing: 64-80px reduces to 32-48px on mobile\n- Images: maintain aspect ratio, scale to container width\n\n### Image Behavior\n- GPU/product renders maintain high resolution at all sizes\n- Hero images scale proportionally with viewport\n- Card images use consistent aspect ratios\n- Full-bleed dark sections maintain edge-to-edge treatment\n\n## 8. Responsive Behavior (Extended)\n\n### Typography Scaling\n- Display 36px scales to ~24px on mobile\n- Section headings 24px scale to ~20px on mobile\n- Body text maintains 15-16px across all breakpoints\n- Button text maintains 16px for consistent tap targets\n\n### Dark/Light Section Strategy\n- Dark sections (black bg, white text) alternate with light sections (white bg, black text)\n- The green accent remains consistent across both surface types\n- On dark: links are white, underlines are green\n- On light: links are black, underlines are green\n- This alternation creates natural scroll rhythm and content grouping\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary accent: NVIDIA Green (\\`#76b900\\`)\n- Background dark: True Black (\\`#000000\\`)\n- Background light: Pure White (\\`#ffffff\\`)\n- Heading text (dark bg): White (\\`#ffffff\\`)\n- Heading text (light bg): Black (\\`#000000\\`)\n- Body text (light bg): Black (\\`#000000\\`) or Near Black (\\`#1a1a1a\\`)\n- Body text (dark bg): White (\\`#ffffff\\`) or Gray 300 (\\`#a7a7a7\\`)\n- Link hover: Blue (\\`#3860be\\`)\n- Border accent: \\`2px solid #76b900\\`\n- Button hover: Teal (\\`#1eaedb\\`)\n\n### Example Component Prompts\n- \"Create a hero section on black background. Headline at 36px NVIDIA-EMEA weight 700, line-height 1.25, color #ffffff. Subtitle at 18px weight 400, line-height 1.67, color #a7a7a7. CTA button with transparent background, 2px solid #76b900 border, 2px radius, 11px 13px padding, text #ffffff. Hover: background #1eaedb, text white.\"\n- \"Design a product card: white background, 2px border-radius, box-shadow rgba(0,0,0,0.3) 0px 0px 5px. Title at 20px NVIDIA-EMEA weight 700, line-height 1.25, color #000000. Body at 15px weight 400, line-height 1.67, color #757575. Green underline accent on title: border-bottom 2px solid #76b900.\"\n- \"Build a navigation bar: #000000 background, sticky top. NVIDIA logo left-aligned. Links at 14px NVIDIA-EMEA weight 700 uppercase, color #ffffff. Hover: color #3860be. Green-bordered CTA button right-aligned.\"\n- \"Create a dark feature section: #000000 background. Section label at 14px weight 700 uppercase, color #76b900. Heading at 24px weight 700, color #ffffff. Description at 16px weight 400, color #a7a7a7. Three product cards in a row with 20px gap.\"\n- \"Design a footer: #000000 background. Multi-column layout with link groups. Links at 14px weight 400, color #a7a7a7. Hover: color #76b900. Bottom bar with legal text at 12px, color #757575.\"\n\n### Iteration Guide\n1. Always use \\`#76b900\\` as accent, never as a background fill -- it's a signal color for borders, underlines, and highlights\n2. Buttons are transparent with green borders by default -- filled backgrounds appear only on hover/active states\n3. Weight 700 is the dominant voice for all interactive and heading elements; 400 is only for body paragraphs\n4. Border radius is 2px for everything -- this sharp, minimal rounding is core to the industrial aesthetic\n5. Dark sections use white text; light sections use black text -- green accent works identically on both\n6. Link hover is always \\`#3860be\\` (blue) regardless of the link's default color\n7. Line-height 1.25 for headings, 1.50-1.67 for body text -- maintain this contrast for visual hierarchy\n8. Navigation uses uppercase 14px bold -- this hardware-label typography is part of the brand voice\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;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/nvidia.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const nvidiaBrief = `# Design System Inspired by NVIDIA\n\n## 1. Visual Theme & Atmosphere\n\nNVIDIA's website is a high-contrast, technology-forward experience that communicates raw computational power through design restraint. The page is built on a stark black (\\`#000000\\`) and white (\\`#ffffff\\`) foundation, punctuated by NVIDIA's signature green (\\`#76b900\\`) -- a color so specific it functions as a brand fingerprint. This is not the lush green of nature; it's the electric, lime-shifted green of GPU-rendered light, a color that sits between chartreuse and kelly green and immediately signals \"NVIDIA\" to anyone in technology.\n\nThe custom NVIDIA-EMEA font family (with Arial and Helvetica fallbacks) creates a clean, industrial typographic voice. Headings at 36px bold with tight 1.25 line-height create dense, authoritative blocks of text. The font lacks the geometric playfulness of Silicon Valley sans-serifs -- it's European, pragmatic, and engineering-focused. Body text runs at 15-16px, comfortable for reading but not generous, maintaining the sense that screen real estate is optimized like GPU memory.\n\nWhat distinguishes NVIDIA's design from other dark-background tech sites is the disciplined use of the green accent. The \\`#76b900\\` appears in borders (\\`2px solid #76b900\\`), link underlines (\\`underline 2px rgb(118, 185, 0)\\`), and CTAs -- but never as backgrounds or large surface areas on the main content. The green is a signal, not a surface. Combined with a deep shadow system (\\`rgba(0, 0, 0, 0.3) 0px 0px 5px\\`) and minimal border radius (1-2px), the overall effect is of precision engineering hardware rendered in pixels.\n\n**Key Characteristics:**\n- NVIDIA Green (\\`#76b900\\`) as pure accent -- borders, underlines, and interactive highlights only\n- Black (\\`#000000\\`) dominant background with white (\\`#ffffff\\`) text on dark sections\n- NVIDIA-EMEA custom font with Arial/Helvetica fallback -- industrial, European, clean\n- Tight line-heights (1.25 for headings) creating dense, authoritative text blocks\n- Minimal border radius (1-2px) -- sharp, engineered corners throughout\n- Green-bordered buttons (\\`2px solid #76b900\\`) as primary interactive pattern\n- Font Awesome 6 Pro/Sharp icon system at weight 900 for sharp iconography\n- Multi-framework architecture (PrimeReact, Fluent UI, Element Plus) enabling rich interactive components\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **NVIDIA Green** (\\`#76b900\\`): The signature -- borders, link underlines, CTA outlines, active indicators. Never used as large surface fills.\n- **True Black** (\\`#000000\\`): Primary page background, text on light surfaces, dominant tone.\n- **Pure White** (\\`#ffffff\\`): Text on dark backgrounds, light section backgrounds, card surfaces.\n\n### Extended Brand Palette\n- **NVIDIA Green Light** (\\`#bff230\\`): Bright lime accent for highlights and hover states.\n- **Orange 400** (\\`#df6500\\`): Warm accent for alerts, featured badges, or energy-related contexts.\n- **Yellow 300** (\\`#ef9100\\`): Secondary warm accent, product category highlights.\n- **Yellow 050** (\\`#feeeb2\\`): Light warm surface for callout backgrounds.\n\n### Status & Semantic\n- **Red 500** (\\`#e52020\\`): Error states, destructive actions, critical alerts.\n- **Red 800** (\\`#650b0b\\`): Deep red for severe warning backgrounds.\n- **Green 500** (\\`#3f8500\\`): Success states, positive indicators (darker than brand green).\n- **Blue 700** (\\`#0046a4\\`): Informational accents, link hover alternative.\n\n### Decorative\n- **Purple 800** (\\`#4d1368\\`): Deep purple for gradient ends, premium/AI contexts.\n- **Purple 100** (\\`#f9d4ff\\`): Light purple surface tint.\n- **Fuchsia 700** (\\`#8c1c55\\`): Rich accent for special promotions or featured content.\n\n### Neutral Scale\n- **Gray 300** (\\`#a7a7a7\\`): Muted text, disabled labels.\n- **Gray 400** (\\`#898989\\`): Secondary text, metadata.\n- **Gray 500** (\\`#757575\\`): Tertiary text, placeholders, footers.\n- **Gray Border** (\\`#5e5e5e\\`): Subtle borders, divider lines.\n- **Near Black** (\\`#1a1a1a\\`): Dark surfaces, card backgrounds on black pages.\n\n### Interactive States\n- **Link Default (dark bg)** (\\`#ffffff\\`): White links on dark backgrounds.\n- **Link Default (light bg)** (\\`#000000\\`): Black links with green underline on light backgrounds.\n- **Link Hover** (\\`#3860be\\`): Blue shift on hover across all link variants.\n- **Button Hover** (\\`#1eaedb\\`): Teal highlight for button hover states.\n- **Button Active** (\\`#007fff\\`): Bright blue for active/pressed button states.\n- **Focus Ring** (\\`#000000 solid 2px\\`): Black outline for keyboard focus.\n\n### Shadows & Depth\n- **Card Shadow** (\\`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px\\`): Subtle ambient shadow for elevated cards.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: \\`NVIDIA-EMEA\\`, with fallbacks: \\`Arial, Helvetica, sans-serif\\`\n- **Icon Font**: \\`Font Awesome 6 Pro\\` (weight 900 for solid icons, 700 for regular)\n- **Icon Sharp**: \\`Font Awesome 6 Sharp\\` (weight 300 for light icons, 400 for regular)\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | NVIDIA-EMEA | 36px (2.25rem) | 700 | 1.25 (tight) | normal | Maximum impact headlines |\n| Section Heading | NVIDIA-EMEA | 24px (1.50rem) | 700 | 1.25 (tight) | normal | Section titles, card headings |\n| Sub-heading | NVIDIA-EMEA | 22px (1.38rem) | 400 | 1.75 (relaxed) | normal | Feature descriptions, subtitles |\n| Card Title | NVIDIA-EMEA | 20px (1.25rem) | 700 | 1.25 (tight) | normal | Card and module headings |\n| Body Large | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.67 (relaxed) | normal | Emphasized body, lead paragraphs |\n| Body | NVIDIA-EMEA | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |\n| Body Bold | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.50 | normal | Strong labels, nav items |\n| Body Small | NVIDIA-EMEA | 15px (0.94rem) | 400 | 1.67 (relaxed) | normal | Secondary content, descriptions |\n| Body Small Bold | NVIDIA-EMEA | 15px (0.94rem) | 700 | 1.50 | normal | Emphasized secondary content |\n| Button Large | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.25 (tight) | normal | Primary CTA buttons |\n| Button | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.25 (tight) | normal | Standard buttons |\n| Button Compact | NVIDIA-EMEA | 14.4px (0.90rem) | 700 | 1.00 (tight) | 0.144px | Small/compact buttons |\n| Link | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | Navigation links |\n| Link Uppercase | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | \\`text-transform: uppercase\\`, nav labels |\n| Caption | NVIDIA-EMEA | 14px (0.88rem) | 600 | 1.50 | normal | Metadata, timestamps |\n| Caption Small | NVIDIA-EMEA | 12px (0.75rem) | 400 | 1.25 (tight) | normal | Fine print, legal |\n| Micro Label | NVIDIA-EMEA | 10px (0.63rem) | 700 | 1.50 | normal | \\`text-transform: uppercase\\`, tiny badges |\n| Micro | NVIDIA-EMEA | 11px (0.69rem) | 700 | 1.00 (tight) | normal | Smallest UI text |\n\n### Principles\n- **Bold as the default voice**: NVIDIA leans heavily on weight 700 for headings, buttons, links, and labels. The 400 weight is reserved for body text and descriptions -- everything else is bold, projecting confidence and authority.\n- **Tight headings, relaxed body**: Heading line-height is consistently 1.25 (tight), while body text relaxes to 1.50-1.67. This contrast creates visual density at the top of content blocks and comfortable readability in paragraphs.\n- **Uppercase for navigation**: Link labels use \\`text-transform: uppercase\\` with weight 700, creating a navigation voice that reads like hardware specification labels.\n- **No decorative tracking**: Letter-spacing is normal throughout, except for compact buttons (0.144px). The font itself carries the industrial character without manipulation.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (Green Border)**\n- Background: \\`transparent\\`\n- Text: \\`#000000\\`\n- Padding: 11px 13px\n- Border: \\`2px solid #76b900\\`\n- Radius: 2px\n- Font: 16px weight 700\n- Hover: background \\`#1eaedb\\`, text \\`#ffffff\\`\n- Active: background \\`#007fff\\`, text \\`#ffffff\\`, border \\`1px solid #003eff\\`, scale(1)\n- Focus: background \\`#1eaedb\\`, text \\`#ffffff\\`, outline \\`#000000 solid 2px\\`, opacity 0.9\n- Use: Primary CTA (\"Learn More\", \"Explore Solutions\")\n\n**Secondary (Green Border Thin)**\n- Background: transparent\n- Border: \\`1px solid #76b900\\`\n- Radius: 2px\n- Use: Secondary actions, alternative CTAs\n\n**Compact / Inline**\n- Font: 14.4px weight 700\n- Letter-spacing: 0.144px\n- Line-height: 1.00\n- Use: Inline CTAs, compact navigation\n\n### Cards & Containers\n- Background: \\`#ffffff\\` (light) or \\`#1a1a1a\\` (dark sections)\n- Border: none (clean edges) or \\`1px solid #5e5e5e\\`\n- Radius: 2px\n- Shadow: \\`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px\\` for elevated cards\n- Hover: shadow intensification\n- Padding: 16-24px internal\n\n### Links\n- **On Dark Background**: \\`#ffffff\\`, no underline, hover shifts to \\`#3860be\\`\n- **On Light Background**: \\`#000000\\` or \\`#1a1a1a\\`, underline \\`2px solid #76b900\\`, hover shifts to \\`#3860be\\`, underline removed\n- **Green Links**: \\`#76b900\\`, hover shifts to \\`#3860be\\`\n- **Muted Links**: \\`#666666\\`, hover shifts to \\`#3860be\\`\n\n### Navigation\n- Dark black background (\\`#000000\\`)\n- Logo left-aligned, prominent NVIDIA wordmark\n- Links: NVIDIA-EMEA 14px weight 700 uppercase, \\`#ffffff\\`\n- Hover: color shift, no underline change\n- Mega-menu dropdowns for product categories\n- Sticky on scroll with backdrop\n\n### Image Treatment\n- Product/GPU renders as hero images, often full-width\n- Screenshot images with subtle shadow for depth\n- Green gradient overlays on dark hero sections\n- Circular avatar containers with 50% radius\n\n### Distinctive Components\n\n**Product Cards**\n- Clean white or dark card with minimal radius (2px)\n- Green accent border or underline on title\n- Bold heading + lighter description pattern\n- CTA with green border at bottom\n\n**Tech Spec Tables**\n- Industrial grid layouts\n- Alternating row backgrounds (subtle gray shift)\n- Bold labels, regular values\n- Green highlights for key metrics\n\n**Cookie/Consent Banner**\n- Fixed bottom positioning\n- Rounded buttons (2px radius)\n- Gray border treatments\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 15px\n- Primary padding values: 8px, 11px, 13px, 16px, 24px, 32px\n- Section spacing: 48-80px vertical padding\n\n### Grid & Container\n- Max content width: approximately 1200px (contained)\n- Full-width hero sections with contained text\n- Feature sections: 2-3 column grids for product cards\n- Single-column for article/blog content\n- Sidebar layouts for documentation\n\n### Whitespace Philosophy\n- **Purposeful density**: NVIDIA uses tighter spacing than typical SaaS sites, reflecting the density of technical content. White space exists to separate concepts, not to create luxury emptiness.\n- **Section rhythm**: Dark sections alternate with white sections, using background color (not just spacing) to separate content blocks.\n- **Card density**: Product cards sit close together with 16-20px gaps, creating a catalog feel rather than a gallery feel.\n\n### Border Radius Scale\n- Micro (1px): Inline spans, tiny elements\n- Standard (2px): Buttons, cards, containers, inputs -- the default for nearly everything\n- Circle (50%): Avatar images, circular tab indicators\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page backgrounds, inline text |\n| Subtle (Level 1) | \\`rgba(0,0,0,0.3) 0px 0px 5px 0px\\` | Standard cards, modals |\n| Border (Level 1b) | \\`1px solid #5e5e5e\\` | Content dividers, section borders |\n| Green accent (Level 2) | \\`2px solid #76b900\\` | Active elements, CTAs, selected items |\n| Focus (Accessibility) | \\`2px solid #000000\\` outline | Keyboard focus ring |\n\n**Shadow Philosophy**: NVIDIA's depth system is minimal and utilitarian. There is essentially one shadow value -- a 5px ambient blur at 30% opacity -- used sparingly for cards and modals. The primary depth signal is not shadow but _color contrast_: black backgrounds next to white sections, green borders on black surfaces. This creates hardware-like visual layering where depth comes from material difference, not simulated light.\n\n### Decorative Depth\n- Green gradient washes behind hero content\n- Dark-to-darker gradients (black to near-black) for section transitions\n- No glassmorphism or blur effects -- clarity over atmosphere\n\n## 7. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <375px | Compact single column, reduced padding |\n| Mobile | 375-425px | Standard mobile layout |\n| Mobile Large | 425-600px | Wider mobile, some 2-col hints |\n| Tablet Small | 600-768px | 2-column grids begin |\n| Tablet | 768-1024px | Full card grids, expanded nav |\n| Desktop | 1024-1350px | Standard desktop layout |\n| Large Desktop | >1350px | Maximum content width, generous margins |\n\n### Touch Targets\n- Buttons use 11px 13px padding for comfortable tap targets\n- Navigation links at 14px uppercase with adequate spacing\n- Green-bordered buttons provide high-contrast touch targets on dark backgrounds\n- Mobile: hamburger menu collapse with full-screen overlay\n\n### Collapsing Strategy\n- Hero: 36px heading scales down proportionally\n- Navigation: full horizontal nav collapses to hamburger menu at ~1024px\n- Product cards: 3-column to 2-column to single column stacked\n- Footer: multi-column grid collapses to single stacked column\n- Section spacing: 64-80px reduces to 32-48px on mobile\n- Images: maintain aspect ratio, scale to container width\n\n### Image Behavior\n- GPU/product renders maintain high resolution at all sizes\n- Hero images scale proportionally with viewport\n- Card images use consistent aspect ratios\n- Full-bleed dark sections maintain edge-to-edge treatment\n\n## 8. Responsive Behavior (Extended)\n\n### Typography Scaling\n- Display 36px scales to ~24px on mobile\n- Section headings 24px scale to ~20px on mobile\n- Body text maintains 15-16px across all breakpoints\n- Button text maintains 16px for consistent tap targets\n\n### Dark/Light Section Strategy\n- Dark sections (black bg, white text) alternate with light sections (white bg, black text)\n- The green accent remains consistent across both surface types\n- On dark: links are white, underlines are green\n- On light: links are black, underlines are green\n- This alternation creates natural scroll rhythm and content grouping\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary accent: NVIDIA Green (\\`#76b900\\`)\n- Background dark: True Black (\\`#000000\\`)\n- Background light: Pure White (\\`#ffffff\\`)\n- Heading text (dark bg): White (\\`#ffffff\\`)\n- Heading text (light bg): Black (\\`#000000\\`)\n- Body text (light bg): Black (\\`#000000\\`) or Near Black (\\`#1a1a1a\\`)\n- Body text (dark bg): White (\\`#ffffff\\`) or Gray 300 (\\`#a7a7a7\\`)\n- Link hover: Blue (\\`#3860be\\`)\n- Border accent: \\`2px solid #76b900\\`\n- Button hover: Teal (\\`#1eaedb\\`)\n\n### Example Component Prompts\n- \"Create a hero section on black background. Headline at 36px NVIDIA-EMEA weight 700, line-height 1.25, color #ffffff. Subtitle at 18px weight 400, line-height 1.67, color #a7a7a7. CTA button with transparent background, 2px solid #76b900 border, 2px radius, 11px 13px padding, text #ffffff. Hover: background #1eaedb, text white.\"\n- \"Design a product card: white background, 2px border-radius, box-shadow rgba(0,0,0,0.3) 0px 0px 5px. Title at 20px NVIDIA-EMEA weight 700, line-height 1.25, color #000000. Body at 15px weight 400, line-height 1.67, color #757575. Green underline accent on title: border-bottom 2px solid #76b900.\"\n- \"Build a navigation bar: #000000 background, sticky top. NVIDIA logo left-aligned. Links at 14px NVIDIA-EMEA weight 700 uppercase, color #ffffff. Hover: color #3860be. Green-bordered CTA button right-aligned.\"\n- \"Create a dark feature section: #000000 background. Section label at 14px weight 700 uppercase, color #76b900. Heading at 24px weight 700, color #ffffff. Description at 16px weight 400, color #a7a7a7. Three product cards in a row with 20px gap.\"\n- \"Design a footer: #000000 background. Multi-column layout with link groups. Links at 14px weight 400, color #a7a7a7. Hover: color #76b900. Bottom bar with legal text at 12px, color #757575.\"\n\n### Iteration Guide\n1. Always use \\`#76b900\\` as accent, never as a background fill -- it's a signal color for borders, underlines, and highlights\n2. Buttons are transparent with green borders by default -- filled backgrounds appear only on hover/active states\n3. Weight 700 is the dominant voice for all interactive and heading elements; 400 is only for body paragraphs\n4. Border radius is 2px for everything -- this sharp, minimal rounding is core to the industrial aesthetic\n5. Dark sections use white text; light sections use black text -- green accent works identically on both\n6. Link hover is always \\`#3860be\\` (blue) regardless of the link's default color\n7. Line-height 1.25 for headings, 1.50-1.67 for body text -- maintain this contrast for visual hierarchy\n8. Navigation uses uppercase 14px bold -- this hardware-label typography is part of the brand voice\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;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/ollama.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const ollamaBrief = `# Design System Inspired by Ollama\n\n## 1. Visual Theme & Atmosphere\n\nOllama's interface is radical minimalism taken to its logical conclusion — a pure-white void where content floats without decoration, shadow, or color. The design philosophy mirrors the product itself: strip away everything unnecessary until only the essential tool remains. This is the digital equivalent of a Dieter Rams object — every pixel earns its place, and the absence of design IS the design.\n\nThe entire page exists in pure grayscale. There is zero chromatic color in the interface — no brand blue, no accent green, no semantic red. The only colors that exist are shades between pure black (\\`#000000\\`) and pure white (\\`#ffffff\\`), creating a monochrome environment that lets the user's mental model of \"open models\" remain uncolored by brand opinion. The Ollama llama mascot, rendered in simple black line art, is the only illustration — and even it's monochrome.\n\nWhat makes Ollama distinctive is the combination of SF Pro Rounded (Apple's rounded system font) with an exclusively pill-shaped geometry (9999px radius on everything interactive). The rounded letterforms + rounded buttons + rounded containers create a cohesive \"softness language\" that makes a developer CLI tool feel approachable and friendly rather than intimidating. This is minimalism with warmth — not cold Swiss-style grid minimalism, but the kind where the edges are literally softened.\n\n**Key Characteristics:**\n- Pure white canvas with zero chromatic color — completely grayscale\n- SF Pro Rounded headlines creating a distinctively Apple-like softness\n- Binary border-radius system: 12px (containers) or 9999px (everything interactive)\n- Zero shadows — depth comes exclusively from background color shifts and borders\n- Pill-shaped geometry on all interactive elements (buttons, tabs, inputs, tags)\n- The Ollama llama as the sole illustration — black line art, no color\n- Extreme content restraint — the homepage is short, focused, and uncluttered\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure Black** (\\`#000000\\`): Primary headlines, primary links, and the darkest text. The only \"color\" that demands attention.\n- **Near Black** (\\`#262626\\`): Button text on light surfaces, secondary headline weight.\n- **Darkest Surface** (\\`#090909\\`): The darkest possible surface — barely distinguishable from pure black, used for footer or dark containers.\n\n### Surface & Background\n- **Pure White** (\\`#ffffff\\`): The primary page background — not off-white, not cream, pure white. Button surfaces for secondary actions.\n- **Snow** (\\`#fafafa\\`): The subtlest possible surface distinction from white — used for section backgrounds and barely-elevated containers.\n- **Light Gray** (\\`#e5e5e5\\`): Button backgrounds, borders, and the primary containment color. The workhorse neutral.\n\n### Neutrals & Text\n- **Stone** (\\`#737373\\`): Secondary body text, footer links, and de-emphasized content. The primary \"muted\" tone.\n- **Mid Gray** (\\`#525252\\`): Emphasized secondary text, slightly darker than Stone.\n- **Silver** (\\`#a3a3a3\\`): Tertiary text, placeholders, and deeply de-emphasized metadata.\n- **Button Text Dark** (\\`#404040\\`): Specific to white-surface button text.\n\n### Semantic & Accent\n- **Ring Blue** (\\`#3b82f6\\` at 50%): The ONLY non-gray color in the entire system — Tailwind's default focus ring, used exclusively for keyboard accessibility. Never visible in normal interaction flow.\n- **Border Light** (\\`#d4d4d4\\`): A slightly darker gray for white-surface button borders.\n\n### Gradient System\n- **None.** Ollama uses absolutely no gradients. Visual separation comes from flat color blocks and single-pixel borders. This is a deliberate, almost philosophical design choice.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: \\`SF Pro Rounded\\`, with fallbacks: \\`system-ui, -apple-system, system-ui\\`\n- **Body / UI**: \\`ui-sans-serif\\`, with fallbacks: \\`system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji\\`\n- **Monospace**: \\`ui-monospace\\`, with fallbacks: \\`SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New\\`\n\n*Note: SF Pro Rounded is Apple's system font — it renders with rounded terminals on macOS/iOS and falls back to the system sans-serif on other platforms.*\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display / Hero | SF Pro Rounded | 48px (3rem) | 500 | 1.00 (tight) | normal | Maximum impact, rounded letterforms |\n| Section Heading | SF Pro Rounded | 36px (2.25rem) | 500 | 1.11 (tight) | normal | Feature section titles |\n| Sub-heading | SF Pro Rounded / ui-sans-serif | 30px (1.88rem) | 400–500 | 1.20 (tight) | normal | Card headings, feature names |\n| Card Title | ui-sans-serif | 24px (1.5rem) | 400 | 1.33 | normal | Medium emphasis headings |\n| Body Large | ui-sans-serif | 18px (1.13rem) | 400–500 | 1.56 | normal | Hero descriptions, button text |\n| Body / Link | ui-sans-serif | 16px (1rem) | 400–500 | 1.50 | normal | Standard body text, navigation |\n| Caption | ui-sans-serif | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, descriptions |\n| Small | ui-sans-serif | 12px (0.75rem) | 400 | 1.33 | normal | Smallest sans-serif text |\n| Code Body | ui-monospace | 16px (1rem) | 400 | 1.50 | normal | Inline code, commands |\n| Code Caption | ui-monospace | 14px (0.88rem) | 400 | 1.43 | normal | Code snippets, secondary |\n| Code Small | ui-monospace | 12px (0.75rem) | 400–700 | 1.63 | normal | Tags, labels |\n\n### Principles\n- **Rounded display, standard body**: SF Pro Rounded carries display headlines with its distinctive rounded terminals, while the standard system sans handles all body text. The rounded font IS the brand expression.\n- **Weight restraint**: Only two weights matter — 400 (regular) for body and 500 (medium) for headings. No bold, no light, no black weight. This extreme restraint reinforces the minimal philosophy.\n- **Tight display, comfortable body**: Headlines compress to 1.0 line-height, while body text relaxes to 1.43–1.56. The contrast creates clear hierarchy without needing weight contrast.\n- **Monospace for developer identity**: Code blocks and terminal commands appear throughout as primary content, using the system monospace stack.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Gray Pill (Primary)**\n- Background: Light Gray (\\`#e5e5e5\\`)\n- Text: Near Black (\\`#262626\\`)\n- Padding: 10px 24px\n- Border: thin solid Light Gray (\\`1px solid #e5e5e5\\`)\n- Radius: pill-shaped (9999px)\n- The primary action button — understated, grayscale, always pill-shaped\n\n**White Pill (Secondary)**\n- Background: Pure White (\\`#ffffff\\`)\n- Text: Button Text Dark (\\`#404040\\`)\n- Padding: 10px 24px\n- Border: thin solid Border Light (\\`1px solid #d4d4d4\\`)\n- Radius: pill-shaped (9999px)\n- Secondary action — visually lighter than Gray Pill\n\n**Black Pill (CTA)**\n- Background: Pure Black (\\`#000000\\`)\n- Text: Pure White (\\`#ffffff\\`)\n- Radius: pill-shaped (9999px)\n- Inferred from \"Create account\" and \"Explore\" buttons\n- Maximum emphasis — black on white\n\n### Cards & Containers\n- Background: Pure White or Snow (\\`#fafafa\\`)\n- Border: thin solid Light Gray (\\`1px solid #e5e5e5\\`) when needed\n- Radius: comfortably rounded (12px) — the ONLY non-pill radius in the system\n- Shadow: **none** — zero shadows on any element\n- Hover: likely subtle background shift or border darkening\n\n### Inputs & Forms\n- Background: Pure White\n- Border: \\`1px solid #e5e5e5\\`\n- Radius: pill-shaped (9999px) — search inputs and form fields are pill-shaped\n- Focus: Ring Blue (\\`#3b82f6\\` at 50%) ring\n- Placeholder: Silver (\\`#a3a3a3\\`)\n\n### Navigation\n- Clean horizontal nav with minimal elements\n- Logo: Ollama llama icon + wordmark in black\n- Links: \"Models\", \"Docs\", \"Pricing\" in black at 16px, weight 400\n- Search bar: pill-shaped with placeholder text\n- Right side: \"Sign in\" link + \"Download\" black pill CTA\n- No borders, no background — transparent nav on white page\n\n### Image Treatment\n- The Ollama llama mascot is the only illustration — black line art on white\n- Code screenshots/terminal outputs shown in bordered containers (12px radius)\n- Integration logos displayed as simple icons in a grid\n- No photographs, no gradients, no decorative imagery\n\n### Distinctive Components\n\n**Tab Pills**\n- Pill-shaped tab selectors (e.g., \"Coding\" | \"OpenClaw\")\n- Active: Light Gray bg; Inactive: transparent\n- All pill-shaped (9999px)\n\n**Model Tags**\n- Small pill-shaped tags (e.g., \"ollama\", \"launch\", \"claude\")\n- Light Gray background, dark text\n- The primary way to browse models\n\n**Terminal Command Block**\n- Monospace code showing \\`ollama run\\` commands\n- Minimal styling — just a bordered 12px-radius container\n- Copy button integrated\n\n**Integration Grid**\n- Grid of integration logos (Codex, Claude Code, OpenCode, LangChain, etc.)\n- Each in a bordered pill or card with icon + name\n- Tabbed by category (Coding, Documents & RAG, Automation, Chat)\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 6px, 8px, 9px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 88px, 112px\n- Button padding: 10px 24px (consistent across all buttons)\n- Card internal padding: approximately 24–32px\n- Section vertical spacing: very generous (88px–112px)\n\n### Grid & Container\n- Max container width: approximately 1024–1280px, centered\n- Hero: centered single-column with llama illustration\n- Feature sections: 2-column layout (text left, code right)\n- Integration grid: responsive multi-column\n- Footer: clean single-row\n\n### Whitespace Philosophy\n- **Emptiness as luxury**: The page is remarkably short and sparse — no feature section overstays its welcome. Each concept gets minimal but sufficient space.\n- **Content density is low by design**: Where other AI companies pack feature after feature, Ollama presents three ideas (run models, use with apps, integrations) and stops.\n- **The white space IS the brand**: Pure white space with zero decoration communicates \"this tool gets out of your way.\"\n\n### Border Radius Scale\n- Comfortably rounded (12px): The sole container radius — code blocks, cards, panels\n- Pill-shaped (9999px): Everything interactive — buttons, tabs, inputs, tags, badges\n\n*This binary system is extreme and distinctive. There is no 4px, no 8px, no gradient of roundness. Elements are either containers (12px) or interactive (pill).*\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Page background, most content |\n| Bordered (Level 1) | \\`1px solid #e5e5e5\\` | Cards, code blocks, buttons |\n\n**Shadow Philosophy**: Ollama uses **zero shadows**. This is not an oversight — it's a deliberate design decision. Every other major AI product site uses at least subtle shadows. Ollama's flat, shadowless approach creates a paper-like experience where elements are distinguished purely by background color and single-pixel borders. Depth is communicated through **content hierarchy and typography weight**, not visual layering.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use pure white (\\`#ffffff\\`) as the page background — never off-white or cream\n- Use pill-shaped (9999px) radius on all interactive elements — buttons, tabs, inputs, tags\n- Use 12px radius on all non-interactive containers — code blocks, cards, panels\n- Keep the palette strictly grayscale — no chromatic colors except the blue focus ring\n- Use SF Pro Rounded at weight 500 for display headings — the rounded terminals are the brand expression\n- Maintain zero shadows — depth comes from borders and background shifts only\n- Keep content density low — each section should present one clear idea\n- Use monospace for terminal commands and code — it's primary content, not decoration\n- Keep all buttons at 10px 24px padding with pill shape — consistency is absolute\n\n### Don't\n- Don't introduce any chromatic color — no brand blue, no accent green, no warm tones\n- Don't use border-radius between 12px and 9999px — the system is binary\n- Don't add shadows to any element — the flat aesthetic is intentional\n- Don't use font weights above 500 — no bold, no black weight\n- Don't add decorative illustrations beyond the llama mascot\n- Don't use gradients anywhere — flat blocks and borders only\n- Don't overcomplicate the layout — two columns maximum, no complex grids\n- Don't use borders heavier than 1px — containment is always the lightest possible touch\n- Don't add hover animations or transitions — interactions should feel instant and direct\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <640px | Single column, stacked everything, hamburger nav |\n| Small Tablet | 640–768px | Minor adjustments to spacing |\n| Tablet | 768–850px | 2-column layouts begin |\n| Desktop | 850–1024px | Standard layout, expanded features |\n| Large Desktop | 1024–1280px | Maximum content width |\n\n### Touch Targets\n- All buttons are pill-shaped with generous padding (10px 24px)\n- Navigation links at comfortable 16px size\n- Minimum touch area easily exceeds 44x44px\n\n### Collapsing Strategy\n- **Navigation**: Collapses to hamburger menu on mobile\n- **Feature sections**: 2-column → stacked single column\n- **Hero text**: 48px → 36px → 30px progressive scaling\n- **Integration grid**: Multi-column → 2-column → single column\n- **Code blocks**: Horizontal scroll maintained\n\n### Image Behavior\n- Llama mascot scales proportionally\n- Code blocks maintain monospace formatting\n- Integration icons reflow to fewer columns\n- No art direction changes\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text: \"Pure Black (#000000)\"\n- Page Background: \"Pure White (#ffffff)\"\n- Secondary Text: \"Stone (#737373)\"\n- Button Background: \"Light Gray (#e5e5e5)\"\n- Borders: \"Light Gray (#e5e5e5)\"\n- Muted Text: \"Silver (#a3a3a3)\"\n- Dark Text: \"Near Black (#262626)\"\n- Subtle Surface: \"Snow (#fafafa)\"\n\n### Example Component Prompts\n- \"Create a hero section on pure white (#ffffff) with an illustration centered above a headline at 48px SF Pro Rounded weight 500, line-height 1.0. Use Pure Black (#000000) text. Below, add a black pill-shaped CTA button (9999px radius, 10px 24px padding) and a gray pill button.\"\n- \"Design a code block with a 12px border-radius, 1px solid Light Gray (#e5e5e5) border on white background. Use ui-monospace at 16px for the terminal command. No shadow.\"\n- \"Build a tab bar with pill-shaped tabs (9999px radius). Active tab: Light Gray (#e5e5e5) background, Near Black (#262626) text. Inactive: transparent background, Stone (#737373) text.\"\n- \"Create an integration card grid. Each card is a bordered pill (9999px radius) or a 12px-radius card with 1px solid #e5e5e5 border. Icon + name inside. Grid of 4 columns on desktop.\"\n- \"Design a navigation bar: transparent background, no border. Ollama logo on the left, 3 text links (Pure Black, 16px, weight 400), pill search input in the center, 'Sign in' text link and black pill 'Download' button on the right.\"\n\n### Iteration Guide\n1. Focus on ONE component at a time\n2. Keep all values grayscale — \"Stone (#737373)\" not \"use a light color\"\n3. Always specify pill (9999px) or container (12px) radius — nothing in between\n4. Shadows are always zero — never add them\n5. Weight is always 400 or 500 — never bold\n6. If something feels too decorated, remove it — less is always more for Ollama\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;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/ollama.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const ollamaBrief = `# Design System Inspired by Ollama\n\n## 1. Visual Theme & Atmosphere\n\nOllama's interface is radical minimalism taken to its logical conclusion — a pure-white void where content floats without decoration, shadow, or color. The design philosophy mirrors the product itself: strip away everything unnecessary until only the essential tool remains. This is the digital equivalent of a Dieter Rams object — every pixel earns its place, and the absence of design IS the design.\n\nThe entire page exists in pure grayscale. There is zero chromatic color in the interface — no brand blue, no accent green, no semantic red. The only colors that exist are shades between pure black (\\`#000000\\`) and pure white (\\`#ffffff\\`), creating a monochrome environment that lets the user's mental model of \"open models\" remain uncolored by brand opinion. The Ollama llama mascot, rendered in simple black line art, is the only illustration — and even it's monochrome.\n\nWhat makes Ollama distinctive is the combination of SF Pro Rounded (Apple's rounded system font) with an exclusively pill-shaped geometry (9999px radius on everything interactive). The rounded letterforms + rounded buttons + rounded containers create a cohesive \"softness language\" that makes a developer CLI tool feel approachable and friendly rather than intimidating. This is minimalism with warmth — not cold Swiss-style grid minimalism, but the kind where the edges are literally softened.\n\n**Key Characteristics:**\n- Pure white canvas with zero chromatic color — completely grayscale\n- SF Pro Rounded headlines creating a distinctively Apple-like softness\n- Binary border-radius system: 12px (containers) or 9999px (everything interactive)\n- Zero shadows — depth comes exclusively from background color shifts and borders\n- Pill-shaped geometry on all interactive elements (buttons, tabs, inputs, tags)\n- The Ollama llama as the sole illustration — black line art, no color\n- Extreme content restraint — the homepage is short, focused, and uncluttered\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure Black** (\\`#000000\\`): Primary headlines, primary links, and the darkest text. The only \"color\" that demands attention.\n- **Near Black** (\\`#262626\\`): Button text on light surfaces, secondary headline weight.\n- **Darkest Surface** (\\`#090909\\`): The darkest possible surface — barely distinguishable from pure black, used for footer or dark containers.\n\n### Surface & Background\n- **Pure White** (\\`#ffffff\\`): The primary page background — not off-white, not cream, pure white. Button surfaces for secondary actions.\n- **Snow** (\\`#fafafa\\`): The subtlest possible surface distinction from white — used for section backgrounds and barely-elevated containers.\n- **Light Gray** (\\`#e5e5e5\\`): Button backgrounds, borders, and the primary containment color. The workhorse neutral.\n\n### Neutrals & Text\n- **Stone** (\\`#737373\\`): Secondary body text, footer links, and de-emphasized content. The primary \"muted\" tone.\n- **Mid Gray** (\\`#525252\\`): Emphasized secondary text, slightly darker than Stone.\n- **Silver** (\\`#a3a3a3\\`): Tertiary text, placeholders, and deeply de-emphasized metadata.\n- **Button Text Dark** (\\`#404040\\`): Specific to white-surface button text.\n\n### Semantic & Accent\n- **Ring Blue** (\\`#3b82f6\\` at 50%): The ONLY non-gray color in the entire system — Tailwind's default focus ring, used exclusively for keyboard accessibility. Never visible in normal interaction flow.\n- **Border Light** (\\`#d4d4d4\\`): A slightly darker gray for white-surface button borders.\n\n### Gradient System\n- **None.** Ollama uses absolutely no gradients. Visual separation comes from flat color blocks and single-pixel borders. This is a deliberate, almost philosophical design choice.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: \\`SF Pro Rounded\\`, with fallbacks: \\`system-ui, -apple-system, system-ui\\`\n- **Body / UI**: \\`ui-sans-serif\\`, with fallbacks: \\`system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji\\`\n- **Monospace**: \\`ui-monospace\\`, with fallbacks: \\`SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New\\`\n\n*Note: SF Pro Rounded is Apple's system font — it renders with rounded terminals on macOS/iOS and falls back to the system sans-serif on other platforms.*\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display / Hero | SF Pro Rounded | 48px (3rem) | 500 | 1.00 (tight) | normal | Maximum impact, rounded letterforms |\n| Section Heading | SF Pro Rounded | 36px (2.25rem) | 500 | 1.11 (tight) | normal | Feature section titles |\n| Sub-heading | SF Pro Rounded / ui-sans-serif | 30px (1.88rem) | 400–500 | 1.20 (tight) | normal | Card headings, feature names |\n| Card Title | ui-sans-serif | 24px (1.5rem) | 400 | 1.33 | normal | Medium emphasis headings |\n| Body Large | ui-sans-serif | 18px (1.13rem) | 400–500 | 1.56 | normal | Hero descriptions, button text |\n| Body / Link | ui-sans-serif | 16px (1rem) | 400–500 | 1.50 | normal | Standard body text, navigation |\n| Caption | ui-sans-serif | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, descriptions |\n| Small | ui-sans-serif | 12px (0.75rem) | 400 | 1.33 | normal | Smallest sans-serif text |\n| Code Body | ui-monospace | 16px (1rem) | 400 | 1.50 | normal | Inline code, commands |\n| Code Caption | ui-monospace | 14px (0.88rem) | 400 | 1.43 | normal | Code snippets, secondary |\n| Code Small | ui-monospace | 12px (0.75rem) | 400–700 | 1.63 | normal | Tags, labels |\n\n### Principles\n- **Rounded display, standard body**: SF Pro Rounded carries display headlines with its distinctive rounded terminals, while the standard system sans handles all body text. The rounded font IS the brand expression.\n- **Weight restraint**: Only two weights matter — 400 (regular) for body and 500 (medium) for headings. No bold, no light, no black weight. This extreme restraint reinforces the minimal philosophy.\n- **Tight display, comfortable body**: Headlines compress to 1.0 line-height, while body text relaxes to 1.43–1.56. The contrast creates clear hierarchy without needing weight contrast.\n- **Monospace for developer identity**: Code blocks and terminal commands appear throughout as primary content, using the system monospace stack.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Gray Pill (Primary)**\n- Background: Light Gray (\\`#e5e5e5\\`)\n- Text: Near Black (\\`#262626\\`)\n- Padding: 10px 24px\n- Border: thin solid Light Gray (\\`1px solid #e5e5e5\\`)\n- Radius: pill-shaped (9999px)\n- The primary action button — understated, grayscale, always pill-shaped\n\n**White Pill (Secondary)**\n- Background: Pure White (\\`#ffffff\\`)\n- Text: Button Text Dark (\\`#404040\\`)\n- Padding: 10px 24px\n- Border: thin solid Border Light (\\`1px solid #d4d4d4\\`)\n- Radius: pill-shaped (9999px)\n- Secondary action — visually lighter than Gray Pill\n\n**Black Pill (CTA)**\n- Background: Pure Black (\\`#000000\\`)\n- Text: Pure White (\\`#ffffff\\`)\n- Radius: pill-shaped (9999px)\n- Inferred from \"Create account\" and \"Explore\" buttons\n- Maximum emphasis — black on white\n\n### Cards & Containers\n- Background: Pure White or Snow (\\`#fafafa\\`)\n- Border: thin solid Light Gray (\\`1px solid #e5e5e5\\`) when needed\n- Radius: comfortably rounded (12px) — the ONLY non-pill radius in the system\n- Shadow: **none** — zero shadows on any element\n- Hover: likely subtle background shift or border darkening\n\n### Inputs & Forms\n- Background: Pure White\n- Border: \\`1px solid #e5e5e5\\`\n- Radius: pill-shaped (9999px) — search inputs and form fields are pill-shaped\n- Focus: Ring Blue (\\`#3b82f6\\` at 50%) ring\n- Placeholder: Silver (\\`#a3a3a3\\`)\n\n### Navigation\n- Clean horizontal nav with minimal elements\n- Logo: Ollama llama icon + wordmark in black\n- Links: \"Models\", \"Docs\", \"Pricing\" in black at 16px, weight 400\n- Search bar: pill-shaped with placeholder text\n- Right side: \"Sign in\" link + \"Download\" black pill CTA\n- No borders, no background — transparent nav on white page\n\n### Image Treatment\n- The Ollama llama mascot is the only illustration — black line art on white\n- Code screenshots/terminal outputs shown in bordered containers (12px radius)\n- Integration logos displayed as simple icons in a grid\n- No photographs, no gradients, no decorative imagery\n\n### Distinctive Components\n\n**Tab Pills**\n- Pill-shaped tab selectors (e.g., \"Coding\" | \"OpenClaw\")\n- Active: Light Gray bg; Inactive: transparent\n- All pill-shaped (9999px)\n\n**Model Tags**\n- Small pill-shaped tags (e.g., \"ollama\", \"launch\", \"claude\")\n- Light Gray background, dark text\n- The primary way to browse models\n\n**Terminal Command Block**\n- Monospace code showing \\`ollama run\\` commands\n- Minimal styling — just a bordered 12px-radius container\n- Copy button integrated\n\n**Integration Grid**\n- Grid of integration logos (Codex, Claude Code, OpenCode, LangChain, etc.)\n- Each in a bordered pill or card with icon + name\n- Tabbed by category (Coding, Documents & RAG, Automation, Chat)\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 6px, 8px, 9px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 88px, 112px\n- Button padding: 10px 24px (consistent across all buttons)\n- Card internal padding: approximately 24–32px\n- Section vertical spacing: very generous (88px–112px)\n\n### Grid & Container\n- Max container width: approximately 1024–1280px, centered\n- Hero: centered single-column with llama illustration\n- Feature sections: 2-column layout (text left, code right)\n- Integration grid: responsive multi-column\n- Footer: clean single-row\n\n### Whitespace Philosophy\n- **Emptiness as luxury**: The page is remarkably short and sparse — no feature section overstays its welcome. Each concept gets minimal but sufficient space.\n- **Content density is low by design**: Where other AI companies pack feature after feature, Ollama presents three ideas (run models, use with apps, integrations) and stops.\n- **The white space IS the brand**: Pure white space with zero decoration communicates \"this tool gets out of your way.\"\n\n### Border Radius Scale\n- Comfortably rounded (12px): The sole container radius — code blocks, cards, panels\n- Pill-shaped (9999px): Everything interactive — buttons, tabs, inputs, tags, badges\n\n*This binary system is extreme and distinctive. There is no 4px, no 8px, no gradient of roundness. Elements are either containers (12px) or interactive (pill).*\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Page background, most content |\n| Bordered (Level 1) | \\`1px solid #e5e5e5\\` | Cards, code blocks, buttons |\n\n**Shadow Philosophy**: Ollama uses **zero shadows**. This is not an oversight — it's a deliberate design decision. Every other major AI product site uses at least subtle shadows. Ollama's flat, shadowless approach creates a paper-like experience where elements are distinguished purely by background color and single-pixel borders. Depth is communicated through **content hierarchy and typography weight**, not visual layering.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use pure white (\\`#ffffff\\`) as the page background — never off-white or cream\n- Use pill-shaped (9999px) radius on all interactive elements — buttons, tabs, inputs, tags\n- Use 12px radius on all non-interactive containers — code blocks, cards, panels\n- Keep the palette strictly grayscale — no chromatic colors except the blue focus ring\n- Use SF Pro Rounded at weight 500 for display headings — the rounded terminals are the brand expression\n- Maintain zero shadows — depth comes from borders and background shifts only\n- Keep content density low — each section should present one clear idea\n- Use monospace for terminal commands and code — it's primary content, not decoration\n- Keep all buttons at 10px 24px padding with pill shape — consistency is absolute\n\n### Don't\n- Don't introduce any chromatic color — no brand blue, no accent green, no warm tones\n- Don't use border-radius between 12px and 9999px — the system is binary\n- Don't add shadows to any element — the flat aesthetic is intentional\n- Don't use font weights above 500 — no bold, no black weight\n- Don't add decorative illustrations beyond the llama mascot\n- Don't use gradients anywhere — flat blocks and borders only\n- Don't overcomplicate the layout — two columns maximum, no complex grids\n- Don't use borders heavier than 1px — containment is always the lightest possible touch\n- Don't add hover animations or transitions — interactions should feel instant and direct\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <640px | Single column, stacked everything, hamburger nav |\n| Small Tablet | 640–768px | Minor adjustments to spacing |\n| Tablet | 768–850px | 2-column layouts begin |\n| Desktop | 850–1024px | Standard layout, expanded features |\n| Large Desktop | 1024–1280px | Maximum content width |\n\n### Touch Targets\n- All buttons are pill-shaped with generous padding (10px 24px)\n- Navigation links at comfortable 16px size\n- Minimum touch area easily exceeds 44x44px\n\n### Collapsing Strategy\n- **Navigation**: Collapses to hamburger menu on mobile\n- **Feature sections**: 2-column → stacked single column\n- **Hero text**: 48px → 36px → 30px progressive scaling\n- **Integration grid**: Multi-column → 2-column → single column\n- **Code blocks**: Horizontal scroll maintained\n\n### Image Behavior\n- Llama mascot scales proportionally\n- Code blocks maintain monospace formatting\n- Integration icons reflow to fewer columns\n- No art direction changes\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text: \"Pure Black (#000000)\"\n- Page Background: \"Pure White (#ffffff)\"\n- Secondary Text: \"Stone (#737373)\"\n- Button Background: \"Light Gray (#e5e5e5)\"\n- Borders: \"Light Gray (#e5e5e5)\"\n- Muted Text: \"Silver (#a3a3a3)\"\n- Dark Text: \"Near Black (#262626)\"\n- Subtle Surface: \"Snow (#fafafa)\"\n\n### Example Component Prompts\n- \"Create a hero section on pure white (#ffffff) with an illustration centered above a headline at 48px SF Pro Rounded weight 500, line-height 1.0. Use Pure Black (#000000) text. Below, add a black pill-shaped CTA button (9999px radius, 10px 24px padding) and a gray pill button.\"\n- \"Design a code block with a 12px border-radius, 1px solid Light Gray (#e5e5e5) border on white background. Use ui-monospace at 16px for the terminal command. No shadow.\"\n- \"Build a tab bar with pill-shaped tabs (9999px radius). Active tab: Light Gray (#e5e5e5) background, Near Black (#262626) text. Inactive: transparent background, Stone (#737373) text.\"\n- \"Create an integration card grid. Each card is a bordered pill (9999px radius) or a 12px-radius card with 1px solid #e5e5e5 border. Icon + name inside. Grid of 4 columns on desktop.\"\n- \"Design a navigation bar: transparent background, no border. Ollama logo on the left, 3 text links (Pure Black, 16px, weight 400), pill search input in the center, 'Sign in' text link and black pill 'Download' button on the right.\"\n\n### Iteration Guide\n1. Focus on ONE component at a time\n2. Keep all values grayscale — \"Stone (#737373)\" not \"use a light color\"\n3. Always specify pill (9999px) or container (12px) radius — nothing in between\n4. Shadows are always zero — never add them\n5. Weight is always 400 or 500 — never bold\n6. If something feels too decorated, remove it — less is always more for Ollama\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;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/opencode.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const opencodeBrief = `# Design System Inspired by OpenCode\n\n## 1. Visual Theme & Atmosphere\n\nOpenCode's website embodies a terminal-native, monospace-first aesthetic that reflects its identity as an open source AI coding agent. The entire visual system is built on a stark dark-on-light contrast using a near-black background (\\`#201d1d\\`) with warm off-white text (\\`#fdfcfc\\`). This isn't a generic dark theme -- it's a warm, slightly reddish-brown dark that feels like a sophisticated terminal emulator rather than a cold IDE. The warm undertone in both the darks and lights (notice the subtle red channel in \\`#201d1d\\` -- rgb(32, 29, 29)) creates a cohesive, lived-in quality.\n\nBerkeley Mono is the sole typeface, establishing an unapologetic monospace identity. Every element -- headings, body text, buttons, navigation -- shares this single font family, creating a unified \"everything is code\" philosophy. The heading at 38px bold with 1.50 line-height is generous and readable, while body text at 16px with weight 500 provides a slightly heavier-than-normal reading weight that enhances legibility on screen. The monospace grid naturally enforces alignment and rhythm across the layout.\n\nThe color system is deliberately minimal. The primary palette consists of just three functional tones: the warm near-black (\\`#201d1d\\`), a medium warm gray (\\`#9a9898\\`), and a bright off-white (\\`#fdfcfc\\`). Semantic colors borrow from the Apple HIG palette -- blue accent (\\`#007aff\\`), red danger (\\`#ff3b30\\`), green success (\\`#30d158\\`), orange warning (\\`#ff9f0a\\`) -- giving the interface familiar, trustworthy signal colors without adding brand complexity. Borders use a subtle warm transparency (\\`rgba(15, 0, 0, 0.12)\\`) that ties into the warm undertone of the entire system.\n\n**Key Characteristics:**\n- Berkeley Mono as the sole typeface -- monospace everywhere, no sans-serif or serif voices\n- Warm near-black primary (\\`#201d1d\\`) with reddish-brown undertone, not pure black\n- Off-white text (\\`#fdfcfc\\`) with warm tint, not pure white\n- Minimal 4px border radius throughout -- sharp, utilitarian corners\n- 8px base spacing system scaling up to 96px\n- Apple HIG-inspired semantic colors (blue, red, green, orange)\n- Transparent warm borders using \\`rgba(15, 0, 0, 0.12)\\`\n- Email input with generous 20px padding and 6px radius -- the most generous component radius\n- Single button variant: dark background, light text, tight vertical padding (4px 20px)\n- Underlined links as default link style, reinforcing the text-centric identity\n\n## 2. Color Palette & Roles\n\n### Primary\n- **OpenCode Dark** (\\`#201d1d\\`): Primary background, button fills, link text. A warm near-black with subtle reddish-brown warmth -- rgb(32, 29, 29).\n- **OpenCode Light** (\\`#fdfcfc\\`): Primary text on dark surfaces, button text. A barely-warm off-white that avoids clinical pure white.\n- **Mid Gray** (\\`#9a9898\\`): Secondary text, muted links. A neutral warm gray that bridges dark and light.\n\n### Secondary\n- **Dark Surface** (\\`#302c2c\\`): Slightly lighter than primary dark, used for elevated surfaces and subtle differentiation.\n- **Border Gray** (\\`#646262\\`): Stronger borders, outline rings on interactive elements.\n- **Light Surface** (\\`#f1eeee\\`): Light mode surface, subtle background variation.\n\n### Accent\n- **Accent Blue** (\\`#007aff\\`): Primary accent, links, interactive highlights. Apple system blue.\n- **Accent Blue Hover** (\\`#0056b3\\`): Darker blue for hover states.\n- **Accent Blue Active** (\\`#004085\\`): Deepest blue for pressed/active states.\n\n### Semantic\n- **Danger Red** (\\`#ff3b30\\`): Error states, destructive actions. Apple system red.\n- **Danger Hover** (\\`#d70015\\`): Darker red for hover on danger elements.\n- **Danger Active** (\\`#a50011\\`): Deepest red for pressed danger states.\n- **Success Green** (\\`#30d158\\`): Success states, positive feedback. Apple system green.\n- **Warning Orange** (\\`#ff9f0a\\`): Warning states, caution signals. Apple system orange.\n- **Warning Hover** (\\`#cc7f08\\`): Darker orange for hover on warning elements.\n- **Warning Active** (\\`#995f06\\`): Deepest orange for pressed warning states.\n\n### Text Scale\n- **Text Muted** (\\`#6e6e73\\`): Muted labels, disabled text, placeholder content.\n- **Text Secondary** (\\`#424245\\`): Secondary text on light backgrounds, captions.\n\n### Border\n- **Border Warm** (\\`rgba(15, 0, 0, 0.12)\\`): Primary border color, warm transparent black with red tint.\n- **Border Tab** (\\`#9a9898\\`): Tab underline border, 2px solid bottom.\n- **Border Outline** (\\`#646262\\`): 1px solid outline border for containers.\n\n## 3. Typography Rules\n\n### Font Family\n- **Universal**: \\`Berkeley Mono\\`, with fallbacks: \\`IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace\\`\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Notes |\n|------|------|--------|-------------|-------|\n| Heading 1 | 38px (2.38rem) | 700 | 1.50 | Hero headlines, page titles |\n| Heading 2 | 16px (1.00rem) | 700 | 1.50 | Section titles, bold emphasis |\n| Body | 16px (1.00rem) | 400 | 1.50 | Standard body text, paragraphs |\n| Body Medium | 16px (1.00rem) | 500 | 1.50 | Links, button text, nav items |\n| Body Tight | 16px (1.00rem) | 500 | 1.00 (tight) | Compact labels, tab items |\n| Caption | 14px (0.88rem) | 400 | 2.00 (relaxed) | Footnotes, metadata, small labels |\n\n### Principles\n- **One font, one voice**: Berkeley Mono is used exclusively. There is no typographic variation between display, body, and code -- everything speaks in the same monospace register. Hierarchy is achieved through size and weight alone.\n- **Weight as hierarchy**: 700 for headings, 500 for interactive/medium emphasis, 400 for body text. Three weight levels create the entire hierarchy.\n- **Generous line-height**: 1.50 as the standard line-height gives text room to breathe within the monospace grid. The relaxed 2.00 line-height on captions creates clear visual separation.\n- **Tight for interaction**: Interactive elements (tabs, compact labels) use 1.00 line-height for dense, clickable targets.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (Dark Fill)**\n- Background: \\`#201d1d\\` (OpenCode Dark)\n- Text: \\`#fdfcfc\\` (OpenCode Light)\n- Padding: 4px 20px\n- Radius: 4px\n- Font: 16px Berkeley Mono, weight 500, line-height 2.00 (relaxed)\n- Outline: \\`rgb(253, 252, 252) none 0px\\`\n- Use: Primary CTAs, main actions\n\n### Inputs\n\n**Email Input**\n- Background: \\`#f8f7f7\\` (light neutral)\n- Text: \\`#201d1d\\`\n- Border: \\`1px solid rgba(15, 0, 0, 0.12)\\`\n- Padding: 20px\n- Radius: 6px\n- Font: Berkeley Mono, standard size\n- Use: Form fields, email capture\n\n### Links\n\n**Default Link**\n- Color: \\`#201d1d\\`\n- Decoration: underline 1px\n- Font-weight: 500\n- Use: Primary text links in body content\n\n**Light Link**\n- Color: \\`#fdfcfc\\`\n- Decoration: none\n- Use: Links on dark backgrounds, navigation\n\n**Muted Link**\n- Color: \\`#9a9898\\`\n- Decoration: none\n- Use: Footer links, secondary navigation\n\n### Tabs\n\n**Tab Navigation**\n- Border-bottom: \\`2px solid #9a9898\\` (active tab indicator)\n- Font: 16px, weight 500, line-height 1.00\n- Use: Section switching, content filtering\n\n### Navigation\n- Clean horizontal layout with Berkeley Mono throughout\n- Brand logotype left-aligned in monospace\n- Links at 16px weight 500 with underline decoration\n- Dark background matching page background\n- No backdrop blur or transparency -- solid surfaces only\n\n### Image Treatment\n- Terminal/code screenshots as hero imagery\n- Dark terminal aesthetic with monospace type\n- Minimal borders, content speaks for itself\n\n### Distinctive Components\n\n**Terminal Hero**\n- Full-width dark terminal window as hero element\n- ASCII art / stylized logo within terminal frame\n- Monospace command examples with syntax highlighting\n- Reinforces the CLI-first identity of the product\n\n**Feature List**\n- Bulleted feature items with Berkeley Mono text\n- Weight 500 for feature names, 400 for descriptions\n- Tight vertical spacing between items\n- No cards or borders -- pure text layout\n\n**Email Capture**\n- Light background input (\\`#f8f7f7\\`) contrasting dark page\n- Generous 20px padding for comfortable typing\n- 6px radius -- the roundest element in the system\n- Newsletter/waitlist pattern\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Fine scale: 1px, 2px, 4px (sub-8px for borders and micro-adjustments)\n- Standard scale: 8px, 12px, 16px, 20px, 24px\n- Extended scale: 32px, 40px, 48px, 64px, 80px, 96px\n- The system follows a clean 4/8px grid with consistent doubling\n\n### Grid & Container\n- Max content width: approximately 800-900px (narrow, reading-optimized)\n- Single-column layout as the primary pattern\n- Centered content with generous horizontal margins\n- Hero section: full-width dark terminal element\n- Feature sections: single-column text blocks\n- Footer: multi-column link grid\n\n### Whitespace Philosophy\n- **Monospace rhythm**: The fixed-width nature of Berkeley Mono creates a natural vertical grid. Line-heights of 1.50 and 2.00 maintain consistent rhythm.\n- **Narrow and focused**: Content is constrained to a narrow column, creating generous side margins that focus attention on the text.\n- **Sections through spacing**: No decorative dividers. Sections are separated by generous vertical spacing (48-96px) rather than borders or background changes.\n\n### Border Radius Scale\n- Micro (4px): Default for all elements -- buttons, containers, badges\n- Input (6px): Form inputs get slightly more roundness\n- The entire system uses just two radius values, reinforcing the utilitarian aesthetic\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Default state for most elements |\n| Border Subtle (Level 1) | \\`1px solid rgba(15, 0, 0, 0.12)\\` | Section dividers, input borders, horizontal rules |\n| Border Tab (Level 2) | \\`2px solid #9a9898\\` bottom only | Active tab indicator |\n| Border Outline (Level 3) | \\`1px solid #646262\\` | Container outlines, elevated elements |\n\n**Shadow Philosophy**: OpenCode's depth system is intentionally flat. There are no box-shadows in the extracted tokens -- zero shadow values were detected. Depth is communicated exclusively through border treatments and background color shifts. This flatness is consistent with the terminal aesthetic: terminals don't have shadows, and neither does OpenCode. The three border levels (transparent warm, tab indicator, solid outline) create sufficient visual hierarchy without any elevation illusion.\n\n### Decorative Depth\n- Background color shifts between \\`#201d1d\\` and \\`#302c2c\\` create subtle surface differentiation\n- Transparent borders at 12% opacity provide barely-visible structure\n- The warm reddish tint in border colors (\\`rgba(15, 0, 0, 0.12)\\`) ties borders to the overall warm dark palette\n- No gradients, no blurs, no ambient effects -- pure flat terminal aesthetic\n\n## 7. Interaction & Motion\n\n### Hover States\n- Links: color shift from default to accent blue (\\`#007aff\\`) or underline style change\n- Buttons: subtle background lightening or border emphasis\n- Accent blue provides a three-stage hover sequence: \\`#007aff\\` → \\`#0056b3\\` → \\`#004085\\` (default → hover → active)\n- Danger red: \\`#ff3b30\\` → \\`#d70015\\` → \\`#a50011\\`\n- Warning orange: \\`#ff9f0a\\` → \\`#cc7f08\\` → \\`#995f06\\`\n\n### Focus States\n- Border-based focus: increased border opacity or solid border color\n- No shadow-based focus rings -- consistent with the flat, no-shadow aesthetic\n- Keyboard focus likely uses outline or border color shift to accent blue\n\n### Transitions\n- Minimal transitions expected -- terminal-inspired interfaces favor instant state changes\n- Color transitions: 100-150ms for subtle state feedback\n- No scale, rotate, or complex transform animations\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <640px | Single column, reduced padding, heading scales down |\n| Tablet | 640-1024px | Content width expands, slight padding increase |\n| Desktop | >1024px | Full content width (~800-900px centered), maximum whitespace |\n\n### Touch Targets\n- Buttons with 4px 20px padding provide adequate horizontal touch area\n- Input fields with 20px padding ensure comfortable mobile typing\n- Tab items at 16px with tight line-height may need mobile adaptation\n\n### Collapsing Strategy\n- Hero heading: 38px → 28px → 24px on smaller screens\n- Navigation: horizontal links → hamburger/drawer on mobile\n- Feature lists: maintain single-column, reduce horizontal padding\n- Terminal hero: maintain full-width, reduce internal padding\n- Footer columns: multi-column → stacked single column\n- Section spacing: 96px → 64px → 48px on mobile\n\n### Image Behavior\n- Terminal screenshots maintain aspect ratio and border treatment\n- Full-width elements scale proportionally\n- Monospace type maintains readability at all sizes due to fixed-width nature\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Page background: \\`#201d1d\\` (warm near-black)\n- Primary text: \\`#fdfcfc\\` (warm off-white)\n- Secondary text: \\`#9a9898\\` (warm gray)\n- Muted text: \\`#6e6e73\\`\n- Accent: \\`#007aff\\` (blue)\n- Danger: \\`#ff3b30\\` (red)\n- Success: \\`#30d158\\` (green)\n- Warning: \\`#ff9f0a\\` (orange)\n- Button bg: \\`#201d1d\\`, button text: \\`#fdfcfc\\`\n- Border: \\`rgba(15, 0, 0, 0.12)\\` (warm transparent)\n- Input bg: \\`#f8f7f7\\`, input border: \\`rgba(15, 0, 0, 0.12)\\`\n\n### Example Component Prompts\n- \"Create a hero section on \\`#201d1d\\` warm dark background. Headline at 38px Berkeley Mono weight 700, line-height 1.50, color \\`#fdfcfc\\`. Subtitle at 16px weight 400, color \\`#9a9898\\`. Primary CTA button (\\`#201d1d\\` bg with \\`1px solid #646262\\` border, 4px radius, 4px 20px padding, \\`#fdfcfc\\` text at weight 500).\"\n- \"Design a feature list: single-column on \\`#201d1d\\` background. Feature name at 16px Berkeley Mono weight 700, color \\`#fdfcfc\\`. Description at 16px weight 400, color \\`#9a9898\\`. No cards, no borders -- pure text with 16px vertical gap between items.\"\n- \"Build an email capture form: \\`#f8f7f7\\` background input, \\`1px solid rgba(15, 0, 0, 0.12)\\` border, 6px radius, 20px padding. Adjacent dark button (\\`#201d1d\\` bg, \\`#fdfcfc\\` text, 4px radius, 4px 20px padding). Berkeley Mono throughout.\"\n- \"Create navigation: sticky \\`#201d1d\\` background. 16px Berkeley Mono weight 500 for links, \\`#fdfcfc\\` text. Brand name left-aligned in monospace. Links with underline decoration. No blur, no transparency -- solid dark surface.\"\n- \"Design a footer: \\`#201d1d\\` background, multi-column link grid. Links at 16px Berkeley Mono weight 400, color \\`#9a9898\\`. Section headers at weight 700. Border-top \\`1px solid rgba(15, 0, 0, 0.12)\\` separator.\"\n\n### Iteration Guide\n1. Berkeley Mono is the only font -- never introduce a second typeface. Size and weight create all hierarchy.\n2. Keep surfaces flat: no shadows, no gradients, no blur effects. Use borders and background shifts only.\n3. The warm undertone matters: use \\`#201d1d\\` not \\`#000000\\`, use \\`#fdfcfc\\` not \\`#ffffff\\`. The reddish warmth is subtle but essential.\n4. Border radius is 4px everywhere except inputs (6px). Never use rounded pills or large radii.\n5. Semantic colors follow Apple HIG: \\`#007aff\\` blue, \\`#ff3b30\\` red, \\`#30d158\\` green, \\`#ff9f0a\\` orange. Each has hover and active darkened variants.\n6. Three-stage interaction: default → hover (darkened) → active (deeply darkened) for all semantic colors.\n7. Borders use \\`rgba(15, 0, 0, 0.12)\\` -- a warm transparent dark, not neutral gray. This ties borders to the warm palette.\n8. Spacing follows an 8px grid: 8, 16, 24, 32, 40, 48, 64, 80, 96px. Use 4px for fine adjustments only.\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;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/opencode.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const opencodeBrief = `# Design System Inspired by OpenCode\n\n## 1. Visual Theme & Atmosphere\n\nOpenCode's website embodies a terminal-native, monospace-first aesthetic that reflects its identity as an open source AI coding agent. The entire visual system is built on a stark dark-on-light contrast using a near-black background (\\`#201d1d\\`) with warm off-white text (\\`#fdfcfc\\`). This isn't a generic dark theme -- it's a warm, slightly reddish-brown dark that feels like a sophisticated terminal emulator rather than a cold IDE. The warm undertone in both the darks and lights (notice the subtle red channel in \\`#201d1d\\` -- rgb(32, 29, 29)) creates a cohesive, lived-in quality.\n\nBerkeley Mono is the sole typeface, establishing an unapologetic monospace identity. Every element -- headings, body text, buttons, navigation -- shares this single font family, creating a unified \"everything is code\" philosophy. The heading at 38px bold with 1.50 line-height is generous and readable, while body text at 16px with weight 500 provides a slightly heavier-than-normal reading weight that enhances legibility on screen. The monospace grid naturally enforces alignment and rhythm across the layout.\n\nThe color system is deliberately minimal. The primary palette consists of just three functional tones: the warm near-black (\\`#201d1d\\`), a medium warm gray (\\`#9a9898\\`), and a bright off-white (\\`#fdfcfc\\`). Semantic colors borrow from the Apple HIG palette -- blue accent (\\`#007aff\\`), red danger (\\`#ff3b30\\`), green success (\\`#30d158\\`), orange warning (\\`#ff9f0a\\`) -- giving the interface familiar, trustworthy signal colors without adding brand complexity. Borders use a subtle warm transparency (\\`rgba(15, 0, 0, 0.12)\\`) that ties into the warm undertone of the entire system.\n\n**Key Characteristics:**\n- Berkeley Mono as the sole typeface -- monospace everywhere, no sans-serif or serif voices\n- Warm near-black primary (\\`#201d1d\\`) with reddish-brown undertone, not pure black\n- Off-white text (\\`#fdfcfc\\`) with warm tint, not pure white\n- Minimal 4px border radius throughout -- sharp, utilitarian corners\n- 8px base spacing system scaling up to 96px\n- Apple HIG-inspired semantic colors (blue, red, green, orange)\n- Transparent warm borders using \\`rgba(15, 0, 0, 0.12)\\`\n- Email input with generous 20px padding and 6px radius -- the most generous component radius\n- Single button variant: dark background, light text, tight vertical padding (4px 20px)\n- Underlined links as default link style, reinforcing the text-centric identity\n\n## 2. Color Palette & Roles\n\n### Primary\n- **OpenCode Dark** (\\`#201d1d\\`): Primary background, button fills, link text. A warm near-black with subtle reddish-brown warmth -- rgb(32, 29, 29).\n- **OpenCode Light** (\\`#fdfcfc\\`): Primary text on dark surfaces, button text. A barely-warm off-white that avoids clinical pure white.\n- **Mid Gray** (\\`#9a9898\\`): Secondary text, muted links. A neutral warm gray that bridges dark and light.\n\n### Secondary\n- **Dark Surface** (\\`#302c2c\\`): Slightly lighter than primary dark, used for elevated surfaces and subtle differentiation.\n- **Border Gray** (\\`#646262\\`): Stronger borders, outline rings on interactive elements.\n- **Light Surface** (\\`#f1eeee\\`): Light mode surface, subtle background variation.\n\n### Accent\n- **Accent Blue** (\\`#007aff\\`): Primary accent, links, interactive highlights. Apple system blue.\n- **Accent Blue Hover** (\\`#0056b3\\`): Darker blue for hover states.\n- **Accent Blue Active** (\\`#004085\\`): Deepest blue for pressed/active states.\n\n### Semantic\n- **Danger Red** (\\`#ff3b30\\`): Error states, destructive actions. Apple system red.\n- **Danger Hover** (\\`#d70015\\`): Darker red for hover on danger elements.\n- **Danger Active** (\\`#a50011\\`): Deepest red for pressed danger states.\n- **Success Green** (\\`#30d158\\`): Success states, positive feedback. Apple system green.\n- **Warning Orange** (\\`#ff9f0a\\`): Warning states, caution signals. Apple system orange.\n- **Warning Hover** (\\`#cc7f08\\`): Darker orange for hover on warning elements.\n- **Warning Active** (\\`#995f06\\`): Deepest orange for pressed warning states.\n\n### Text Scale\n- **Text Muted** (\\`#6e6e73\\`): Muted labels, disabled text, placeholder content.\n- **Text Secondary** (\\`#424245\\`): Secondary text on light backgrounds, captions.\n\n### Border\n- **Border Warm** (\\`rgba(15, 0, 0, 0.12)\\`): Primary border color, warm transparent black with red tint.\n- **Border Tab** (\\`#9a9898\\`): Tab underline border, 2px solid bottom.\n- **Border Outline** (\\`#646262\\`): 1px solid outline border for containers.\n\n## 3. Typography Rules\n\n### Font Family\n- **Universal**: \\`Berkeley Mono\\`, with fallbacks: \\`IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace\\`\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Notes |\n|------|------|--------|-------------|-------|\n| Heading 1 | 38px (2.38rem) | 700 | 1.50 | Hero headlines, page titles |\n| Heading 2 | 16px (1.00rem) | 700 | 1.50 | Section titles, bold emphasis |\n| Body | 16px (1.00rem) | 400 | 1.50 | Standard body text, paragraphs |\n| Body Medium | 16px (1.00rem) | 500 | 1.50 | Links, button text, nav items |\n| Body Tight | 16px (1.00rem) | 500 | 1.00 (tight) | Compact labels, tab items |\n| Caption | 14px (0.88rem) | 400 | 2.00 (relaxed) | Footnotes, metadata, small labels |\n\n### Principles\n- **One font, one voice**: Berkeley Mono is used exclusively. There is no typographic variation between display, body, and code -- everything speaks in the same monospace register. Hierarchy is achieved through size and weight alone.\n- **Weight as hierarchy**: 700 for headings, 500 for interactive/medium emphasis, 400 for body text. Three weight levels create the entire hierarchy.\n- **Generous line-height**: 1.50 as the standard line-height gives text room to breathe within the monospace grid. The relaxed 2.00 line-height on captions creates clear visual separation.\n- **Tight for interaction**: Interactive elements (tabs, compact labels) use 1.00 line-height for dense, clickable targets.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (Dark Fill)**\n- Background: \\`#201d1d\\` (OpenCode Dark)\n- Text: \\`#fdfcfc\\` (OpenCode Light)\n- Padding: 4px 20px\n- Radius: 4px\n- Font: 16px Berkeley Mono, weight 500, line-height 2.00 (relaxed)\n- Outline: \\`rgb(253, 252, 252) none 0px\\`\n- Use: Primary CTAs, main actions\n\n### Inputs\n\n**Email Input**\n- Background: \\`#f8f7f7\\` (light neutral)\n- Text: \\`#201d1d\\`\n- Border: \\`1px solid rgba(15, 0, 0, 0.12)\\`\n- Padding: 20px\n- Radius: 6px\n- Font: Berkeley Mono, standard size\n- Use: Form fields, email capture\n\n### Links\n\n**Default Link**\n- Color: \\`#201d1d\\`\n- Decoration: underline 1px\n- Font-weight: 500\n- Use: Primary text links in body content\n\n**Light Link**\n- Color: \\`#fdfcfc\\`\n- Decoration: none\n- Use: Links on dark backgrounds, navigation\n\n**Muted Link**\n- Color: \\`#9a9898\\`\n- Decoration: none\n- Use: Footer links, secondary navigation\n\n### Tabs\n\n**Tab Navigation**\n- Border-bottom: \\`2px solid #9a9898\\` (active tab indicator)\n- Font: 16px, weight 500, line-height 1.00\n- Use: Section switching, content filtering\n\n### Navigation\n- Clean horizontal layout with Berkeley Mono throughout\n- Brand logotype left-aligned in monospace\n- Links at 16px weight 500 with underline decoration\n- Dark background matching page background\n- No backdrop blur or transparency -- solid surfaces only\n\n### Image Treatment\n- Terminal/code screenshots as hero imagery\n- Dark terminal aesthetic with monospace type\n- Minimal borders, content speaks for itself\n\n### Distinctive Components\n\n**Terminal Hero**\n- Full-width dark terminal window as hero element\n- ASCII art / stylized logo within terminal frame\n- Monospace command examples with syntax highlighting\n- Reinforces the CLI-first identity of the product\n\n**Feature List**\n- Bulleted feature items with Berkeley Mono text\n- Weight 500 for feature names, 400 for descriptions\n- Tight vertical spacing between items\n- No cards or borders -- pure text layout\n\n**Email Capture**\n- Light background input (\\`#f8f7f7\\`) contrasting dark page\n- Generous 20px padding for comfortable typing\n- 6px radius -- the roundest element in the system\n- Newsletter/waitlist pattern\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Fine scale: 1px, 2px, 4px (sub-8px for borders and micro-adjustments)\n- Standard scale: 8px, 12px, 16px, 20px, 24px\n- Extended scale: 32px, 40px, 48px, 64px, 80px, 96px\n- The system follows a clean 4/8px grid with consistent doubling\n\n### Grid & Container\n- Max content width: approximately 800-900px (narrow, reading-optimized)\n- Single-column layout as the primary pattern\n- Centered content with generous horizontal margins\n- Hero section: full-width dark terminal element\n- Feature sections: single-column text blocks\n- Footer: multi-column link grid\n\n### Whitespace Philosophy\n- **Monospace rhythm**: The fixed-width nature of Berkeley Mono creates a natural vertical grid. Line-heights of 1.50 and 2.00 maintain consistent rhythm.\n- **Narrow and focused**: Content is constrained to a narrow column, creating generous side margins that focus attention on the text.\n- **Sections through spacing**: No decorative dividers. Sections are separated by generous vertical spacing (48-96px) rather than borders or background changes.\n\n### Border Radius Scale\n- Micro (4px): Default for all elements -- buttons, containers, badges\n- Input (6px): Form inputs get slightly more roundness\n- The entire system uses just two radius values, reinforcing the utilitarian aesthetic\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Default state for most elements |\n| Border Subtle (Level 1) | \\`1px solid rgba(15, 0, 0, 0.12)\\` | Section dividers, input borders, horizontal rules |\n| Border Tab (Level 2) | \\`2px solid #9a9898\\` bottom only | Active tab indicator |\n| Border Outline (Level 3) | \\`1px solid #646262\\` | Container outlines, elevated elements |\n\n**Shadow Philosophy**: OpenCode's depth system is intentionally flat. There are no box-shadows in the extracted tokens -- zero shadow values were detected. Depth is communicated exclusively through border treatments and background color shifts. This flatness is consistent with the terminal aesthetic: terminals don't have shadows, and neither does OpenCode. The three border levels (transparent warm, tab indicator, solid outline) create sufficient visual hierarchy without any elevation illusion.\n\n### Decorative Depth\n- Background color shifts between \\`#201d1d\\` and \\`#302c2c\\` create subtle surface differentiation\n- Transparent borders at 12% opacity provide barely-visible structure\n- The warm reddish tint in border colors (\\`rgba(15, 0, 0, 0.12)\\`) ties borders to the overall warm dark palette\n- No gradients, no blurs, no ambient effects -- pure flat terminal aesthetic\n\n## 7. Interaction & Motion\n\n### Hover States\n- Links: color shift from default to accent blue (\\`#007aff\\`) or underline style change\n- Buttons: subtle background lightening or border emphasis\n- Accent blue provides a three-stage hover sequence: \\`#007aff\\` → \\`#0056b3\\` → \\`#004085\\` (default → hover → active)\n- Danger red: \\`#ff3b30\\` → \\`#d70015\\` → \\`#a50011\\`\n- Warning orange: \\`#ff9f0a\\` → \\`#cc7f08\\` → \\`#995f06\\`\n\n### Focus States\n- Border-based focus: increased border opacity or solid border color\n- No shadow-based focus rings -- consistent with the flat, no-shadow aesthetic\n- Keyboard focus likely uses outline or border color shift to accent blue\n\n### Transitions\n- Minimal transitions expected -- terminal-inspired interfaces favor instant state changes\n- Color transitions: 100-150ms for subtle state feedback\n- No scale, rotate, or complex transform animations\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <640px | Single column, reduced padding, heading scales down |\n| Tablet | 640-1024px | Content width expands, slight padding increase |\n| Desktop | >1024px | Full content width (~800-900px centered), maximum whitespace |\n\n### Touch Targets\n- Buttons with 4px 20px padding provide adequate horizontal touch area\n- Input fields with 20px padding ensure comfortable mobile typing\n- Tab items at 16px with tight line-height may need mobile adaptation\n\n### Collapsing Strategy\n- Hero heading: 38px → 28px → 24px on smaller screens\n- Navigation: horizontal links → hamburger/drawer on mobile\n- Feature lists: maintain single-column, reduce horizontal padding\n- Terminal hero: maintain full-width, reduce internal padding\n- Footer columns: multi-column → stacked single column\n- Section spacing: 96px → 64px → 48px on mobile\n\n### Image Behavior\n- Terminal screenshots maintain aspect ratio and border treatment\n- Full-width elements scale proportionally\n- Monospace type maintains readability at all sizes due to fixed-width nature\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Page background: \\`#201d1d\\` (warm near-black)\n- Primary text: \\`#fdfcfc\\` (warm off-white)\n- Secondary text: \\`#9a9898\\` (warm gray)\n- Muted text: \\`#6e6e73\\`\n- Accent: \\`#007aff\\` (blue)\n- Danger: \\`#ff3b30\\` (red)\n- Success: \\`#30d158\\` (green)\n- Warning: \\`#ff9f0a\\` (orange)\n- Button bg: \\`#201d1d\\`, button text: \\`#fdfcfc\\`\n- Border: \\`rgba(15, 0, 0, 0.12)\\` (warm transparent)\n- Input bg: \\`#f8f7f7\\`, input border: \\`rgba(15, 0, 0, 0.12)\\`\n\n### Example Component Prompts\n- \"Create a hero section on \\`#201d1d\\` warm dark background. Headline at 38px Berkeley Mono weight 700, line-height 1.50, color \\`#fdfcfc\\`. Subtitle at 16px weight 400, color \\`#9a9898\\`. Primary CTA button (\\`#201d1d\\` bg with \\`1px solid #646262\\` border, 4px radius, 4px 20px padding, \\`#fdfcfc\\` text at weight 500).\"\n- \"Design a feature list: single-column on \\`#201d1d\\` background. Feature name at 16px Berkeley Mono weight 700, color \\`#fdfcfc\\`. Description at 16px weight 400, color \\`#9a9898\\`. No cards, no borders -- pure text with 16px vertical gap between items.\"\n- \"Build an email capture form: \\`#f8f7f7\\` background input, \\`1px solid rgba(15, 0, 0, 0.12)\\` border, 6px radius, 20px padding. Adjacent dark button (\\`#201d1d\\` bg, \\`#fdfcfc\\` text, 4px radius, 4px 20px padding). Berkeley Mono throughout.\"\n- \"Create navigation: sticky \\`#201d1d\\` background. 16px Berkeley Mono weight 500 for links, \\`#fdfcfc\\` text. Brand name left-aligned in monospace. Links with underline decoration. No blur, no transparency -- solid dark surface.\"\n- \"Design a footer: \\`#201d1d\\` background, multi-column link grid. Links at 16px Berkeley Mono weight 400, color \\`#9a9898\\`. Section headers at weight 700. Border-top \\`1px solid rgba(15, 0, 0, 0.12)\\` separator.\"\n\n### Iteration Guide\n1. Berkeley Mono is the only font -- never introduce a second typeface. Size and weight create all hierarchy.\n2. Keep surfaces flat: no shadows, no gradients, no blur effects. Use borders and background shifts only.\n3. The warm undertone matters: use \\`#201d1d\\` not \\`#000000\\`, use \\`#fdfcfc\\` not \\`#ffffff\\`. The reddish warmth is subtle but essential.\n4. Border radius is 4px everywhere except inputs (6px). Never use rounded pills or large radii.\n5. Semantic colors follow Apple HIG: \\`#007aff\\` blue, \\`#ff3b30\\` red, \\`#30d158\\` green, \\`#ff9f0a\\` orange. Each has hover and active darkened variants.\n6. Three-stage interaction: default → hover (darkened) → active (deeply darkened) for all semantic colors.\n7. Borders use \\`rgba(15, 0, 0, 0.12)\\` -- a warm transparent dark, not neutral gray. This ties borders to the warm palette.\n8. Spacing follows an 8px grid: 8, 16, 24, 32, 40, 48, 64, 80, 96px. Use 4px for fine adjustments only.\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;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/pinterest.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const pinterestBrief = `# Design System Inspired by Pinterest\n\n## 1. Visual Theme & Atmosphere\n\nPinterest's website is a warm, inspiration-driven canvas that treats visual discovery like a lifestyle magazine. The design operates on a soft, slightly warm white background with Pinterest Red (\\`#e60023\\`) as the singular, bold brand accent. Unlike the cool blues of most tech platforms, Pinterest's neutral scale has a distinctly warm undertone — grays lean toward olive/sand (\\`#91918c\\`, \\`#62625b\\`, \\`#e5e5e0\\`) rather than cool steel, creating a cozy, craft-like atmosphere that invites browsing.\n\nThe typography uses Pin Sans — a custom proprietary font with a broad fallback stack including Japanese fonts, reflecting Pinterest's global reach. At display scale (70px, weight 600), Pin Sans creates large, inviting headlines. At smaller sizes, the system is compact: buttons at 12px, captions at 12–14px. The CSS variable naming system (\\`--comp-*\\`, \\`--sema-*\\`, \\`--base-*\\`) reveals a sophisticated three-tier design token architecture: component-level, semantic-level, and base-level tokens.\n\nWhat distinguishes Pinterest is its generous border-radius system (12px–40px, plus 50% for circles) and warm-tinted button backgrounds. The secondary button (\\`#e5e5e0\\`) has a distinctly warm, sand-like tone rather than cold gray. The primary red button uses 16px radius — rounded but not pill-shaped. Combined with warm badge backgrounds (\\`hsla(60,20%,98%,.5)\\` — a subtle yellow-warm wash) and photography-dominant layouts, the result is a design that feels handcrafted and personal, not corporate and sterile.\n\n**Key Characteristics:**\n- Warm white canvas with olive/sand-toned neutrals — cozy, not clinical\n- Pinterest Red (\\`#e60023\\`) as singular bold accent — never subtle, always confident\n- Pin Sans custom font with global fallback stack (including CJK)\n- Three-tier token architecture: \\`--comp-*\\` / \\`--sema-*\\` / \\`--base-*\\`\n- Warm secondary surfaces: sand gray (\\`#e5e5e0\\`), warm badge (\\`hsla(60,20%,98%,.5)\\`)\n- Generous border-radius: 16px standard, up to 40px for large containers\n- Photography-first content — pins/images are the primary visual element\n- Dark near-purple text (\\`#211922\\`) — warm, with a hint of plum\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Pinterest Red** (\\`#e60023\\`): Primary CTA, brand accent — bold, confident red\n- **Green 700** (\\`#103c25\\`): \\`--base-color-green-700\\`, success/nature accent\n- **Green 700 Hover** (\\`#0b2819\\`): \\`--base-color-hover-green-700\\`, pressed green\n\n### Text\n- **Plum Black** (\\`#211922\\`): Primary text — warm near-black with plum undertone\n- **Black** (\\`#000000\\`): Secondary text, button text\n- **Olive Gray** (\\`#62625b\\`): Secondary descriptions, muted text\n- **Warm Silver** (\\`#91918c\\`): \\`--comp-button-color-text-transparent-disabled\\`, disabled text, input borders\n- **White** (\\`#ffffff\\`): Text on dark/colored surfaces\n\n### Interactive\n- **Focus Blue** (\\`#435ee5\\`): \\`--comp-button-color-border-focus-outer-transparent\\`, focus rings\n- **Performance Purple** (\\`#6845ab\\`): \\`--sema-color-hover-icon-performance-plus\\`, performance features\n- **Recommendation Purple** (\\`#7e238b\\`): \\`--sema-color-hover-text-recommendation\\`, AI recommendation\n- **Link Blue** (\\`#2b48d4\\`): Link text color\n- **Facebook Blue** (\\`#0866ff\\`): \\`--facebook-background-color\\`, social login\n- **Pressed Blue** (\\`#617bff\\`): \\`--base-color-pressed-blue-200\\`, pressed state\n\n### Surface & Border\n- **Sand Gray** (\\`#e5e5e0\\`): Secondary button background — warm, craft-like\n- **Warm Light** (\\`#e0e0d9\\`): Circular button backgrounds, badges\n- **Warm Wash** (\\`hsla(60, 20%, 98%, 0.5)\\`): \\`--comp-badge-color-background-wash-light\\`, subtle warm badge bg\n- **Fog** (\\`#f6f6f3\\`): Light surface (at 50% opacity)\n- **Border Disabled** (\\`#c8c8c1\\`): \\`--sema-color-border-disabled\\`, disabled borders\n- **Hover Gray** (\\`#bcbcb3\\`): \\`--base-color-hover-grayscale-150\\`, hover border\n- **Dark Surface** (\\`#33332e\\`): Dark section backgrounds\n\n### Semantic\n- **Error Red** (\\`#9e0a0a\\`): Checkbox/form error states\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: \\`Pin Sans\\`, fallbacks: \\`-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Pin Sans | 70px (4.38rem) | 600 | normal | normal | Maximum impact |\n| Section Heading | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | Negative tracking |\n| Body | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | Standard reading |\n| Caption Bold | Pin Sans | 14px (0.88rem) | 700 | normal | normal | Strong metadata |\n| Caption | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | Small text, tags |\n| Button | Pin Sans | 12px (0.75rem) | 400 | normal | normal | Button labels |\n\n### Principles\n- **Compact type scale**: The range is 12px–70px with a dramatic jump — most functional text is 12–16px, creating a dense, app-like information hierarchy.\n- **Warm weight distribution**: 600–700 for headings, 400–500 for body. No ultra-light weights — the type always feels substantial.\n- **Negative tracking on headings**: -1.2px on 28px headings creates cozy, intimate section titles.\n- **Single font family**: Pin Sans handles everything — no secondary display or monospace font detected.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Red**\n- Background: \\`#e60023\\` (Pinterest Red)\n- Text: \\`#000000\\` (black — unusual choice for contrast on red)\n- Padding: 6px 14px\n- Radius: 16px (generously rounded, not pill)\n- Border: \\`2px solid rgba(255, 255, 255, 0)\\` (transparent)\n- Focus: semantic border + outline via CSS variables\n\n**Secondary Sand**\n- Background: \\`#e5e5e0\\` (warm sand gray)\n- Text: \\`#000000\\`\n- Padding: 6px 14px\n- Radius: 16px\n- Focus: same semantic border system\n\n**Circular Action**\n- Background: \\`#e0e0d9\\` (warm light)\n- Text: \\`#211922\\` (plum black)\n- Radius: 50% (circle)\n- Use: Pin actions, navigation controls\n\n**Ghost / Transparent**\n- Background: transparent\n- Text: \\`#000000\\`\n- No border\n- Use: Tertiary actions\n\n### Cards & Containers\n- Photography-first pin cards with generous radius (12px–20px)\n- No traditional box-shadow on most cards\n- White or warm fog backgrounds\n- 8px white thick border on some image containers\n\n### Inputs\n- Email input: white background, \\`1px solid #91918c\\` border, 16px radius, 11px 15px padding\n- Focus: semantic border + outline system via CSS variables\n\n### Navigation\n- Clean header on white or warm background\n- Pinterest logo + search bar centered\n- Pin Sans 16px for nav links\n- Pinterest Red accents for active states\n\n### Image Treatment\n- Pin-style masonry grid (signature Pinterest layout)\n- Rounded corners: 12px–20px on images\n- Photography as primary content — every pin is an image\n- Thick white borders (8px) on featured image containers\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px\n- Large jumps: 32px → 80px → 100px for section spacing\n\n### Grid & Container\n- Masonry grid for pin content (signature layout)\n- Centered content sections with generous max-width\n- Full-width dark footer\n- Search bar as primary navigation element\n\n### Whitespace Philosophy\n- **Inspiration density**: The masonry grid packs pins tightly — the content density IS the value proposition. Whitespace exists between sections, not within the grid.\n- **Breathing above, density below**: Hero/feature sections get generous padding; the pin grid is compact and immersive.\n\n### Border Radius Scale\n- Standard (12px): Small cards, links\n- Button (16px): Buttons, inputs, medium cards\n- Comfortable (20px): Feature cards\n- Large (28px): Large containers\n- Section (32px): Tab elements, large panels\n- Hero (40px): Hero containers, large feature blocks\n- Circle (50%): Action buttons, tab indicators\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default — pins rely on content, not shadow |\n| Subtle (Level 1) | Minimal shadow (from tokens) | Elevated overlays, dropdowns |\n| Focus (Accessibility) | \\`--sema-color-border-focus-outer-default\\` ring | Focus states |\n\n**Shadow Philosophy**: Pinterest uses minimal shadows. The masonry grid relies on content (photography) to create visual interest rather than elevation effects. Depth comes from the warmth of surface colors and the generous rounding of containers.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use warm neutrals (\\`#e5e5e0\\`, \\`#e0e0d9\\`, \\`#91918c\\`) — the warm olive/sand tone is the identity\n- Apply Pinterest Red (\\`#e60023\\`) only for primary CTAs — it's bold and singular\n- Use Pin Sans exclusively — one font for everything\n- Apply generous border-radius: 16px for buttons/inputs, 20px+ for cards\n- Keep the masonry grid dense — content density is the value\n- Use warm badge backgrounds (\\`hsla(60,20%,98%,.5)\\`) for subtle warm washes\n- Use \\`#211922\\` (plum black) for primary text — it's warmer than pure black\n\n### Don't\n- Don't use cool gray neutrals — always warm/olive-toned\n- Don't use pure black (\\`#000000\\`) as primary text — use plum black (\\`#211922\\`)\n- Don't use pill-shaped buttons — 16px radius is rounded but not pill\n- Don't add heavy shadows — Pinterest is flat by design, depth from content\n- Don't use small border-radius (<12px) on cards — the generous rounding is core\n- Don't introduce additional brand colors — red + warm neutrals is the complete palette\n- Don't use thin font weights — Pin Sans at 400 minimum\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <576px | Single column, compact layout |\n| Mobile Large | 576–768px | 2-column pin grid |\n| Tablet | 768–890px | Expanded grid |\n| Desktop Small | 890–1312px | Standard masonry grid |\n| Desktop | 1312–1440px | Full layout |\n| Large Desktop | 1440–1680px | Expanded grid columns |\n| Ultra-wide | >1680px | Maximum grid density |\n\n### Collapsing Strategy\n- Pin grid: 5+ columns → 3 → 2 → 1\n- Navigation: search bar + icons → simplified mobile nav\n- Feature sections: side-by-side → stacked\n- Hero: 70px → scales down proportionally\n- Footer: dark multi-column → stacked\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand: Pinterest Red (\\`#e60023\\`)\n- Background: White (\\`#ffffff\\`)\n- Text: Plum Black (\\`#211922\\`)\n- Secondary text: Olive Gray (\\`#62625b\\`)\n- Button surface: Sand Gray (\\`#e5e5e0\\`)\n- Border: Warm Silver (\\`#91918c\\`)\n- Focus: Focus Blue (\\`#435ee5\\`)\n\n### Example Component Prompts\n- \"Create a hero: white background. Headline at 70px Pin Sans weight 600, plum black (#211922). Red CTA button (#e60023, 16px radius, 6px 14px padding). Secondary sand button (#e5e5e0, 16px radius).\"\n- \"Design a pin card: white background, 16px radius, no shadow. Photography fills top, 16px Pin Sans weight 400 description below in #62625b.\"\n- \"Build a circular action button: #e0e0d9 background, 50% radius, #211922 icon.\"\n- \"Create an input field: white background, 1px solid #91918c, 16px radius, 11px 15px padding. Focus: blue outline via semantic tokens.\"\n- \"Design the dark footer: #33332e background. Pinterest script logo in white. 12px Pin Sans links in #91918c.\"\n\n### Iteration Guide\n1. Warm neutrals everywhere — olive/sand grays, never cool steel\n2. Pinterest Red for CTAs only — bold and singular\n3. 16px radius on buttons/inputs, 20px+ on cards — generous but not pill\n4. Pin Sans is the only font — compact at 12px for UI, 70px for display\n5. Photography carries the design — the UI stays warm and minimal\n6. Plum black (#211922) for text — warmer than pure black\n`;\n"],"mappings":";AACO,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/pinterest.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const pinterestBrief = `# Design System Inspired by Pinterest\n\n## 1. Visual Theme & Atmosphere\n\nPinterest's website is a warm, inspiration-driven canvas that treats visual discovery like a lifestyle magazine. The design operates on a soft, slightly warm white background with Pinterest Red (\\`#e60023\\`) as the singular, bold brand accent. Unlike the cool blues of most tech platforms, Pinterest's neutral scale has a distinctly warm undertone — grays lean toward olive/sand (\\`#91918c\\`, \\`#62625b\\`, \\`#e5e5e0\\`) rather than cool steel, creating a cozy, craft-like atmosphere that invites browsing.\n\nThe typography uses Pin Sans — a custom proprietary font with a broad fallback stack including Japanese fonts, reflecting Pinterest's global reach. At display scale (70px, weight 600), Pin Sans creates large, inviting headlines. At smaller sizes, the system is compact: buttons at 12px, captions at 12–14px. The CSS variable naming system (\\`--comp-*\\`, \\`--sema-*\\`, \\`--base-*\\`) reveals a sophisticated three-tier design token architecture: component-level, semantic-level, and base-level tokens.\n\nWhat distinguishes Pinterest is its generous border-radius system (12px–40px, plus 50% for circles) and warm-tinted button backgrounds. The secondary button (\\`#e5e5e0\\`) has a distinctly warm, sand-like tone rather than cold gray. The primary red button uses 16px radius — rounded but not pill-shaped. Combined with warm badge backgrounds (\\`hsla(60,20%,98%,.5)\\` — a subtle yellow-warm wash) and photography-dominant layouts, the result is a design that feels handcrafted and personal, not corporate and sterile.\n\n**Key Characteristics:**\n- Warm white canvas with olive/sand-toned neutrals — cozy, not clinical\n- Pinterest Red (\\`#e60023\\`) as singular bold accent — never subtle, always confident\n- Pin Sans custom font with global fallback stack (including CJK)\n- Three-tier token architecture: \\`--comp-*\\` / \\`--sema-*\\` / \\`--base-*\\`\n- Warm secondary surfaces: sand gray (\\`#e5e5e0\\`), warm badge (\\`hsla(60,20%,98%,.5)\\`)\n- Generous border-radius: 16px standard, up to 40px for large containers\n- Photography-first content — pins/images are the primary visual element\n- Dark near-purple text (\\`#211922\\`) — warm, with a hint of plum\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Pinterest Red** (\\`#e60023\\`): Primary CTA, brand accent — bold, confident red\n- **Green 700** (\\`#103c25\\`): \\`--base-color-green-700\\`, success/nature accent\n- **Green 700 Hover** (\\`#0b2819\\`): \\`--base-color-hover-green-700\\`, pressed green\n\n### Text\n- **Plum Black** (\\`#211922\\`): Primary text — warm near-black with plum undertone\n- **Black** (\\`#000000\\`): Secondary text, button text\n- **Olive Gray** (\\`#62625b\\`): Secondary descriptions, muted text\n- **Warm Silver** (\\`#91918c\\`): \\`--comp-button-color-text-transparent-disabled\\`, disabled text, input borders\n- **White** (\\`#ffffff\\`): Text on dark/colored surfaces\n\n### Interactive\n- **Focus Blue** (\\`#435ee5\\`): \\`--comp-button-color-border-focus-outer-transparent\\`, focus rings\n- **Performance Purple** (\\`#6845ab\\`): \\`--sema-color-hover-icon-performance-plus\\`, performance features\n- **Recommendation Purple** (\\`#7e238b\\`): \\`--sema-color-hover-text-recommendation\\`, AI recommendation\n- **Link Blue** (\\`#2b48d4\\`): Link text color\n- **Facebook Blue** (\\`#0866ff\\`): \\`--facebook-background-color\\`, social login\n- **Pressed Blue** (\\`#617bff\\`): \\`--base-color-pressed-blue-200\\`, pressed state\n\n### Surface & Border\n- **Sand Gray** (\\`#e5e5e0\\`): Secondary button background — warm, craft-like\n- **Warm Light** (\\`#e0e0d9\\`): Circular button backgrounds, badges\n- **Warm Wash** (\\`hsla(60, 20%, 98%, 0.5)\\`): \\`--comp-badge-color-background-wash-light\\`, subtle warm badge bg\n- **Fog** (\\`#f6f6f3\\`): Light surface (at 50% opacity)\n- **Border Disabled** (\\`#c8c8c1\\`): \\`--sema-color-border-disabled\\`, disabled borders\n- **Hover Gray** (\\`#bcbcb3\\`): \\`--base-color-hover-grayscale-150\\`, hover border\n- **Dark Surface** (\\`#33332e\\`): Dark section backgrounds\n\n### Semantic\n- **Error Red** (\\`#9e0a0a\\`): Checkbox/form error states\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: \\`Pin Sans\\`, fallbacks: \\`-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Pin Sans | 70px (4.38rem) | 600 | normal | normal | Maximum impact |\n| Section Heading | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | Negative tracking |\n| Body | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | Standard reading |\n| Caption Bold | Pin Sans | 14px (0.88rem) | 700 | normal | normal | Strong metadata |\n| Caption | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | Small text, tags |\n| Button | Pin Sans | 12px (0.75rem) | 400 | normal | normal | Button labels |\n\n### Principles\n- **Compact type scale**: The range is 12px–70px with a dramatic jump — most functional text is 12–16px, creating a dense, app-like information hierarchy.\n- **Warm weight distribution**: 600–700 for headings, 400–500 for body. No ultra-light weights — the type always feels substantial.\n- **Negative tracking on headings**: -1.2px on 28px headings creates cozy, intimate section titles.\n- **Single font family**: Pin Sans handles everything — no secondary display or monospace font detected.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Red**\n- Background: \\`#e60023\\` (Pinterest Red)\n- Text: \\`#000000\\` (black — unusual choice for contrast on red)\n- Padding: 6px 14px\n- Radius: 16px (generously rounded, not pill)\n- Border: \\`2px solid rgba(255, 255, 255, 0)\\` (transparent)\n- Focus: semantic border + outline via CSS variables\n\n**Secondary Sand**\n- Background: \\`#e5e5e0\\` (warm sand gray)\n- Text: \\`#000000\\`\n- Padding: 6px 14px\n- Radius: 16px\n- Focus: same semantic border system\n\n**Circular Action**\n- Background: \\`#e0e0d9\\` (warm light)\n- Text: \\`#211922\\` (plum black)\n- Radius: 50% (circle)\n- Use: Pin actions, navigation controls\n\n**Ghost / Transparent**\n- Background: transparent\n- Text: \\`#000000\\`\n- No border\n- Use: Tertiary actions\n\n### Cards & Containers\n- Photography-first pin cards with generous radius (12px–20px)\n- No traditional box-shadow on most cards\n- White or warm fog backgrounds\n- 8px white thick border on some image containers\n\n### Inputs\n- Email input: white background, \\`1px solid #91918c\\` border, 16px radius, 11px 15px padding\n- Focus: semantic border + outline system via CSS variables\n\n### Navigation\n- Clean header on white or warm background\n- Pinterest logo + search bar centered\n- Pin Sans 16px for nav links\n- Pinterest Red accents for active states\n\n### Image Treatment\n- Pin-style masonry grid (signature Pinterest layout)\n- Rounded corners: 12px–20px on images\n- Photography as primary content — every pin is an image\n- Thick white borders (8px) on featured image containers\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px\n- Large jumps: 32px → 80px → 100px for section spacing\n\n### Grid & Container\n- Masonry grid for pin content (signature layout)\n- Centered content sections with generous max-width\n- Full-width dark footer\n- Search bar as primary navigation element\n\n### Whitespace Philosophy\n- **Inspiration density**: The masonry grid packs pins tightly — the content density IS the value proposition. Whitespace exists between sections, not within the grid.\n- **Breathing above, density below**: Hero/feature sections get generous padding; the pin grid is compact and immersive.\n\n### Border Radius Scale\n- Standard (12px): Small cards, links\n- Button (16px): Buttons, inputs, medium cards\n- Comfortable (20px): Feature cards\n- Large (28px): Large containers\n- Section (32px): Tab elements, large panels\n- Hero (40px): Hero containers, large feature blocks\n- Circle (50%): Action buttons, tab indicators\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default — pins rely on content, not shadow |\n| Subtle (Level 1) | Minimal shadow (from tokens) | Elevated overlays, dropdowns |\n| Focus (Accessibility) | \\`--sema-color-border-focus-outer-default\\` ring | Focus states |\n\n**Shadow Philosophy**: Pinterest uses minimal shadows. The masonry grid relies on content (photography) to create visual interest rather than elevation effects. Depth comes from the warmth of surface colors and the generous rounding of containers.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use warm neutrals (\\`#e5e5e0\\`, \\`#e0e0d9\\`, \\`#91918c\\`) — the warm olive/sand tone is the identity\n- Apply Pinterest Red (\\`#e60023\\`) only for primary CTAs — it's bold and singular\n- Use Pin Sans exclusively — one font for everything\n- Apply generous border-radius: 16px for buttons/inputs, 20px+ for cards\n- Keep the masonry grid dense — content density is the value\n- Use warm badge backgrounds (\\`hsla(60,20%,98%,.5)\\`) for subtle warm washes\n- Use \\`#211922\\` (plum black) for primary text — it's warmer than pure black\n\n### Don't\n- Don't use cool gray neutrals — always warm/olive-toned\n- Don't use pure black (\\`#000000\\`) as primary text — use plum black (\\`#211922\\`)\n- Don't use pill-shaped buttons — 16px radius is rounded but not pill\n- Don't add heavy shadows — Pinterest is flat by design, depth from content\n- Don't use small border-radius (<12px) on cards — the generous rounding is core\n- Don't introduce additional brand colors — red + warm neutrals is the complete palette\n- Don't use thin font weights — Pin Sans at 400 minimum\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <576px | Single column, compact layout |\n| Mobile Large | 576–768px | 2-column pin grid |\n| Tablet | 768–890px | Expanded grid |\n| Desktop Small | 890–1312px | Standard masonry grid |\n| Desktop | 1312–1440px | Full layout |\n| Large Desktop | 1440–1680px | Expanded grid columns |\n| Ultra-wide | >1680px | Maximum grid density |\n\n### Collapsing Strategy\n- Pin grid: 5+ columns → 3 → 2 → 1\n- Navigation: search bar + icons → simplified mobile nav\n- Feature sections: side-by-side → stacked\n- Hero: 70px → scales down proportionally\n- Footer: dark multi-column → stacked\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand: Pinterest Red (\\`#e60023\\`)\n- Background: White (\\`#ffffff\\`)\n- Text: Plum Black (\\`#211922\\`)\n- Secondary text: Olive Gray (\\`#62625b\\`)\n- Button surface: Sand Gray (\\`#e5e5e0\\`)\n- Border: Warm Silver (\\`#91918c\\`)\n- Focus: Focus Blue (\\`#435ee5\\`)\n\n### Example Component Prompts\n- \"Create a hero: white background. Headline at 70px Pin Sans weight 600, plum black (#211922). Red CTA button (#e60023, 16px radius, 6px 14px padding). Secondary sand button (#e5e5e0, 16px radius).\"\n- \"Design a pin card: white background, 16px radius, no shadow. Photography fills top, 16px Pin Sans weight 400 description below in #62625b.\"\n- \"Build a circular action button: #e0e0d9 background, 50% radius, #211922 icon.\"\n- \"Create an input field: white background, 1px solid #91918c, 16px radius, 11px 15px padding. Focus: blue outline via semantic tokens.\"\n- \"Design the dark footer: #33332e background. Pinterest script logo in white. 12px Pin Sans links in #91918c.\"\n\n### Iteration Guide\n1. Warm neutrals everywhere — olive/sand grays, never cool steel\n2. Pinterest Red for CTAs only — bold and singular\n3. 16px radius on buttons/inputs, 20px+ on cards — generous but not pill\n4. Pin Sans is the only font — compact at 12px for UI, 70px for display\n5. Photography carries the design — the UI stays warm and minimal\n6. Plum black (#211922) for text — warmer than pure black\n`;\n"],"mappings":";AACO,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/playstation.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const playstationBrief = `# Design System Inspired by PlayStation\n\n## 1. Visual Theme & Atmosphere\n\nPlayStation.com carries itself like the marketing wing of a premium consumer-electronics brand that happens to sell entertainment. The page is organized as a **vertical channel of alternating surfaces**: a near-black masthead and hero, a sequence of paper-white editorial panels in the middle, and a deep cobalt-blue footer that anchors the entire experience. Between those surface modes the site leans hard on photography and 3D product renders — the PS5 console, game cover art, DualSense controllers — letting the hardware do the emotional work while the chrome stays restrained.\n\nThe signature typographic move is **SST Light (weight 300) at large sizes**. Sony's custom SST family is used from 22px up to 54px in weight 300, giving display headlines a whispered, elegant quality that feels closer to a luxury watch ad than a game store. That \"quiet authority\" is the exact opposite of The Verge's Manuka shout or Wired's newsstand density — PlayStation wants the type to recede and the product to lead. Body and UI lean on weights 500–700, but the *display* voice is consistently thin and calm.\n\nThe one place restraint breaks is **interaction**. Every primary button has the same hover move: fill swaps to an electric cyan \\`#1eaedb\\`, a 2px white border appears, a 2px PlayStation-blue outer ring blooms behind it, and the entire button **scales up 1.2×**. That combination of color pop, border, ring, and lift-scale is a signature move unique to Sony among major brands — a miniature \"power-on\" animation that the site repeats hundreds of times across a single page.\n\n**Key Characteristics:**\n- Three-surface channel layout: near-black hero, paper-white content, cobalt-blue footer — alternating, never blending\n- SST weight 300 at 22–54px for display — \"quiet authority\" headlines that let product photography lead\n- PlayStation Blue \\`#0070cc\\` as the brand anchor; cyan \\`#1eaedb\\` reserved exclusively for hover/focus states\n- Every interactive element scales 1.2× on hover — a signature \"power-on\" lift unique to PlayStation\n- Pill buttons at full 999px radius; card art in rounded 12–24px rectangles\n- Commerce-orange \\`#d53b00\\` used exclusively for PlayStation Store / buy-state CTAs\n- Wide breakpoint coverage up to 2120px — the site scales all the way to 4K-TV browsing contexts\n\n## 2. Color Palette & Roles\n\n### Primary (Brand Anchor)\n- **PlayStation Blue** (\\`#0070cc\\`): The brand's anchor color. Used on the primary footer, inline links, primary button fills on dark surfaces, and every \"official\" marker. Treat this as immovable — it is the color the brand is most associated with in consumer memory.\n- **Console Black** (\\`#000000\\`): Pure black for the masthead, hero backdrops, and product presentation zones. PlayStation uses black to frame hardware the way a museum uses black to frame a sculpture.\n\n### Secondary & Accent\n- **PlayStation Cyan** (\\`#1eaedb\\`): The interaction color. Applied ONLY to hover, focus, and active states of buttons and links. Never appears as a default background or a text color at rest. Pair with a 2px \\`#ffffff\\` border and a 2px \\`#0070cc\\` outer ring on hover for the full signature treatment.\n- **Link Hover Blue** (\\`#1883fd\\`): The brighter variant used on inline text-link hovers. Distinct from Cyan — this is the link color, Cyan is the button color.\n- **Dark Link Blue** (\\`#0068bd\\`): The link color at rest on light surfaces — a slightly more saturated cousin of the brand blue.\n\n### Surface & Background\n- **Paper White** (\\`#ffffff\\`): Primary content canvas for editorial panels between the masthead and footer.\n- **Ice Mist** (\\`#f5f7fa\\`): The atmospheric end-stop of the light section-gradient. Used subtly behind certain panels to lift them off pure white.\n- **Divider Tint** (\\`#f3f3f3\\`): The quiet horizontal-rule color between content rows.\n- **Masthead Black** (\\`#000000\\`): Top nav and hero canvas — reserved for product-forward zones.\n- **Shadow Black** (\\`#121314\\`): The starting anchor of the dark section-gradient when a panel needs atmospheric depth.\n- **Filter Mist** (\\`rgba(245, 247, 250, 0.3)\\`): Translucent background used behind sticky filter bars — the only \"glassmorphism\" moment on the site.\n\n### Neutrals & Text\n- **Display Ink** (\\`#000000\\`): Primary display headlines on white surfaces.\n- **Deep Charcoal** (\\`#1f1f1f\\`): Body headlines and link color at rest — slightly softer than pure black to reduce visual ring on large blocks.\n- **Body Gray** (\\`#6b6b6b\\`): Secondary body text and metadata.\n- **Mute Gray** (\\`#cccccc\\`): Tertiary labels, disabled states.\n- **Placeholder Ink** (\\`rgba(0, 0, 0, 0.6)\\`): Form placeholder text — 60% black, not a separate gray value.\n- **Inverse White** (\\`#ffffff\\`): Primary text on dark and blue surfaces.\n- **Dark-Link Blue** (\\`#53b1ff\\`): The link color at rest on dark/black surfaces — a lighter airborne variant of PlayStation Blue for legibility on black.\n\n### Semantic & Commerce\n- **Commerce Orange** (\\`#d53b00\\`): Reserved for PlayStation Store buy-state CTAs, price callouts, and \"on sale\" badges. The only warm color on the site — use sparingly and never outside a commerce context.\n- **Commerce Orange Active** (\\`#aa2f00\\`): The pressed/active state of commerce buttons.\n- **Warning Red** (\\`#c81b3a\\`): Form errors and destructive-action warnings.\n- **Shadow Wash 80** (\\`rgba(0, 0, 0, 0.8)\\`): The dramatic scrim used behind hero text on product photography.\n- **Shadow Wash 16** (\\`rgba(0, 0, 0, 0.16)\\`): Low-weight elevation ring on cards.\n- **Shadow Wash 08** (\\`rgba(0, 0, 0, 0.08)\\`): Featherweight card elevation — barely visible but separates white panels from white background.\n- **Shadow Wash 06** (\\`rgba(0, 0, 0, 0.06)\\`): The lightest shadow in the system.\n\n### Gradient System\nPlayStation uses **two section gradients** and nothing else:\n- **Light Section Gradient**: from \\`#ffffff\\` → \\`#f5f7fa\\` — an almost-imperceptible wash that quietly lifts a panel off the canvas.\n- **Dark Section Gradient**: from \\`#121314\\` → \\`#000000\\` — a short vertical wash that gives hero panels a subtle vignette without introducing any hue shift.\n\nBoth gradients are used **only as section backgrounds**, never inside components. There are no gradient buttons, no gradient text, no glowing halos. The brand is blue — not blue-to-purple, not blue-to-cyan.\n\n## 3. Typography Rules\n\n### Font Family\n- **SST** / **Playstation SST** (Sony, proprietary) — fallback: \\`Arial\\`, \\`Helvetica\\`. Sony's custom global typeface, designed by Toshi Omagari and Akira Kobayashi. Covers weights 300 / 500 / 600 / 700 across the homepage. The weight **300 at 22–54px** is PlayStation's typographic signature.\n- **SST (condensed / alternate)** — fallback: \\`helvetica\\`, \\`arial\\`. A compressed variant used in a handful of UI modules where width matters.\n- **Arial** — utility fallback for the rare button variant that renders in system sans.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|---|---|---|---|---|---|---|\n| Hero Display (XL) | SST | 54px / 3.38rem | 300 | 1.25 | -0.1px | The biggest SST moment on the page — quiet-weight luxury headline |\n| Hero Display (L) | SST | 44px / 2.75rem | 300 | 1.25 | 0.1px | Secondary hero headlines |\n| Large Display | SST | 35px / 2.20rem | 300 | 1.25 | — | Feature panel headlines |\n| Mid Display | SST | 28px / 1.75rem | 300 | 1.25 | 0.1px | Section headings |\n| Compact Display | SST | 22px / 1.38rem | 300 | 1.25 | 0.1px | Module titles — still in light weight 300 |\n| Playstation SST Sub | Playstation SST | 22.5px / 1.41rem | 400 | 1.30 | — | Promotional sub-heading |\n| UI Heading Small | SST | 18px / 1.13rem | 600 | 1.00 | — | Tight UI headings |\n| Button / CTA | SST | 18px / 1.13rem | 500 | 1.25 | 0.4px | Primary button label |\n| Button / Emphasized | SST | 18px / 1.13rem | 700 | 1.25 | 0.45px | Higher-emphasis CTAs (buy, subscribe) |\n| Button Serif | SST | 18px / 1.13rem | 600 | 1.50 | — | Secondary button label |\n| Body Relaxed | SST | 18px / 1.13rem | 400 | 1.50 | 0.1px | Standard reading body |\n| Link Body | SST | 18px / 1.13rem | 400 | 1.50 | — | Inline link text |\n| Compact Button | SST | 14px / 0.88rem | 700 | 1.25 | 0.324px | Mini CTAs in cards |\n| Utility Caption | SST | 14px / 0.88rem | 500 | 1.50 | — | Captions, tag labels |\n| Caption Body | SST | 14px / 0.88rem | 400 | 1.50 | — | Standard metadata |\n| Playstation Caption Bold | Playstation SST | 14px / 0.88rem | 700 | 1.40 | — | Emphasized caption |\n| Playstation Caption Mid | Playstation SST | 14px / 0.88rem | 600 | 1.40 | — | Semi-bold caption |\n| Playstation Button | Playstation SST | 14.4px / 0.90rem | 700 | 1.00 | 0.144px | UI button with tight leading |\n| Playstation Tab | Playstation SST | 14px / 0.88rem | 400 | 1.10 | 0.14px | Tab/pill label |\n| Playstation Compact Caption | Playstation SST | 12.8px / 0.80rem | 400 | 1.10 | — | Smallest UI caption |\n| Micro Caption | SST | 12px / 0.75rem | 500 | 1.50 | — | Footer microcopy, legal text |\n| Compact Caption Bold | SST | 12.06px / 0.75rem | 700 | 1.50 | — | Emphasized micro text |\n\n### Principles\n- **Weight 300 at large sizes is the voice.** PlayStation is the only major console brand that uses a light-weight display for its hero headlines. Resist the urge to \"upgrade\" display type to 500 or 700 — the quietness is the personality.\n- **Weight jumps at the UI layer.** Below 18px the system shifts to 500–700 for legibility. The weight gradient from 300 (display) → 400 (body) → 500 (captions) → 700 (buttons) is the hierarchy.\n- **Letter-spacing is barely-there.** Most values are 0.1–0.45px, either positive or slightly negative. The \\`-0.1px\\` on the 54px hero tightens the display type just enough to read as \"designed\" without becoming a typographic statement.\n- **Two SST casings.** \"SST\" and \"Playstation SST\" are functionally the same family with slightly different metric sets (Playstation SST is tighter at small sizes). Treat them as interchangeable for purposes outside Sony's internal licensing.\n- **No all-caps.** Unlike The Verge or Wired, PlayStation rarely uses UPPERCASE labels. Kickers and tags stay in title case or sentence case — another \"quiet authority\" move.\n- **No serif anywhere.** The entire system is sans. There is no print-voice counterpoint.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary — PlayStation Blue Pill**\n- Background: \\`#0070cc\\` (PlayStation Blue)\n- Text: \\`#ffffff\\`, SST 18px / 500 / 0.4px tracking\n- Border: none at rest\n- Border radius: \\`999px\\` — full pill\n- Padding: ~\\`12px 24px\\` (variable based on size class)\n- Outline: \\`rgb(255, 255, 255) none 0px\\` at rest\n- **Hover (signature move)**:\n  - Background fills to \\`#1eaedb\\` (PlayStation Cyan)\n  - Text stays \\`#ffffff\\`\n  - 2px \\`#ffffff\\` border appears\n  - 2px \\`#0070cc\\` outer ring shadow blooms (\\`0 0 0 2px #0070cc\\`)\n  - \\`transform: scale(1.2)\\` — the button actually grows 20%\n- Active: \\`opacity: 0.6\\` — a quick dim to signal press\n- Focus: Same as hover, but the ring turns into \\`rgb(0, 114, 206) 0px 0px 0px 2px\\` focus shadow\n- Transition: ~180ms ease on background, transform, and shadow\n\n**Secondary — White Outline on Dark**\n- Background: \\`#ffffff\\`\n- Text: \\`#0172ce\\` (PlayStation Blue variant)\n- Border: \\`2px outset #000000\\` — a genuine \\`outset\\` border, which is extremely rare in modern CSS\n- Radius: varies (often \\`999px\\` or \\`36px\\`)\n- Padding: \\`16px 20px\\`\n- Hover: same signature cyan fill + scale(1.2) + ring treatment\n- Focus: same ring treatment\n\n**Commerce Orange**\n- Background: \\`#d53b00\\` (Commerce Orange)\n- Text: \\`#ffffff\\`, SST 18px / 700 / 0.45px tracking\n- Border radius: \\`999px\\` — pill\n- Used only on PS Store / Buy / Subscribe Plus CTAs\n- Active: background darkens to \\`#aa2f00\\`\n- Hover: follows the cyan-invert rule like all other buttons (NOT an orange-specific hover)\n\n**Transparent Ghost**\n- Background: transparent\n- Text: \\`#1f1f1f\\` (Deep Charcoal)\n- Border: \\`1px solid #dedede\\`\n- Padding: \\`0 10px\\` (tight, nav-optimized)\n- Hover: cyan fill, white text, 2px white border, scale(1.2)\n- Active: text shifts to \\`#0072ce\\`, opacity 0.6\n\n**Icon Circle**\n- Background: \\`rgba(0, 0, 0, 0.2)\\` on photography; \\`#ffffff\\` on light surfaces\n- Border radius: \\`100%\\` — perfect circle\n- Used for carousel prev/next arrows and share buttons\n- Hover: lightens to \\`var(--color-role-backgrounds-primary-link-hover)\\` (roughly \\`#e5e5e5\\` on light)\n\n**Mini CTA (In-card)**\n- SST 14px / 700 / 0.324px tracking\n- Padding ~8px 16px\n- Radius: \\`999px\\`\n- Used inside game cards for \"Buy Now\" / \"Add to Cart\" mini CTAs\n\n### Cards & Containers\n\n**Hero Card (Game Feature)**\n- Background: photography/render — usually black-anchored\n- Border radius: \\`24px\\` or \\`19px\\` for feature cards\n- Padding: 32–48px interior\n- Shadow: \\`rgba(0, 0, 0, 0.8) 0px 5px 9px 0px\\` — a dramatic drop-shadow only used when a card overlaps the hero photography\n- Hover: subtle scale transform, cyan outline appears on primary CTA\n\n**Game Cover Tile**\n- Background: game cover art, unpadded\n- Border radius: \\`12px\\` or \\`13px\\` (images) / \\`19px\\` (card frame)\n- Shadow: \\`rgba(0, 0, 0, 0.08) 0px 5px 9px 0px\\` — feather-weight elevation\n- Hover: the card's primary CTA lights up cyan, the card itself may scale 1.02×\n- Transition: 200ms ease on transform\n\n**Content Panel (White)**\n- Background: \\`#ffffff\\` or the light section gradient \\`#ffffff → #f5f7fa\\`\n- Border: typically none; separated from neighbors by spacing and subtle shadows\n- Radius: \\`12px\\`–\\`24px\\` depending on panel hierarchy\n- Shadow: \\`rgba(0, 0, 0, 0.06) 0px 5px 9px 0px\\` — the lightest in the system\n\n**Dark Card on Dark**\n- Background: \\`rgba(0, 0, 0, 0.2)\\` over photography\n- Border radius: \\`6px\\` (compact) or \\`24px\\` (feature)\n- Used for \"press kit\" or \"stat block\" inlays over hero video\n\n### Inputs & Forms\n- **Default**: \\`#ffffff\\` background, \\`1px solid #cccccc\\` border, \\`3px\\` border radius (tighter than the rest of the system — inputs are the one place where PlayStation gets genuinely compact), SST 16px text in \\`#1f1f1f\\`, placeholder \\`rgba(0, 0, 0, 0.6)\\`.\n- **Focus**: 2px \\`#0070cc\\` focus ring via \\`box-shadow: 0 0 0 2px #0070cc\\`. No border-color change — the ring does the work.\n- **Error**: border and text shift to \\`#c81b3a\\` (Warning Red), inline error text below in the same red.\n- **Transition**: ~180ms ease on border and shadow.\n\n### Navigation\n\n- **Top nav**: black (\\`#000000\\`) full-bleed strip with the PlayStation logo (white) left-aligned, category links centered in SST 14–16px / 500, and a small \"Sign In\" CTA right-aligned.\n- **Hover on nav link**: color transitions from \\`#ffffff\\` to \\`#1883fd\\` (Link Hover Blue), no underline.\n- **Active section**: marked by a subtle 2px underline in \\`#0070cc\\`.\n- **Mobile**: nav collapses to a hamburger drawer. Inside the drawer, links stack vertically with 16px gaps and 20px horizontal padding.\n- **Sticky behavior**: the nav stays pinned at the top on scroll; when it enters a light-surface zone it **does not invert** — it stays black-backed throughout.\n\n### Image Treatment\n\n- **Aspect ratios**: 16:9 hero video/photography, 1:1 console renders, 3:4 game cover art, 4:3 lifestyle imagery.\n- **Corners**: rounded to \\`12px\\`, \\`13px\\`, or \\`24px\\` depending on card context. Game covers get \\`6–12px\\`, hero images get \\`24px\\`.\n- **Full-bleed**: only in the masthead hero and footer promotional banners. Everything else sits inside a padded content column.\n- **Shadow**: dramatic \\`rgba(0, 0, 0, 0.8) 0 5px 9px 0\\` drop on heroes, feather \\`rgba(0, 0, 0, 0.06) 0 5px 9px 0\\` on grid tiles.\n- **Hover**: image stays static, the card frame and primary CTA respond.\n- **Lazy loading**: \\`loading=\"lazy\"\\` on everything below the fold, \\`eager\\` on the masthead hero.\n\n### Game Store Pill (Distinctive)\n- Background: \\`#ffffff\\`\n- Text: \\`#000000\\`, SST 14px / 500\n- Padding: \\`14px 18px\\`\n- Radius: \\`9999px\\` — full pill\n- A neutral pill tag that sits next to game covers to label platform (\"PS5\", \"PS4\", \"PSVR2\"). White-on-dark contrast.\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px.\n- **Scale**: 1, 2, 3, 4.5, 5, 8, 9, 10, 12, 14, 15, 16, 18, 20, 21px.\n- **Section padding**: 48–96px vertical between major panels. Hero-to-content transitions use the larger end.\n- **Card padding**: 20–32px interior. Feature hero cards can expand to 48px.\n- **Inline spacing**: 8–12px between headline and deck, 12–16px between deck and CTA.\n- **Micro-scale**: The 1/2/3/4.5/5/9/10/12 values are used for pill padding, caption spacing, and border offsets — not for editorial rhythm.\n\n### Grid & Container\n- **Max width**: ~1920px (dembrandt detected breakpoints up to 2120px). Container caps typically around \\`1280–1920px\\` depending on panel.\n- **Column patterns**: 12-column responsive grid that resolves into 3/4/6-column game tile rows depending on hierarchy. Hero zones often span 12 columns; featured tiles sit in 6+3+3 or 4+4+4 configurations.\n- **Outer padding**: 16px mobile → 48px tablet → 64–96px desktop.\n- **Gutters**: 16–24px between columns, tighter (8–12px) inside tile clusters.\n\n### Whitespace Philosophy\nPlayStation treats whitespace like a luxury brand treats store lighting — as a premium signal. There is noticeably more vertical breathing room between modules than on any other major retail site, and the white editorial panels often hold only one headline + one image + one CTA at hero-scale padding. The effect is a \"gallery pace\" where each product gets its own room rather than competing in a grid of thumbnails.\n\n### Border Radius Scale\n- **2px** — cookie banner buttons and small admin UI\n- **3px** — form inputs, tab panels (tighter than everything else — a deliberate \"functional UI\" cue)\n- **6px** — compact buttons and inline images\n- **12px** — standard game cover images and content images\n- **13px** — certain figure wrappers (a 1px offset from 12px for nesting)\n- **19px** — feature cards\n- **20px** — inline tag spans\n- **24px** — hero cards, primary feature frames\n- **36px** — full-pill nav and secondary button variants\n- **48px** — large feature buttons\n- **999px / 100%** — full pill primary buttons and circular icon buttons\n\nEleven discrete radius values — one of the richest radius systems of any site in this catalog. The range exists because PlayStation deliberately uses different radii for different *hierarchies*: 3px for utility, 12px for media, 24px for features, 999px for CTAs.\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|---|---|---|\n| 0 | No shadow | Default content on \\`#ffffff\\` |\n| 1 | \\`rgba(0, 0, 0, 0.06) 0 5px 9px 0\\` | Feather-light editorial panel lift |\n| 2 | \\`rgba(0, 0, 0, 0.08) 0 5px 9px 0\\` | Standard grid tile elevation |\n| 3 | \\`rgba(0, 0, 0, 0.16) 0 5px 9px 0\\` | Emphasized card (hover or active) |\n| 4 | \\`rgba(0, 0, 0, 0.8) 0 5px 9px 0\\` | Hero overlay shadow — dramatic drop used over photography |\n| 5 | \\`0 0 0 2px #0070cc\\` (focus ring) | Primary button focus state |\n| 6 | \\`0 0 0 2px #000000\\` (hover ring) | Secondary button hover ring |\n| 7 | Section gradient \\`#121314 → #000000\\` | Atmospheric depth on dark hero panels |\n\nPlayStation's depth philosophy is **layered but restrained**. The shadow scale runs from 0.06 to 0.16 for normal states, then jumps to 0.8 for hero drops — there is no 0.2, 0.3, 0.4 middle ground. The effect is that most of the page sits almost flat, but when a hero card needs to float over photography, it genuinely *floats*. Elevation is either whispered or shouted, never muttered.\n\n### Decorative Depth\n- **Section gradients** (dark and light, both described above) — used only as section backgrounds\n- **Focus/hover rings** at 2px, always blue or cyan depending on state\n- **No glows, blurs, or atmospheric effects** beyond the two section gradients\n- **No gradient buttons or text** — the visual system is solid color blocks everywhere except section transitions\n\n## 7. Do's and Don'ts\n\n### Do\n- **Do** use PlayStation Blue (\\`#0070cc\\`) as the primary CTA fill and the footer anchor. It is the brand's anchor color.\n- **Do** use SST weight 300 for every display headline 22px and above. The quiet-weight headline is the voice.\n- **Do** apply the full hover signature to every primary button: cyan fill + 2px white border + 2px blue outer ring + \\`scale(1.2)\\`.\n- **Do** use full-pill radius (\\`999px\\`) on primary and commerce buttons.\n- **Do** reserve PlayStation Cyan (\\`#1eaedb\\`) exclusively for hover, focus, and active states — never as a resting background.\n- **Do** use Commerce Orange (\\`#d53b00\\`) only on PlayStation Store / purchase CTAs and price callouts.\n- **Do** alternate dark hero panels with white content panels and anchor with a deep blue footer — the three-surface channel layout is the page rhythm.\n- **Do** use dramatic \\`rgba(0, 0, 0, 0.8)\\` hero drop shadows when a card overlaps product photography.\n- **Do** keep the top nav black on every scroll position — it does not invert to white over light panels.\n\n### Don't\n- **Don't** bold display headlines. Weight 300 at 22–54px is the PlayStation voice. Weight 700 display type reads as \"another game retailer\".\n- **Don't** use ALL-CAPS labels or kickers. PlayStation rarely uses uppercase — it is a quiet-authority brand, not a hazard-tape one.\n- **Don't** use gradient buttons, text, or backgrounds outside the two declared section gradients.\n- **Don't** introduce warm colors outside Commerce Orange. No red CTAs, no yellow highlights, no green success pills.\n- **Don't** use square corners on buttons or media. The system has eleven radii — pick one, but never \\`0\\`.\n- **Don't** skip the \\`scale(1.2)\\` hover move on primary buttons. The lift-scale is a brand interaction signature.\n- **Don't** use serif type. The system is 100% SST sans.\n- **Don't** let cyan \\`#1eaedb\\` appear as a text or background color at rest. It only exists in motion.\n- **Don't** design panels that fight for attention. PlayStation's whitespace rhythm gives each module its own \"gallery room\".\n\n## 8. Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Small Mobile | <400px | Single column, nav collapses to hamburger, SST hero scales to ~28px |\n| Mobile | 400–599px | Single column, tiles stack full-width, padding opens to 16px |\n| Large Mobile | 600–767px | Still single column but 2-column tile option in select modules |\n| Tablet Portrait | 768–1023px | 2-column game grid, nav still condensed |\n| Tablet Landscape | 1024–1279px | 3–4 column grid, full nav restored |\n| Desktop | 1280–1599px | Full editorial grid, max hero display scale (44–54px) |\n| Large Desktop | 1600–1919px | Container caps at 1600px, margins expand |\n| 4K / Big-Screen | ≥1920px | Container expands to 1920px max, hero content scales up to match TV viewing distance |\n| Ultra-Wide | ≥2120px | Extreme breakpoint — page stays anchored, outer margins absorb extra width |\n\nThe dembrandt sweep detected 30 breakpoints between 320px and 2120px — an unusually wide responsive range. PlayStation tunes specifically for **big-screen contexts** (1920–2120px) because PS5 owners frequently browse the site on TVs via the console's browser or via cast-to-TV from a phone. Most retail sites stop tuning at 1440px; PlayStation keeps tuning through 4K.\n\n### Touch Targets\n- Primary pill buttons are ~48–56px tall (SST 18px text + ~12–16px vertical padding) — comfortably WCAG AAA.\n- Nav links are smaller (~32–40px tall) at desktop; on mobile they pad out to 48px+ inside the drawer.\n- Icon circle buttons are 40–48px — touch-friendly.\n\n### Collapsing Strategy\n- **Nav**: full nav → condensed → hamburger drawer as viewport narrows. Logo stays pinned left; CTA stays pinned right.\n- **Grid**: 6-col → 4-col → 3-col → 2-col → 1-col. Game tile cards reflow without cropping cover art.\n- **Spacing**: section padding tightens from 96px → 64px → 48px → 32px → 24px as viewport narrows.\n- **Type**: SST hero scales from 54px → 44px → 35px → 28px → 22px. The light weight 300 is preserved at every size.\n- **Hero photography**: art-direction swap — desktop uses wide 16:9 crops, mobile uses 4:3 or 1:1 crops with the product centered.\n\n### Image Behavior\n- Responsive raster (\\`srcset\\` + \\`<picture>\\` with art-direction), aspect ratios preserved per breakpoint.\n- 4K-ready: the site serves high-density imagery at 1920px+ to avoid upscaling on TV browsing.\n- \\`loading=\"lazy\"\\` on everything below the fold; hero is \\`eager\\` with a preload hint.\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- **Primary CTA**: \"PlayStation Blue (\\`#0070cc\\`)\"\n- **Hover / Focus Accent**: \"PlayStation Cyan (\\`#1eaedb\\`)\"\n- **Background (White Surface)**: \"Paper White (\\`#ffffff\\`)\"\n- **Background (Dark Surface)**: \"Console Black (\\`#000000\\`)\"\n- **Heading Text on White**: \"Display Ink (\\`#000000\\`)\"\n- **Body Text on White**: \"Deep Charcoal (\\`#1f1f1f\\`)\"\n- **Body Text on Black**: \"Inverse White (\\`#ffffff\\`)\"\n- **Commerce / Buy Accent**: \"Commerce Orange (\\`#d53b00\\`)\"\n- **Footer Anchor**: \"PlayStation Blue (\\`#0070cc\\`)\"\n\n### Example Component Prompts\n1. *\"Create a primary CTA button with a \\`#0070cc\\` PlayStation Blue fill, white text in SST 18px / 500 / 0.4px tracking, 999px border radius, 12px × 24px padding. On hover, the background transitions to \\`#1eaedb\\` PlayStation Cyan, a 2px \\`#ffffff\\` border appears, a 2px \\`#0070cc\\` outer ring blooms via box-shadow, and the entire button scales 1.2× — all in a 180ms ease transition.\"*\n2. *\"Design a hero panel on a \\`#000000\\` Console Black canvas with a 54px SST weight 300 headline in \\`#ffffff\\` with -0.1px letter-spacing and 1.25 line-height. Place a single primary CTA below with the standard PlayStation hover treatment. No ALL-CAPS labels anywhere.\"*\n3. *\"Build a game cover tile: 3:4 aspect ratio image with 12px border radius, feather-weight \\`rgba(0, 0, 0, 0.08) 0 5px 9px 0\\` drop shadow, a 14px SST 700 title below, a 12px SST 500 platform tag, and a mini 14px / 700 / 0.324px tracking primary CTA in PlayStation Blue.\"*\n4. *\"Create a commerce pill button for a PlayStation Store purchase: \\`#d53b00\\` Commerce Orange fill, \\`#ffffff\\` text in SST 18px / 700 / 0.45px tracking, 999px radius, 12px × 28px padding. Active state darkens to \\`#aa2f00\\`. Hover follows the standard cyan-invert with 1.2× scale.\"*\n5. *\"Design a white content panel between dark hero sections: \\`#ffffff\\` background with the subtle \\`#ffffff → #f5f7fa\\` light section gradient, 24px border radius, 48px interior padding, feather-weight \\`rgba(0, 0, 0, 0.06) 0 5px 9px 0\\` elevation, a 35px SST 300 headline, a 18px body paragraph, and a single primary CTA.\"*\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. **Audit display weight.** Every headline 22px and above should be SST weight 300. If you see weight 500 or 700 at hero scale, you've lost the PlayStation voice.\n2. **Audit the hover treatment.** Every primary button must scale 1.2× on hover with the cyan-fill + white-border + blue-ring combination. Miss any of those four and the interaction signature breaks.\n3. **Audit corners.** Every container and button should land on 2, 3, 6, 12, 13, 19, 20, 24, 36, 48, or 999px / 100%. Square corners break the voice.\n4. **Audit color sprawl.** Only PlayStation Blue (\\`#0070cc\\`), Cyan (\\`#1eaedb\\`), Commerce Orange (\\`#d53b00\\`), and the declared grays/blacks/whites should appear in chrome. If you see any other hue, correct it.\n5. **Audit surface alternation.** The page should alternate dark hero → white content → dark hero → white content → blue footer. If two same-surface panels are adjacent, insert a transition.\n6. **Audit casing.** Sentence case and title case only. No ALL-CAPS labels, buttons, or kickers. If you see uppercase, convert it.\n7. **Audit shadow weight.** Shadow opacity should land on 0.06 / 0.08 / 0.16 / 0.8 — nothing in between. If you see 0.1, 0.2, 0.3, 0.5 drop shadows, correct to the nearest declared tier.\n8. **Audit whitespace.** If two modules feel \"competitive\" (fighting for attention), add 48–96px of vertical breathing room. PlayStation's gallery-pace rhythm is non-negotiable.\n`;\n"],"mappings":";AACO,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/playstation.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const playstationBrief = `# Design System Inspired by PlayStation\n\n## 1. Visual Theme & Atmosphere\n\nPlayStation.com carries itself like the marketing wing of a premium consumer-electronics brand that happens to sell entertainment. The page is organized as a **vertical channel of alternating surfaces**: a near-black masthead and hero, a sequence of paper-white editorial panels in the middle, and a deep cobalt-blue footer that anchors the entire experience. Between those surface modes the site leans hard on photography and 3D product renders — the PS5 console, game cover art, DualSense controllers — letting the hardware do the emotional work while the chrome stays restrained.\n\nThe signature typographic move is **SST Light (weight 300) at large sizes**. Sony's custom SST family is used from 22px up to 54px in weight 300, giving display headlines a whispered, elegant quality that feels closer to a luxury watch ad than a game store. That \"quiet authority\" is the exact opposite of The Verge's Manuka shout or Wired's newsstand density — PlayStation wants the type to recede and the product to lead. Body and UI lean on weights 500–700, but the *display* voice is consistently thin and calm.\n\nThe one place restraint breaks is **interaction**. Every primary button has the same hover move: fill swaps to an electric cyan \\`#1eaedb\\`, a 2px white border appears, a 2px PlayStation-blue outer ring blooms behind it, and the entire button **scales up 1.2×**. That combination of color pop, border, ring, and lift-scale is a signature move unique to Sony among major brands — a miniature \"power-on\" animation that the site repeats hundreds of times across a single page.\n\n**Key Characteristics:**\n- Three-surface channel layout: near-black hero, paper-white content, cobalt-blue footer — alternating, never blending\n- SST weight 300 at 22–54px for display — \"quiet authority\" headlines that let product photography lead\n- PlayStation Blue \\`#0070cc\\` as the brand anchor; cyan \\`#1eaedb\\` reserved exclusively for hover/focus states\n- Every interactive element scales 1.2× on hover — a signature \"power-on\" lift unique to PlayStation\n- Pill buttons at full 999px radius; card art in rounded 12–24px rectangles\n- Commerce-orange \\`#d53b00\\` used exclusively for PlayStation Store / buy-state CTAs\n- Wide breakpoint coverage up to 2120px — the site scales all the way to 4K-TV browsing contexts\n\n## 2. Color Palette & Roles\n\n### Primary (Brand Anchor)\n- **PlayStation Blue** (\\`#0070cc\\`): The brand's anchor color. Used on the primary footer, inline links, primary button fills on dark surfaces, and every \"official\" marker. Treat this as immovable — it is the color the brand is most associated with in consumer memory.\n- **Console Black** (\\`#000000\\`): Pure black for the masthead, hero backdrops, and product presentation zones. PlayStation uses black to frame hardware the way a museum uses black to frame a sculpture.\n\n### Secondary & Accent\n- **PlayStation Cyan** (\\`#1eaedb\\`): The interaction color. Applied ONLY to hover, focus, and active states of buttons and links. Never appears as a default background or a text color at rest. Pair with a 2px \\`#ffffff\\` border and a 2px \\`#0070cc\\` outer ring on hover for the full signature treatment.\n- **Link Hover Blue** (\\`#1883fd\\`): The brighter variant used on inline text-link hovers. Distinct from Cyan — this is the link color, Cyan is the button color.\n- **Dark Link Blue** (\\`#0068bd\\`): The link color at rest on light surfaces — a slightly more saturated cousin of the brand blue.\n\n### Surface & Background\n- **Paper White** (\\`#ffffff\\`): Primary content canvas for editorial panels between the masthead and footer.\n- **Ice Mist** (\\`#f5f7fa\\`): The atmospheric end-stop of the light section-gradient. Used subtly behind certain panels to lift them off pure white.\n- **Divider Tint** (\\`#f3f3f3\\`): The quiet horizontal-rule color between content rows.\n- **Masthead Black** (\\`#000000\\`): Top nav and hero canvas — reserved for product-forward zones.\n- **Shadow Black** (\\`#121314\\`): The starting anchor of the dark section-gradient when a panel needs atmospheric depth.\n- **Filter Mist** (\\`rgba(245, 247, 250, 0.3)\\`): Translucent background used behind sticky filter bars — the only \"glassmorphism\" moment on the site.\n\n### Neutrals & Text\n- **Display Ink** (\\`#000000\\`): Primary display headlines on white surfaces.\n- **Deep Charcoal** (\\`#1f1f1f\\`): Body headlines and link color at rest — slightly softer than pure black to reduce visual ring on large blocks.\n- **Body Gray** (\\`#6b6b6b\\`): Secondary body text and metadata.\n- **Mute Gray** (\\`#cccccc\\`): Tertiary labels, disabled states.\n- **Placeholder Ink** (\\`rgba(0, 0, 0, 0.6)\\`): Form placeholder text — 60% black, not a separate gray value.\n- **Inverse White** (\\`#ffffff\\`): Primary text on dark and blue surfaces.\n- **Dark-Link Blue** (\\`#53b1ff\\`): The link color at rest on dark/black surfaces — a lighter airborne variant of PlayStation Blue for legibility on black.\n\n### Semantic & Commerce\n- **Commerce Orange** (\\`#d53b00\\`): Reserved for PlayStation Store buy-state CTAs, price callouts, and \"on sale\" badges. The only warm color on the site — use sparingly and never outside a commerce context.\n- **Commerce Orange Active** (\\`#aa2f00\\`): The pressed/active state of commerce buttons.\n- **Warning Red** (\\`#c81b3a\\`): Form errors and destructive-action warnings.\n- **Shadow Wash 80** (\\`rgba(0, 0, 0, 0.8)\\`): The dramatic scrim used behind hero text on product photography.\n- **Shadow Wash 16** (\\`rgba(0, 0, 0, 0.16)\\`): Low-weight elevation ring on cards.\n- **Shadow Wash 08** (\\`rgba(0, 0, 0, 0.08)\\`): Featherweight card elevation — barely visible but separates white panels from white background.\n- **Shadow Wash 06** (\\`rgba(0, 0, 0, 0.06)\\`): The lightest shadow in the system.\n\n### Gradient System\nPlayStation uses **two section gradients** and nothing else:\n- **Light Section Gradient**: from \\`#ffffff\\` → \\`#f5f7fa\\` — an almost-imperceptible wash that quietly lifts a panel off the canvas.\n- **Dark Section Gradient**: from \\`#121314\\` → \\`#000000\\` — a short vertical wash that gives hero panels a subtle vignette without introducing any hue shift.\n\nBoth gradients are used **only as section backgrounds**, never inside components. There are no gradient buttons, no gradient text, no glowing halos. The brand is blue — not blue-to-purple, not blue-to-cyan.\n\n## 3. Typography Rules\n\n### Font Family\n- **SST** / **Playstation SST** (Sony, proprietary) — fallback: \\`Arial\\`, \\`Helvetica\\`. Sony's custom global typeface, designed by Toshi Omagari and Akira Kobayashi. Covers weights 300 / 500 / 600 / 700 across the homepage. The weight **300 at 22–54px** is PlayStation's typographic signature.\n- **SST (condensed / alternate)** — fallback: \\`helvetica\\`, \\`arial\\`. A compressed variant used in a handful of UI modules where width matters.\n- **Arial** — utility fallback for the rare button variant that renders in system sans.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|---|---|---|---|---|---|---|\n| Hero Display (XL) | SST | 54px / 3.38rem | 300 | 1.25 | -0.1px | The biggest SST moment on the page — quiet-weight luxury headline |\n| Hero Display (L) | SST | 44px / 2.75rem | 300 | 1.25 | 0.1px | Secondary hero headlines |\n| Large Display | SST | 35px / 2.20rem | 300 | 1.25 | — | Feature panel headlines |\n| Mid Display | SST | 28px / 1.75rem | 300 | 1.25 | 0.1px | Section headings |\n| Compact Display | SST | 22px / 1.38rem | 300 | 1.25 | 0.1px | Module titles — still in light weight 300 |\n| Playstation SST Sub | Playstation SST | 22.5px / 1.41rem | 400 | 1.30 | — | Promotional sub-heading |\n| UI Heading Small | SST | 18px / 1.13rem | 600 | 1.00 | — | Tight UI headings |\n| Button / CTA | SST | 18px / 1.13rem | 500 | 1.25 | 0.4px | Primary button label |\n| Button / Emphasized | SST | 18px / 1.13rem | 700 | 1.25 | 0.45px | Higher-emphasis CTAs (buy, subscribe) |\n| Button Serif | SST | 18px / 1.13rem | 600 | 1.50 | — | Secondary button label |\n| Body Relaxed | SST | 18px / 1.13rem | 400 | 1.50 | 0.1px | Standard reading body |\n| Link Body | SST | 18px / 1.13rem | 400 | 1.50 | — | Inline link text |\n| Compact Button | SST | 14px / 0.88rem | 700 | 1.25 | 0.324px | Mini CTAs in cards |\n| Utility Caption | SST | 14px / 0.88rem | 500 | 1.50 | — | Captions, tag labels |\n| Caption Body | SST | 14px / 0.88rem | 400 | 1.50 | — | Standard metadata |\n| Playstation Caption Bold | Playstation SST | 14px / 0.88rem | 700 | 1.40 | — | Emphasized caption |\n| Playstation Caption Mid | Playstation SST | 14px / 0.88rem | 600 | 1.40 | — | Semi-bold caption |\n| Playstation Button | Playstation SST | 14.4px / 0.90rem | 700 | 1.00 | 0.144px | UI button with tight leading |\n| Playstation Tab | Playstation SST | 14px / 0.88rem | 400 | 1.10 | 0.14px | Tab/pill label |\n| Playstation Compact Caption | Playstation SST | 12.8px / 0.80rem | 400 | 1.10 | — | Smallest UI caption |\n| Micro Caption | SST | 12px / 0.75rem | 500 | 1.50 | — | Footer microcopy, legal text |\n| Compact Caption Bold | SST | 12.06px / 0.75rem | 700 | 1.50 | — | Emphasized micro text |\n\n### Principles\n- **Weight 300 at large sizes is the voice.** PlayStation is the only major console brand that uses a light-weight display for its hero headlines. Resist the urge to \"upgrade\" display type to 500 or 700 — the quietness is the personality.\n- **Weight jumps at the UI layer.** Below 18px the system shifts to 500–700 for legibility. The weight gradient from 300 (display) → 400 (body) → 500 (captions) → 700 (buttons) is the hierarchy.\n- **Letter-spacing is barely-there.** Most values are 0.1–0.45px, either positive or slightly negative. The \\`-0.1px\\` on the 54px hero tightens the display type just enough to read as \"designed\" without becoming a typographic statement.\n- **Two SST casings.** \"SST\" and \"Playstation SST\" are functionally the same family with slightly different metric sets (Playstation SST is tighter at small sizes). Treat them as interchangeable for purposes outside Sony's internal licensing.\n- **No all-caps.** Unlike The Verge or Wired, PlayStation rarely uses UPPERCASE labels. Kickers and tags stay in title case or sentence case — another \"quiet authority\" move.\n- **No serif anywhere.** The entire system is sans. There is no print-voice counterpoint.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary — PlayStation Blue Pill**\n- Background: \\`#0070cc\\` (PlayStation Blue)\n- Text: \\`#ffffff\\`, SST 18px / 500 / 0.4px tracking\n- Border: none at rest\n- Border radius: \\`999px\\` — full pill\n- Padding: ~\\`12px 24px\\` (variable based on size class)\n- Outline: \\`rgb(255, 255, 255) none 0px\\` at rest\n- **Hover (signature move)**:\n  - Background fills to \\`#1eaedb\\` (PlayStation Cyan)\n  - Text stays \\`#ffffff\\`\n  - 2px \\`#ffffff\\` border appears\n  - 2px \\`#0070cc\\` outer ring shadow blooms (\\`0 0 0 2px #0070cc\\`)\n  - \\`transform: scale(1.2)\\` — the button actually grows 20%\n- Active: \\`opacity: 0.6\\` — a quick dim to signal press\n- Focus: Same as hover, but the ring turns into \\`rgb(0, 114, 206) 0px 0px 0px 2px\\` focus shadow\n- Transition: ~180ms ease on background, transform, and shadow\n\n**Secondary — White Outline on Dark**\n- Background: \\`#ffffff\\`\n- Text: \\`#0172ce\\` (PlayStation Blue variant)\n- Border: \\`2px outset #000000\\` — a genuine \\`outset\\` border, which is extremely rare in modern CSS\n- Radius: varies (often \\`999px\\` or \\`36px\\`)\n- Padding: \\`16px 20px\\`\n- Hover: same signature cyan fill + scale(1.2) + ring treatment\n- Focus: same ring treatment\n\n**Commerce Orange**\n- Background: \\`#d53b00\\` (Commerce Orange)\n- Text: \\`#ffffff\\`, SST 18px / 700 / 0.45px tracking\n- Border radius: \\`999px\\` — pill\n- Used only on PS Store / Buy / Subscribe Plus CTAs\n- Active: background darkens to \\`#aa2f00\\`\n- Hover: follows the cyan-invert rule like all other buttons (NOT an orange-specific hover)\n\n**Transparent Ghost**\n- Background: transparent\n- Text: \\`#1f1f1f\\` (Deep Charcoal)\n- Border: \\`1px solid #dedede\\`\n- Padding: \\`0 10px\\` (tight, nav-optimized)\n- Hover: cyan fill, white text, 2px white border, scale(1.2)\n- Active: text shifts to \\`#0072ce\\`, opacity 0.6\n\n**Icon Circle**\n- Background: \\`rgba(0, 0, 0, 0.2)\\` on photography; \\`#ffffff\\` on light surfaces\n- Border radius: \\`100%\\` — perfect circle\n- Used for carousel prev/next arrows and share buttons\n- Hover: lightens to \\`var(--color-role-backgrounds-primary-link-hover)\\` (roughly \\`#e5e5e5\\` on light)\n\n**Mini CTA (In-card)**\n- SST 14px / 700 / 0.324px tracking\n- Padding ~8px 16px\n- Radius: \\`999px\\`\n- Used inside game cards for \"Buy Now\" / \"Add to Cart\" mini CTAs\n\n### Cards & Containers\n\n**Hero Card (Game Feature)**\n- Background: photography/render — usually black-anchored\n- Border radius: \\`24px\\` or \\`19px\\` for feature cards\n- Padding: 32–48px interior\n- Shadow: \\`rgba(0, 0, 0, 0.8) 0px 5px 9px 0px\\` — a dramatic drop-shadow only used when a card overlaps the hero photography\n- Hover: subtle scale transform, cyan outline appears on primary CTA\n\n**Game Cover Tile**\n- Background: game cover art, unpadded\n- Border radius: \\`12px\\` or \\`13px\\` (images) / \\`19px\\` (card frame)\n- Shadow: \\`rgba(0, 0, 0, 0.08) 0px 5px 9px 0px\\` — feather-weight elevation\n- Hover: the card's primary CTA lights up cyan, the card itself may scale 1.02×\n- Transition: 200ms ease on transform\n\n**Content Panel (White)**\n- Background: \\`#ffffff\\` or the light section gradient \\`#ffffff → #f5f7fa\\`\n- Border: typically none; separated from neighbors by spacing and subtle shadows\n- Radius: \\`12px\\`–\\`24px\\` depending on panel hierarchy\n- Shadow: \\`rgba(0, 0, 0, 0.06) 0px 5px 9px 0px\\` — the lightest in the system\n\n**Dark Card on Dark**\n- Background: \\`rgba(0, 0, 0, 0.2)\\` over photography\n- Border radius: \\`6px\\` (compact) or \\`24px\\` (feature)\n- Used for \"press kit\" or \"stat block\" inlays over hero video\n\n### Inputs & Forms\n- **Default**: \\`#ffffff\\` background, \\`1px solid #cccccc\\` border, \\`3px\\` border radius (tighter than the rest of the system — inputs are the one place where PlayStation gets genuinely compact), SST 16px text in \\`#1f1f1f\\`, placeholder \\`rgba(0, 0, 0, 0.6)\\`.\n- **Focus**: 2px \\`#0070cc\\` focus ring via \\`box-shadow: 0 0 0 2px #0070cc\\`. No border-color change — the ring does the work.\n- **Error**: border and text shift to \\`#c81b3a\\` (Warning Red), inline error text below in the same red.\n- **Transition**: ~180ms ease on border and shadow.\n\n### Navigation\n\n- **Top nav**: black (\\`#000000\\`) full-bleed strip with the PlayStation logo (white) left-aligned, category links centered in SST 14–16px / 500, and a small \"Sign In\" CTA right-aligned.\n- **Hover on nav link**: color transitions from \\`#ffffff\\` to \\`#1883fd\\` (Link Hover Blue), no underline.\n- **Active section**: marked by a subtle 2px underline in \\`#0070cc\\`.\n- **Mobile**: nav collapses to a hamburger drawer. Inside the drawer, links stack vertically with 16px gaps and 20px horizontal padding.\n- **Sticky behavior**: the nav stays pinned at the top on scroll; when it enters a light-surface zone it **does not invert** — it stays black-backed throughout.\n\n### Image Treatment\n\n- **Aspect ratios**: 16:9 hero video/photography, 1:1 console renders, 3:4 game cover art, 4:3 lifestyle imagery.\n- **Corners**: rounded to \\`12px\\`, \\`13px\\`, or \\`24px\\` depending on card context. Game covers get \\`6–12px\\`, hero images get \\`24px\\`.\n- **Full-bleed**: only in the masthead hero and footer promotional banners. Everything else sits inside a padded content column.\n- **Shadow**: dramatic \\`rgba(0, 0, 0, 0.8) 0 5px 9px 0\\` drop on heroes, feather \\`rgba(0, 0, 0, 0.06) 0 5px 9px 0\\` on grid tiles.\n- **Hover**: image stays static, the card frame and primary CTA respond.\n- **Lazy loading**: \\`loading=\"lazy\"\\` on everything below the fold, \\`eager\\` on the masthead hero.\n\n### Game Store Pill (Distinctive)\n- Background: \\`#ffffff\\`\n- Text: \\`#000000\\`, SST 14px / 500\n- Padding: \\`14px 18px\\`\n- Radius: \\`9999px\\` — full pill\n- A neutral pill tag that sits next to game covers to label platform (\"PS5\", \"PS4\", \"PSVR2\"). White-on-dark contrast.\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px.\n- **Scale**: 1, 2, 3, 4.5, 5, 8, 9, 10, 12, 14, 15, 16, 18, 20, 21px.\n- **Section padding**: 48–96px vertical between major panels. Hero-to-content transitions use the larger end.\n- **Card padding**: 20–32px interior. Feature hero cards can expand to 48px.\n- **Inline spacing**: 8–12px between headline and deck, 12–16px between deck and CTA.\n- **Micro-scale**: The 1/2/3/4.5/5/9/10/12 values are used for pill padding, caption spacing, and border offsets — not for editorial rhythm.\n\n### Grid & Container\n- **Max width**: ~1920px (dembrandt detected breakpoints up to 2120px). Container caps typically around \\`1280–1920px\\` depending on panel.\n- **Column patterns**: 12-column responsive grid that resolves into 3/4/6-column game tile rows depending on hierarchy. Hero zones often span 12 columns; featured tiles sit in 6+3+3 or 4+4+4 configurations.\n- **Outer padding**: 16px mobile → 48px tablet → 64–96px desktop.\n- **Gutters**: 16–24px between columns, tighter (8–12px) inside tile clusters.\n\n### Whitespace Philosophy\nPlayStation treats whitespace like a luxury brand treats store lighting — as a premium signal. There is noticeably more vertical breathing room between modules than on any other major retail site, and the white editorial panels often hold only one headline + one image + one CTA at hero-scale padding. The effect is a \"gallery pace\" where each product gets its own room rather than competing in a grid of thumbnails.\n\n### Border Radius Scale\n- **2px** — cookie banner buttons and small admin UI\n- **3px** — form inputs, tab panels (tighter than everything else — a deliberate \"functional UI\" cue)\n- **6px** — compact buttons and inline images\n- **12px** — standard game cover images and content images\n- **13px** — certain figure wrappers (a 1px offset from 12px for nesting)\n- **19px** — feature cards\n- **20px** — inline tag spans\n- **24px** — hero cards, primary feature frames\n- **36px** — full-pill nav and secondary button variants\n- **48px** — large feature buttons\n- **999px / 100%** — full pill primary buttons and circular icon buttons\n\nEleven discrete radius values — one of the richest radius systems of any site in this catalog. The range exists because PlayStation deliberately uses different radii for different *hierarchies*: 3px for utility, 12px for media, 24px for features, 999px for CTAs.\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|---|---|---|\n| 0 | No shadow | Default content on \\`#ffffff\\` |\n| 1 | \\`rgba(0, 0, 0, 0.06) 0 5px 9px 0\\` | Feather-light editorial panel lift |\n| 2 | \\`rgba(0, 0, 0, 0.08) 0 5px 9px 0\\` | Standard grid tile elevation |\n| 3 | \\`rgba(0, 0, 0, 0.16) 0 5px 9px 0\\` | Emphasized card (hover or active) |\n| 4 | \\`rgba(0, 0, 0, 0.8) 0 5px 9px 0\\` | Hero overlay shadow — dramatic drop used over photography |\n| 5 | \\`0 0 0 2px #0070cc\\` (focus ring) | Primary button focus state |\n| 6 | \\`0 0 0 2px #000000\\` (hover ring) | Secondary button hover ring |\n| 7 | Section gradient \\`#121314 → #000000\\` | Atmospheric depth on dark hero panels |\n\nPlayStation's depth philosophy is **layered but restrained**. The shadow scale runs from 0.06 to 0.16 for normal states, then jumps to 0.8 for hero drops — there is no 0.2, 0.3, 0.4 middle ground. The effect is that most of the page sits almost flat, but when a hero card needs to float over photography, it genuinely *floats*. Elevation is either whispered or shouted, never muttered.\n\n### Decorative Depth\n- **Section gradients** (dark and light, both described above) — used only as section backgrounds\n- **Focus/hover rings** at 2px, always blue or cyan depending on state\n- **No glows, blurs, or atmospheric effects** beyond the two section gradients\n- **No gradient buttons or text** — the visual system is solid color blocks everywhere except section transitions\n\n## 7. Do's and Don'ts\n\n### Do\n- **Do** use PlayStation Blue (\\`#0070cc\\`) as the primary CTA fill and the footer anchor. It is the brand's anchor color.\n- **Do** use SST weight 300 for every display headline 22px and above. The quiet-weight headline is the voice.\n- **Do** apply the full hover signature to every primary button: cyan fill + 2px white border + 2px blue outer ring + \\`scale(1.2)\\`.\n- **Do** use full-pill radius (\\`999px\\`) on primary and commerce buttons.\n- **Do** reserve PlayStation Cyan (\\`#1eaedb\\`) exclusively for hover, focus, and active states — never as a resting background.\n- **Do** use Commerce Orange (\\`#d53b00\\`) only on PlayStation Store / purchase CTAs and price callouts.\n- **Do** alternate dark hero panels with white content panels and anchor with a deep blue footer — the three-surface channel layout is the page rhythm.\n- **Do** use dramatic \\`rgba(0, 0, 0, 0.8)\\` hero drop shadows when a card overlaps product photography.\n- **Do** keep the top nav black on every scroll position — it does not invert to white over light panels.\n\n### Don't\n- **Don't** bold display headlines. Weight 300 at 22–54px is the PlayStation voice. Weight 700 display type reads as \"another game retailer\".\n- **Don't** use ALL-CAPS labels or kickers. PlayStation rarely uses uppercase — it is a quiet-authority brand, not a hazard-tape one.\n- **Don't** use gradient buttons, text, or backgrounds outside the two declared section gradients.\n- **Don't** introduce warm colors outside Commerce Orange. No red CTAs, no yellow highlights, no green success pills.\n- **Don't** use square corners on buttons or media. The system has eleven radii — pick one, but never \\`0\\`.\n- **Don't** skip the \\`scale(1.2)\\` hover move on primary buttons. The lift-scale is a brand interaction signature.\n- **Don't** use serif type. The system is 100% SST sans.\n- **Don't** let cyan \\`#1eaedb\\` appear as a text or background color at rest. It only exists in motion.\n- **Don't** design panels that fight for attention. PlayStation's whitespace rhythm gives each module its own \"gallery room\".\n\n## 8. Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Small Mobile | <400px | Single column, nav collapses to hamburger, SST hero scales to ~28px |\n| Mobile | 400–599px | Single column, tiles stack full-width, padding opens to 16px |\n| Large Mobile | 600–767px | Still single column but 2-column tile option in select modules |\n| Tablet Portrait | 768–1023px | 2-column game grid, nav still condensed |\n| Tablet Landscape | 1024–1279px | 3–4 column grid, full nav restored |\n| Desktop | 1280–1599px | Full editorial grid, max hero display scale (44–54px) |\n| Large Desktop | 1600–1919px | Container caps at 1600px, margins expand |\n| 4K / Big-Screen | ≥1920px | Container expands to 1920px max, hero content scales up to match TV viewing distance |\n| Ultra-Wide | ≥2120px | Extreme breakpoint — page stays anchored, outer margins absorb extra width |\n\nThe dembrandt sweep detected 30 breakpoints between 320px and 2120px — an unusually wide responsive range. PlayStation tunes specifically for **big-screen contexts** (1920–2120px) because PS5 owners frequently browse the site on TVs via the console's browser or via cast-to-TV from a phone. Most retail sites stop tuning at 1440px; PlayStation keeps tuning through 4K.\n\n### Touch Targets\n- Primary pill buttons are ~48–56px tall (SST 18px text + ~12–16px vertical padding) — comfortably WCAG AAA.\n- Nav links are smaller (~32–40px tall) at desktop; on mobile they pad out to 48px+ inside the drawer.\n- Icon circle buttons are 40–48px — touch-friendly.\n\n### Collapsing Strategy\n- **Nav**: full nav → condensed → hamburger drawer as viewport narrows. Logo stays pinned left; CTA stays pinned right.\n- **Grid**: 6-col → 4-col → 3-col → 2-col → 1-col. Game tile cards reflow without cropping cover art.\n- **Spacing**: section padding tightens from 96px → 64px → 48px → 32px → 24px as viewport narrows.\n- **Type**: SST hero scales from 54px → 44px → 35px → 28px → 22px. The light weight 300 is preserved at every size.\n- **Hero photography**: art-direction swap — desktop uses wide 16:9 crops, mobile uses 4:3 or 1:1 crops with the product centered.\n\n### Image Behavior\n- Responsive raster (\\`srcset\\` + \\`<picture>\\` with art-direction), aspect ratios preserved per breakpoint.\n- 4K-ready: the site serves high-density imagery at 1920px+ to avoid upscaling on TV browsing.\n- \\`loading=\"lazy\"\\` on everything below the fold; hero is \\`eager\\` with a preload hint.\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- **Primary CTA**: \"PlayStation Blue (\\`#0070cc\\`)\"\n- **Hover / Focus Accent**: \"PlayStation Cyan (\\`#1eaedb\\`)\"\n- **Background (White Surface)**: \"Paper White (\\`#ffffff\\`)\"\n- **Background (Dark Surface)**: \"Console Black (\\`#000000\\`)\"\n- **Heading Text on White**: \"Display Ink (\\`#000000\\`)\"\n- **Body Text on White**: \"Deep Charcoal (\\`#1f1f1f\\`)\"\n- **Body Text on Black**: \"Inverse White (\\`#ffffff\\`)\"\n- **Commerce / Buy Accent**: \"Commerce Orange (\\`#d53b00\\`)\"\n- **Footer Anchor**: \"PlayStation Blue (\\`#0070cc\\`)\"\n\n### Example Component Prompts\n1. *\"Create a primary CTA button with a \\`#0070cc\\` PlayStation Blue fill, white text in SST 18px / 500 / 0.4px tracking, 999px border radius, 12px × 24px padding. On hover, the background transitions to \\`#1eaedb\\` PlayStation Cyan, a 2px \\`#ffffff\\` border appears, a 2px \\`#0070cc\\` outer ring blooms via box-shadow, and the entire button scales 1.2× — all in a 180ms ease transition.\"*\n2. *\"Design a hero panel on a \\`#000000\\` Console Black canvas with a 54px SST weight 300 headline in \\`#ffffff\\` with -0.1px letter-spacing and 1.25 line-height. Place a single primary CTA below with the standard PlayStation hover treatment. No ALL-CAPS labels anywhere.\"*\n3. *\"Build a game cover tile: 3:4 aspect ratio image with 12px border radius, feather-weight \\`rgba(0, 0, 0, 0.08) 0 5px 9px 0\\` drop shadow, a 14px SST 700 title below, a 12px SST 500 platform tag, and a mini 14px / 700 / 0.324px tracking primary CTA in PlayStation Blue.\"*\n4. *\"Create a commerce pill button for a PlayStation Store purchase: \\`#d53b00\\` Commerce Orange fill, \\`#ffffff\\` text in SST 18px / 700 / 0.45px tracking, 999px radius, 12px × 28px padding. Active state darkens to \\`#aa2f00\\`. Hover follows the standard cyan-invert with 1.2× scale.\"*\n5. *\"Design a white content panel between dark hero sections: \\`#ffffff\\` background with the subtle \\`#ffffff → #f5f7fa\\` light section gradient, 24px border radius, 48px interior padding, feather-weight \\`rgba(0, 0, 0, 0.06) 0 5px 9px 0\\` elevation, a 35px SST 300 headline, a 18px body paragraph, and a single primary CTA.\"*\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. **Audit display weight.** Every headline 22px and above should be SST weight 300. If you see weight 500 or 700 at hero scale, you've lost the PlayStation voice.\n2. **Audit the hover treatment.** Every primary button must scale 1.2× on hover with the cyan-fill + white-border + blue-ring combination. Miss any of those four and the interaction signature breaks.\n3. **Audit corners.** Every container and button should land on 2, 3, 6, 12, 13, 19, 20, 24, 36, 48, or 999px / 100%. Square corners break the voice.\n4. **Audit color sprawl.** Only PlayStation Blue (\\`#0070cc\\`), Cyan (\\`#1eaedb\\`), Commerce Orange (\\`#d53b00\\`), and the declared grays/blacks/whites should appear in chrome. If you see any other hue, correct it.\n5. **Audit surface alternation.** The page should alternate dark hero → white content → dark hero → white content → blue footer. If two same-surface panels are adjacent, insert a transition.\n6. **Audit casing.** Sentence case and title case only. No ALL-CAPS labels, buttons, or kickers. If you see uppercase, convert it.\n7. **Audit shadow weight.** Shadow opacity should land on 0.06 / 0.08 / 0.16 / 0.8 — nothing in between. If you see 0.1, 0.2, 0.3, 0.5 drop shadows, correct to the nearest declared tier.\n8. **Audit whitespace.** If two modules feel \"competitive\" (fighting for attention), add 48–96px of vertical breathing room. PlayStation's gallery-pace rhythm is non-negotiable.\n`;\n"],"mappings":";AACO,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/posthog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/posthog.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const posthogBrief = `# Design System Inspired by PostHog\n\n## 1. Visual Theme & Atmosphere\n\nPostHog's website feels like a startup's internal wiki that escaped into the wild — warm, irreverent, and deliberately anti-corporate. The background isn't the expected crisp white or dark void of developer tools; it's a warm, sage-tinted cream (\\`#fdfdf8\\`) that gives every surface a handmade, paper-like quality. Colors lean into earthy olive greens and muted sage rather than the conventional blues and purples of the SaaS world. It's as if someone designed a developer analytics platform inside a cozy garden shed.\n\nThe personality is the star: hand-drawn hedgehog illustrations, quirky action figures, and playful imagery replace the stock photography and abstract gradients typical of B2B SaaS. IBM Plex Sans Variable serves as the typographic foundation — a font with genuine technical credibility (created by IBM, widely used in developer contexts) deployed here with bold weights (700, 800) on headings and generous line-heights on body text. The typography says \"we're serious engineers\" while everything around it says \"but we don't take ourselves too seriously.\"\n\nThe interaction design carries the same spirit: hover states flash PostHog Orange (\\`#F54E00\\`) text — a hidden brand color that doesn't appear at rest but surprises on interaction. Dark near-black buttons (\\`#1e1f23\\`) use opacity reduction on hover rather than color shifts, and active states scale slightly. The border system uses sage-tinted grays (\\`#bfc1b7\\`) that harmonize with the olive text palette. Built on Tailwind CSS with Radix UI and shadcn/ui primitives, the technical foundation is modern and component-driven, but the visual output is stubbornly unique.\n\n**Key Characteristics:**\n- Warm sage/olive color palette instead of conventional blues — earthy and approachable\n- IBM Plex Sans Variable font at bold weights (700/800) for headings with generous 1.50+ line-heights\n- Hidden brand orange (\\`#F54E00\\`) that only appears on hover interactions — a delightful surprise\n- Hand-drawn hedgehog illustrations and playful imagery — deliberately anti-corporate\n- Sage-tinted borders (\\`#bfc1b7\\`) and backgrounds (\\`#eeefe9\\`) creating a unified warm-green system\n- Dark near-black CTAs (\\`#1e1f23\\`) with opacity-based hover states\n- Content-heavy editorial layout — the site reads like a magazine, not a typical landing page\n- Tailwind CSS + Radix UI + shadcn/ui component architecture\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Olive Ink** (\\`#4d4f46\\`): Primary text color — a distinctive olive-gray that gives all text a warm, earthy tone\n- **Deep Olive** (\\`#23251d\\`): Link text and high-emphasis headings — near-black with green undertone\n- **PostHog Orange** (\\`#F54E00\\`): Hidden brand accent — appears only on hover states, a vibrant orange that surprises\n\n### Secondary & Accent\n- **Amber Gold** (\\`#F7A501\\`): Secondary hover accent on dark buttons — warm gold that pairs with the orange\n- **Gold Border** (\\`#b17816\\`): Special button borders — an amber-gold for featured CTAs\n- **Focus Blue** (\\`#3b82f6\\`): Focus ring color (Tailwind default) — the only blue in the system, reserved for accessibility\n\n### Surface & Background\n- **Warm Parchment** (\\`#fdfdf8\\`): Primary page background — warm near-white with yellow-green undertone\n- **Sage Cream** (\\`#eeefe9\\`): Input backgrounds, secondary surfaces — light sage tint\n- **Light Sage** (\\`#e5e7e0\\`): Button backgrounds, tertiary surfaces — muted sage-green\n- **Warm Tan** (\\`#d4c9b8\\`): Featured button backgrounds — warm tan/khaki for emphasis\n- **Hover White** (\\`#f4f4f4\\`): Universal hover background state\n\n### Neutrals & Text\n- **Olive Ink** (\\`#4d4f46\\`): Primary body and UI text\n- **Muted Olive** (\\`#65675e\\`): Secondary text, button labels on light backgrounds\n- **Sage Placeholder** (\\`#9ea096\\`): Placeholder text, disabled states — warm sage-green\n- **Sage Border** (\\`#bfc1b7\\`): Primary border color — olive-tinted gray for all borders\n- **Light Border** (\\`#b6b7af\\`): Secondary border, toolbar borders — slightly darker sage\n\n### Semantic & Accent\n- **PostHog Orange** (\\`#F54E00\\`): Hover text accent — signals interactivity and brand personality\n- **Amber Gold** (\\`#F7A501\\`): Dark button hover accent — warmth signal\n- **Focus Blue** (\\`#3b82f6\\` at 50% opacity): Keyboard focus rings — accessibility-only color\n- **Dark Text** (\\`#111827\\`): High-contrast link text — near-black for important links\n\n### Gradient System\n- No gradients on the marketing site — PostHog's visual language is deliberately flat and warm\n- Depth is achieved through layered surfaces and border containment, not color transitions\n\n## 3. Typography Rules\n\n### Font Family\n- **Display & Body**: \\`IBM Plex Sans Variable\\` — variable font (100–700+ weight range). Fallbacks: \\`IBM Plex Sans, -apple-system, system-ui, Avenir Next, Avenir, Segoe UI, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Arial\\`\n- **Monospace**: \\`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New\\` — system monospace stack\n- **Code Display**: \\`Source Code Pro\\` — with fallbacks: \\`Menlo, Consolas, Monaco\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | IBM Plex Sans Variable | 30px | 800 | 1.20 | -0.75px | Extra-bold, tight, maximum impact |\n| Section Heading | IBM Plex Sans Variable | 36px | 700 | 1.50 | 0px | Large but generous line-height |\n| Feature Heading | IBM Plex Sans Variable | 24px | 700 | 1.33 | 0px | Feature section titles |\n| Card Heading | IBM Plex Sans Variable | 21.4px | 700 | 1.40 | -0.54px | Slightly unusual size (scaled) |\n| Sub-heading | IBM Plex Sans Variable | 20px | 700 | 1.40 | -0.5px | Content sub-sections |\n| Sub-heading Uppercase | IBM Plex Sans Variable | 20px | 700 | 1.40 | 0px | Uppercase transform for labels |\n| Body Emphasis | IBM Plex Sans Variable | 19.3px | 600 | 1.56 | -0.48px | Semi-bold callout text |\n| Label Uppercase | IBM Plex Sans Variable | 18px | 700 | 1.50 | 0px | Uppercase category labels |\n| Body Semi | IBM Plex Sans Variable | 18px | 600 | 1.56 | 0px | Semi-bold body text |\n| Body | IBM Plex Sans Variable | 16px | 400 | 1.50 | 0px | Standard reading text |\n| Body Medium | IBM Plex Sans Variable | 16px | 500 | 1.50 | 0px | Medium-weight body |\n| Body Relaxed | IBM Plex Sans Variable | 15px | 400 | 1.71 | 0px | Relaxed line-height for long reads |\n| Nav / UI | IBM Plex Sans Variable | 15px | 600 | 1.50 | 0px | Navigation and UI labels |\n| Caption | IBM Plex Sans Variable | 14px | 400–700 | 1.43 | 0px | Small text, various weights |\n| Small Label | IBM Plex Sans Variable | 13px | 500–700 | 1.00–1.50 | 0px | Tags, badges, micro labels |\n| Micro | IBM Plex Sans Variable | 12px | 400–700 | 1.33 | 0px | Smallest text, some uppercase |\n| Code | Source Code Pro | 14px | 500 | 1.43 | 0px | Code snippets and terminal |\n\n### Principles\n- **Bold heading dominance**: Headings use 700–800 weight — PostHog's typography is confident and assertive, not whispery\n- **Generous body line-heights**: Body text at 1.50–1.71 line-height creates extremely comfortable reading — the site is content-heavy and optimized for long sessions\n- **Fractional sizes**: Several sizes (21.4px, 19.3px, 13.7px) suggest a fluid/scaled type system rather than fixed stops — likely computed from Tailwind's rem scale at non-standard base\n- **Uppercase as category signal**: Bold uppercase labels (18px–20px weight 700) are used for product category headings — a magazine-editorial convention\n- **Selective negative tracking**: Letter-spacing tightens on display text (-0.75px at 30px) but relaxes to 0px on body — headlines compress, body breathes\n\n## 4. Component Stylings\n\n### Buttons\n- **Dark Primary**: \\`#1e1f23\\` background, white text, 6px radius, \\`10px 12px\\` padding. Hover: opacity 0.7 with Amber Gold text. Active: opacity 0.8 with slight scale transform. The main CTA — dark and confident\n- **Sage Light**: \\`#e5e7e0\\` background, Olive Ink (\\`#4d4f46\\`) text, 4px radius, \\`4px\\` padding. Hover: \\`#f4f4f4\\` bg with PostHog Orange text. Compact utility button\n- **Warm Tan Featured**: \\`#d4c9b8\\` background, black text, no visible radius. Hover: same orange text flash. Featured/premium actions\n- **Input-style**: \\`#eeefe9\\` background, Sage Placeholder (\\`#9ea096\\`) text, 4px radius, 1px \\`#b6b7af\\` border. Looks like a search/filter control\n- **Near-white Ghost**: \\`#fdfdf8\\` background, Olive Ink text, 4px radius, transparent 1px border. Minimal presence\n- **Hover pattern**: All buttons flash PostHog Orange (\\`#F54E00\\`) or Amber Gold (\\`#F7A501\\`) text on hover — the brand's signature interaction surprise\n\n### Cards & Containers\n- **Bordered Card**: Warm Parchment (\\`#fdfdf8\\`) or white background, 1px \\`#bfc1b7\\` border, 4px–6px radius — clean and minimal\n- **Sage Surface Card**: \\`#eeefe9\\` background for secondary content containers\n- **Shadow Card**: \\`0px 25px 50px -12px rgba(0, 0, 0, 0.25)\\` — a single deep shadow for elevated content (modals, dropdowns)\n- **Hover**: Orange text flash on interactive cards — consistent with button behavior\n\n### Inputs & Forms\n- **Default**: \\`#eeefe9\\` background, \\`#9ea096\\` placeholder text, 1px \\`#b6b7af\\` border, 4px radius, \\`2px 0px 2px 8px\\` padding\n- **Focus**: \\`#3b82f6\\` ring at 50% opacity (Tailwind blue focus ring)\n- **Text color**: \\`#374151\\` for input values — darker than primary text for readability\n- **Border variations**: Multiple border patterns — some inputs use compound borders (top, left, bottom-only)\n\n### Navigation\n- **Top nav**: Warm background, IBM Plex Sans at 15px weight 600\n- **Dropdown menus**: Rich mega-menu structure with product categories\n- **Link color**: Deep Olive (\\`#23251d\\`) for nav links, underline on hover\n- **CTA**: Dark Primary button (#1e1f23) in the nav — \"Get started - free\"\n- **Mobile**: Collapses to hamburger with simplified menu\n\n### Image Treatment\n- **Hand-drawn illustrations**: Hedgehog mascot and quirky illustrations — the signature visual element\n- **Product screenshots**: UI screenshots embedded in device frames or clean containers\n- **Action figures**: Playful product photography of hedgehog figurines — anti-corporate\n- **Trust logos**: Enterprise logos (Airbus, GOV.UK) displayed in a muted trust bar\n- **Aspect ratios**: Mixed — illustrations are irregular, screenshots are 16:9 or widescreen\n\n### AI Chat Widget\n- Floating PostHog AI assistant with speech bubble — an interactive product demo embedded in the marketing site\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 2px, 4px, 6px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 34px\n- **Section padding**: 32px–48px vertical between sections (compact for a content-heavy site)\n- **Card padding**: 4px–12px internal (notably compact)\n- **Component gaps**: 4px–8px between related elements\n\n### Grid & Container\n- **Max width**: 1536px (largest breakpoint), with content containers likely 1200px–1280px\n- **Column patterns**: Varied — single column for text content, 2-3 column grids for feature cards, asymmetric layouts for product demos\n- **Breakpoints**: 13 defined — 1px, 425px, 482px, 640px, 768px, 767px, 800px, 900px, 1024px, 1076px, 1160px, 1280px, 1536px\n\n### Whitespace Philosophy\n- **Content-dense by design**: PostHog's site is information-rich — whitespace is measured, not lavish\n- **Editorial pacing**: Content sections flow like a magazine with varied layouts keeping the eye moving\n- **Illustrations as breathing room**: Hand-drawn hedgehog art breaks up dense content sections naturally\n\n### Border Radius Scale\n- **2px**: Small inline elements, tags (\\`span\\`)\n- **4px**: Primary UI components — buttons, inputs, dropdowns, menu items (\\`button\\`, \\`div\\`, \\`combobox\\`)\n- **6px**: Secondary containers — larger buttons, list items, card variants (\\`button\\`, \\`div\\`, \\`li\\`)\n- **9999px**: Pill shape — badges, status indicators, rounded tags (\\`span\\`, \\`div\\`)\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow, warm parchment background | Page canvas, most surfaces |\n| Level 1 (Border) | \\`1px solid #bfc1b7\\` (Sage Border) | Card containment, input borders, section dividers |\n| Level 2 (Compound Border) | Multiple 1px borders on different sides | Input groupings, toolbar elements |\n| Level 3 (Deep Shadow) | \\`0px 25px 50px -12px rgba(0, 0, 0, 0.25)\\` | Modals, floating elements, mega-menu dropdowns |\n\n### Shadow Philosophy\nPostHog's elevation system is remarkably minimal — only one shadow definition exists in the entire system. Depth is communicated through:\n- **Border containment**: Sage-tinted borders (\\`#bfc1b7\\`) at 1px create gentle warm separation\n- **Surface color shifts**: Moving from \\`#fdfdf8\\` to \\`#eeefe9\\` to \\`#e5e7e0\\` creates layered depth without shadows\n- **The single shadow**: The one defined shadow (\\`0 25px 50px -12px\\`) is reserved for floating elements — modals, dropdowns, popovers. It's a deep, dramatic shadow that creates clear separation when needed\n\n### Decorative Depth\n- **Illustration layering**: Hand-drawn hedgehog art creates visual depth naturally\n- **No gradients or glow**: The flat, warm surface system relies entirely on border and surface-color differentiation\n- **No glassmorphism**: Fully opaque surfaces throughout\n\n## 7. Do's and Don'ts\n\n### Do\n- Use the olive/sage color family (#4d4f46, #23251d, #bfc1b7) for text and borders — the warm green undertone is essential to the brand\n- Flash PostHog Orange (#F54E00) on hover states — it's the hidden brand signature\n- Use IBM Plex Sans at bold weights (700/800) for headings — the font carries technical credibility\n- Keep body text at generous line-heights (1.50–1.71) — the content-heavy site demands readability\n- Maintain the warm parchment background (#fdfdf8) — not pure white, never cold\n- Use 4px border-radius for most UI elements — keep corners subtle and functional\n- Include playful, hand-drawn illustration elements — the personality is the differentiator\n- Apply opacity-based hover states (0.7 opacity) on dark buttons rather than color shifts\n\n### Don't\n- Use blue, purple, or typical tech-SaaS colors — PostHog's palette is deliberately olive/sage\n- Add heavy shadows — the system uses one shadow for floating elements only; everything else uses borders\n- Make the design look \"polished\" or \"premium\" in a conventional sense — PostHog's charm is its irreverent, scrappy energy\n- Use tight line-heights on body text — the generous 1.50+ spacing is essential for the content-heavy layout\n- Apply large border-radius (12px+) on cards — PostHog uses 4px–6px, keeping things tight and functional\n- Remove the orange hover flash — it's a core interaction pattern, not decoration\n- Replace illustrations with stock photography — the hand-drawn hedgehog art is the brand\n- Use pure white (#ffffff) as page background — the warm sage-cream (#fdfdf8) tint is foundational\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <425px | Single column, compact padding, stacked cards |\n| Mobile | 425px–640px | Slight layout adjustments, larger touch targets |\n| Tablet | 640px–768px | 2-column grids begin, nav partially visible |\n| Tablet Large | 768px–1024px | Multi-column layouts, expanded navigation |\n| Desktop | 1024px–1280px | Full layout, 3-column feature grids, expanded mega-menu |\n| Large Desktop | 1280px–1536px | Max-width container, generous margins |\n| Extra Large | >1536px | Centered container at max-width |\n\n### Touch Targets\n- Buttons: 4px–6px radius with \\`4px–12px\\` padding — compact but usable\n- Nav links: 15px text at weight 600 with adequate padding\n- Mobile: Hamburger menu with simplified navigation\n- Inputs: Generous vertical padding for thumb-friendly forms\n\n### Collapsing Strategy\n- **Navigation**: Full mega-menu with dropdowns → hamburger menu on mobile\n- **Feature grids**: 3-column → 2-column → single column stacked\n- **Typography**: Display sizes reduce across breakpoints (30px → smaller)\n- **Illustrations**: Scale within containers, some may hide on mobile for space\n- **Section spacing**: Reduces proportionally while maintaining readability\n\n### Image Behavior\n- Illustrations scale responsively within containers\n- Product screenshots maintain aspect ratios\n- Trust logos reflow into multi-row grids on mobile\n- AI chat widget may reposition or simplify on small screens\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text: Olive Ink (\\`#4d4f46\\`)\n- Dark Text: Deep Olive (\\`#23251d\\`)\n- Hover Accent: PostHog Orange (\\`#F54E00\\`)\n- Dark CTA: Near-Black (\\`#1e1f23\\`)\n- Button Surface: Light Sage (\\`#e5e7e0\\`)\n- Page Background: Warm Parchment (\\`#fdfdf8\\`)\n- Border: Sage Border (\\`#bfc1b7\\`)\n- Placeholder: Sage Placeholder (\\`#9ea096\\`)\n\n### Example Component Prompts\n- \"Create a hero section on warm parchment background (#fdfdf8) with 30px IBM Plex Sans heading at weight 800, line-height 1.20, letter-spacing -0.75px, olive ink text (#4d4f46), and a dark CTA button (#1e1f23, 6px radius, white text, opacity 0.7 on hover)\"\n- \"Design a feature card with #fdfdf8 background, 1px #bfc1b7 border, 4px radius, IBM Plex Sans heading at 20px weight 700, and 16px body text at weight 400 with 1.50 line-height in olive ink (#4d4f46)\"\n- \"Build a navigation bar with warm background, IBM Plex Sans links at 15px weight 600 in deep olive (#23251d), underline on hover, and a dark CTA button (#1e1f23) at the right\"\n- \"Create a button group: primary dark (#1e1f23, white text, 6px radius), secondary sage (#e5e7e0, #4d4f46 text, 4px radius), and ghost/text button — all flash #F54E00 orange text on hover\"\n- \"Design an input field with #eeefe9 background, 1px #b6b7af border, 4px radius, #9ea096 placeholder text, focus ring in #3b82f6 at 50% opacity\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Verify the background is warm parchment (#fdfdf8) not pure white — the sage-cream warmth is essential\n2. Check that all text uses the olive family (#4d4f46, #23251d) not pure black or neutral gray\n3. Ensure hover states flash PostHog Orange (#F54E00) — if hovering feels bland, you're missing this\n4. Confirm borders use sage-tinted gray (#bfc1b7) not neutral gray — warmth runs through every element\n5. The overall tone should feel like a fun, scrappy startup wiki — never corporate-polished or sterile\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;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/posthog.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const posthogBrief = `# Design System Inspired by PostHog\n\n## 1. Visual Theme & Atmosphere\n\nPostHog's website feels like a startup's internal wiki that escaped into the wild — warm, irreverent, and deliberately anti-corporate. The background isn't the expected crisp white or dark void of developer tools; it's a warm, sage-tinted cream (\\`#fdfdf8\\`) that gives every surface a handmade, paper-like quality. Colors lean into earthy olive greens and muted sage rather than the conventional blues and purples of the SaaS world. It's as if someone designed a developer analytics platform inside a cozy garden shed.\n\nThe personality is the star: hand-drawn hedgehog illustrations, quirky action figures, and playful imagery replace the stock photography and abstract gradients typical of B2B SaaS. IBM Plex Sans Variable serves as the typographic foundation — a font with genuine technical credibility (created by IBM, widely used in developer contexts) deployed here with bold weights (700, 800) on headings and generous line-heights on body text. The typography says \"we're serious engineers\" while everything around it says \"but we don't take ourselves too seriously.\"\n\nThe interaction design carries the same spirit: hover states flash PostHog Orange (\\`#F54E00\\`) text — a hidden brand color that doesn't appear at rest but surprises on interaction. Dark near-black buttons (\\`#1e1f23\\`) use opacity reduction on hover rather than color shifts, and active states scale slightly. The border system uses sage-tinted grays (\\`#bfc1b7\\`) that harmonize with the olive text palette. Built on Tailwind CSS with Radix UI and shadcn/ui primitives, the technical foundation is modern and component-driven, but the visual output is stubbornly unique.\n\n**Key Characteristics:**\n- Warm sage/olive color palette instead of conventional blues — earthy and approachable\n- IBM Plex Sans Variable font at bold weights (700/800) for headings with generous 1.50+ line-heights\n- Hidden brand orange (\\`#F54E00\\`) that only appears on hover interactions — a delightful surprise\n- Hand-drawn hedgehog illustrations and playful imagery — deliberately anti-corporate\n- Sage-tinted borders (\\`#bfc1b7\\`) and backgrounds (\\`#eeefe9\\`) creating a unified warm-green system\n- Dark near-black CTAs (\\`#1e1f23\\`) with opacity-based hover states\n- Content-heavy editorial layout — the site reads like a magazine, not a typical landing page\n- Tailwind CSS + Radix UI + shadcn/ui component architecture\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Olive Ink** (\\`#4d4f46\\`): Primary text color — a distinctive olive-gray that gives all text a warm, earthy tone\n- **Deep Olive** (\\`#23251d\\`): Link text and high-emphasis headings — near-black with green undertone\n- **PostHog Orange** (\\`#F54E00\\`): Hidden brand accent — appears only on hover states, a vibrant orange that surprises\n\n### Secondary & Accent\n- **Amber Gold** (\\`#F7A501\\`): Secondary hover accent on dark buttons — warm gold that pairs with the orange\n- **Gold Border** (\\`#b17816\\`): Special button borders — an amber-gold for featured CTAs\n- **Focus Blue** (\\`#3b82f6\\`): Focus ring color (Tailwind default) — the only blue in the system, reserved for accessibility\n\n### Surface & Background\n- **Warm Parchment** (\\`#fdfdf8\\`): Primary page background — warm near-white with yellow-green undertone\n- **Sage Cream** (\\`#eeefe9\\`): Input backgrounds, secondary surfaces — light sage tint\n- **Light Sage** (\\`#e5e7e0\\`): Button backgrounds, tertiary surfaces — muted sage-green\n- **Warm Tan** (\\`#d4c9b8\\`): Featured button backgrounds — warm tan/khaki for emphasis\n- **Hover White** (\\`#f4f4f4\\`): Universal hover background state\n\n### Neutrals & Text\n- **Olive Ink** (\\`#4d4f46\\`): Primary body and UI text\n- **Muted Olive** (\\`#65675e\\`): Secondary text, button labels on light backgrounds\n- **Sage Placeholder** (\\`#9ea096\\`): Placeholder text, disabled states — warm sage-green\n- **Sage Border** (\\`#bfc1b7\\`): Primary border color — olive-tinted gray for all borders\n- **Light Border** (\\`#b6b7af\\`): Secondary border, toolbar borders — slightly darker sage\n\n### Semantic & Accent\n- **PostHog Orange** (\\`#F54E00\\`): Hover text accent — signals interactivity and brand personality\n- **Amber Gold** (\\`#F7A501\\`): Dark button hover accent — warmth signal\n- **Focus Blue** (\\`#3b82f6\\` at 50% opacity): Keyboard focus rings — accessibility-only color\n- **Dark Text** (\\`#111827\\`): High-contrast link text — near-black for important links\n\n### Gradient System\n- No gradients on the marketing site — PostHog's visual language is deliberately flat and warm\n- Depth is achieved through layered surfaces and border containment, not color transitions\n\n## 3. Typography Rules\n\n### Font Family\n- **Display & Body**: \\`IBM Plex Sans Variable\\` — variable font (100–700+ weight range). Fallbacks: \\`IBM Plex Sans, -apple-system, system-ui, Avenir Next, Avenir, Segoe UI, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Arial\\`\n- **Monospace**: \\`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New\\` — system monospace stack\n- **Code Display**: \\`Source Code Pro\\` — with fallbacks: \\`Menlo, Consolas, Monaco\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | IBM Plex Sans Variable | 30px | 800 | 1.20 | -0.75px | Extra-bold, tight, maximum impact |\n| Section Heading | IBM Plex Sans Variable | 36px | 700 | 1.50 | 0px | Large but generous line-height |\n| Feature Heading | IBM Plex Sans Variable | 24px | 700 | 1.33 | 0px | Feature section titles |\n| Card Heading | IBM Plex Sans Variable | 21.4px | 700 | 1.40 | -0.54px | Slightly unusual size (scaled) |\n| Sub-heading | IBM Plex Sans Variable | 20px | 700 | 1.40 | -0.5px | Content sub-sections |\n| Sub-heading Uppercase | IBM Plex Sans Variable | 20px | 700 | 1.40 | 0px | Uppercase transform for labels |\n| Body Emphasis | IBM Plex Sans Variable | 19.3px | 600 | 1.56 | -0.48px | Semi-bold callout text |\n| Label Uppercase | IBM Plex Sans Variable | 18px | 700 | 1.50 | 0px | Uppercase category labels |\n| Body Semi | IBM Plex Sans Variable | 18px | 600 | 1.56 | 0px | Semi-bold body text |\n| Body | IBM Plex Sans Variable | 16px | 400 | 1.50 | 0px | Standard reading text |\n| Body Medium | IBM Plex Sans Variable | 16px | 500 | 1.50 | 0px | Medium-weight body |\n| Body Relaxed | IBM Plex Sans Variable | 15px | 400 | 1.71 | 0px | Relaxed line-height for long reads |\n| Nav / UI | IBM Plex Sans Variable | 15px | 600 | 1.50 | 0px | Navigation and UI labels |\n| Caption | IBM Plex Sans Variable | 14px | 400–700 | 1.43 | 0px | Small text, various weights |\n| Small Label | IBM Plex Sans Variable | 13px | 500–700 | 1.00–1.50 | 0px | Tags, badges, micro labels |\n| Micro | IBM Plex Sans Variable | 12px | 400–700 | 1.33 | 0px | Smallest text, some uppercase |\n| Code | Source Code Pro | 14px | 500 | 1.43 | 0px | Code snippets and terminal |\n\n### Principles\n- **Bold heading dominance**: Headings use 700–800 weight — PostHog's typography is confident and assertive, not whispery\n- **Generous body line-heights**: Body text at 1.50–1.71 line-height creates extremely comfortable reading — the site is content-heavy and optimized for long sessions\n- **Fractional sizes**: Several sizes (21.4px, 19.3px, 13.7px) suggest a fluid/scaled type system rather than fixed stops — likely computed from Tailwind's rem scale at non-standard base\n- **Uppercase as category signal**: Bold uppercase labels (18px–20px weight 700) are used for product category headings — a magazine-editorial convention\n- **Selective negative tracking**: Letter-spacing tightens on display text (-0.75px at 30px) but relaxes to 0px on body — headlines compress, body breathes\n\n## 4. Component Stylings\n\n### Buttons\n- **Dark Primary**: \\`#1e1f23\\` background, white text, 6px radius, \\`10px 12px\\` padding. Hover: opacity 0.7 with Amber Gold text. Active: opacity 0.8 with slight scale transform. The main CTA — dark and confident\n- **Sage Light**: \\`#e5e7e0\\` background, Olive Ink (\\`#4d4f46\\`) text, 4px radius, \\`4px\\` padding. Hover: \\`#f4f4f4\\` bg with PostHog Orange text. Compact utility button\n- **Warm Tan Featured**: \\`#d4c9b8\\` background, black text, no visible radius. Hover: same orange text flash. Featured/premium actions\n- **Input-style**: \\`#eeefe9\\` background, Sage Placeholder (\\`#9ea096\\`) text, 4px radius, 1px \\`#b6b7af\\` border. Looks like a search/filter control\n- **Near-white Ghost**: \\`#fdfdf8\\` background, Olive Ink text, 4px radius, transparent 1px border. Minimal presence\n- **Hover pattern**: All buttons flash PostHog Orange (\\`#F54E00\\`) or Amber Gold (\\`#F7A501\\`) text on hover — the brand's signature interaction surprise\n\n### Cards & Containers\n- **Bordered Card**: Warm Parchment (\\`#fdfdf8\\`) or white background, 1px \\`#bfc1b7\\` border, 4px–6px radius — clean and minimal\n- **Sage Surface Card**: \\`#eeefe9\\` background for secondary content containers\n- **Shadow Card**: \\`0px 25px 50px -12px rgba(0, 0, 0, 0.25)\\` — a single deep shadow for elevated content (modals, dropdowns)\n- **Hover**: Orange text flash on interactive cards — consistent with button behavior\n\n### Inputs & Forms\n- **Default**: \\`#eeefe9\\` background, \\`#9ea096\\` placeholder text, 1px \\`#b6b7af\\` border, 4px radius, \\`2px 0px 2px 8px\\` padding\n- **Focus**: \\`#3b82f6\\` ring at 50% opacity (Tailwind blue focus ring)\n- **Text color**: \\`#374151\\` for input values — darker than primary text for readability\n- **Border variations**: Multiple border patterns — some inputs use compound borders (top, left, bottom-only)\n\n### Navigation\n- **Top nav**: Warm background, IBM Plex Sans at 15px weight 600\n- **Dropdown menus**: Rich mega-menu structure with product categories\n- **Link color**: Deep Olive (\\`#23251d\\`) for nav links, underline on hover\n- **CTA**: Dark Primary button (#1e1f23) in the nav — \"Get started - free\"\n- **Mobile**: Collapses to hamburger with simplified menu\n\n### Image Treatment\n- **Hand-drawn illustrations**: Hedgehog mascot and quirky illustrations — the signature visual element\n- **Product screenshots**: UI screenshots embedded in device frames or clean containers\n- **Action figures**: Playful product photography of hedgehog figurines — anti-corporate\n- **Trust logos**: Enterprise logos (Airbus, GOV.UK) displayed in a muted trust bar\n- **Aspect ratios**: Mixed — illustrations are irregular, screenshots are 16:9 or widescreen\n\n### AI Chat Widget\n- Floating PostHog AI assistant with speech bubble — an interactive product demo embedded in the marketing site\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 2px, 4px, 6px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 34px\n- **Section padding**: 32px–48px vertical between sections (compact for a content-heavy site)\n- **Card padding**: 4px–12px internal (notably compact)\n- **Component gaps**: 4px–8px between related elements\n\n### Grid & Container\n- **Max width**: 1536px (largest breakpoint), with content containers likely 1200px–1280px\n- **Column patterns**: Varied — single column for text content, 2-3 column grids for feature cards, asymmetric layouts for product demos\n- **Breakpoints**: 13 defined — 1px, 425px, 482px, 640px, 768px, 767px, 800px, 900px, 1024px, 1076px, 1160px, 1280px, 1536px\n\n### Whitespace Philosophy\n- **Content-dense by design**: PostHog's site is information-rich — whitespace is measured, not lavish\n- **Editorial pacing**: Content sections flow like a magazine with varied layouts keeping the eye moving\n- **Illustrations as breathing room**: Hand-drawn hedgehog art breaks up dense content sections naturally\n\n### Border Radius Scale\n- **2px**: Small inline elements, tags (\\`span\\`)\n- **4px**: Primary UI components — buttons, inputs, dropdowns, menu items (\\`button\\`, \\`div\\`, \\`combobox\\`)\n- **6px**: Secondary containers — larger buttons, list items, card variants (\\`button\\`, \\`div\\`, \\`li\\`)\n- **9999px**: Pill shape — badges, status indicators, rounded tags (\\`span\\`, \\`div\\`)\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow, warm parchment background | Page canvas, most surfaces |\n| Level 1 (Border) | \\`1px solid #bfc1b7\\` (Sage Border) | Card containment, input borders, section dividers |\n| Level 2 (Compound Border) | Multiple 1px borders on different sides | Input groupings, toolbar elements |\n| Level 3 (Deep Shadow) | \\`0px 25px 50px -12px rgba(0, 0, 0, 0.25)\\` | Modals, floating elements, mega-menu dropdowns |\n\n### Shadow Philosophy\nPostHog's elevation system is remarkably minimal — only one shadow definition exists in the entire system. Depth is communicated through:\n- **Border containment**: Sage-tinted borders (\\`#bfc1b7\\`) at 1px create gentle warm separation\n- **Surface color shifts**: Moving from \\`#fdfdf8\\` to \\`#eeefe9\\` to \\`#e5e7e0\\` creates layered depth without shadows\n- **The single shadow**: The one defined shadow (\\`0 25px 50px -12px\\`) is reserved for floating elements — modals, dropdowns, popovers. It's a deep, dramatic shadow that creates clear separation when needed\n\n### Decorative Depth\n- **Illustration layering**: Hand-drawn hedgehog art creates visual depth naturally\n- **No gradients or glow**: The flat, warm surface system relies entirely on border and surface-color differentiation\n- **No glassmorphism**: Fully opaque surfaces throughout\n\n## 7. Do's and Don'ts\n\n### Do\n- Use the olive/sage color family (#4d4f46, #23251d, #bfc1b7) for text and borders — the warm green undertone is essential to the brand\n- Flash PostHog Orange (#F54E00) on hover states — it's the hidden brand signature\n- Use IBM Plex Sans at bold weights (700/800) for headings — the font carries technical credibility\n- Keep body text at generous line-heights (1.50–1.71) — the content-heavy site demands readability\n- Maintain the warm parchment background (#fdfdf8) — not pure white, never cold\n- Use 4px border-radius for most UI elements — keep corners subtle and functional\n- Include playful, hand-drawn illustration elements — the personality is the differentiator\n- Apply opacity-based hover states (0.7 opacity) on dark buttons rather than color shifts\n\n### Don't\n- Use blue, purple, or typical tech-SaaS colors — PostHog's palette is deliberately olive/sage\n- Add heavy shadows — the system uses one shadow for floating elements only; everything else uses borders\n- Make the design look \"polished\" or \"premium\" in a conventional sense — PostHog's charm is its irreverent, scrappy energy\n- Use tight line-heights on body text — the generous 1.50+ spacing is essential for the content-heavy layout\n- Apply large border-radius (12px+) on cards — PostHog uses 4px–6px, keeping things tight and functional\n- Remove the orange hover flash — it's a core interaction pattern, not decoration\n- Replace illustrations with stock photography — the hand-drawn hedgehog art is the brand\n- Use pure white (#ffffff) as page background — the warm sage-cream (#fdfdf8) tint is foundational\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <425px | Single column, compact padding, stacked cards |\n| Mobile | 425px–640px | Slight layout adjustments, larger touch targets |\n| Tablet | 640px–768px | 2-column grids begin, nav partially visible |\n| Tablet Large | 768px–1024px | Multi-column layouts, expanded navigation |\n| Desktop | 1024px–1280px | Full layout, 3-column feature grids, expanded mega-menu |\n| Large Desktop | 1280px–1536px | Max-width container, generous margins |\n| Extra Large | >1536px | Centered container at max-width |\n\n### Touch Targets\n- Buttons: 4px–6px radius with \\`4px–12px\\` padding — compact but usable\n- Nav links: 15px text at weight 600 with adequate padding\n- Mobile: Hamburger menu with simplified navigation\n- Inputs: Generous vertical padding for thumb-friendly forms\n\n### Collapsing Strategy\n- **Navigation**: Full mega-menu with dropdowns → hamburger menu on mobile\n- **Feature grids**: 3-column → 2-column → single column stacked\n- **Typography**: Display sizes reduce across breakpoints (30px → smaller)\n- **Illustrations**: Scale within containers, some may hide on mobile for space\n- **Section spacing**: Reduces proportionally while maintaining readability\n\n### Image Behavior\n- Illustrations scale responsively within containers\n- Product screenshots maintain aspect ratios\n- Trust logos reflow into multi-row grids on mobile\n- AI chat widget may reposition or simplify on small screens\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text: Olive Ink (\\`#4d4f46\\`)\n- Dark Text: Deep Olive (\\`#23251d\\`)\n- Hover Accent: PostHog Orange (\\`#F54E00\\`)\n- Dark CTA: Near-Black (\\`#1e1f23\\`)\n- Button Surface: Light Sage (\\`#e5e7e0\\`)\n- Page Background: Warm Parchment (\\`#fdfdf8\\`)\n- Border: Sage Border (\\`#bfc1b7\\`)\n- Placeholder: Sage Placeholder (\\`#9ea096\\`)\n\n### Example Component Prompts\n- \"Create a hero section on warm parchment background (#fdfdf8) with 30px IBM Plex Sans heading at weight 800, line-height 1.20, letter-spacing -0.75px, olive ink text (#4d4f46), and a dark CTA button (#1e1f23, 6px radius, white text, opacity 0.7 on hover)\"\n- \"Design a feature card with #fdfdf8 background, 1px #bfc1b7 border, 4px radius, IBM Plex Sans heading at 20px weight 700, and 16px body text at weight 400 with 1.50 line-height in olive ink (#4d4f46)\"\n- \"Build a navigation bar with warm background, IBM Plex Sans links at 15px weight 600 in deep olive (#23251d), underline on hover, and a dark CTA button (#1e1f23) at the right\"\n- \"Create a button group: primary dark (#1e1f23, white text, 6px radius), secondary sage (#e5e7e0, #4d4f46 text, 4px radius), and ghost/text button — all flash #F54E00 orange text on hover\"\n- \"Design an input field with #eeefe9 background, 1px #b6b7af border, 4px radius, #9ea096 placeholder text, focus ring in #3b82f6 at 50% opacity\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Verify the background is warm parchment (#fdfdf8) not pure white — the sage-cream warmth is essential\n2. Check that all text uses the olive family (#4d4f46, #23251d) not pure black or neutral gray\n3. Ensure hover states flash PostHog Orange (#F54E00) — if hovering feels bland, you're missing this\n4. Confirm borders use sage-tinted gray (#bfc1b7) not neutral gray — warmth runs through every element\n5. The overall tone should feel like a fun, scrappy startup wiki — never corporate-polished or sterile\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;","names":[]}