@hex-core/themes 0.1.1 → 0.2.1

package/dist/presets/_briefs/warp.js

@@ -0,0 +1,259 @@
+// src/presets/_briefs/warp.ts
+var warpBrief = `# Design System Inspired by Warp
+
+## 1. Visual Theme & Atmosphere
+
+Warp's website feels like sitting at a campfire in a deep forest \u2014 warm, dark, and alive with quiet confidence. Unlike the cold, blue-tinted blacks favored by most developer tools, Warp wraps everything in a warm near-black that feels like charred wood or dark earth. The text isn't pure white either \u2014 it's Warm Parchment (\`#faf9f6\`), a barely-perceptible cream that softens every headline and makes the dark canvas feel inviting rather than austere.
+
+The typography is the secret weapon: Matter, a geometric sans-serif with distinctive character, deployed at Regular weight across virtually all text. The font choice is unusual for a developer tool \u2014 Matter has a softness and humanity that signals "this terminal is for everyone, not just greybeards." Combined with tight line-heights and controlled negative letter-spacing on headlines, the effect is refined and approachable simultaneously. Nature photography is woven between terminal screenshots, creating a visual language that says: this tool brings you closer to flow, to calm productivity.
+
+The overall design philosophy is restraint through warmth. Minimal color (almost monochromatic warm grays), minimal ornamentation, and a focus on product showcases set against cinematic dark landscapes. It's a terminal company that markets like a lifestyle brand.
+
+**Key Characteristics:**
+- Warm dark background \u2014 not cold black, but earthy near-black with warm gray undertones
+- Warm Parchment (\`#faf9f6\`) text instead of pure white \u2014 subtle cream warmth
+- Matter font family (Regular weight) \u2014 geometric but approachable, not the typical developer-tool typeface
+- Nature photography interleaved with product screenshots \u2014 lifestyle meets developer tool
+- Almost monochromatic warm gray palette \u2014 no bold accent colors
+- Uppercase labels with wide letter-spacing (2.4px) for categorization \u2014 editorial signaling
+- Pill-shaped dark buttons (\`#353534\`, 50px radius) \u2014 restrained, muted CTAs
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Warm Parchment** (\`#faf9f6\`): Primary text color \u2014 a barely-cream off-white that softens every surface
+- **Earth Gray** (\`#353534\`): Button backgrounds, dark interactive surfaces \u2014 warm, not cold
+- **Deep Void** (near-black, page background): The warm dark canvas derived from the body background
+
+### Secondary & Accent
+- **Stone Gray** (\`#868584\`): Secondary text, muted descriptions \u2014 warm mid-gray
+- **Ash Gray** (\`#afaeac\`): Body text, button text \u2014 the workhorse reading color
+- **Purple-Tint Gray** (\`#666469\`): Link text with subtle purple undertone \u2014 underlined links in content
+
+### Surface & Background
+- **Frosted Veil** (\`rgba(255, 255, 255, 0.04)\`): Ultra-subtle white overlay for surface differentiation
+- **Mist Border** (\`rgba(226, 226, 226, 0.35)\` / \`rgba(227, 227, 227, 0.337)\`): Semi-transparent borders for card containment
+- **Translucent Parchment** (\`rgba(250, 249, 246, 0.9)\`): Slightly transparent primary surface, allowing depth
+
+### Neutrals & Text
+- **Warm Parchment** (\`#faf9f6\`): Headlines, high-emphasis text
+- **Ash Gray** (\`#afaeac\`): Body paragraphs, descriptions
+- **Stone Gray** (\`#868584\`): Secondary labels, subdued information
+- **Muted Purple** (\`#666469\`): Underlined links, tertiary content
+- **Dark Charcoal** (\`#454545\` / \`#353534\`): Borders, button backgrounds
+
+### Semantic & Accent
+- Warp operates as an almost monochromatic system \u2014 no bold accent colors
+- Interactive states are communicated through opacity changes and underline decorations rather than color shifts
+- Any accent color would break the warm, restrained palette
+
+### Gradient System
+- No explicit gradients on the marketing site
+- Depth is created through layered semi-transparent surfaces and photography rather than color gradients
+
+## 3. Typography Rules
+
+### Font Family
+- **Display & Body**: \`Matter Regular\` \u2014 geometric sans-serif with soft character. Fallbacks: \`Matter Regular Placeholder\`, system sans-serif
+- **Medium**: \`Matter Medium\` \u2014 weight 500 variant for emphasis. Fallbacks: \`Matter Medium Placeholder\`
+- **Square**: \`Matter SQ Regular\` \u2014 squared variant for select display contexts. Fallbacks: \`Matter SQ Regular Placeholder\`
+- **UI Supplement**: \`Inter\` \u2014 used for specific UI elements. Fallbacks: \`Inter Placeholder\`
+- **Monospace Display**: \`Geist Mono\` \u2014 for code/terminal display headings
+- **Monospace Body**: \`Matter Mono Regular\` \u2014 custom mono companion. Fallbacks: \`Matter Mono Regular Placeholder\`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Matter Regular | 80px | 400 | 1.00 | -2.4px | Maximum compression, hero impact |
+| Section Display | Matter Regular | 56px | 400 | 1.20 | -0.56px | Feature section headings |
+| Section Heading | Matter Regular | 48px | 400 | 1.20 | -0.48px to -0.96px | Alternate heading weight |
+| Feature Heading | Matter Regular | 40px | 400 | 1.10 | -0.4px | Feature block titles |
+| Sub-heading Large | Matter Regular | 36px | 400 | 1.15 | -0.72px | Sub-section headers |
+| Card Display | Matter SQ Regular | 42px | 400 | 1.00 | 0px | Squared variant for special display |
+| Sub-heading | Matter Regular | 32px | 400 | 1.19 | 0px | Content sub-headings |
+| Body Heading | Matter Regular | 24px | 400 | 1.20 | -0.72px to 0px | Bold content intros |
+| Card Title | Matter Medium | 22px | 500 | 1.14 | 0px | Emphasized card headers |
+| Body Large | Matter Regular | 20px | 400 | 1.40 | -0.2px | Primary body text, relaxed |
+| Body | Matter Regular | 18px | 400 | 1.30 | -0.18px | Standard body paragraphs |
+| Nav/UI | Matter Regular | 16px | 400 | 1.20 | 0px | Navigation links, UI text |
+| Button Text | Matter Medium | 16px | 500 | 1.20 | 0px | Button labels |
+| Caption | Matter Regular | 14px | 400 | 1.00 | 1.4px | Uppercase labels (transform: uppercase) |
+| Small Label | Matter Regular | 12px | 400 | 1.35 | 2.4px | Uppercase micro-labels (transform: uppercase) |
+| Micro | Matter Regular | 11px | 400 | 1.20 | 0px | Smallest text elements |
+| Code UI | Geist Mono | 16px | 400 | 1.00 | 0px | Terminal/code display |
+| Code Body | Matter Mono Regular | 16px | 400 | 1.00 | -0.2px | Code content |
+| UI Supplement | Inter | 16px | 500 | 1.00 | -0.2px | Specific UI elements |
+
+### Principles
+- **Regular weight dominance**: Nearly all text uses weight 400 (Regular) \u2014 even headlines. Matter Medium (500) appears only for emphasis moments like card titles and buttons. This creates a remarkably even, calm typographic texture
+- **Uppercase as editorial signal**: Small labels and categories use uppercase transform with wide letter-spacing (1.4px\u20132.4px), creating a magazine-editorial categorization system
+- **Warm legibility**: The combination of Matter's geometric softness + warm text colors (#faf9f6) + controlled negative tracking creates text that reads as effortlessly human on dark surfaces
+- **No bold display**: Zero use of bold (700+) weight anywhere \u2014 restraint is the philosophy
+
+## 4. Component Stylings
+
+### Buttons
+- **Dark Pill**: \`#353534\` background, Ash Gray (\`#afaeac\`) text, pill shape (50px radius), \`10px\` padding. The primary CTA \u2014 warm, muted, understated
+- **Frosted Tag**: \`rgba(255, 255, 255, 0.16)\` background, black text (\`rgb(0, 0, 0)\`), rectangular (6px radius), \`1px 6px\` padding. Small inline tag-like buttons
+- **Ghost**: No visible background, text-only with underline decoration on hover
+- **Hover**: Subtle opacity or brightness shift \u2014 no dramatic color changes
+
+### Cards & Containers
+- **Photography Cards**: Full-bleed nature imagery with overlay text, 8px\u201312px border-radius
+- **Terminal Screenshot Cards**: Product UI embedded in dark containers with rounded corners (8px\u201312px)
+- **Bordered Cards**: Semi-transparent border (\`rgba(226, 226, 226, 0.35)\`) for containment, 12px\u201314px radius
+- **Hover**: Minimal \u2014 content cards don't dramatically change on hover, maintaining the calm aesthetic
+
+### Inputs & Forms
+- Minimal form presence on the marketing site
+- Dark background inputs with warm gray text
+- Focus: Border brightness increase, no colored rings (consistent with the monochromatic palette)
+
+### Navigation
+- **Top nav**: Dark background, warm parchment brand text, Matter Regular at 16px for links
+- **Link color**: Stone Gray (\`#868584\`) for muted nav, Warm Parchment for active/hover
+- **CTA button**: Dark pill (#353534) at nav end \u2014 restrained, not attention-grabbing
+- **Mobile**: Collapses to simplified navigation
+- **Sticky**: Nav stays fixed on scroll
+
+### Image Treatment
+- **Nature photography**: Landscapes, forests, golden-hour scenes \u2014 completely unique for a developer tool
+- **Terminal screenshots**: Product UI shown in realistic terminal window frames
+- **Mixed composition**: Nature images and terminal screenshots are interleaved, creating a lifestyle-meets-tool narrative
+- **Full-bleed**: Images often span full container width with 8px radius
+- **Video**: Video elements present with 10px border-radius
+
+### Testimonial Section
+- Social proof area ("Don't take our word for it") with quotes
+- Muted styling consistent with overall restraint
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 1px, 4px, 5px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 24px, 26px, 30px, 32px, 36px
+- **Section padding**: 80px\u2013120px vertical between major sections
+- **Card padding**: 16px\u201332px internal spacing
+- **Component gaps**: 8px\u201316px between related elements
+
+### Grid & Container
+- **Max width**: ~1500px container (breakpoint at 1500px), centered
+- **Column patterns**: Full-width hero, 2-column feature sections with photography, single-column testimonials
+- **Cinematic layout**: Wide containers that let photography breathe
+
+### Whitespace Philosophy
+- **Vast and warm**: Generous spacing between sections \u2014 the dark background creates a warm void that feels contemplative rather than empty
+- **Photography as whitespace**: Nature images serve as visual breathing room between dense product information
+- **Editorial pacing**: The layout reads like a magazine \u2014 each section is a deliberate page-turn moment
+
+### Border Radius Scale
+- **4px**: Small interactive elements \u2014 buttons, tags
+- **5px\u20136px**: Standard components \u2014 links, small containers
+- **8px**: Images, video containers, standard cards
+- **10px**: Video elements, medium containers
+- **12px**: Feature cards, large images
+- **14px**: Large containers, prominent cards
+- **40px**: Large rounded sections
+- **50px**: Pill buttons \u2014 primary CTAs
+- **200px**: Progress bars \u2014 full pill shape
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Flat) | No shadow, dark background | Page canvas, most surfaces |
+| Level 1 (Veil) | \`rgba(255, 255, 255, 0.04)\` overlay | Subtle surface differentiation |
+| Level 2 (Border) | \`rgba(226, 226, 226, 0.35) 1px\` border | Card containment, section separation |
+| Level 3 (Ambient) | \`rgba(0, 0, 0, 0.2) 0px 5px 15px\` (inferred from design) | Image containers, floating elements |
+
+### Shadow Philosophy
+Warp's elevation system is remarkably flat \u2014 almost zero shadow usage on the marketing site. Depth is communicated through:
+- **Semi-transparent borders** instead of shadows \u2014 borders at 35% opacity create a ghostly containment
+- **Photography layering** \u2014 images create natural depth without artificial shadows
+- **Surface opacity shifts** \u2014 \`rgba(255, 255, 255, 0.04)\` overlays create barely-perceptible layer differences
+- The effect is calm and grounded \u2014 nothing floats, everything rests
+
+### Decorative Depth
+- **Photography as depth**: Nature images create atmospheric depth that shadows cannot
+- **No glass or blur effects**: The design avoids trendy glassmorphism entirely
+- **Warm ambient**: Any glow comes from the photography's natural lighting, not artificial CSS
+
+## 7. Do's and Don'ts
+
+### Do
+- Use warm off-white (\`#faf9f6\`) for text instead of pure white \u2014 the cream undertone is essential
+- Keep buttons restrained and muted \u2014 dark fill (#353534) with muted text (#afaeac), no bright CTAs
+- Apply Matter Regular (weight 400) for nearly everything \u2014 even headlines. Reserve Medium (500) for emphasis only
+- Use uppercase labels with wide letter-spacing (1.4px\u20132.4px) for categorization
+- Interleave nature photography with product screenshots \u2014 this is core to the brand identity
+- Maintain the almost monochromatic warm gray palette \u2014 no bold accent colors
+- Use semi-transparent borders (\`rgba(226, 226, 226, 0.35)\`) for card containment instead of shadows
+- Keep negative letter-spacing on headlines (-0.4px to -2.4px) for Matter's compressed display treatment
+
+### Don't
+- Use pure white (#ffffff) for text \u2014 it's always warm parchment (#faf9f6)
+- Add bold accent colors (blue, red, green) \u2014 the system is deliberately monochromatic warm grays
+- Apply bold weight (700+) to any text \u2014 Warp never goes above Medium (500)
+- Use heavy drop shadows \u2014 depth comes from borders, photography, and opacity shifts
+- Create cold or blue-tinted dark backgrounds \u2014 the warmth is essential
+- Add decorative gradients or glow effects \u2014 the photography provides all visual interest
+- Use tight, compressed layouts \u2014 the editorial spacing is generous and contemplative
+- Mix in additional typefaces beyond the Matter family + Inter supplement
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <810px | Single column, stacked sections, hero text reduces to ~48px, hamburger nav |
+| Tablet | 810px\u20131500px | 2-column features begin, photography scales, nav links partially visible |
+| Desktop | >1500px | Full cinematic layout, 80px hero display, side-by-side photography + text |
+
+### Touch Targets
+- Pill buttons: 50px radius with 10px padding \u2014 comfortable touch targets
+- Nav links: 16px text with surrounding padding for accessibility
+- Mobile CTAs: Full-width pills on mobile for easy thumb reach
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav \u2192 simplified mobile navigation
+- **Hero text**: 80px display \u2192 56px \u2192 48px across breakpoints
+- **Feature sections**: Side-by-side photography + text \u2192 stacked vertically
+- **Photography**: Scales within containers, maintains cinematic aspect ratios
+- **Section spacing**: Reduces proportionally \u2014 generous desktop \u2192 compact mobile
+
+### Image Behavior
+- Nature photography scales responsively, maintaining wide cinematic ratios
+- Terminal screenshots maintain aspect ratios within responsive containers
+- Video elements scale with 10px radius maintained
+- No art direction changes \u2014 same compositions across breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Text: Warm Parchment (\`#faf9f6\`)
+- Secondary Text: Ash Gray (\`#afaeac\`)
+- Tertiary Text: Stone Gray (\`#868584\`)
+- Button Background: Earth Gray (\`#353534\`)
+- Border: Mist Border (\`rgba(226, 226, 226, 0.35)\`)
+- Background: Deep warm near-black (page background)
+
+### Example Component Prompts
+- "Create a hero section on warm dark background with 80px Matter Regular heading in warm parchment (#faf9f6), line-height 1.0, letter-spacing -2.4px, and a dark pill button (#353534, 50px radius, #afaeac text)"
+- "Design a feature card with semi-transparent border (rgba(226,226,226,0.35)), 12px radius, warm dark background, Matter Regular heading at 24px, and ash gray (#afaeac) body text at 18px"
+- "Build a category label using Matter Regular at 12px, uppercase transform, letter-spacing 2.4px, stone gray (#868584) color \u2014 editorial magazine style"
+- "Create a testimonial section with warm parchment quotes in Matter Regular 24px, attributed in stone gray (#868584), on dark background with minimal ornamentation"
+- "Design a navigation bar with warm dark background, Matter Regular links at 16px in stone gray (#868584), hover to warm parchment (#faf9f6), and a dark pill CTA button (#353534) at the right"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Verify text color is warm parchment (#faf9f6) not pure white \u2014 the warmth is subtle but essential
+2. Ensure all buttons use the restrained dark palette (#353534) \u2014 no bright or colorful CTAs
+3. Check that Matter Regular (400) is the default weight \u2014 Medium (500) only for emphasis
+4. Confirm uppercase labels have wide letter-spacing (1.4px\u20132.4px) \u2014 tight uppercase feels wrong here
+5. The overall tone should feel warm and calm, like a well-designed magazine \u2014 not aggressive or tech-flashy
+`;
+export {
+  warpBrief
+};
+//# sourceMappingURL=warp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/warp.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const warpBrief = `# Design System Inspired by Warp\n\n## 1. Visual Theme & Atmosphere\n\nWarp's website feels like sitting at a campfire in a deep forest — warm, dark, and alive with quiet confidence. Unlike the cold, blue-tinted blacks favored by most developer tools, Warp wraps everything in a warm near-black that feels like charred wood or dark earth. The text isn't pure white either — it's Warm Parchment (\\`#faf9f6\\`), a barely-perceptible cream that softens every headline and makes the dark canvas feel inviting rather than austere.\n\nThe typography is the secret weapon: Matter, a geometric sans-serif with distinctive character, deployed at Regular weight across virtually all text. The font choice is unusual for a developer tool — Matter has a softness and humanity that signals \"this terminal is for everyone, not just greybeards.\" Combined with tight line-heights and controlled negative letter-spacing on headlines, the effect is refined and approachable simultaneously. Nature photography is woven between terminal screenshots, creating a visual language that says: this tool brings you closer to flow, to calm productivity.\n\nThe overall design philosophy is restraint through warmth. Minimal color (almost monochromatic warm grays), minimal ornamentation, and a focus on product showcases set against cinematic dark landscapes. It's a terminal company that markets like a lifestyle brand.\n\n**Key Characteristics:**\n- Warm dark background — not cold black, but earthy near-black with warm gray undertones\n- Warm Parchment (\\`#faf9f6\\`) text instead of pure white — subtle cream warmth\n- Matter font family (Regular weight) — geometric but approachable, not the typical developer-tool typeface\n- Nature photography interleaved with product screenshots — lifestyle meets developer tool\n- Almost monochromatic warm gray palette — no bold accent colors\n- Uppercase labels with wide letter-spacing (2.4px) for categorization — editorial signaling\n- Pill-shaped dark buttons (\\`#353534\\`, 50px radius) — restrained, muted CTAs\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Warm Parchment** (\\`#faf9f6\\`): Primary text color — a barely-cream off-white that softens every surface\n- **Earth Gray** (\\`#353534\\`): Button backgrounds, dark interactive surfaces — warm, not cold\n- **Deep Void** (near-black, page background): The warm dark canvas derived from the body background\n\n### Secondary & Accent\n- **Stone Gray** (\\`#868584\\`): Secondary text, muted descriptions — warm mid-gray\n- **Ash Gray** (\\`#afaeac\\`): Body text, button text — the workhorse reading color\n- **Purple-Tint Gray** (\\`#666469\\`): Link text with subtle purple undertone — underlined links in content\n\n### Surface & Background\n- **Frosted Veil** (\\`rgba(255, 255, 255, 0.04)\\`): Ultra-subtle white overlay for surface differentiation\n- **Mist Border** (\\`rgba(226, 226, 226, 0.35)\\` / \\`rgba(227, 227, 227, 0.337)\\`): Semi-transparent borders for card containment\n- **Translucent Parchment** (\\`rgba(250, 249, 246, 0.9)\\`): Slightly transparent primary surface, allowing depth\n\n### Neutrals & Text\n- **Warm Parchment** (\\`#faf9f6\\`): Headlines, high-emphasis text\n- **Ash Gray** (\\`#afaeac\\`): Body paragraphs, descriptions\n- **Stone Gray** (\\`#868584\\`): Secondary labels, subdued information\n- **Muted Purple** (\\`#666469\\`): Underlined links, tertiary content\n- **Dark Charcoal** (\\`#454545\\` / \\`#353534\\`): Borders, button backgrounds\n\n### Semantic & Accent\n- Warp operates as an almost monochromatic system — no bold accent colors\n- Interactive states are communicated through opacity changes and underline decorations rather than color shifts\n- Any accent color would break the warm, restrained palette\n\n### Gradient System\n- No explicit gradients on the marketing site\n- Depth is created through layered semi-transparent surfaces and photography rather than color gradients\n\n## 3. Typography Rules\n\n### Font Family\n- **Display & Body**: \\`Matter Regular\\` — geometric sans-serif with soft character. Fallbacks: \\`Matter Regular Placeholder\\`, system sans-serif\n- **Medium**: \\`Matter Medium\\` — weight 500 variant for emphasis. Fallbacks: \\`Matter Medium Placeholder\\`\n- **Square**: \\`Matter SQ Regular\\` — squared variant for select display contexts. Fallbacks: \\`Matter SQ Regular Placeholder\\`\n- **UI Supplement**: \\`Inter\\` — used for specific UI elements. Fallbacks: \\`Inter Placeholder\\`\n- **Monospace Display**: \\`Geist Mono\\` — for code/terminal display headings\n- **Monospace Body**: \\`Matter Mono Regular\\` — custom mono companion. Fallbacks: \\`Matter Mono Regular Placeholder\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Matter Regular | 80px | 400 | 1.00 | -2.4px | Maximum compression, hero impact |\n| Section Display | Matter Regular | 56px | 400 | 1.20 | -0.56px | Feature section headings |\n| Section Heading | Matter Regular | 48px | 400 | 1.20 | -0.48px to -0.96px | Alternate heading weight |\n| Feature Heading | Matter Regular | 40px | 400 | 1.10 | -0.4px | Feature block titles |\n| Sub-heading Large | Matter Regular | 36px | 400 | 1.15 | -0.72px | Sub-section headers |\n| Card Display | Matter SQ Regular | 42px | 400 | 1.00 | 0px | Squared variant for special display |\n| Sub-heading | Matter Regular | 32px | 400 | 1.19 | 0px | Content sub-headings |\n| Body Heading | Matter Regular | 24px | 400 | 1.20 | -0.72px to 0px | Bold content intros |\n| Card Title | Matter Medium | 22px | 500 | 1.14 | 0px | Emphasized card headers |\n| Body Large | Matter Regular | 20px | 400 | 1.40 | -0.2px | Primary body text, relaxed |\n| Body | Matter Regular | 18px | 400 | 1.30 | -0.18px | Standard body paragraphs |\n| Nav/UI | Matter Regular | 16px | 400 | 1.20 | 0px | Navigation links, UI text |\n| Button Text | Matter Medium | 16px | 500 | 1.20 | 0px | Button labels |\n| Caption | Matter Regular | 14px | 400 | 1.00 | 1.4px | Uppercase labels (transform: uppercase) |\n| Small Label | Matter Regular | 12px | 400 | 1.35 | 2.4px | Uppercase micro-labels (transform: uppercase) |\n| Micro | Matter Regular | 11px | 400 | 1.20 | 0px | Smallest text elements |\n| Code UI | Geist Mono | 16px | 400 | 1.00 | 0px | Terminal/code display |\n| Code Body | Matter Mono Regular | 16px | 400 | 1.00 | -0.2px | Code content |\n| UI Supplement | Inter | 16px | 500 | 1.00 | -0.2px | Specific UI elements |\n\n### Principles\n- **Regular weight dominance**: Nearly all text uses weight 400 (Regular) — even headlines. Matter Medium (500) appears only for emphasis moments like card titles and buttons. This creates a remarkably even, calm typographic texture\n- **Uppercase as editorial signal**: Small labels and categories use uppercase transform with wide letter-spacing (1.4px–2.4px), creating a magazine-editorial categorization system\n- **Warm legibility**: The combination of Matter's geometric softness + warm text colors (#faf9f6) + controlled negative tracking creates text that reads as effortlessly human on dark surfaces\n- **No bold display**: Zero use of bold (700+) weight anywhere — restraint is the philosophy\n\n## 4. Component Stylings\n\n### Buttons\n- **Dark Pill**: \\`#353534\\` background, Ash Gray (\\`#afaeac\\`) text, pill shape (50px radius), \\`10px\\` padding. The primary CTA — warm, muted, understated\n- **Frosted Tag**: \\`rgba(255, 255, 255, 0.16)\\` background, black text (\\`rgb(0, 0, 0)\\`), rectangular (6px radius), \\`1px 6px\\` padding. Small inline tag-like buttons\n- **Ghost**: No visible background, text-only with underline decoration on hover\n- **Hover**: Subtle opacity or brightness shift — no dramatic color changes\n\n### Cards & Containers\n- **Photography Cards**: Full-bleed nature imagery with overlay text, 8px–12px border-radius\n- **Terminal Screenshot Cards**: Product UI embedded in dark containers with rounded corners (8px–12px)\n- **Bordered Cards**: Semi-transparent border (\\`rgba(226, 226, 226, 0.35)\\`) for containment, 12px–14px radius\n- **Hover**: Minimal — content cards don't dramatically change on hover, maintaining the calm aesthetic\n\n### Inputs & Forms\n- Minimal form presence on the marketing site\n- Dark background inputs with warm gray text\n- Focus: Border brightness increase, no colored rings (consistent with the monochromatic palette)\n\n### Navigation\n- **Top nav**: Dark background, warm parchment brand text, Matter Regular at 16px for links\n- **Link color**: Stone Gray (\\`#868584\\`) for muted nav, Warm Parchment for active/hover\n- **CTA button**: Dark pill (#353534) at nav end — restrained, not attention-grabbing\n- **Mobile**: Collapses to simplified navigation\n- **Sticky**: Nav stays fixed on scroll\n\n### Image Treatment\n- **Nature photography**: Landscapes, forests, golden-hour scenes — completely unique for a developer tool\n- **Terminal screenshots**: Product UI shown in realistic terminal window frames\n- **Mixed composition**: Nature images and terminal screenshots are interleaved, creating a lifestyle-meets-tool narrative\n- **Full-bleed**: Images often span full container width with 8px radius\n- **Video**: Video elements present with 10px border-radius\n\n### Testimonial Section\n- Social proof area (\"Don't take our word for it\") with quotes\n- Muted styling consistent with overall restraint\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 1px, 4px, 5px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 24px, 26px, 30px, 32px, 36px\n- **Section padding**: 80px–120px vertical between major sections\n- **Card padding**: 16px–32px internal spacing\n- **Component gaps**: 8px–16px between related elements\n\n### Grid & Container\n- **Max width**: ~1500px container (breakpoint at 1500px), centered\n- **Column patterns**: Full-width hero, 2-column feature sections with photography, single-column testimonials\n- **Cinematic layout**: Wide containers that let photography breathe\n\n### Whitespace Philosophy\n- **Vast and warm**: Generous spacing between sections — the dark background creates a warm void that feels contemplative rather than empty\n- **Photography as whitespace**: Nature images serve as visual breathing room between dense product information\n- **Editorial pacing**: The layout reads like a magazine — each section is a deliberate page-turn moment\n\n### Border Radius Scale\n- **4px**: Small interactive elements — buttons, tags\n- **5px–6px**: Standard components — links, small containers\n- **8px**: Images, video containers, standard cards\n- **10px**: Video elements, medium containers\n- **12px**: Feature cards, large images\n- **14px**: Large containers, prominent cards\n- **40px**: Large rounded sections\n- **50px**: Pill buttons — primary CTAs\n- **200px**: Progress bars — full pill shape\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow, dark background | Page canvas, most surfaces |\n| Level 1 (Veil) | \\`rgba(255, 255, 255, 0.04)\\` overlay | Subtle surface differentiation |\n| Level 2 (Border) | \\`rgba(226, 226, 226, 0.35) 1px\\` border | Card containment, section separation |\n| Level 3 (Ambient) | \\`rgba(0, 0, 0, 0.2) 0px 5px 15px\\` (inferred from design) | Image containers, floating elements |\n\n### Shadow Philosophy\nWarp's elevation system is remarkably flat — almost zero shadow usage on the marketing site. Depth is communicated through:\n- **Semi-transparent borders** instead of shadows — borders at 35% opacity create a ghostly containment\n- **Photography layering** — images create natural depth without artificial shadows\n- **Surface opacity shifts** — \\`rgba(255, 255, 255, 0.04)\\` overlays create barely-perceptible layer differences\n- The effect is calm and grounded — nothing floats, everything rests\n\n### Decorative Depth\n- **Photography as depth**: Nature images create atmospheric depth that shadows cannot\n- **No glass or blur effects**: The design avoids trendy glassmorphism entirely\n- **Warm ambient**: Any glow comes from the photography's natural lighting, not artificial CSS\n\n## 7. Do's and Don'ts\n\n### Do\n- Use warm off-white (\\`#faf9f6\\`) for text instead of pure white — the cream undertone is essential\n- Keep buttons restrained and muted — dark fill (#353534) with muted text (#afaeac), no bright CTAs\n- Apply Matter Regular (weight 400) for nearly everything — even headlines. Reserve Medium (500) for emphasis only\n- Use uppercase labels with wide letter-spacing (1.4px–2.4px) for categorization\n- Interleave nature photography with product screenshots — this is core to the brand identity\n- Maintain the almost monochromatic warm gray palette — no bold accent colors\n- Use semi-transparent borders (\\`rgba(226, 226, 226, 0.35)\\`) for card containment instead of shadows\n- Keep negative letter-spacing on headlines (-0.4px to -2.4px) for Matter's compressed display treatment\n\n### Don't\n- Use pure white (#ffffff) for text — it's always warm parchment (#faf9f6)\n- Add bold accent colors (blue, red, green) — the system is deliberately monochromatic warm grays\n- Apply bold weight (700+) to any text — Warp never goes above Medium (500)\n- Use heavy drop shadows — depth comes from borders, photography, and opacity shifts\n- Create cold or blue-tinted dark backgrounds — the warmth is essential\n- Add decorative gradients or glow effects — the photography provides all visual interest\n- Use tight, compressed layouts — the editorial spacing is generous and contemplative\n- Mix in additional typefaces beyond the Matter family + Inter supplement\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <810px | Single column, stacked sections, hero text reduces to ~48px, hamburger nav |\n| Tablet | 810px–1500px | 2-column features begin, photography scales, nav links partially visible |\n| Desktop | >1500px | Full cinematic layout, 80px hero display, side-by-side photography + text |\n\n### Touch Targets\n- Pill buttons: 50px radius with 10px padding — comfortable touch targets\n- Nav links: 16px text with surrounding padding for accessibility\n- Mobile CTAs: Full-width pills on mobile for easy thumb reach\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav → simplified mobile navigation\n- **Hero text**: 80px display → 56px → 48px across breakpoints\n- **Feature sections**: Side-by-side photography + text → stacked vertically\n- **Photography**: Scales within containers, maintains cinematic aspect ratios\n- **Section spacing**: Reduces proportionally — generous desktop → compact mobile\n\n### Image Behavior\n- Nature photography scales responsively, maintaining wide cinematic ratios\n- Terminal screenshots maintain aspect ratios within responsive containers\n- Video elements scale with 10px radius maintained\n- No art direction changes — same compositions across breakpoints\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text: Warm Parchment (\\`#faf9f6\\`)\n- Secondary Text: Ash Gray (\\`#afaeac\\`)\n- Tertiary Text: Stone Gray (\\`#868584\\`)\n- Button Background: Earth Gray (\\`#353534\\`)\n- Border: Mist Border (\\`rgba(226, 226, 226, 0.35)\\`)\n- Background: Deep warm near-black (page background)\n\n### Example Component Prompts\n- \"Create a hero section on warm dark background with 80px Matter Regular heading in warm parchment (#faf9f6), line-height 1.0, letter-spacing -2.4px, and a dark pill button (#353534, 50px radius, #afaeac text)\"\n- \"Design a feature card with semi-transparent border (rgba(226,226,226,0.35)), 12px radius, warm dark background, Matter Regular heading at 24px, and ash gray (#afaeac) body text at 18px\"\n- \"Build a category label using Matter Regular at 12px, uppercase transform, letter-spacing 2.4px, stone gray (#868584) color — editorial magazine style\"\n- \"Create a testimonial section with warm parchment quotes in Matter Regular 24px, attributed in stone gray (#868584), on dark background with minimal ornamentation\"\n- \"Design a navigation bar with warm dark background, Matter Regular links at 16px in stone gray (#868584), hover to warm parchment (#faf9f6), and a dark pill CTA button (#353534) at the right\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Verify text color is warm parchment (#faf9f6) not pure white — the warmth is subtle but essential\n2. Ensure all buttons use the restrained dark palette (#353534) — no bright or colorful CTAs\n3. Check that Matter Regular (400) is the default weight — Medium (500) only for emphasis\n4. Confirm uppercase labels have wide letter-spacing (1.4px–2.4px) — tight uppercase feels wrong here\n5. The overall tone should feel warm and calm, like a well-designed magazine — not aggressive or tech-flashy\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;","names":[]}

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

@@ -0,0 +1,3 @@
+declare const webflowBrief = "# Design System Inspired by Webflow\n\n## 1. Visual Theme & Atmosphere\n\nWebflow's website is a visually rich, tool-forward platform that communicates \"design without code\" through clean white surfaces, the signature Webflow Blue (`#146ef5`), and a rich secondary color palette (purple, pink, green, orange, yellow, red). The custom WF Visual Sans Variable font creates a confident, precise typographic system with weight 600 for display and 500 for body.\n\n**Key Characteristics:**\n- White canvas with near-black (`#080808`) text\n- Webflow Blue (`#146ef5`) as primary brand + interactive color\n- WF Visual Sans Variable \u2014 custom variable font with weight 500\u2013600\n- Rich secondary palette: purple `#7a3dff`, pink `#ed52cb`, green `#00d722`, orange `#ff6b00`, yellow `#ffae13`, red `#ee1d36`\n- Conservative 4px\u20138px border-radius \u2014 sharp, not rounded\n- Multi-layer shadow stacks (5-layer cascading shadows)\n- Uppercase labels: 10px\u201315px, weight 500\u2013600, wide letter-spacing (0.6px\u20131.5px)\n- translate(6px) hover animation on buttons\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Near Black** (`#080808`): Primary text\n- **Webflow Blue** (`#146ef5`): `--_color---primary--webflow-blue`, primary CTA and links\n- **Blue 400** (`#3b89ff`): `--_color---primary--blue-400`, lighter interactive blue\n- **Blue 300** (`#006acc`): `--_color---blue-300`, darker blue variant\n- **Button Hover Blue** (`#0055d4`): `--mkto-embed-color-button-hover`\n\n### Secondary Accents\n- **Purple** (`#7a3dff`): `--_color---secondary--purple`\n- **Pink** (`#ed52cb`): `--_color---secondary--pink`\n- **Green** (`#00d722`): `--_color---secondary--green`\n- **Orange** (`#ff6b00`): `--_color---secondary--orange`\n- **Yellow** (`#ffae13`): `--_color---secondary--yellow`\n- **Red** (`#ee1d36`): `--_color---secondary--red`\n\n### Neutral\n- **Gray 800** (`#222222`): Dark secondary text\n- **Gray 700** (`#363636`): Mid text\n- **Gray 300** (`#ababab`): Muted text, placeholder\n- **Mid Gray** (`#5a5a5a`): Link text\n- **Border Gray** (`#d8d8d8`): Borders, dividers\n- **Border Hover** (`#898989`): Hover border\n\n### Shadows\n- **5-layer cascade**: `rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`\n\n## 3. Typography Rules\n\n### Font: `WF Visual Sans Variable`, fallback: `Arial`\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Display Hero | 80px | 600 | 1.04 | -0.8px | |\n| Section Heading | 56px | 600 | 1.04 | normal | |\n| Sub-heading | 32px | 500 | 1.30 | normal | |\n| Feature Title | 24px | 500\u2013600 | 1.30 | normal | |\n| Body | 20px | 400\u2013500 | 1.40\u20131.50 | normal | |\n| Body Standard | 16px | 400\u2013500 | 1.60 | -0.16px | |\n| Button | 16px | 500 | 1.60 | -0.16px | |\n| Uppercase Label | 15px | 500 | 1.30 | 1.5px | uppercase |\n| Caption | 14px | 400\u2013500 | 1.40\u20131.60 | normal | |\n| Badge Uppercase | 12.8px | 550 | 1.20 | normal | uppercase |\n| Micro Uppercase | 10px | 500\u2013600 | 1.30 | 1px | uppercase |\n| Code: Inconsolata (companion monospace font)\n\n## 4. Component Stylings\n\n### Buttons\n- Transparent: text `#080808`, translate(6px) on hover\n- White circle: 50% radius, white bg\n- Blue badge: `#146ef5` bg, 4px radius, weight 550\n\n### Cards: `1px solid #d8d8d8`, 4px\u20138px radius\n### Badges: Blue-tinted bg at 10% opacity, 4px radius\n\n## 5. Layout\n- Spacing: fractional scale (1px, 2.4px, 3.2px, 4px, 5.6px, 6px, 7.2px, 8px, 9.6px, 12px, 16px, 24px)\n- Radius: 2px, 4px, 8px, 50% \u2014 conservative, sharp\n- Breakpoints: 479px, 768px, 992px\n\n## 6. Depth: 5-layer cascading shadow system\n\n## 7. Do's and Don'ts\n- Do: Use WF Visual Sans Variable at 500\u2013600. Blue (#146ef5) for CTAs. 4px radius. translate(6px) hover.\n- Don't: Round beyond 8px for functional elements. Use secondary colors on primary CTAs.\n\n## 8. Responsive: 479px, 768px, 992px\n\n## 9. Agent Prompt Guide\n- Text: Near Black (`#080808`)\n- CTA: Webflow Blue (`#146ef5`)\n- Background: White (`#ffffff`)\n- Border: `#d8d8d8`\n- Secondary: Purple `#7a3dff`, Pink `#ed52cb`, Green `#00d722`\n";
+
+export { webflowBrief };

package/dist/presets/_briefs/webflow.js

@@ -0,0 +1,98 @@
+// src/presets/_briefs/webflow.ts
+var webflowBrief = `# Design System Inspired by Webflow
+
+## 1. Visual Theme & Atmosphere
+
+Webflow's website is a visually rich, tool-forward platform that communicates "design without code" through clean white surfaces, the signature Webflow Blue (\`#146ef5\`), and a rich secondary color palette (purple, pink, green, orange, yellow, red). The custom WF Visual Sans Variable font creates a confident, precise typographic system with weight 600 for display and 500 for body.
+
+**Key Characteristics:**
+- White canvas with near-black (\`#080808\`) text
+- Webflow Blue (\`#146ef5\`) as primary brand + interactive color
+- WF Visual Sans Variable \u2014 custom variable font with weight 500\u2013600
+- Rich secondary palette: purple \`#7a3dff\`, pink \`#ed52cb\`, green \`#00d722\`, orange \`#ff6b00\`, yellow \`#ffae13\`, red \`#ee1d36\`
+- Conservative 4px\u20138px border-radius \u2014 sharp, not rounded
+- Multi-layer shadow stacks (5-layer cascading shadows)
+- Uppercase labels: 10px\u201315px, weight 500\u2013600, wide letter-spacing (0.6px\u20131.5px)
+- translate(6px) hover animation on buttons
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Near Black** (\`#080808\`): Primary text
+- **Webflow Blue** (\`#146ef5\`): \`--_color---primary--webflow-blue\`, primary CTA and links
+- **Blue 400** (\`#3b89ff\`): \`--_color---primary--blue-400\`, lighter interactive blue
+- **Blue 300** (\`#006acc\`): \`--_color---blue-300\`, darker blue variant
+- **Button Hover Blue** (\`#0055d4\`): \`--mkto-embed-color-button-hover\`
+
+### Secondary Accents
+- **Purple** (\`#7a3dff\`): \`--_color---secondary--purple\`
+- **Pink** (\`#ed52cb\`): \`--_color---secondary--pink\`
+- **Green** (\`#00d722\`): \`--_color---secondary--green\`
+- **Orange** (\`#ff6b00\`): \`--_color---secondary--orange\`
+- **Yellow** (\`#ffae13\`): \`--_color---secondary--yellow\`
+- **Red** (\`#ee1d36\`): \`--_color---secondary--red\`
+
+### Neutral
+- **Gray 800** (\`#222222\`): Dark secondary text
+- **Gray 700** (\`#363636\`): Mid text
+- **Gray 300** (\`#ababab\`): Muted text, placeholder
+- **Mid Gray** (\`#5a5a5a\`): Link text
+- **Border Gray** (\`#d8d8d8\`): Borders, dividers
+- **Border Hover** (\`#898989\`): Hover border
+
+### Shadows
+- **5-layer cascade**: \`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px\`
+
+## 3. Typography Rules
+
+### Font: \`WF Visual Sans Variable\`, fallback: \`Arial\`
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Display Hero | 80px | 600 | 1.04 | -0.8px | |
+| Section Heading | 56px | 600 | 1.04 | normal | |
+| Sub-heading | 32px | 500 | 1.30 | normal | |
+| Feature Title | 24px | 500\u2013600 | 1.30 | normal | |
+| Body | 20px | 400\u2013500 | 1.40\u20131.50 | normal | |
+| Body Standard | 16px | 400\u2013500 | 1.60 | -0.16px | |
+| Button | 16px | 500 | 1.60 | -0.16px | |
+| Uppercase Label | 15px | 500 | 1.30 | 1.5px | uppercase |
+| Caption | 14px | 400\u2013500 | 1.40\u20131.60 | normal | |
+| Badge Uppercase | 12.8px | 550 | 1.20 | normal | uppercase |
+| Micro Uppercase | 10px | 500\u2013600 | 1.30 | 1px | uppercase |
+| Code: Inconsolata (companion monospace font)
+
+## 4. Component Stylings
+
+### Buttons
+- Transparent: text \`#080808\`, translate(6px) on hover
+- White circle: 50% radius, white bg
+- Blue badge: \`#146ef5\` bg, 4px radius, weight 550
+
+### Cards: \`1px solid #d8d8d8\`, 4px\u20138px radius
+### Badges: Blue-tinted bg at 10% opacity, 4px radius
+
+## 5. Layout
+- Spacing: fractional scale (1px, 2.4px, 3.2px, 4px, 5.6px, 6px, 7.2px, 8px, 9.6px, 12px, 16px, 24px)
+- Radius: 2px, 4px, 8px, 50% \u2014 conservative, sharp
+- Breakpoints: 479px, 768px, 992px
+
+## 6. Depth: 5-layer cascading shadow system
+
+## 7. Do's and Don'ts
+- Do: Use WF Visual Sans Variable at 500\u2013600. Blue (#146ef5) for CTAs. 4px radius. translate(6px) hover.
+- Don't: Round beyond 8px for functional elements. Use secondary colors on primary CTAs.
+
+## 8. Responsive: 479px, 768px, 992px
+
+## 9. Agent Prompt Guide
+- Text: Near Black (\`#080808\`)
+- CTA: Webflow Blue (\`#146ef5\`)
+- Background: White (\`#ffffff\`)
+- Border: \`#d8d8d8\`
+- Secondary: Purple \`#7a3dff\`, Pink \`#ed52cb\`, Green \`#00d722\`
+`;
+export {
+  webflowBrief
+};
+//# sourceMappingURL=webflow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/webflow.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const webflowBrief = `# Design System Inspired by Webflow\n\n## 1. Visual Theme & Atmosphere\n\nWebflow's website is a visually rich, tool-forward platform that communicates \"design without code\" through clean white surfaces, the signature Webflow Blue (\\`#146ef5\\`), and a rich secondary color palette (purple, pink, green, orange, yellow, red). The custom WF Visual Sans Variable font creates a confident, precise typographic system with weight 600 for display and 500 for body.\n\n**Key Characteristics:**\n- White canvas with near-black (\\`#080808\\`) text\n- Webflow Blue (\\`#146ef5\\`) as primary brand + interactive color\n- WF Visual Sans Variable — custom variable font with weight 500–600\n- Rich secondary palette: purple \\`#7a3dff\\`, pink \\`#ed52cb\\`, green \\`#00d722\\`, orange \\`#ff6b00\\`, yellow \\`#ffae13\\`, red \\`#ee1d36\\`\n- Conservative 4px–8px border-radius — sharp, not rounded\n- Multi-layer shadow stacks (5-layer cascading shadows)\n- Uppercase labels: 10px–15px, weight 500–600, wide letter-spacing (0.6px–1.5px)\n- translate(6px) hover animation on buttons\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Near Black** (\\`#080808\\`): Primary text\n- **Webflow Blue** (\\`#146ef5\\`): \\`--_color---primary--webflow-blue\\`, primary CTA and links\n- **Blue 400** (\\`#3b89ff\\`): \\`--_color---primary--blue-400\\`, lighter interactive blue\n- **Blue 300** (\\`#006acc\\`): \\`--_color---blue-300\\`, darker blue variant\n- **Button Hover Blue** (\\`#0055d4\\`): \\`--mkto-embed-color-button-hover\\`\n\n### Secondary Accents\n- **Purple** (\\`#7a3dff\\`): \\`--_color---secondary--purple\\`\n- **Pink** (\\`#ed52cb\\`): \\`--_color---secondary--pink\\`\n- **Green** (\\`#00d722\\`): \\`--_color---secondary--green\\`\n- **Orange** (\\`#ff6b00\\`): \\`--_color---secondary--orange\\`\n- **Yellow** (\\`#ffae13\\`): \\`--_color---secondary--yellow\\`\n- **Red** (\\`#ee1d36\\`): \\`--_color---secondary--red\\`\n\n### Neutral\n- **Gray 800** (\\`#222222\\`): Dark secondary text\n- **Gray 700** (\\`#363636\\`): Mid text\n- **Gray 300** (\\`#ababab\\`): Muted text, placeholder\n- **Mid Gray** (\\`#5a5a5a\\`): Link text\n- **Border Gray** (\\`#d8d8d8\\`): Borders, dividers\n- **Border Hover** (\\`#898989\\`): Hover border\n\n### Shadows\n- **5-layer cascade**: \\`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px\\`\n\n## 3. Typography Rules\n\n### Font: \\`WF Visual Sans Variable\\`, fallback: \\`Arial\\`\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Display Hero | 80px | 600 | 1.04 | -0.8px | |\n| Section Heading | 56px | 600 | 1.04 | normal | |\n| Sub-heading | 32px | 500 | 1.30 | normal | |\n| Feature Title | 24px | 500–600 | 1.30 | normal | |\n| Body | 20px | 400–500 | 1.40–1.50 | normal | |\n| Body Standard | 16px | 400–500 | 1.60 | -0.16px | |\n| Button | 16px | 500 | 1.60 | -0.16px | |\n| Uppercase Label | 15px | 500 | 1.30 | 1.5px | uppercase |\n| Caption | 14px | 400–500 | 1.40–1.60 | normal | |\n| Badge Uppercase | 12.8px | 550 | 1.20 | normal | uppercase |\n| Micro Uppercase | 10px | 500–600 | 1.30 | 1px | uppercase |\n| Code: Inconsolata (companion monospace font)\n\n## 4. Component Stylings\n\n### Buttons\n- Transparent: text \\`#080808\\`, translate(6px) on hover\n- White circle: 50% radius, white bg\n- Blue badge: \\`#146ef5\\` bg, 4px radius, weight 550\n\n### Cards: \\`1px solid #d8d8d8\\`, 4px–8px radius\n### Badges: Blue-tinted bg at 10% opacity, 4px radius\n\n## 5. Layout\n- Spacing: fractional scale (1px, 2.4px, 3.2px, 4px, 5.6px, 6px, 7.2px, 8px, 9.6px, 12px, 16px, 24px)\n- Radius: 2px, 4px, 8px, 50% — conservative, sharp\n- Breakpoints: 479px, 768px, 992px\n\n## 6. Depth: 5-layer cascading shadow system\n\n## 7. Do's and Don'ts\n- Do: Use WF Visual Sans Variable at 500–600. Blue (#146ef5) for CTAs. 4px radius. translate(6px) hover.\n- Don't: Round beyond 8px for functional elements. Use secondary colors on primary CTAs.\n\n## 8. Responsive: 479px, 768px, 992px\n\n## 9. Agent Prompt Guide\n- Text: Near Black (\\`#080808\\`)\n- CTA: Webflow Blue (\\`#146ef5\\`)\n- Background: White (\\`#ffffff\\`)\n- Border: \\`#d8d8d8\\`\n- Secondary: Purple \\`#7a3dff\\`, Pink \\`#ed52cb\\`, Green \\`#00d722\\`\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;","names":[]}

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

@@ -0,0 +1,3 @@
+declare const wiredBrief = "# Design System Inspired by WIRED\n\n## 1. Visual Theme & Atmosphere\n\nWIRED's homepage feels like a printed broadsheet that someone has plugged into a wall socket. The grid is dense, the rules are thin, the type is loud, and almost every surface is paper-white or pure black with no rounded corners and no decoration that doesn't earn its place. Image rectangles butt directly against headlines, hairline dividers separate stories the way pica rules separate columns in a real magazine, and the only colors that aren't grayscale come from the photography itself. There is no \"card with shadow\" anywhere \u2014 the entire layout is held together by typographic weight and the discipline of rules and whitespace, the same way a Cond\u00E9 Nast print page would be assembled in a paste-up room.\n\nThe signature move is the **typographic stack**: a brutally large custom serif (WiredDisplay) for the main headline, a humanist serif (BreveText) for body and decks, a geometric sans (Apercu) for UI affordances, and a hard mono uppercase (WiredMono) for the kickers, eyebrows, and timestamps that mark every story. That mono kicker \u2014 usually black caps with letter-spacing wide enough to read as a Geiger-counter tick \u2014 is what makes a WIRED page instantly recognizable from across the room.\n\nThere is exactly one accent color that matters: a saturated link blue (`#057dbc`) that lights up underlined hover states like a CRT scanline. Everything else is black, paper white, and two grays \u2014 the design's confidence comes from refusing to invent more.\n\n**Key Characteristics:**\n- Newsstand-density editorial grid: rules and whitespace, never cards or shadows\n- Custom serif display + technical mono kickers \u2014 the Cond\u00E9-Nast-meets-engineering-lab voice\n- Strictly square corners on every image, container, and ribbon (only icon buttons are circular)\n- 2px hard black borders on buttons and links \u2014 printerly, not webby\n- Mono ALL-CAPS eyebrows on every story with wide tracking (0.9\u20131.2px)\n- Single ink-blue accent for links; everything else lives in pure grayscale\n- Dark theme = the *footer*, not the page; the page itself is committed paper-white\n\n## 2. Color Palette & Roles\n\n### Primary (Editorial Ink)\n- **WIRED Black** (`#000000`): Pure ink for ribbons, section dividers, button borders, headline rules \u2014 the strongest hand on the page.\n- **Page Ink** (`#1a1a1a`): Near-black used for headlines and body type. Slightly softened so long-form reading doesn't feel like staring at a power button.\n- **Paper White** (`#ffffff`): Default canvas for the entire site. Treat it like newsprint stock \u2014 uninterrupted, never tinted.\n\n### Secondary (Editorial Voice)\n- **Link Blue** (`#057dbc`): The single brand accent. Used for inline link hovers, breadcrumbs, and the rare button \u2014 never for backgrounds, never decorated. Think of it as the only color allowed in a black-and-white film.\n\n### Surface & Background\n- **Newsprint** (`#ffffff`): Editorial pages, story grids, hero zones.\n- **Footer Ink** (`#1a1a1a`): The only inverted region on the homepage. Paper white type sits on top.\n- **Hairline Tint** (`#e2e8f0`): Reserved for `<hr>` elements between sections \u2014 barely visible, like a margin rule.\n\n### Neutrals & Text\n- **Headline Black** (`#1a1a1a`): All H1/H2 display type.\n- **Body Gray** (`#1a1a1a`): Long-form body text \u2014 same ink as headlines for unity.\n- **Caption Gray** (`#757575`): Secondary metadata: bylines, timestamps, photo credits.\n- **Disabled Gray** (`#999999`): Inactive links, low-priority labels.\n- **Hairline Border** (`#e2e8f0`): Subtle separators only.\n\n### Semantic & Accent\n- **Brand Hover Blue** (`#057dbc`): Link rollover state \u2014 also serves as the only \"interactive\" cue.\n- *(WIRED's homepage intentionally omits semantic success/error/warning palettes \u2014 this is editorial, not a SaaS dashboard.)*\n\n### Gradient System\nNone. WIRED uses zero gradients. The closest thing to a gradient on the page is the tonal range inside a photograph \u2014 gradients live *in the imagery*, not in the chrome.\n\n## 3. Typography Rules\n\n### Font Family\n- **WiredDisplay** (custom serif, fallback `helvetica`) \u2014 Display headlines and feature titles.\n- **BreveText** (humanist serif, fallback `helvetica`) \u2014 Article body, decks, longer captions.\n- **Apercu** (geometric sans, fallback `helvetica`) \u2014 UI labels, buttons, navigation, mid-weight headings.\n- **WiredMono** (custom monospace, fallback `helvetica`) \u2014 Eyebrows, kickers, timestamps, section labels, ALL CAPS.\n- **Inter** (sans, system fallback) \u2014 Utility UI in newer modules.\n- **ProximaNova** (sans, fallback `helvetica`) \u2014 Legacy UI surfaces.\n- **WIRED Mono** (custom mono, fallback `Monaco, Courier New, Courier`) \u2014 Article-page eyebrows.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|---|---|---|---|---|---|---|\n| Display Headline (Hero) | WiredDisplay | 64px / 4.00rem | regular | 0.93 | -0.5px | Tight, almost touching descenders \u2014 newsstand presence |\n| Display Headline (Mobile / Mid) | WiredDisplay | 26px / 1.63rem | regular | 1.08 | \u2014 | Same face, scaled down for grid blocks |\n| Section Heading | Apercu | 20px / 1.25rem | 700 | 1.20 | -0.28px | Bold sans for module titles (\"Most Popular\", \"Featured\") |\n| Subheading | Apercu | 17px / 1.06rem | 700 | 1.29 | -0.144px | Story decks within feature blocks |\n| Article Deck (Serif) | BreveText | 19px / 1.19rem | regular | 1.47 | 0.108px | Long-form lead paragraphs |\n| Article Body (Serif) | BreveText | 16px / 1.00rem | regular | 1.50 | 0.09px | Standard paragraph text |\n| UI Heading | Apercu | 16px / 1.00rem | 700 | 1.25 | 0.3px | Inline UI labels, button captions |\n| Button Label | Apercu | 16px / 1.00rem | 700 | 1.25 | 0.3px | All caps optional, depending on placement |\n| Link (Inline UI) | Apercu | 14px / 0.88rem | regular | 1.29 | 0.4px | Footer links, secondary nav |\n| Eyebrow / Kicker | WiredMono | 13px / 0.81rem | regular | 1.23 | 0.92px | UPPERCASE \u2014 story category above headline |\n| Eyebrow Bold | WiredMono | 13px / 0.81rem | 700 | 1.23 | \u2014 | UPPERCASE \u2014 featured story marker |\n| Section Ribbon | WiredMono | 12px / 0.75rem | 700 | 1.00 | 1.2px | UPPERCASE \u2014 black-bar section labels |\n| Photo Caption | BreveText | 12.73px / 0.80rem | 700 | 2.20 (relaxed) | 0.108px | Generous leading \u2014 print-photo treatment |\n| Timestamp / Meta | WiredMono | 12px / 0.75rem | regular | 1.33 | 1.1px | UPPERCASE, used for \"X HOURS AGO\" markers |\n| Tertiary Footer Link | ProximaNova | 11px / 0.69rem | regular | 1.45 | \u2014 | Newsletter footer, legal links |\n| Inter UI Heading | Inter | 16px / 1.00rem | 600 | 1.23 | 0.108px | Newer module headers |\n| Inter UI Caption | Inter | 14px / 0.88rem | 600 | 1.40 | \u2014 | Compact UI metadata |\n\n### Principles\n- **Four faces, four jobs.** WiredDisplay is for shouting, BreveText is for reading, Apercu is for clicking, WiredMono is for labeling. They never trade roles. This separation is what keeps the page from feeling like a typography sample.\n- **Tight headlines, generous body.** Display type runs as low as 0.93 line-height (nearly touching), while body BreveText opens out to 1.47\u20131.50. The contrast is the editorial fingerprint.\n- **Mono is always uppercase.** Every WiredMono usage carries `text-transform: uppercase` and 0.9\u20131.2px letter-spacing. Treat lowercase mono as broken \u2014 it should not appear on a WIRED page.\n- **Bold is rare.** Apercu uses weight 700 only for UI emphasis; the editorial layer (Display + BreveText) leans entirely on size and ink color, never on bolding.\n- **Letter-spacing has two registers**: positive (0.9\u20131.2px) for ALL-CAPS mono, negative (-0.144 to -0.5px) for large display serif. Never neutral on the largest type.\n\n### Note on Font Substitutes\nThe line-height values in the hierarchy table (especially the 0.93 on the 64px hero) assume the **proprietary WiredDisplay and BreveText faces**, which have tight metrics with short ascenders/descenders. If you substitute these with wide-metric open-source fonts like **Playfair Display** or **Libre Caslon**, loosen display line-heights by approximately **+0.10 to +0.12** to prevent ascender/descender collisions on wrapping lines (e.g., 0.93 \u2192 1.05, 1.08 \u2192 1.18). Apercu substitutes (Inter, Work Sans, Manrope) work at the token values without adjustment. BreveText body substitutes (Lora, Source Serif 4) also work without adjustment because body leading is already generous.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary CTA \u2014 Black Outline (\"Subscribe\")**\n- Background: `#ffffff` (Paper White)\n- Text: `#000000` (WIRED Black), Apercu 16px / 700 / 0.3px tracking\n- Border: `2px solid #000000` \u2014 the printerly hard rule, not a 1px UI border\n- Border radius: `0` (square corners)\n- Padding: vertical \u2248 12\u201314px, horizontal \u2248 24px\n- Hover: background flips to `#000000`, text flips to `#ffffff` \u2014 pure inversion, no easing on the rule\n- Transition: ~150ms color/background only\n\n**Secondary \u2014 Inverted (\"Sign In\", in dark zones)**\n- Background: `#000000`\n- Text: `#ffffff`\n- Border: `2px solid #ffffff`\n- Same square corners, same inversion-on-hover behavior\n\n**Tertiary \u2014 Underlined Inline Link**\n- Treated as a button when wrapped in nav: text `#1a1a1a`, underline always present, hover swaps color to `#057dbc` while keeping the underline\n- No padding, no border, no background \u2014 this is editorial linking, not UI\n\n**Pill / Round Icon Button**\n- Border radius: `50%` (the only circular shape on the site)\n- Used exclusively for icon controls (search, account, social) in the header\n- Border: 1px solid `#757575` or no border depending on placement\n- Size: ~32\u201340px square footprint\n\n**Tag / Span Pill**\n- Border radius: `1920px` (effectively a full pill \u2014 only used inside text spans like \"BREAKING\")\n- Background: solid black or red accent depending on context\n- Text: white, mono 11\u201312px caps\n\n### Cards & Containers\n- **Cards do not exist.** WIRED's homepage has no rounded boxes, no shadows, no surface elevation.\n- A \"story tile\" is just an image rectangle stacked above a kicker + headline + deck, separated from neighbors by **1px hairline rules** (`#000000` or `#4a5568`) or by raw whitespace.\n- The closest thing to a \"container\" is the black ribbon section header (e.g., \"MOST POPULAR\") \u2014 a full-bleed black bar with white WiredMono caps, no padding refinement, no rounded ends.\n- Hover behavior on a story tile: the headline link text shifts from `#1a1a1a` to `#057dbc` and the underline appears. The image itself does not zoom, lift, or shadow.\n\n### Inputs & Forms\n- **Newsletter input**: rectangular, `2px solid #000000` border, `0` radius, white background, Apercu 16px placeholder.\n- **Focus**: border stays 2px black, no glow ring, no color change \u2014 focus is signaled by the blinking caret only. (Add a 2px outset for accessibility if you ship this \u2014 WIRED's own implementation under-serves keyboard users here.)\n- **Error**: text label below in `#e53e3e` (Fides cookie overlay borrows this red \u2014 use sparingly).\n- **Disabled**: text drops to `#a0aec0`, border softens to `#757575`.\n\n### Navigation\n- **Top utility bar**: black (`#000000`) full-bleed strip, ~32\u201340px tall, mono caps links separated by hairline dividers, `#ffffff` text, hover \u2192 `#057dbc`.\n- **Main nav**: paper-white (`#ffffff`) row beneath the bug logo, Apercu 14\u201316px / regular, hover \u2192 `#057dbc` underline.\n- **Logo**: WIRED bug, ~209\u00D742px, centered or left-aligned, never recolored, always pure black on white.\n- **Mobile**: nav collapses to a hamburger left of the bug logo. Section nav becomes a slide-down drawer of mono caps links.\n- **Transition**: hover color swaps are instant or ~120ms; no bouncy easing \u2014 editorial restraint.\n\n### Image Treatment\n- **Aspect ratios**: predominantly 16:9 for hero images, 4:3 for grid story tiles, 1:1 for smaller \"Most Popular\" thumbnails.\n- **Corners**: ALWAYS 0 radius. Square. The only rounded image is a circular author avatar (50%).\n- **Full-bleed**: hero photographs run edge-to-edge of the column they occupy; no inset, no border.\n- **Captions**: BreveText 12.73px / 700 with relaxed 2.20 line-height \u2014 placed directly under the image, italicized in some templates.\n- **Hover**: no zoom, no opacity dip \u2014 only the headline below the image responds.\n- **Lazy loading**: standard `loading=\"lazy\"` on all below-the-fold imagery.\n\n### Editorial Ribbons & Section Markers\n- Black bar (`#000000`) full-bleed with white WiredMono uppercase label inside (e.g., \"MOST POPULAR\", \"BACKCHANNEL\", \"GEAR\").\n- Height ~32\u201340px, no padding refinement, no rounded ends.\n- Sometimes a thin 2px black rule sits directly above or below to double-frame the bar.\n\n### Numbered Lists (\"Most Popular\")\n- A vertical list of stories prefixed with WiredDisplay numerals (01, 02, 03\u2026) at ~40\u201348px, sitting tight against the headline they label.\n- Hairline rule between each item, no other decoration.\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px.\n- **Scale**: 1px (hairline), 4px, 8px, 12px, 14.11px, 15px, 16px, 24px, 25.46px, 29.66px, 32px, 40px, 48px, 64px.\n- **Section padding**: typically 32\u201348px vertical between major editorial blocks.\n- **Card padding**: there are no cards; the gutter between story tiles is 24\u201332px horizontally and 16\u201324px vertically.\n- **Inline spacing**: kickers sit ~4\u20138px above headlines; decks sit ~8\u201312px below headlines; bylines/timestamps another 8\u201312px below the deck.\n\n### Grid & Container\n- **Max width**: ~1280\u20131600px on desktop (the dembrandt sweep detected breakpoints up to 1600px), centered with generous outer margins.\n- **Column patterns**: 12-column grid that resolves into 2/3/4 column story arrangements depending on module \u2014 feature blocks often run a \"1 large + 2 small\" pattern with hairline rules between each.\n- **Column gutters**: ~24\u201332px, separated by hairline `#000000` or `#4a5568` 1px rules where the editorial logic demands a \"page-fold\" feel.\n\n### Whitespace Philosophy\nWIRED treats whitespace the way a magazine art director treats margin: it's the silence around the type, not a styling choice. The page never breathes excessively (this is not Stripe or Apple); it breathes *editorially* \u2014 enough room to keep adjacent stories from arguing, never enough to suggest there's nothing on the page. If an empty area looks like it could fit another headline, that empty area is doing its job.\n\n### Border Radius Scale\n- `0` \u2014 every container, every image, every button, every input. The default.\n- `1920px` \u2014 only inside text spans that need to look like a full pill (\"BREAKING\", \"LIVE\").\n- `50%` \u2014 only on round icon buttons and circular author avatars.\n\nThere are exactly three radii on the entire site, and two of them are reserved for non-rectangular shapes. This is the **strictest** corner discipline of any major editorial property.\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|---|---|---|\n| 0 | No shadow, no border | Default editorial surface \u2014 text on paper |\n| 1 | 1px solid `#e2e8f0` hairline `<hr>` | Quiet section divider, almost invisible |\n| 2 | 1px solid `#000000` hairline rule | Editorial column divider \u2014 printerly, structural |\n| 3 | 2px solid `#000000` border | Buttons, inputs, ribbons \u2014 interactive emphasis |\n| 4 | Black ribbon bar (`#000000` fill) | Section labels \u2014 the most \"elevated\" surface on the page |\n| 5 | Inverted footer block | Dark `#1a1a1a` zone with white type \u2014 the only inversion |\n\nWIRED's depth philosophy is **flat by religion**. There is exactly one shadow token in the entire site (a default `0 0 0 transparent` placeholder) and no `box-shadow` is applied to story tiles, headers, modals, or cards. Depth is communicated by **rule weight** (1px hairline \u2192 2px hard rule \u2192 solid black ribbon), not by simulated lighting.\n\n### Decorative Depth\nNone. No gradients, no glow, no halos, no scrim overlays beyond the standard photo caption gradient. WIRED earns its visual interest from photography and typographic contrast, not from chrome.\n\n## 7. Do's and Don'ts\n\n### Do\n- **Do** use 2px hard black borders on every primary button \u2014 no 1px softness, no rounded edges.\n- **Do** put a WiredMono ALL-CAPS kicker above every story headline (4\u20138px above, 0.9\u20131.2px tracking).\n- **Do** use BreveText for any paragraph longer than two lines \u2014 Apercu is for UI, not reading.\n- **Do** keep images square-cornered, edge-to-edge, with the caption hugging the bottom edge.\n- **Do** separate story tiles with hairline rules or whitespace, never with cards or shadows.\n- **Do** invert (black background, white type) only for footers, ribbons, and the utility nav strip.\n- **Do** use `#057dbc` link blue exclusively for hover states \u2014 never as a background or button fill.\n- **Do** scale headlines aggressively: 64px on hero, 26px on grid blocks, never 32px \"safe middle ground\".\n\n### Don't\n- **Don't** add `box-shadow` to anything. Ever. WIRED doesn't ship shadows.\n- **Don't** round corners on rectangular containers \u2014 `border-radius: 0` is law.\n- **Don't** mix typefaces inside one role: WiredDisplay never sets body, BreveText never sets buttons.\n- **Don't** use color outside grayscale + `#057dbc`. No orange CTAs, no green success pills.\n- **Don't** use Apercu in lowercase for kickers \u2014 that's WiredMono's job, and it must be UPPERCASE.\n- **Don't** use gradients, blurs, glassmorphism, or atmospheric effects \u2014 they break the printerly contract.\n- **Don't** rely on hover lift effects. WIRED's hover is a color swap on text, nothing more.\n- **Don't** invent new pill shapes. Round = icons only. Pill = inline text spans only. Everything else is square.\n\n## 8. Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Small Mobile | <375px | Single column, hamburger nav, all hero modules collapse to stacked image-headline-deck |\n| Mobile | 375\u2013767px | Single column, story grid becomes vertical scroll, \"Most Popular\" numbers shrink to 32px |\n| Tablet | 768\u20131023px | 2-column story grid, sidebar collapses below main feed, nav becomes condensed |\n| Desktop | 1024\u20131599px | Full editorial 3\u20134 column grid, sidebar restored, max headline scale active |\n| Large Desktop | \u22651600px | Page caps at ~1600px container, whitespace expands at the margins, no further scaling |\n\nThe dembrandt sweep detected an unusual range of intermediate breakpoints (1280, 1025, 1024, 1023, 768, 767, 667, 599, 570, 569, 480, 425, 375, 320, 319) \u2014 Wired's grid micro-tunes at almost every common viewport, especially around the iPad portrait/landscape boundary.\n\n### Touch Targets\n- Primary button: ~44x44px minimum (16px text + 12\u201314px vertical padding satisfies WCAG AAA).\n- Mono caps links in the utility bar are smaller (~32px tall) \u2014 WIRED's own implementation undershoots WCAG here. **For derivative work, pad mono nav links to 44px.**\n- Round icon buttons in the header are ~40px circles, comfortably touch-friendly.\n\n### Collapsing Strategy\n- **Nav**: utility bar drops below 768px; main nav collapses into hamburger drawer. Bug logo recenters on mobile.\n- **Grid**: 4-col \u2192 3-col \u2192 2-col \u2192 1-col as viewport tightens. Hairline rules persist between every column count, so the printerly feel survives the collapse.\n- **Spacing**: vertical rhythm tightens from 48px \u2192 32px \u2192 24px between modules on mobile. Horizontal page padding shrinks from 64px \u2192 24px \u2192 16px.\n- **Type**: WiredDisplay hero scales from 64px to ~36\u201342px on mobile, headlines from 26px to ~22px, kickers stay locked at 12\u201313px (mono caps don't scale down further or they become unreadable).\n\n### Image Behavior\n- All images are responsive raster (`srcset`-driven), aspect ratios preserved: 16:9 hero, 4:3 mid, 1:1 thumbnails.\n- No art-direction swaps \u2014 the same crop scales across breakpoints.\n- `loading=\"lazy\"` on all below-the-fold imagery, `eager` on the hero only.\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- **Primary Ink (text + ribbons)**: \"WIRED Black (`#000000`)\"\n- **Page Canvas**: \"Paper White (`#ffffff`)\"\n- **Headline / Body Text**: \"Page Ink (`#1a1a1a`)\"\n- **Caption / Metadata**: \"Caption Gray (`#757575`)\"\n- **Hairline / Quiet Border**: \"Hairline Tint (`#e2e8f0`)\"\n- **Link Hover Accent (the only color)**: \"Link Blue (`#057dbc`)\"\n\n### Example Component Prompts\n1. *\"Create an editorial story tile with a 16:9 image (square corners), an UPPERCASE WiredMono kicker in `#1a1a1a` above a 26px WiredDisplay headline. Separate the tile from its neighbor with a 1px black hairline rule. No card, no shadow, no border-radius.\"*\n2. *\"Design a primary subscribe button with a 2px solid `#000000` border, square corners, `#ffffff` background, Apercu 16px / 700 / 0.3px tracking text in `#000000`. Hover state inverts to black background with white text in 150ms.\"*\n3. *\"Build a 'Most Popular' module: full-bleed black ribbon header with WiredMono uppercase label in white, followed by a numbered list (01\u201305) using 40px WiredDisplay numerals and 17px Apercu 700 headlines, separated by hairline rules.\"*\n4. *\"Create a newsletter signup form with a 2px solid black input border, no radius, Apercu 16px placeholder in `#757575`, and an inverted black submit button beside it.\"*\n5. *\"Design a footer in `#1a1a1a` with paper-white tertiary navigation in ProximaNova 11px, hover color `#057dbc`, and a centered WIRED bug logo at the top of the block.\"*\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. **Audit corners first.** If you see any `border-radius` other than `0`, `50%` (icons/avatars), or `1920px` (text pills), flatten it. Round corners are the single most common mistake.\n2. **Audit shadows.** Strip every `box-shadow`. If a tile needs to feel \"lifted\", use a 2px black border or a hairline rule instead.\n3. **Audit typeface roles.** Make sure WiredDisplay only sets headlines, BreveText only sets reading body, Apercu only sets UI, WiredMono only sets ALL-CAPS labels. Swapping roles breaks the voice instantly.\n4. **Audit color sprawl.** If a color outside `#000`, `#1a1a1a`, `#757575`, `#e2e8f0`, `#ffffff`, `#057dbc` appears in chrome (not photography), remove it. WIRED's restraint is non-negotiable.\n5. **Audit kickers.** Every story should have an UPPERCASE mono kicker. Without it, the page reads as a generic blog, not WIRED.\n6. **Audit rules.** Add hairline `1px solid #000` dividers wherever two stories or modules meet without a clear visual break. Rules are the connective tissue.\n";
+
+export { wiredBrief };