@hex-core/themes 0.1.0 → 0.2.0

package/dist/presets/_briefs/framer.js

@@ -0,0 +1,252 @@
+// src/presets/_briefs/framer.ts
+var framerBrief = `# Design System Inspired by Framer
+
+## 1. Visual Theme & Atmosphere
+
+Framer's website is a cinematic, tool-obsessed dark canvas that radiates the confidence of a design tool built by designers who worship craft. The entire experience is drenched in pure black \u2014 not a warm charcoal or a cozy dark gray, but an absolute void (\`#000000\`) that makes every element, every screenshot, every typographic flourish feel like it's floating in deep space. This is a website that treats its own product UI as the hero art, embedding full-fidelity screenshots and interactive demos directly into the narrative flow.
+
+The typography is the signature move: GT Walsheim with aggressively tight letter-spacing (as extreme as -5.5px on 110px display text) creates headlines that feel compressed, kinetic, almost spring-loaded \u2014 like words under pressure that might expand at any moment. The transition to Inter for body text is seamless, with extensive OpenType feature usage (\`cv01\`, \`cv05\`, \`cv09\`, \`cv11\`, \`ss03\`, \`ss07\`) that gives even small text a refined, custom feel. Framer Blue (\`#0099ff\`) is deployed sparingly but decisively \u2014 as link color, border accents, and subtle ring shadows \u2014 creating a cold, electric throughline against the warm-less black.
+
+The overall effect is a nightclub for web designers: dark, precise, seductive, and unapologetically product-forward. Every section exists to showcase what the tool can do, with the website itself serving as proof of concept.
+
+**Key Characteristics:**
+- Pure black (\`#000000\`) void canvas \u2014 absolute dark, not warm or gray-tinted
+- GT Walsheim display font with extreme negative letter-spacing (-5.5px at 110px)
+- Framer Blue (\`#0099ff\`) as the sole accent color \u2014 cold, electric, precise
+- Pill-shaped buttons (40px\u2013100px radius) \u2014 no sharp corners on interactive elements
+- Product screenshots as hero art \u2014 the tool IS the marketing
+- Frosted glass button variants using \`rgba(255, 255, 255, 0.1)\` on dark surfaces
+- Extensive OpenType feature usage across Inter for refined micro-typography
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Pure Black** (\`#000000\`): Primary background, the void canvas that defines Framer's dark-first identity
+- **Pure White** (\`#ffffff\`): Primary text color on dark surfaces, button text on accent backgrounds
+- **Framer Blue** (\`#0099ff\`): Primary accent color \u2014 links, borders, ring shadows, interactive highlights
+
+### Secondary & Accent
+- **Muted Silver** (\`#a6a6a6\`): Secondary text, subdued labels, dimmed descriptions on dark surfaces
+- **Near Black** (\`#090909\`): Elevated dark surface, shadow ring color for subtle depth separation
+
+### Surface & Background
+- **Void Black** (\`#000000\`): Page background, primary canvas
+- **Frosted White** (\`rgba(255, 255, 255, 0.1)\`): Translucent button backgrounds, glass-effect surfaces on dark
+- **Subtle White** (\`rgba(255, 255, 255, 0.5)\`): Slightly more opaque frosted elements for hover states
+
+### Neutrals & Text
+- **Pure White** (\`#ffffff\`): Heading text, high-emphasis body text
+- **Muted Silver** (\`#a6a6a6\`): Body text, descriptions, secondary information
+- **Ghost White** (\`rgba(255, 255, 255, 0.6)\`): Tertiary text, placeholders on dark surfaces
+
+### Semantic & Accent
+- **Framer Blue** (\`#0099ff\`): Links, interactive borders, focus rings
+- **Blue Glow** (\`rgba(0, 153, 255, 0.15)\`): Focus ring shadow, subtle blue halo around interactive elements
+- **Default Link Blue** (\`#0000ee\`): Standard browser link color (used sparingly in content areas)
+
+### Gradient System
+- No prominent gradient usage \u2014 Framer relies on pure flat black surfaces with occasional blue-tinted glows for depth
+- Subtle radial glow effects behind product screenshots using Framer Blue at very low opacity
+
+## 3. Typography Rules
+
+### Font Family
+- **Display**: \`GT Walsheim Framer Medium\` / \`GT Walsheim Medium\` \u2014 custom geometric sans-serif, weight 500. Fallbacks: \`GT Walsheim Framer Medium Placeholder\`, system sans-serif
+- **Body/UI**: \`Inter Variable\` / \`Inter\` \u2014 variable sans-serif with extensive OpenType features. Fallbacks: \`Inter Placeholder\`, \`-apple-system\`, \`system-ui\`
+- **Accent**: \`Mona Sans\` \u2014 GitHub's open-source font, used for select elements at ultra-light weight (100)
+- **Monospace**: \`Azeret Mono\` \u2014 companion mono for code and technical labels
+- **Rounded**: \`Open Runde\` \u2014 small rounded companion font for micro-labels
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | GT Walsheim Framer Medium | 110px | 500 | 0.85 | -5.5px | Extreme negative tracking, compressed impact |
+| Section Display | GT Walsheim Medium | 85px | 500 | 0.95 | -4.25px | OpenType: ss02, tnum |
+| Section Heading | GT Walsheim Medium | 62px | 500 | 1.00 | -3.1px | OpenType: ss02 |
+| Feature Heading | GT Walsheim Medium | 32px | 500 | 1.13 | -1px | Tightest of the smaller headings |
+| Accent Display | Mona Sans | 61.5px | 100 | 1.00 | -3.1px | Ultra-light weight, ethereal |
+| Card Title | Inter Variable | 24px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |
+| Feature Title | Inter | 22px | 700 | 1.20 | -0.8px | OpenType: cv05 |
+| Sub-heading | Inter | 20px | 600 | 1.20 | -0.8px | OpenType: cv01, cv09 |
+| Body Large | Inter Variable | 18px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |
+| Body | Inter Variable | 15px | 400 | 1.30 | -0.01px | OpenType: cv11 |
+| Nav/UI | Inter Variable | 15px | 400 | 1.00 | -0.15px | OpenType: cv06, cv11, dlig, ss03 |
+| Body Readable | Inter Framer Regular | 14px | 400 | 1.60 | normal | Long-form body text |
+| Caption | Inter Variable | 14px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |
+| Label | Inter | 13px | 500 | 1.60 | normal | OpenType: cv06, cv11, ss03 |
+| Small Caption | Inter Variable | 12px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |
+| Micro Code | Azeret Mono | 10.4px | 400 | 1.60 | normal | OpenType: cv06, cv11, ss03 |
+| Badge | Open Runde | 9px | 600 | 1.11 | normal | OpenType: cv01, cv09 |
+| Micro Uppercase | Inter Variable | 7px | 400 | 1.00 | 0.21px | uppercase transform |
+
+### Principles
+- **Compression as personality**: GT Walsheim's extreme negative letter-spacing (-5.5px at 110px) is the defining typographic gesture \u2014 headlines feel spring-loaded, urgent, almost breathless
+- **OpenType maximalism**: Inter is deployed with 6+ OpenType features simultaneously (\`cv01\`, \`cv05\`, \`cv09\`, \`cv11\`, \`ss03\`, \`ss07\`), creating a subtly custom feel even at body sizes
+- **Weight restraint on display**: All GT Walsheim usage is weight 500 (medium) \u2014 never bold, never regular. This creates a confident-but-not-aggressive display tone
+- **Ultra-tight line heights**: Display text at 0.85 line-height means letters nearly overlap vertically \u2014 intentional density that rewards reading at arm's length
+
+## 4. Component Stylings
+
+### Buttons
+- **Frosted Pill**: \`rgba(255, 255, 255, 0.1)\` background, black text (\`#000000\`), pill shape (40px radius). The glass-effect button that lives on dark surfaces \u2014 translucent, ambient, subtle
+- **Solid White Pill**: \`rgb(255, 255, 255)\` background, black text (\`#000000\`), full pill shape (100px radius), padding \`10px 15px\`. The primary CTA \u2014 clean, high-contrast on dark, unmissable
+- **Ghost**: No visible background, white text, relies on text styling alone. Hover reveals subtle frosted background
+- **Transition**: Scale-based animations (matrix transform with 0.85 scale factor), opacity transitions for reveal effects
+
+### Cards & Containers
+- **Dark Surface Card**: Black or near-black (\`#090909\`) background, \`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px\` blue ring shadow border, rounded corners (10px\u201315px radius)
+- **Elevated Card**: Multi-layer shadow \u2014 \`rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px\` (subtle top highlight) + \`rgba(0, 0, 0, 0.25) 0px 10px 30px\` (deep ambient shadow)
+- **Product Screenshots**: Full-width or padded within dark containers, 8px\u201312px border-radius for software UI previews
+- **Hover**: Subtle glow increase on Framer Blue ring shadow, or brightness shift on frosted surfaces
+
+### Inputs & Forms
+- Minimal form presence on the marketing site
+- Input fields follow dark theme: dark background, subtle border, white text
+- Focus state: Framer Blue (\`#0099ff\`) ring border, \`1px solid #0099ff\`
+- Placeholder text in \`rgba(255, 255, 255, 0.4)\`
+
+### Navigation
+- **Dark floating nav bar**: Black background with frosted glass effect, white text links
+- **Nav links**: Inter at 15px, weight 400, white text with subtle hover opacity change
+- **CTA button**: Pill-shaped, white or frosted, positioned at right end of nav
+- **Mobile**: Collapses to hamburger menu, maintains dark theme
+- **Sticky behavior**: Nav remains fixed at top on scroll
+
+### Image Treatment
+- **Product screenshots as hero art**: Full-width embedded UI screenshots with rounded corners (8px\u201312px)
+- **Dark-on-dark composition**: Screenshots placed on black backgrounds with subtle shadow for depth separation
+- **16:9 and custom aspect ratios**: Product demos fill their containers
+- **No decorative imagery**: All images are functional \u2014 showing the tool, the output, or the workflow
+
+### Trust & Social Proof
+- Customer logos and testimonials in muted gray on dark surfaces
+- Minimal ornamentation \u2014 the product screenshots serve as the trust signal
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 20px, 30px, 35px
+- **Section padding**: Large vertical spacing (80px\u2013120px between sections)
+- **Card padding**: 15px\u201330px internal padding
+- **Component gaps**: 8px\u201320px between related elements
+
+### Grid & Container
+- **Max width**: ~1200px container, centered
+- **Column patterns**: Full-width hero, 2-column feature sections, single-column product showcases
+- **Asymmetric layouts**: Feature sections often pair text (40%) with screenshot (60%)
+
+### Whitespace Philosophy
+- **Breathe through darkness**: Generous vertical spacing between sections \u2014 the black background means whitespace manifests as void, creating dramatic pauses between content blocks
+- **Dense within, spacious between**: Individual components are tightly composed (tight line-heights, compressed text) but float in generous surrounding space
+- **Product-first density**: Screenshot areas are allowed to be dense and information-rich, contrasting with the sparse marketing text
+
+### Border Radius Scale
+- **1px**: Micro-elements, nearly squared precision edges
+- **5px\u20137px**: Small UI elements, image thumbnails \u2014 subtly softened
+- **8px**: Standard component radius \u2014 code blocks, buttons, interactive elements
+- **10px\u201312px**: Cards, product screenshots \u2014 comfortably rounded
+- **15px\u201320px**: Large containers, feature cards \u2014 generously rounded
+- **30px\u201340px**: Navigation pills, pagination \u2014 noticeably rounded
+- **100px**: Full pill shape \u2014 primary CTAs, tag elements
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Flat) | No shadow, pure black surface | Page background, empty areas |
+| Level 1 (Ring) | \`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px\` | Card borders, interactive element outlines \u2014 Framer Blue glow ring |
+| Level 2 (Contained) | \`rgb(9, 9, 9) 0px 0px 0px 2px\` | Near-black ring for subtle containment on dark surfaces |
+| Level 3 (Floating) | \`rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px\` | Elevated cards, floating elements \u2014 subtle white top-edge highlight + deep ambient shadow |
+
+### Shadow Philosophy
+Framer's elevation system is inverted from traditional light-theme designs. Instead of darker shadows on light backgrounds, Framer uses:
+- **Blue-tinted ring shadows** at very low opacity (0.15) for containment \u2014 a signature move that subtly brands every bordered element
+- **White edge highlights** (0.5px) on the top edge of elevated elements \u2014 simulating light hitting the top surface
+- **Deep ambient shadows** for true floating elements \u2014 \`rgba(0, 0, 0, 0.25)\` at large spread (30px)
+
+### Decorative Depth
+- **Blue glow auras**: Subtle Framer Blue (\`#0099ff\`) radial gradients behind key interactive areas
+- **No background blur/glassmorphism**: Despite the frosted button effect, there's no heavy glass blur usage \u2014 the translucency is achieved through simple rgba opacity
+
+## 7. Do's and Don'ts
+
+### Do
+- Use pure black (\`#000000\`) as the primary background \u2014 not dark gray, not charcoal
+- Apply extreme negative letter-spacing on GT Walsheim display text (-3px to -5.5px)
+- Keep all buttons pill-shaped (40px+ radius) \u2014 never use squared or slightly-rounded buttons
+- Use Framer Blue (\`#0099ff\`) exclusively for interactive accents \u2014 links, borders, focus states
+- Deploy \`rgba(255, 255, 255, 0.1)\` for frosted glass surfaces on dark backgrounds
+- Maintain GT Walsheim at weight 500 only \u2014 the medium weight IS the brand
+- Use extensive OpenType features on Inter text (cv01, cv05, cv09, cv11, ss03, ss07)
+- Let product screenshots be the visual centerpiece \u2014 the tool markets itself
+- Apply blue ring shadows (\`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px\`) for card containment
+
+### Don't
+- Use warm dark backgrounds (no \`#1a1a1a\`, \`#2d2d2d\`, or brownish blacks)
+- Apply bold (700+) weight to GT Walsheim display text \u2014 medium 500 only
+- Introduce additional accent colors beyond Framer Blue \u2014 this is a one-accent-color system
+- Use large border-radius on non-interactive elements (cards use 10px\u201315px, only buttons get 40px+)
+- Add decorative imagery, illustrations, or icons \u2014 the product IS the illustration
+- Use positive letter-spacing on headlines \u2014 everything is compressed, negative tracking
+- Create heavy drop shadows \u2014 depth is communicated through subtle rings and minimal ambients
+- Place light/white backgrounds behind content sections \u2014 the void is sacred
+- Use serif or display-weight fonts \u2014 the system is geometric sans-serif only
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <809px | Single column, stacked feature sections, reduced hero text (62px\u219240px), hamburger nav |
+| Tablet | 809px\u20131199px | 2-column features begin, nav links partially visible, screenshots scale down |
+| Desktop | >1199px | Full layout, expanded nav with all links + CTA, 110px display hero, side-by-side features |
+
+### Touch Targets
+- Pill buttons: minimum 40px height with 10px vertical padding \u2014 exceeds 44px WCAG minimum
+- Nav links: 15px text with generous padding for touch accessibility
+- Mobile CTA buttons: Full-width pills on mobile for easy thumb reach
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav \u2192 hamburger menu at mobile breakpoint
+- **Hero text**: 110px display \u2192 85px \u2192 62px \u2192 ~40px across breakpoints, maintaining extreme negative tracking proportionally
+- **Feature sections**: Side-by-side (text + screenshot) \u2192 stacked vertically on mobile
+- **Product screenshots**: Scale responsively within containers, maintaining aspect ratios
+- **Section spacing**: Reduces proportionally \u2014 120px desktop \u2192 60px mobile
+
+### Image Behavior
+- Product screenshots are responsive, scaling within their container boundaries
+- No art direction changes \u2014 same crops across breakpoints
+- Dark background ensures screenshots maintain visual impact at any size
+- Screenshots lazy-load as user scrolls into view
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Background: Void Black (\`#000000\`)
+- Primary Text: Pure White (\`#ffffff\`)
+- Accent/CTA: Framer Blue (\`#0099ff\`)
+- Secondary Text: Muted Silver (\`#a6a6a6\`)
+- Frosted Surface: Translucent White (\`rgba(255, 255, 255, 0.1)\`)
+- Elevation Ring: Blue Glow (\`rgba(0, 153, 255, 0.15)\`)
+
+### Example Component Prompts
+- "Create a hero section on pure black background with 110px GT Walsheim heading in white, letter-spacing -5.5px, line-height 0.85, and a pill-shaped white CTA button (100px radius) with black text"
+- "Design a feature card on black background with a 1px Framer Blue ring shadow border (rgba(0,153,255,0.15)), 12px border-radius, white heading in Inter at 22px weight 700, and muted silver (a6a6a6) body text"
+- "Build a navigation bar with black background, white Inter text links at 15px, and a frosted pill button (rgba(255,255,255,0.1) background, 40px radius) as the CTA"
+- "Create a product showcase section with a full-width screenshot embedded on black, 10px border-radius, subtle multi-layer shadow (white 0.5px top highlight + rgba(0,0,0,0.25) 30px ambient)"
+- "Design a pricing card using pure black surface, Framer Blue (#0099ff) accent for the selected plan border, white text hierarchy (24px Inter bold heading, 14px regular body), and a solid white pill CTA button"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time \u2014 the dark canvas makes each element precious
+2. Always verify letter-spacing on GT Walsheim headings \u2014 the extreme negative tracking is non-negotiable
+3. Check that Framer Blue appears ONLY on interactive elements \u2014 never as decorative background or text color for non-links
+4. Ensure all buttons are pill-shaped \u2014 any squared corner immediately breaks the Framer aesthetic
+5. Test frosted glass surfaces by checking they have exactly \`rgba(255, 255, 255, 0.1)\` \u2014 too opaque looks like a bug, too transparent disappears
+`;
+export {
+  framerBrief
+};
+//# sourceMappingURL=framer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/framer.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const framerBrief = `# Design System Inspired by Framer\n\n## 1. Visual Theme & Atmosphere\n\nFramer's website is a cinematic, tool-obsessed dark canvas that radiates the confidence of a design tool built by designers who worship craft. The entire experience is drenched in pure black — not a warm charcoal or a cozy dark gray, but an absolute void (\\`#000000\\`) that makes every element, every screenshot, every typographic flourish feel like it's floating in deep space. This is a website that treats its own product UI as the hero art, embedding full-fidelity screenshots and interactive demos directly into the narrative flow.\n\nThe typography is the signature move: GT Walsheim with aggressively tight letter-spacing (as extreme as -5.5px on 110px display text) creates headlines that feel compressed, kinetic, almost spring-loaded — like words under pressure that might expand at any moment. The transition to Inter for body text is seamless, with extensive OpenType feature usage (\\`cv01\\`, \\`cv05\\`, \\`cv09\\`, \\`cv11\\`, \\`ss03\\`, \\`ss07\\`) that gives even small text a refined, custom feel. Framer Blue (\\`#0099ff\\`) is deployed sparingly but decisively — as link color, border accents, and subtle ring shadows — creating a cold, electric throughline against the warm-less black.\n\nThe overall effect is a nightclub for web designers: dark, precise, seductive, and unapologetically product-forward. Every section exists to showcase what the tool can do, with the website itself serving as proof of concept.\n\n**Key Characteristics:**\n- Pure black (\\`#000000\\`) void canvas — absolute dark, not warm or gray-tinted\n- GT Walsheim display font with extreme negative letter-spacing (-5.5px at 110px)\n- Framer Blue (\\`#0099ff\\`) as the sole accent color — cold, electric, precise\n- Pill-shaped buttons (40px–100px radius) — no sharp corners on interactive elements\n- Product screenshots as hero art — the tool IS the marketing\n- Frosted glass button variants using \\`rgba(255, 255, 255, 0.1)\\` on dark surfaces\n- Extensive OpenType feature usage across Inter for refined micro-typography\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure Black** (\\`#000000\\`): Primary background, the void canvas that defines Framer's dark-first identity\n- **Pure White** (\\`#ffffff\\`): Primary text color on dark surfaces, button text on accent backgrounds\n- **Framer Blue** (\\`#0099ff\\`): Primary accent color — links, borders, ring shadows, interactive highlights\n\n### Secondary & Accent\n- **Muted Silver** (\\`#a6a6a6\\`): Secondary text, subdued labels, dimmed descriptions on dark surfaces\n- **Near Black** (\\`#090909\\`): Elevated dark surface, shadow ring color for subtle depth separation\n\n### Surface & Background\n- **Void Black** (\\`#000000\\`): Page background, primary canvas\n- **Frosted White** (\\`rgba(255, 255, 255, 0.1)\\`): Translucent button backgrounds, glass-effect surfaces on dark\n- **Subtle White** (\\`rgba(255, 255, 255, 0.5)\\`): Slightly more opaque frosted elements for hover states\n\n### Neutrals & Text\n- **Pure White** (\\`#ffffff\\`): Heading text, high-emphasis body text\n- **Muted Silver** (\\`#a6a6a6\\`): Body text, descriptions, secondary information\n- **Ghost White** (\\`rgba(255, 255, 255, 0.6)\\`): Tertiary text, placeholders on dark surfaces\n\n### Semantic & Accent\n- **Framer Blue** (\\`#0099ff\\`): Links, interactive borders, focus rings\n- **Blue Glow** (\\`rgba(0, 153, 255, 0.15)\\`): Focus ring shadow, subtle blue halo around interactive elements\n- **Default Link Blue** (\\`#0000ee\\`): Standard browser link color (used sparingly in content areas)\n\n### Gradient System\n- No prominent gradient usage — Framer relies on pure flat black surfaces with occasional blue-tinted glows for depth\n- Subtle radial glow effects behind product screenshots using Framer Blue at very low opacity\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: \\`GT Walsheim Framer Medium\\` / \\`GT Walsheim Medium\\` — custom geometric sans-serif, weight 500. Fallbacks: \\`GT Walsheim Framer Medium Placeholder\\`, system sans-serif\n- **Body/UI**: \\`Inter Variable\\` / \\`Inter\\` — variable sans-serif with extensive OpenType features. Fallbacks: \\`Inter Placeholder\\`, \\`-apple-system\\`, \\`system-ui\\`\n- **Accent**: \\`Mona Sans\\` — GitHub's open-source font, used for select elements at ultra-light weight (100)\n- **Monospace**: \\`Azeret Mono\\` — companion mono for code and technical labels\n- **Rounded**: \\`Open Runde\\` — small rounded companion font for micro-labels\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | GT Walsheim Framer Medium | 110px | 500 | 0.85 | -5.5px | Extreme negative tracking, compressed impact |\n| Section Display | GT Walsheim Medium | 85px | 500 | 0.95 | -4.25px | OpenType: ss02, tnum |\n| Section Heading | GT Walsheim Medium | 62px | 500 | 1.00 | -3.1px | OpenType: ss02 |\n| Feature Heading | GT Walsheim Medium | 32px | 500 | 1.13 | -1px | Tightest of the smaller headings |\n| Accent Display | Mona Sans | 61.5px | 100 | 1.00 | -3.1px | Ultra-light weight, ethereal |\n| Card Title | Inter Variable | 24px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |\n| Feature Title | Inter | 22px | 700 | 1.20 | -0.8px | OpenType: cv05 |\n| Sub-heading | Inter | 20px | 600 | 1.20 | -0.8px | OpenType: cv01, cv09 |\n| Body Large | Inter Variable | 18px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |\n| Body | Inter Variable | 15px | 400 | 1.30 | -0.01px | OpenType: cv11 |\n| Nav/UI | Inter Variable | 15px | 400 | 1.00 | -0.15px | OpenType: cv06, cv11, dlig, ss03 |\n| Body Readable | Inter Framer Regular | 14px | 400 | 1.60 | normal | Long-form body text |\n| Caption | Inter Variable | 14px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |\n| Label | Inter | 13px | 500 | 1.60 | normal | OpenType: cv06, cv11, ss03 |\n| Small Caption | Inter Variable | 12px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |\n| Micro Code | Azeret Mono | 10.4px | 400 | 1.60 | normal | OpenType: cv06, cv11, ss03 |\n| Badge | Open Runde | 9px | 600 | 1.11 | normal | OpenType: cv01, cv09 |\n| Micro Uppercase | Inter Variable | 7px | 400 | 1.00 | 0.21px | uppercase transform |\n\n### Principles\n- **Compression as personality**: GT Walsheim's extreme negative letter-spacing (-5.5px at 110px) is the defining typographic gesture — headlines feel spring-loaded, urgent, almost breathless\n- **OpenType maximalism**: Inter is deployed with 6+ OpenType features simultaneously (\\`cv01\\`, \\`cv05\\`, \\`cv09\\`, \\`cv11\\`, \\`ss03\\`, \\`ss07\\`), creating a subtly custom feel even at body sizes\n- **Weight restraint on display**: All GT Walsheim usage is weight 500 (medium) — never bold, never regular. This creates a confident-but-not-aggressive display tone\n- **Ultra-tight line heights**: Display text at 0.85 line-height means letters nearly overlap vertically — intentional density that rewards reading at arm's length\n\n## 4. Component Stylings\n\n### Buttons\n- **Frosted Pill**: \\`rgba(255, 255, 255, 0.1)\\` background, black text (\\`#000000\\`), pill shape (40px radius). The glass-effect button that lives on dark surfaces — translucent, ambient, subtle\n- **Solid White Pill**: \\`rgb(255, 255, 255)\\` background, black text (\\`#000000\\`), full pill shape (100px radius), padding \\`10px 15px\\`. The primary CTA — clean, high-contrast on dark, unmissable\n- **Ghost**: No visible background, white text, relies on text styling alone. Hover reveals subtle frosted background\n- **Transition**: Scale-based animations (matrix transform with 0.85 scale factor), opacity transitions for reveal effects\n\n### Cards & Containers\n- **Dark Surface Card**: Black or near-black (\\`#090909\\`) background, \\`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px\\` blue ring shadow border, rounded corners (10px–15px radius)\n- **Elevated Card**: Multi-layer shadow — \\`rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px\\` (subtle top highlight) + \\`rgba(0, 0, 0, 0.25) 0px 10px 30px\\` (deep ambient shadow)\n- **Product Screenshots**: Full-width or padded within dark containers, 8px–12px border-radius for software UI previews\n- **Hover**: Subtle glow increase on Framer Blue ring shadow, or brightness shift on frosted surfaces\n\n### Inputs & Forms\n- Minimal form presence on the marketing site\n- Input fields follow dark theme: dark background, subtle border, white text\n- Focus state: Framer Blue (\\`#0099ff\\`) ring border, \\`1px solid #0099ff\\`\n- Placeholder text in \\`rgba(255, 255, 255, 0.4)\\`\n\n### Navigation\n- **Dark floating nav bar**: Black background with frosted glass effect, white text links\n- **Nav links**: Inter at 15px, weight 400, white text with subtle hover opacity change\n- **CTA button**: Pill-shaped, white or frosted, positioned at right end of nav\n- **Mobile**: Collapses to hamburger menu, maintains dark theme\n- **Sticky behavior**: Nav remains fixed at top on scroll\n\n### Image Treatment\n- **Product screenshots as hero art**: Full-width embedded UI screenshots with rounded corners (8px–12px)\n- **Dark-on-dark composition**: Screenshots placed on black backgrounds with subtle shadow for depth separation\n- **16:9 and custom aspect ratios**: Product demos fill their containers\n- **No decorative imagery**: All images are functional — showing the tool, the output, or the workflow\n\n### Trust & Social Proof\n- Customer logos and testimonials in muted gray on dark surfaces\n- Minimal ornamentation — the product screenshots serve as the trust signal\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 20px, 30px, 35px\n- **Section padding**: Large vertical spacing (80px–120px between sections)\n- **Card padding**: 15px–30px internal padding\n- **Component gaps**: 8px–20px between related elements\n\n### Grid & Container\n- **Max width**: ~1200px container, centered\n- **Column patterns**: Full-width hero, 2-column feature sections, single-column product showcases\n- **Asymmetric layouts**: Feature sections often pair text (40%) with screenshot (60%)\n\n### Whitespace Philosophy\n- **Breathe through darkness**: Generous vertical spacing between sections — the black background means whitespace manifests as void, creating dramatic pauses between content blocks\n- **Dense within, spacious between**: Individual components are tightly composed (tight line-heights, compressed text) but float in generous surrounding space\n- **Product-first density**: Screenshot areas are allowed to be dense and information-rich, contrasting with the sparse marketing text\n\n### Border Radius Scale\n- **1px**: Micro-elements, nearly squared precision edges\n- **5px–7px**: Small UI elements, image thumbnails — subtly softened\n- **8px**: Standard component radius — code blocks, buttons, interactive elements\n- **10px–12px**: Cards, product screenshots — comfortably rounded\n- **15px–20px**: Large containers, feature cards — generously rounded\n- **30px–40px**: Navigation pills, pagination — noticeably rounded\n- **100px**: Full pill shape — primary CTAs, tag elements\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow, pure black surface | Page background, empty areas |\n| Level 1 (Ring) | \\`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px\\` | Card borders, interactive element outlines — Framer Blue glow ring |\n| Level 2 (Contained) | \\`rgb(9, 9, 9) 0px 0px 0px 2px\\` | Near-black ring for subtle containment on dark surfaces |\n| Level 3 (Floating) | \\`rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px\\` | Elevated cards, floating elements — subtle white top-edge highlight + deep ambient shadow |\n\n### Shadow Philosophy\nFramer's elevation system is inverted from traditional light-theme designs. Instead of darker shadows on light backgrounds, Framer uses:\n- **Blue-tinted ring shadows** at very low opacity (0.15) for containment — a signature move that subtly brands every bordered element\n- **White edge highlights** (0.5px) on the top edge of elevated elements — simulating light hitting the top surface\n- **Deep ambient shadows** for true floating elements — \\`rgba(0, 0, 0, 0.25)\\` at large spread (30px)\n\n### Decorative Depth\n- **Blue glow auras**: Subtle Framer Blue (\\`#0099ff\\`) radial gradients behind key interactive areas\n- **No background blur/glassmorphism**: Despite the frosted button effect, there's no heavy glass blur usage — the translucency is achieved through simple rgba opacity\n\n## 7. Do's and Don'ts\n\n### Do\n- Use pure black (\\`#000000\\`) as the primary background — not dark gray, not charcoal\n- Apply extreme negative letter-spacing on GT Walsheim display text (-3px to -5.5px)\n- Keep all buttons pill-shaped (40px+ radius) — never use squared or slightly-rounded buttons\n- Use Framer Blue (\\`#0099ff\\`) exclusively for interactive accents — links, borders, focus states\n- Deploy \\`rgba(255, 255, 255, 0.1)\\` for frosted glass surfaces on dark backgrounds\n- Maintain GT Walsheim at weight 500 only — the medium weight IS the brand\n- Use extensive OpenType features on Inter text (cv01, cv05, cv09, cv11, ss03, ss07)\n- Let product screenshots be the visual centerpiece — the tool markets itself\n- Apply blue ring shadows (\\`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px\\`) for card containment\n\n### Don't\n- Use warm dark backgrounds (no \\`#1a1a1a\\`, \\`#2d2d2d\\`, or brownish blacks)\n- Apply bold (700+) weight to GT Walsheim display text — medium 500 only\n- Introduce additional accent colors beyond Framer Blue — this is a one-accent-color system\n- Use large border-radius on non-interactive elements (cards use 10px–15px, only buttons get 40px+)\n- Add decorative imagery, illustrations, or icons — the product IS the illustration\n- Use positive letter-spacing on headlines — everything is compressed, negative tracking\n- Create heavy drop shadows — depth is communicated through subtle rings and minimal ambients\n- Place light/white backgrounds behind content sections — the void is sacred\n- Use serif or display-weight fonts — the system is geometric sans-serif only\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <809px | Single column, stacked feature sections, reduced hero text (62px→40px), hamburger nav |\n| Tablet | 809px–1199px | 2-column features begin, nav links partially visible, screenshots scale down |\n| Desktop | >1199px | Full layout, expanded nav with all links + CTA, 110px display hero, side-by-side features |\n\n### Touch Targets\n- Pill buttons: minimum 40px height with 10px vertical padding — exceeds 44px WCAG minimum\n- Nav links: 15px text with generous padding for touch accessibility\n- Mobile CTA buttons: Full-width pills on mobile for easy thumb reach\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav → hamburger menu at mobile breakpoint\n- **Hero text**: 110px display → 85px → 62px → ~40px across breakpoints, maintaining extreme negative tracking proportionally\n- **Feature sections**: Side-by-side (text + screenshot) → stacked vertically on mobile\n- **Product screenshots**: Scale responsively within containers, maintaining aspect ratios\n- **Section spacing**: Reduces proportionally — 120px desktop → 60px mobile\n\n### Image Behavior\n- Product screenshots are responsive, scaling within their container boundaries\n- No art direction changes — same crops across breakpoints\n- Dark background ensures screenshots maintain visual impact at any size\n- Screenshots lazy-load as user scrolls into view\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Background: Void Black (\\`#000000\\`)\n- Primary Text: Pure White (\\`#ffffff\\`)\n- Accent/CTA: Framer Blue (\\`#0099ff\\`)\n- Secondary Text: Muted Silver (\\`#a6a6a6\\`)\n- Frosted Surface: Translucent White (\\`rgba(255, 255, 255, 0.1)\\`)\n- Elevation Ring: Blue Glow (\\`rgba(0, 153, 255, 0.15)\\`)\n\n### Example Component Prompts\n- \"Create a hero section on pure black background with 110px GT Walsheim heading in white, letter-spacing -5.5px, line-height 0.85, and a pill-shaped white CTA button (100px radius) with black text\"\n- \"Design a feature card on black background with a 1px Framer Blue ring shadow border (rgba(0,153,255,0.15)), 12px border-radius, white heading in Inter at 22px weight 700, and muted silver (a6a6a6) body text\"\n- \"Build a navigation bar with black background, white Inter text links at 15px, and a frosted pill button (rgba(255,255,255,0.1) background, 40px radius) as the CTA\"\n- \"Create a product showcase section with a full-width screenshot embedded on black, 10px border-radius, subtle multi-layer shadow (white 0.5px top highlight + rgba(0,0,0,0.25) 30px ambient)\"\n- \"Design a pricing card using pure black surface, Framer Blue (#0099ff) accent for the selected plan border, white text hierarchy (24px Inter bold heading, 14px regular body), and a solid white pill CTA button\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time — the dark canvas makes each element precious\n2. Always verify letter-spacing on GT Walsheim headings — the extreme negative tracking is non-negotiable\n3. Check that Framer Blue appears ONLY on interactive elements — never as decorative background or text color for non-links\n4. Ensure all buttons are pill-shaped — any squared corner immediately breaks the Framer aesthetic\n5. Test frosted glass surfaces by checking they have exactly \\`rgba(255, 255, 255, 0.1)\\` — too opaque looks like a bug, too transparent disappears\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

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

@@ -0,0 +1,3 @@
+declare const hashicorpBrief = "# Design System Inspired by HashiCorp\n\n## 1. Visual Theme & Atmosphere\n\nHashiCorp's website is enterprise infrastructure made tangible \u2014 a design system that must communicate the complexity of cloud infrastructure management while remaining approachable. The visual language splits between two modes: a clean white light-mode for informational sections and a dramatic dark-mode (`#15181e`, `#0d0e12`) for hero areas and product showcases, creating a day/night duality that mirrors the \"build in light, deploy in dark\" developer workflow.\n\nThe typography is anchored by a custom brand font (HashiCorp Sans, loaded as `__hashicorpSans_96f0ca`) that carries substantial weight \u2014 literally. Headings use 600\u2013700 weights with tight line-heights (1.17\u20131.19), creating dense, authoritative text blocks that communicate enterprise confidence. The hero headline at 82px weight 600 with OpenType `\"kern\"` enabled is not decorative \u2014 it's infrastructure-grade typography.\n\nWhat distinguishes HashiCorp is its multi-product color system. Each product in the portfolio has its own brand color \u2014 Terraform purple (`#7b42bc`), Vault yellow (`#ffcf25`), Waypoint teal (`#14c6cb`), Vagrant blue (`#1868f2`) \u2014 and these colors appear throughout as accent tokens via a CSS custom property system (`--mds-color-*`). This creates a design system within a design system: the parent brand is black-and-white with blue accents, while each child product injects its own chromatic identity.\n\nThe component system uses the `mds` (Markdown Design System) prefix, indicating a systematic, token-driven approach where colors, spacing, and states are all managed through CSS variables. Shadows are remarkably subtle \u2014 dual-layer micro-shadows using `rgba(97, 104, 117, 0.05)` that are nearly invisible but provide just enough depth to separate interactive surfaces from the background.\n\n**Key Characteristics:**\n- Dual-mode: clean white sections + dramatic dark (`#15181e`) hero/product areas\n- Custom HashiCorp Sans font with 600\u2013700 weights and `\"kern\"` feature\n- Multi-product color system via `--mds-color-*` CSS custom properties\n- Product brand colors: Terraform purple, Vault yellow, Waypoint teal, Vagrant blue\n- Uppercase letter-spaced captions (13px, weight 600, 1.3px letter-spacing)\n- Micro-shadows: dual-layer at 0.05 opacity \u2014 depth through whisper, not shout\n- Token-driven `mds` component system with semantic variable names\n- Tight border radius: 2px\u20138px, nothing pill-shaped or circular\n- System-ui fallback stack for secondary text\n\n## 2. Color Palette & Roles\n\n### Brand Primary\n- **Black** (`#000000`): Primary brand color, text on light surfaces, `--mds-color-hcp-brand`\n- **Dark Charcoal** (`#15181e`): Dark mode backgrounds, hero sections\n- **Near Black** (`#0d0e12`): Deepest dark mode surface, form inputs on dark\n\n### Neutral Scale\n- **Light Gray** (`#f1f2f3`): Light backgrounds, subtle surfaces\n- **Mid Gray** (`#d5d7db`): Borders, button text on dark\n- **Cool Gray** (`#b2b6bd`): Border accents (at 0.1\u20130.4 opacity)\n- **Dark Gray** (`#656a76`): Helper text, secondary labels, `--mds-form-helper-text-color`\n- **Charcoal** (`#3b3d45`): Secondary text on light, button borders\n- **Near White** (`#efeff1`): Primary text on dark surfaces\n\n### Product Brand Colors\n- **Terraform Purple** (`#7b42bc`): `--mds-color-terraform-button-background`\n- **Vault Yellow** (`#ffcf25`): `--mds-color-vault-button-background`\n- **Waypoint Teal** (`#14c6cb`): `--mds-color-waypoint-button-background-focus`\n- **Waypoint Teal Hover** (`#12b6bb`): `--mds-color-waypoint-button-background-hover`\n- **Vagrant Blue** (`#1868f2`): `--mds-color-vagrant-brand`\n- **Purple Accent** (`#911ced`): `--mds-color-palette-purple-300`\n- **Visited Purple** (`#a737ff`): `--mds-color-foreground-action-visited`\n\n### Semantic Colors\n- **Action Blue** (`#1060ff`): Primary action links on dark\n- **Link Blue** (`#2264d6`): Primary links on light\n- **Bright Blue** (`#2b89ff`): Active links, hover accent\n- **Amber** (`#bb5a00`): `--mds-color-palette-amber-200`, warning states\n- **Amber Light** (`#fbeabf`): `--mds-color-palette-amber-100`, warning backgrounds\n- **Vault Faint Yellow** (`#fff9cf`): `--mds-color-vault-radar-gradient-faint-stop`\n- **Orange** (`#a9722e`): `--mds-color-unified-core-orange-6`\n- **Red** (`#731e25`): `--mds-color-unified-core-red-7`, error states\n- **Navy** (`#101a59`): `--mds-color-unified-core-blue-7`\n\n### Shadows\n- **Micro Shadow** (`rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px`): Default card/button elevation\n- **Focus Outline**: `3px solid var(--mds-color-focus-action-external)` \u2014 systematic focus ring\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary Brand**: `__hashicorpSans_96f0ca` (HashiCorp Sans), with fallback: `__hashicorpSans_Fallback_96f0ca`\n- **System UI**: `system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | HashiCorp Sans | 82px (5.13rem) | 600 | 1.17 (tight) | normal | `\"kern\"` enabled |\n| Section Heading | HashiCorp Sans | 52px (3.25rem) | 600 | 1.19 (tight) | normal | `\"kern\"` enabled |\n| Feature Heading | HashiCorp Sans | 42px (2.63rem) | 700 | 1.19 (tight) | -0.42px | Negative tracking |\n| Sub-heading | HashiCorp Sans | 34px (2.13rem) | 600\u2013700 | 1.18 (tight) | normal | Feature blocks |\n| Card Title | HashiCorp Sans | 26px (1.63rem) | 700 | 1.19 (tight) | normal | Card and panel headings |\n| Small Title | HashiCorp Sans | 19px (1.19rem) | 700 | 1.21 (tight) | normal | Compact headings |\n| Body Emphasis | HashiCorp Sans | 17px (1.06rem) | 600\u2013700 | 1.18\u20131.35 | normal | Bold body text |\n| Body Large | system-ui | 20px (1.25rem) | 400\u2013600 | 1.50 | normal | Hero descriptions |\n| Body | system-ui | 16px (1.00rem) | 400\u2013500 | 1.63\u20131.69 (relaxed) | normal | Standard body text |\n| Nav Link | system-ui | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | Navigation items |\n| Small Body | system-ui | 14px (0.88rem) | 400\u2013500 | 1.29\u20131.71 | normal | Secondary content |\n| Caption | system-ui | 13px (0.81rem) | 400\u2013500 | 1.23\u20131.69 | normal | Metadata, footer links |\n| Uppercase Label | HashiCorp Sans | 13px (0.81rem) | 600 | 1.69 (relaxed) | 1.3px | `text-transform: uppercase` |\n\n### Principles\n- **Brand/System split**: HashiCorp Sans for headings and brand-critical text; system-ui for body, navigation, and functional text. The brand font carries the weight, system-ui carries the words.\n- **Kern always on**: All HashiCorp Sans text enables OpenType `\"kern\"` \u2014 letterfitting is non-negotiable.\n- **Tight headings**: Every heading uses 1.17\u20131.21 line-height, creating dense, stacked text blocks that feel infrastructural \u2014 solid, load-bearing.\n- **Relaxed body**: Body text uses 1.50\u20131.69 line-height (notably generous), creating comfortable reading rhythm beneath the dense headings.\n- **Uppercase labels as wayfinding**: 13px uppercase with 1.3px letter-spacing serves as the systematic category/section marker \u2014 always HashiCorp Sans weight 600.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Dark**\n- Background: `#15181e`\n- Text: `#d5d7db`\n- Padding: 9px 9px 9px 15px (asymmetric, more left padding)\n- Radius: 5px\n- Border: `1px solid rgba(178, 182, 189, 0.4)`\n- Shadow: `rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px`\n- Focus: `3px solid var(--mds-color-focus-action-external)`\n- Hover: uses `--mds-color-surface-interactive` token\n\n**Secondary White**\n- Background: `#ffffff`\n- Text: `#3b3d45`\n- Padding: 8px 12px\n- Radius: 4px\n- Hover: `--mds-color-surface-interactive` + low-shadow elevation\n- Focus: `3px solid transparent` outline\n- Clean, minimal appearance\n\n**Product-Colored Buttons**\n- Terraform: background `#7b42bc`\n- Vault: background `#ffcf25` (dark text)\n- Waypoint: background `#14c6cb`, hover `#12b6bb`\n- Each product button follows the same structural pattern but uses its brand color\n\n### Badges / Pills\n- Background: `#42225b` (deep purple)\n- Text: `#efeff1`\n- Padding: 3px 7px\n- Radius: 5px\n- Border: `1px solid rgb(180, 87, 255)`\n- Font: 16px\n\n### Inputs\n\n**Text Input (Dark Mode)**\n- Background: `#0d0e12`\n- Text: `#efeff1`\n- Border: `1px solid rgb(97, 104, 117)`\n- Padding: 11px\n- Radius: 5px\n- Focus: `3px solid var(--mds-color-focus-action-external)` outline\n\n**Checkbox**\n- Background: `#0d0e12`\n- Border: `1px solid rgb(97, 104, 117)`\n- Radius: 3px\n\n### Links\n- **Action Blue on Light**: `#2264d6`, hover \u2192 blue-600 variable, underline on hover\n- **Action Blue on Dark**: `#1060ff` or `#2b89ff`, underline on hover\n- **White on Dark**: `#ffffff`, transparent underline \u2192 visible underline on hover\n- **Neutral on Light**: `#3b3d45`, transparent underline \u2192 visible underline on hover\n- **Light on Dark**: `#efeff1`, similar hover pattern\n- All links use `var(--wpl-blue-600)` as hover color\n\n### Cards & Containers\n- Light mode: white background, micro-shadow elevation\n- Dark mode: `#15181e` or darker surfaces\n- Radius: 8px for cards and containers\n- Product showcase cards with gradient borders or accent lighting\n\n### Navigation\n- Clean horizontal nav with mega-menu dropdowns\n- HashiCorp logo left-aligned\n- system-ui 15px weight 500 for links\n- Product categories organized by lifecycle management group\n- \"Get started\" and \"Contact us\" CTAs in header\n- Dark mode variant for hero sections\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 3px, 4px, 6px, 7px, 8px, 9px, 11px, 12px, 16px, 20px, 24px, 32px, 40px, 48px\n\n### Grid & Container\n- Max content width: ~1150px (xl breakpoint)\n- Full-width dark hero sections with contained content\n- Card grids: 2\u20133 column layouts\n- Generous horizontal padding at desktop scale\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <375px | Tight single column |\n| Mobile | 375\u2013480px | Standard mobile |\n| Small Tablet | 480\u2013600px | Minor adjustments |\n| Tablet | 600\u2013768px | 2-column grids begin |\n| Small Desktop | 768\u2013992px | Full nav visible |\n| Desktop | 992\u20131120px | Standard layout |\n| Large Desktop | 1120\u20131440px | Max-width content |\n| Ultra-wide | >1440px | Centered, generous margins |\n\n### Whitespace Philosophy\n- **Enterprise breathing room**: Generous vertical spacing between sections (48px\u201380px+) communicates stability and seriousness.\n- **Dense headings, spacious body**: Tight line-height headings sit above relaxed body text, creating visual \"weight at the top\" of each section.\n- **Dark as canvas**: Dark hero sections use extra vertical padding to let 3D illustrations and gradients breathe.\n\n### Border Radius Scale\n- Minimal (2px): Links, small inline elements\n- Subtle (3px): Checkboxes, small inputs\n- Standard (4px): Secondary buttons\n- Comfortable (5px): Primary buttons, badges, inputs\n- Card (8px): Cards, containers, images\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default surfaces, text blocks |\n| Whisper (Level 1) | `rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px` | Cards, buttons, interactive surfaces |\n| Focus (Level 2) | `3px solid var(--mds-color-focus-action-external)` outline | Focus rings \u2014 color-matched to context |\n\n**Shadow Philosophy**: HashiCorp uses arguably the subtlest shadow system in modern web design. The dual-layer shadows at 5% opacity are nearly invisible \u2014 they exist not to create visual depth but to signal interactivity. If you can see the shadow, it's too strong. This restraint communicates the enterprise value of stability \u2014 nothing floats, nothing is uncertain.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use HashiCorp Sans for headings and brand text, system-ui for body and UI text\n- Enable `\"kern\"` on all HashiCorp Sans text\n- Use product brand colors ONLY for their respective products (Terraform = purple, Vault = yellow, etc.)\n- Apply uppercase labels at 13px weight 600 with 1.3px letter-spacing for section markers\n- Keep shadows at the \"whisper\" level (0.05 opacity dual-layer)\n- Use the `--mds-color-*` token system for consistent color application\n- Maintain the tight-heading / relaxed-body rhythm (1.17\u20131.21 vs 1.50\u20131.69 line-heights)\n- Use `3px solid` focus outlines for accessibility\n\n### Don't\n- Don't use product brand colors outside their product context (no Terraform purple on Vault content)\n- Don't increase shadow opacity above 0.1 \u2014 the whisper level is intentional\n- Don't use pill-shaped buttons (>8px radius) \u2014 the sharp, minimal radius is structural\n- Don't skip the `\"kern\"` feature on headings \u2014 the font requires it\n- Don't use HashiCorp Sans for small body text \u2014 it's designed for 17px+ heading use\n- Don't mix product colors in the same component \u2014 each product has one color\n- Don't use pure black (`#000000`) for dark backgrounds \u2014 use `#15181e` or `#0d0e12`\n- Don't forget the asymmetric button padding \u2014 9px 9px 9px 15px is intentional\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <768px | Single column, hamburger nav, stacked CTAs |\n| Tablet | 768\u2013992px | 2-column grids, nav begins expanding |\n| Desktop | 992\u20131150px | Full layout, mega-menu nav |\n| Large | >1150px | Max-width centered, generous margins |\n\n### Collapsing Strategy\n- Hero: 82px \u2192 52px \u2192 42px heading sizes\n- Navigation: mega-menu \u2192 hamburger\n- Product cards: 3-column \u2192 2-column \u2192 stacked\n- Dark sections maintain full-width but compress padding\n- Buttons: inline \u2192 full-width stacked on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Light bg: `#ffffff`, `#f1f2f3`\n- Dark bg: `#15181e`, `#0d0e12`\n- Text light: `#000000`, `#3b3d45`\n- Text dark: `#efeff1`, `#d5d7db`\n- Links: `#2264d6` (light), `#1060ff` (dark), `#2b89ff` (active)\n- Helper text: `#656a76`\n- Borders: `rgba(178, 182, 189, 0.4)`, `rgb(97, 104, 117)`\n- Focus: `3px solid` product-appropriate color\n\n### Example Component Prompts\n- \"Create a hero on dark background (#15181e). Headline at 82px HashiCorp Sans weight 600, line-height 1.17, kern enabled, white text. Sub-text at 20px system-ui weight 400, line-height 1.50, #d5d7db text. Two buttons: primary dark (#15181e, 5px radius, 9px 15px padding) and secondary white (#ffffff, 4px radius, 8px 12px padding).\"\n- \"Design a product card: white background, 8px radius, dual-layer shadow at rgba(97,104,117,0.05). Title at 26px HashiCorp Sans weight 700, body at 16px system-ui weight 400 line-height 1.63.\"\n- \"Build an uppercase section label: 13px HashiCorp Sans weight 600, line-height 1.69, letter-spacing 1.3px, text-transform uppercase, #656a76 color.\"\n- \"Create a product-specific CTA button: Terraform \u2192 #7b42bc background, Vault \u2192 #ffcf25 with dark text, Waypoint \u2192 #14c6cb. All: 5px radius, 500 weight text, 16px system-ui.\"\n- \"Design a dark form: #0d0e12 input background, #efeff1 text, 1px solid rgb(97,104,117) border, 5px radius, 11px padding. Focus: 3px solid accent-color outline.\"\n\n### Iteration Guide\n1. Always start with the mode decision: light (white) for informational, dark (#15181e) for hero/product\n2. HashiCorp Sans for headings only (17px+), system-ui for everything else\n3. Shadows are at whisper level (0.05 opacity) \u2014 if visible, reduce\n4. Product colors are sacred \u2014 each product owns exactly one color\n5. Focus rings are always 3px solid, color-matched to product context\n6. Uppercase labels are the systematic wayfinding pattern \u2014 13px, 600, 1.3px tracking\n";
+
+export { hashicorpBrief };

package/dist/presets/_briefs/hashicorp.js

@@ -0,0 +1,284 @@
+// src/presets/_briefs/hashicorp.ts
+var hashicorpBrief = `# Design System Inspired by HashiCorp
+
+## 1. Visual Theme & Atmosphere
+
+HashiCorp's website is enterprise infrastructure made tangible \u2014 a design system that must communicate the complexity of cloud infrastructure management while remaining approachable. The visual language splits between two modes: a clean white light-mode for informational sections and a dramatic dark-mode (\`#15181e\`, \`#0d0e12\`) for hero areas and product showcases, creating a day/night duality that mirrors the "build in light, deploy in dark" developer workflow.
+
+The typography is anchored by a custom brand font (HashiCorp Sans, loaded as \`__hashicorpSans_96f0ca\`) that carries substantial weight \u2014 literally. Headings use 600\u2013700 weights with tight line-heights (1.17\u20131.19), creating dense, authoritative text blocks that communicate enterprise confidence. The hero headline at 82px weight 600 with OpenType \`"kern"\` enabled is not decorative \u2014 it's infrastructure-grade typography.
+
+What distinguishes HashiCorp is its multi-product color system. Each product in the portfolio has its own brand color \u2014 Terraform purple (\`#7b42bc\`), Vault yellow (\`#ffcf25\`), Waypoint teal (\`#14c6cb\`), Vagrant blue (\`#1868f2\`) \u2014 and these colors appear throughout as accent tokens via a CSS custom property system (\`--mds-color-*\`). This creates a design system within a design system: the parent brand is black-and-white with blue accents, while each child product injects its own chromatic identity.
+
+The component system uses the \`mds\` (Markdown Design System) prefix, indicating a systematic, token-driven approach where colors, spacing, and states are all managed through CSS variables. Shadows are remarkably subtle \u2014 dual-layer micro-shadows using \`rgba(97, 104, 117, 0.05)\` that are nearly invisible but provide just enough depth to separate interactive surfaces from the background.
+
+**Key Characteristics:**
+- Dual-mode: clean white sections + dramatic dark (\`#15181e\`) hero/product areas
+- Custom HashiCorp Sans font with 600\u2013700 weights and \`"kern"\` feature
+- Multi-product color system via \`--mds-color-*\` CSS custom properties
+- Product brand colors: Terraform purple, Vault yellow, Waypoint teal, Vagrant blue
+- Uppercase letter-spaced captions (13px, weight 600, 1.3px letter-spacing)
+- Micro-shadows: dual-layer at 0.05 opacity \u2014 depth through whisper, not shout
+- Token-driven \`mds\` component system with semantic variable names
+- Tight border radius: 2px\u20138px, nothing pill-shaped or circular
+- System-ui fallback stack for secondary text
+
+## 2. Color Palette & Roles
+
+### Brand Primary
+- **Black** (\`#000000\`): Primary brand color, text on light surfaces, \`--mds-color-hcp-brand\`
+- **Dark Charcoal** (\`#15181e\`): Dark mode backgrounds, hero sections
+- **Near Black** (\`#0d0e12\`): Deepest dark mode surface, form inputs on dark
+
+### Neutral Scale
+- **Light Gray** (\`#f1f2f3\`): Light backgrounds, subtle surfaces
+- **Mid Gray** (\`#d5d7db\`): Borders, button text on dark
+- **Cool Gray** (\`#b2b6bd\`): Border accents (at 0.1\u20130.4 opacity)
+- **Dark Gray** (\`#656a76\`): Helper text, secondary labels, \`--mds-form-helper-text-color\`
+- **Charcoal** (\`#3b3d45\`): Secondary text on light, button borders
+- **Near White** (\`#efeff1\`): Primary text on dark surfaces
+
+### Product Brand Colors
+- **Terraform Purple** (\`#7b42bc\`): \`--mds-color-terraform-button-background\`
+- **Vault Yellow** (\`#ffcf25\`): \`--mds-color-vault-button-background\`
+- **Waypoint Teal** (\`#14c6cb\`): \`--mds-color-waypoint-button-background-focus\`
+- **Waypoint Teal Hover** (\`#12b6bb\`): \`--mds-color-waypoint-button-background-hover\`
+- **Vagrant Blue** (\`#1868f2\`): \`--mds-color-vagrant-brand\`
+- **Purple Accent** (\`#911ced\`): \`--mds-color-palette-purple-300\`
+- **Visited Purple** (\`#a737ff\`): \`--mds-color-foreground-action-visited\`
+
+### Semantic Colors
+- **Action Blue** (\`#1060ff\`): Primary action links on dark
+- **Link Blue** (\`#2264d6\`): Primary links on light
+- **Bright Blue** (\`#2b89ff\`): Active links, hover accent
+- **Amber** (\`#bb5a00\`): \`--mds-color-palette-amber-200\`, warning states
+- **Amber Light** (\`#fbeabf\`): \`--mds-color-palette-amber-100\`, warning backgrounds
+- **Vault Faint Yellow** (\`#fff9cf\`): \`--mds-color-vault-radar-gradient-faint-stop\`
+- **Orange** (\`#a9722e\`): \`--mds-color-unified-core-orange-6\`
+- **Red** (\`#731e25\`): \`--mds-color-unified-core-red-7\`, error states
+- **Navy** (\`#101a59\`): \`--mds-color-unified-core-blue-7\`
+
+### Shadows
+- **Micro Shadow** (\`rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px\`): Default card/button elevation
+- **Focus Outline**: \`3px solid var(--mds-color-focus-action-external)\` \u2014 systematic focus ring
+
+## 3. Typography Rules
+
+### Font Families
+- **Primary Brand**: \`__hashicorpSans_96f0ca\` (HashiCorp Sans), with fallback: \`__hashicorpSans_Fallback_96f0ca\`
+- **System UI**: \`system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial\`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | HashiCorp Sans | 82px (5.13rem) | 600 | 1.17 (tight) | normal | \`"kern"\` enabled |
+| Section Heading | HashiCorp Sans | 52px (3.25rem) | 600 | 1.19 (tight) | normal | \`"kern"\` enabled |
+| Feature Heading | HashiCorp Sans | 42px (2.63rem) | 700 | 1.19 (tight) | -0.42px | Negative tracking |
+| Sub-heading | HashiCorp Sans | 34px (2.13rem) | 600\u2013700 | 1.18 (tight) | normal | Feature blocks |
+| Card Title | HashiCorp Sans | 26px (1.63rem) | 700 | 1.19 (tight) | normal | Card and panel headings |
+| Small Title | HashiCorp Sans | 19px (1.19rem) | 700 | 1.21 (tight) | normal | Compact headings |
+| Body Emphasis | HashiCorp Sans | 17px (1.06rem) | 600\u2013700 | 1.18\u20131.35 | normal | Bold body text |
+| Body Large | system-ui | 20px (1.25rem) | 400\u2013600 | 1.50 | normal | Hero descriptions |
+| Body | system-ui | 16px (1.00rem) | 400\u2013500 | 1.63\u20131.69 (relaxed) | normal | Standard body text |
+| Nav Link | system-ui | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | Navigation items |
+| Small Body | system-ui | 14px (0.88rem) | 400\u2013500 | 1.29\u20131.71 | normal | Secondary content |
+| Caption | system-ui | 13px (0.81rem) | 400\u2013500 | 1.23\u20131.69 | normal | Metadata, footer links |
+| Uppercase Label | HashiCorp Sans | 13px (0.81rem) | 600 | 1.69 (relaxed) | 1.3px | \`text-transform: uppercase\` |
+
+### Principles
+- **Brand/System split**: HashiCorp Sans for headings and brand-critical text; system-ui for body, navigation, and functional text. The brand font carries the weight, system-ui carries the words.
+- **Kern always on**: All HashiCorp Sans text enables OpenType \`"kern"\` \u2014 letterfitting is non-negotiable.
+- **Tight headings**: Every heading uses 1.17\u20131.21 line-height, creating dense, stacked text blocks that feel infrastructural \u2014 solid, load-bearing.
+- **Relaxed body**: Body text uses 1.50\u20131.69 line-height (notably generous), creating comfortable reading rhythm beneath the dense headings.
+- **Uppercase labels as wayfinding**: 13px uppercase with 1.3px letter-spacing serves as the systematic category/section marker \u2014 always HashiCorp Sans weight 600.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Dark**
+- Background: \`#15181e\`
+- Text: \`#d5d7db\`
+- Padding: 9px 9px 9px 15px (asymmetric, more left padding)
+- Radius: 5px
+- Border: \`1px solid rgba(178, 182, 189, 0.4)\`
+- Shadow: \`rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px\`
+- Focus: \`3px solid var(--mds-color-focus-action-external)\`
+- Hover: uses \`--mds-color-surface-interactive\` token
+
+**Secondary White**
+- Background: \`#ffffff\`
+- Text: \`#3b3d45\`
+- Padding: 8px 12px
+- Radius: 4px
+- Hover: \`--mds-color-surface-interactive\` + low-shadow elevation
+- Focus: \`3px solid transparent\` outline
+- Clean, minimal appearance
+
+**Product-Colored Buttons**
+- Terraform: background \`#7b42bc\`
+- Vault: background \`#ffcf25\` (dark text)
+- Waypoint: background \`#14c6cb\`, hover \`#12b6bb\`
+- Each product button follows the same structural pattern but uses its brand color
+
+### Badges / Pills
+- Background: \`#42225b\` (deep purple)
+- Text: \`#efeff1\`
+- Padding: 3px 7px
+- Radius: 5px
+- Border: \`1px solid rgb(180, 87, 255)\`
+- Font: 16px
+
+### Inputs
+
+**Text Input (Dark Mode)**
+- Background: \`#0d0e12\`
+- Text: \`#efeff1\`
+- Border: \`1px solid rgb(97, 104, 117)\`
+- Padding: 11px
+- Radius: 5px
+- Focus: \`3px solid var(--mds-color-focus-action-external)\` outline
+
+**Checkbox**
+- Background: \`#0d0e12\`
+- Border: \`1px solid rgb(97, 104, 117)\`
+- Radius: 3px
+
+### Links
+- **Action Blue on Light**: \`#2264d6\`, hover \u2192 blue-600 variable, underline on hover
+- **Action Blue on Dark**: \`#1060ff\` or \`#2b89ff\`, underline on hover
+- **White on Dark**: \`#ffffff\`, transparent underline \u2192 visible underline on hover
+- **Neutral on Light**: \`#3b3d45\`, transparent underline \u2192 visible underline on hover
+- **Light on Dark**: \`#efeff1\`, similar hover pattern
+- All links use \`var(--wpl-blue-600)\` as hover color
+
+### Cards & Containers
+- Light mode: white background, micro-shadow elevation
+- Dark mode: \`#15181e\` or darker surfaces
+- Radius: 8px for cards and containers
+- Product showcase cards with gradient borders or accent lighting
+
+### Navigation
+- Clean horizontal nav with mega-menu dropdowns
+- HashiCorp logo left-aligned
+- system-ui 15px weight 500 for links
+- Product categories organized by lifecycle management group
+- "Get started" and "Contact us" CTAs in header
+- Dark mode variant for hero sections
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 2px, 3px, 4px, 6px, 7px, 8px, 9px, 11px, 12px, 16px, 20px, 24px, 32px, 40px, 48px
+
+### Grid & Container
+- Max content width: ~1150px (xl breakpoint)
+- Full-width dark hero sections with contained content
+- Card grids: 2\u20133 column layouts
+- Generous horizontal padding at desktop scale
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <375px | Tight single column |
+| Mobile | 375\u2013480px | Standard mobile |
+| Small Tablet | 480\u2013600px | Minor adjustments |
+| Tablet | 600\u2013768px | 2-column grids begin |
+| Small Desktop | 768\u2013992px | Full nav visible |
+| Desktop | 992\u20131120px | Standard layout |
+| Large Desktop | 1120\u20131440px | Max-width content |
+| Ultra-wide | >1440px | Centered, generous margins |
+
+### Whitespace Philosophy
+- **Enterprise breathing room**: Generous vertical spacing between sections (48px\u201380px+) communicates stability and seriousness.
+- **Dense headings, spacious body**: Tight line-height headings sit above relaxed body text, creating visual "weight at the top" of each section.
+- **Dark as canvas**: Dark hero sections use extra vertical padding to let 3D illustrations and gradients breathe.
+
+### Border Radius Scale
+- Minimal (2px): Links, small inline elements
+- Subtle (3px): Checkboxes, small inputs
+- Standard (4px): Secondary buttons
+- Comfortable (5px): Primary buttons, badges, inputs
+- Card (8px): Cards, containers, images
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Default surfaces, text blocks |
+| Whisper (Level 1) | \`rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px\` | Cards, buttons, interactive surfaces |
+| Focus (Level 2) | \`3px solid var(--mds-color-focus-action-external)\` outline | Focus rings \u2014 color-matched to context |
+
+**Shadow Philosophy**: HashiCorp uses arguably the subtlest shadow system in modern web design. The dual-layer shadows at 5% opacity are nearly invisible \u2014 they exist not to create visual depth but to signal interactivity. If you can see the shadow, it's too strong. This restraint communicates the enterprise value of stability \u2014 nothing floats, nothing is uncertain.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use HashiCorp Sans for headings and brand text, system-ui for body and UI text
+- Enable \`"kern"\` on all HashiCorp Sans text
+- Use product brand colors ONLY for their respective products (Terraform = purple, Vault = yellow, etc.)
+- Apply uppercase labels at 13px weight 600 with 1.3px letter-spacing for section markers
+- Keep shadows at the "whisper" level (0.05 opacity dual-layer)
+- Use the \`--mds-color-*\` token system for consistent color application
+- Maintain the tight-heading / relaxed-body rhythm (1.17\u20131.21 vs 1.50\u20131.69 line-heights)
+- Use \`3px solid\` focus outlines for accessibility
+
+### Don't
+- Don't use product brand colors outside their product context (no Terraform purple on Vault content)
+- Don't increase shadow opacity above 0.1 \u2014 the whisper level is intentional
+- Don't use pill-shaped buttons (>8px radius) \u2014 the sharp, minimal radius is structural
+- Don't skip the \`"kern"\` feature on headings \u2014 the font requires it
+- Don't use HashiCorp Sans for small body text \u2014 it's designed for 17px+ heading use
+- Don't mix product colors in the same component \u2014 each product has one color
+- Don't use pure black (\`#000000\`) for dark backgrounds \u2014 use \`#15181e\` or \`#0d0e12\`
+- Don't forget the asymmetric button padding \u2014 9px 9px 9px 15px is intentional
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | Single column, hamburger nav, stacked CTAs |
+| Tablet | 768\u2013992px | 2-column grids, nav begins expanding |
+| Desktop | 992\u20131150px | Full layout, mega-menu nav |
+| Large | >1150px | Max-width centered, generous margins |
+
+### Collapsing Strategy
+- Hero: 82px \u2192 52px \u2192 42px heading sizes
+- Navigation: mega-menu \u2192 hamburger
+- Product cards: 3-column \u2192 2-column \u2192 stacked
+- Dark sections maintain full-width but compress padding
+- Buttons: inline \u2192 full-width stacked on mobile
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Light bg: \`#ffffff\`, \`#f1f2f3\`
+- Dark bg: \`#15181e\`, \`#0d0e12\`
+- Text light: \`#000000\`, \`#3b3d45\`
+- Text dark: \`#efeff1\`, \`#d5d7db\`
+- Links: \`#2264d6\` (light), \`#1060ff\` (dark), \`#2b89ff\` (active)
+- Helper text: \`#656a76\`
+- Borders: \`rgba(178, 182, 189, 0.4)\`, \`rgb(97, 104, 117)\`
+- Focus: \`3px solid\` product-appropriate color
+
+### Example Component Prompts
+- "Create a hero on dark background (#15181e). Headline at 82px HashiCorp Sans weight 600, line-height 1.17, kern enabled, white text. Sub-text at 20px system-ui weight 400, line-height 1.50, #d5d7db text. Two buttons: primary dark (#15181e, 5px radius, 9px 15px padding) and secondary white (#ffffff, 4px radius, 8px 12px padding)."
+- "Design a product card: white background, 8px radius, dual-layer shadow at rgba(97,104,117,0.05). Title at 26px HashiCorp Sans weight 700, body at 16px system-ui weight 400 line-height 1.63."
+- "Build an uppercase section label: 13px HashiCorp Sans weight 600, line-height 1.69, letter-spacing 1.3px, text-transform uppercase, #656a76 color."
+- "Create a product-specific CTA button: Terraform \u2192 #7b42bc background, Vault \u2192 #ffcf25 with dark text, Waypoint \u2192 #14c6cb. All: 5px radius, 500 weight text, 16px system-ui."
+- "Design a dark form: #0d0e12 input background, #efeff1 text, 1px solid rgb(97,104,117) border, 5px radius, 11px padding. Focus: 3px solid accent-color outline."
+
+### Iteration Guide
+1. Always start with the mode decision: light (white) for informational, dark (#15181e) for hero/product
+2. HashiCorp Sans for headings only (17px+), system-ui for everything else
+3. Shadows are at whisper level (0.05 opacity) \u2014 if visible, reduce
+4. Product colors are sacred \u2014 each product owns exactly one color
+5. Focus rings are always 3px solid, color-matched to product context
+6. Uppercase labels are the systematic wayfinding pattern \u2014 13px, 600, 1.3px tracking
+`;
+export {
+  hashicorpBrief
+};
+//# sourceMappingURL=hashicorp.js.map