@hex-core/themes 0.1.1 → 0.2.0

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

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

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

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

package/dist/presets/_briefs/nike.js

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

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

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

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

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