@hex-core/themes 0.1.1 → 0.2.0

package/dist/presets/_briefs/nvidia.js

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

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

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

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

@@ -0,0 +1,3 @@
+declare 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 \u2014 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 \u2014 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 \u2014 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 \u2014 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 \u2014 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 \u2014 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 \u2014 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 \u2014 black line art, no color\n- Extreme content restraint \u2014 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 \u2014 barely distinguishable from pure black, used for footer or dark containers.\n\n### Surface & Background\n- **Pure White** (`#ffffff`): The primary page background \u2014 not off-white, not cream, pure white. Button surfaces for secondary actions.\n- **Snow** (`#fafafa`): The subtlest possible surface distinction from white \u2014 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 \u2014 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 \u2014 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\u2013500 | 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\u2013500 | 1.56 | normal | Hero descriptions, button text |\n| Body / Link | ui-sans-serif | 16px (1rem) | 400\u2013500 | 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\u2013700 | 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 \u2014 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\u20131.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 \u2014 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 \u2014 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 \u2014 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) \u2014 the ONLY non-pill radius in the system\n- Shadow: **none** \u2014 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) \u2014 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 \u2014 transparent nav on white page\n\n### Image Treatment\n- The Ollama llama mascot is the only illustration \u2014 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 \u2014 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\u201332px\n- Section vertical spacing: very generous (88px\u2013112px)\n\n### Grid & Container\n- Max container width: approximately 1024\u20131280px, 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 \u2014 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 \u2014 code blocks, cards, panels\n- Pill-shaped (9999px): Everything interactive \u2014 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 \u2014 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 \u2014 never off-white or cream\n- Use pill-shaped (9999px) radius on all interactive elements \u2014 buttons, tabs, inputs, tags\n- Use 12px radius on all non-interactive containers \u2014 code blocks, cards, panels\n- Keep the palette strictly grayscale \u2014 no chromatic colors except the blue focus ring\n- Use SF Pro Rounded at weight 500 for display headings \u2014 the rounded terminals are the brand expression\n- Maintain zero shadows \u2014 depth comes from borders and background shifts only\n- Keep content density low \u2014 each section should present one clear idea\n- Use monospace for terminal commands and code \u2014 it's primary content, not decoration\n- Keep all buttons at 10px 24px padding with pill shape \u2014 consistency is absolute\n\n### Don't\n- Don't introduce any chromatic color \u2014 no brand blue, no accent green, no warm tones\n- Don't use border-radius between 12px and 9999px \u2014 the system is binary\n- Don't add shadows to any element \u2014 the flat aesthetic is intentional\n- Don't use font weights above 500 \u2014 no bold, no black weight\n- Don't add decorative illustrations beyond the llama mascot\n- Don't use gradients anywhere \u2014 flat blocks and borders only\n- Don't overcomplicate the layout \u2014 two columns maximum, no complex grids\n- Don't use borders heavier than 1px \u2014 containment is always the lightest possible touch\n- Don't add hover animations or transitions \u2014 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\u2013768px | Minor adjustments to spacing |\n| Tablet | 768\u2013850px | 2-column layouts begin |\n| Desktop | 850\u20131024px | Standard layout, expanded features |\n| Large Desktop | 1024\u20131280px | 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 \u2192 stacked single column\n- **Hero text**: 48px \u2192 36px \u2192 30px progressive scaling\n- **Integration grid**: Multi-column \u2192 2-column \u2192 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 \u2014 \"Stone (#737373)\" not \"use a light color\"\n3. Always specify pill (9999px) or container (12px) radius \u2014 nothing in between\n4. Shadows are always zero \u2014 never add them\n5. Weight is always 400 or 500 \u2014 never bold\n6. If something feels too decorated, remove it \u2014 less is always more for Ollama\n";
+
+export { ollamaBrief };