@hex-core/themes 0.1.1 → 0.2.1

package/dist/presets/_briefs/wired.js

@@ -0,0 +1,284 @@
+// src/presets/_briefs/wired.ts
+var wiredBrief = `# Design System Inspired by WIRED
+
+## 1. Visual Theme & Atmosphere
+
+WIRED'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\xE9 Nast print page would be assembled in a paste-up room.
+
+The 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.
+
+There 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.
+
+**Key Characteristics:**
+- Newsstand-density editorial grid: rules and whitespace, never cards or shadows
+- Custom serif display + technical mono kickers \u2014 the Cond\xE9-Nast-meets-engineering-lab voice
+- Strictly square corners on every image, container, and ribbon (only icon buttons are circular)
+- 2px hard black borders on buttons and links \u2014 printerly, not webby
+- Mono ALL-CAPS eyebrows on every story with wide tracking (0.9\u20131.2px)
+- Single ink-blue accent for links; everything else lives in pure grayscale
+- Dark theme = the *footer*, not the page; the page itself is committed paper-white
+
+## 2. Color Palette & Roles
+
+### Primary (Editorial Ink)
+- **WIRED Black** (\`#000000\`): Pure ink for ribbons, section dividers, button borders, headline rules \u2014 the strongest hand on the page.
+- **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.
+- **Paper White** (\`#ffffff\`): Default canvas for the entire site. Treat it like newsprint stock \u2014 uninterrupted, never tinted.
+
+### Secondary (Editorial Voice)
+- **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.
+
+### Surface & Background
+- **Newsprint** (\`#ffffff\`): Editorial pages, story grids, hero zones.
+- **Footer Ink** (\`#1a1a1a\`): The only inverted region on the homepage. Paper white type sits on top.
+- **Hairline Tint** (\`#e2e8f0\`): Reserved for \`<hr>\` elements between sections \u2014 barely visible, like a margin rule.
+
+### Neutrals & Text
+- **Headline Black** (\`#1a1a1a\`): All H1/H2 display type.
+- **Body Gray** (\`#1a1a1a\`): Long-form body text \u2014 same ink as headlines for unity.
+- **Caption Gray** (\`#757575\`): Secondary metadata: bylines, timestamps, photo credits.
+- **Disabled Gray** (\`#999999\`): Inactive links, low-priority labels.
+- **Hairline Border** (\`#e2e8f0\`): Subtle separators only.
+
+### Semantic & Accent
+- **Brand Hover Blue** (\`#057dbc\`): Link rollover state \u2014 also serves as the only "interactive" cue.
+- *(WIRED's homepage intentionally omits semantic success/error/warning palettes \u2014 this is editorial, not a SaaS dashboard.)*
+
+### Gradient System
+None. 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.
+
+## 3. Typography Rules
+
+### Font Family
+- **WiredDisplay** (custom serif, fallback \`helvetica\`) \u2014 Display headlines and feature titles.
+- **BreveText** (humanist serif, fallback \`helvetica\`) \u2014 Article body, decks, longer captions.
+- **Apercu** (geometric sans, fallback \`helvetica\`) \u2014 UI labels, buttons, navigation, mid-weight headings.
+- **WiredMono** (custom monospace, fallback \`helvetica\`) \u2014 Eyebrows, kickers, timestamps, section labels, ALL CAPS.
+- **Inter** (sans, system fallback) \u2014 Utility UI in newer modules.
+- **ProximaNova** (sans, fallback \`helvetica\`) \u2014 Legacy UI surfaces.
+- **WIRED Mono** (custom mono, fallback \`Monaco, Courier New, Courier\`) \u2014 Article-page eyebrows.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|---|---|---|---|---|---|---|
+| Display Headline (Hero) | WiredDisplay | 64px / 4.00rem | regular | 0.93 | -0.5px | Tight, almost touching descenders \u2014 newsstand presence |
+| Display Headline (Mobile / Mid) | WiredDisplay | 26px / 1.63rem | regular | 1.08 | \u2014 | Same face, scaled down for grid blocks |
+| Section Heading | Apercu | 20px / 1.25rem | 700 | 1.20 | -0.28px | Bold sans for module titles ("Most Popular", "Featured") |
+| Subheading | Apercu | 17px / 1.06rem | 700 | 1.29 | -0.144px | Story decks within feature blocks |
+| Article Deck (Serif) | BreveText | 19px / 1.19rem | regular | 1.47 | 0.108px | Long-form lead paragraphs |
+| Article Body (Serif) | BreveText | 16px / 1.00rem | regular | 1.50 | 0.09px | Standard paragraph text |
+| UI Heading | Apercu | 16px / 1.00rem | 700 | 1.25 | 0.3px | Inline UI labels, button captions |
+| Button Label | Apercu | 16px / 1.00rem | 700 | 1.25 | 0.3px | All caps optional, depending on placement |
+| Link (Inline UI) | Apercu | 14px / 0.88rem | regular | 1.29 | 0.4px | Footer links, secondary nav |
+| Eyebrow / Kicker | WiredMono | 13px / 0.81rem | regular | 1.23 | 0.92px | UPPERCASE \u2014 story category above headline |
+| Eyebrow Bold | WiredMono | 13px / 0.81rem | 700 | 1.23 | \u2014 | UPPERCASE \u2014 featured story marker |
+| Section Ribbon | WiredMono | 12px / 0.75rem | 700 | 1.00 | 1.2px | UPPERCASE \u2014 black-bar section labels |
+| Photo Caption | BreveText | 12.73px / 0.80rem | 700 | 2.20 (relaxed) | 0.108px | Generous leading \u2014 print-photo treatment |
+| Timestamp / Meta | WiredMono | 12px / 0.75rem | regular | 1.33 | 1.1px | UPPERCASE, used for "X HOURS AGO" markers |
+| Tertiary Footer Link | ProximaNova | 11px / 0.69rem | regular | 1.45 | \u2014 | Newsletter footer, legal links |
+| Inter UI Heading | Inter | 16px / 1.00rem | 600 | 1.23 | 0.108px | Newer module headers |
+| Inter UI Caption | Inter | 14px / 0.88rem | 600 | 1.40 | \u2014 | Compact UI metadata |
+
+### Principles
+- **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.
+- **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.
+- **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.
+- **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.
+- **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.
+
+### Note on Font Substitutes
+The 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.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary CTA \u2014 Black Outline ("Subscribe")**
+- Background: \`#ffffff\` (Paper White)
+- Text: \`#000000\` (WIRED Black), Apercu 16px / 700 / 0.3px tracking
+- Border: \`2px solid #000000\` \u2014 the printerly hard rule, not a 1px UI border
+- Border radius: \`0\` (square corners)
+- Padding: vertical \u2248 12\u201314px, horizontal \u2248 24px
+- Hover: background flips to \`#000000\`, text flips to \`#ffffff\` \u2014 pure inversion, no easing on the rule
+- Transition: ~150ms color/background only
+
+**Secondary \u2014 Inverted ("Sign In", in dark zones)**
+- Background: \`#000000\`
+- Text: \`#ffffff\`
+- Border: \`2px solid #ffffff\`
+- Same square corners, same inversion-on-hover behavior
+
+**Tertiary \u2014 Underlined Inline Link**
+- Treated as a button when wrapped in nav: text \`#1a1a1a\`, underline always present, hover swaps color to \`#057dbc\` while keeping the underline
+- No padding, no border, no background \u2014 this is editorial linking, not UI
+
+**Pill / Round Icon Button**
+- Border radius: \`50%\` (the only circular shape on the site)
+- Used exclusively for icon controls (search, account, social) in the header
+- Border: 1px solid \`#757575\` or no border depending on placement
+- Size: ~32\u201340px square footprint
+
+**Tag / Span Pill**
+- Border radius: \`1920px\` (effectively a full pill \u2014 only used inside text spans like "BREAKING")
+- Background: solid black or red accent depending on context
+- Text: white, mono 11\u201312px caps
+
+### Cards & Containers
+- **Cards do not exist.** WIRED's homepage has no rounded boxes, no shadows, no surface elevation.
+- 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.
+- 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.
+- 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.
+
+### Inputs & Forms
+- **Newsletter input**: rectangular, \`2px solid #000000\` border, \`0\` radius, white background, Apercu 16px placeholder.
+- **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.)
+- **Error**: text label below in \`#e53e3e\` (Fides cookie overlay borrows this red \u2014 use sparingly).
+- **Disabled**: text drops to \`#a0aec0\`, border softens to \`#757575\`.
+
+### Navigation
+- **Top utility bar**: black (\`#000000\`) full-bleed strip, ~32\u201340px tall, mono caps links separated by hairline dividers, \`#ffffff\` text, hover \u2192 \`#057dbc\`.
+- **Main nav**: paper-white (\`#ffffff\`) row beneath the bug logo, Apercu 14\u201316px / regular, hover \u2192 \`#057dbc\` underline.
+- **Logo**: WIRED bug, ~209\xD742px, centered or left-aligned, never recolored, always pure black on white.
+- **Mobile**: nav collapses to a hamburger left of the bug logo. Section nav becomes a slide-down drawer of mono caps links.
+- **Transition**: hover color swaps are instant or ~120ms; no bouncy easing \u2014 editorial restraint.
+
+### Image Treatment
+- **Aspect ratios**: predominantly 16:9 for hero images, 4:3 for grid story tiles, 1:1 for smaller "Most Popular" thumbnails.
+- **Corners**: ALWAYS 0 radius. Square. The only rounded image is a circular author avatar (50%).
+- **Full-bleed**: hero photographs run edge-to-edge of the column they occupy; no inset, no border.
+- **Captions**: BreveText 12.73px / 700 with relaxed 2.20 line-height \u2014 placed directly under the image, italicized in some templates.
+- **Hover**: no zoom, no opacity dip \u2014 only the headline below the image responds.
+- **Lazy loading**: standard \`loading="lazy"\` on all below-the-fold imagery.
+
+### Editorial Ribbons & Section Markers
+- Black bar (\`#000000\`) full-bleed with white WiredMono uppercase label inside (e.g., "MOST POPULAR", "BACKCHANNEL", "GEAR").
+- Height ~32\u201340px, no padding refinement, no rounded ends.
+- Sometimes a thin 2px black rule sits directly above or below to double-frame the bar.
+
+### Numbered Lists ("Most Popular")
+- A vertical list of stories prefixed with WiredDisplay numerals (01, 02, 03\u2026) at ~40\u201348px, sitting tight against the headline they label.
+- Hairline rule between each item, no other decoration.
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px.
+- **Scale**: 1px (hairline), 4px, 8px, 12px, 14.11px, 15px, 16px, 24px, 25.46px, 29.66px, 32px, 40px, 48px, 64px.
+- **Section padding**: typically 32\u201348px vertical between major editorial blocks.
+- **Card padding**: there are no cards; the gutter between story tiles is 24\u201332px horizontally and 16\u201324px vertically.
+- **Inline spacing**: kickers sit ~4\u20138px above headlines; decks sit ~8\u201312px below headlines; bylines/timestamps another 8\u201312px below the deck.
+
+### Grid & Container
+- **Max width**: ~1280\u20131600px on desktop (the dembrandt sweep detected breakpoints up to 1600px), centered with generous outer margins.
+- **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.
+- **Column gutters**: ~24\u201332px, separated by hairline \`#000000\` or \`#4a5568\` 1px rules where the editorial logic demands a "page-fold" feel.
+
+### Whitespace Philosophy
+WIRED 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.
+
+### Border Radius Scale
+- \`0\` \u2014 every container, every image, every button, every input. The default.
+- \`1920px\` \u2014 only inside text spans that need to look like a full pill ("BREAKING", "LIVE").
+- \`50%\` \u2014 only on round icon buttons and circular author avatars.
+
+There 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.
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|---|---|---|
+| 0 | No shadow, no border | Default editorial surface \u2014 text on paper |
+| 1 | 1px solid \`#e2e8f0\` hairline \`<hr>\` | Quiet section divider, almost invisible |
+| 2 | 1px solid \`#000000\` hairline rule | Editorial column divider \u2014 printerly, structural |
+| 3 | 2px solid \`#000000\` border | Buttons, inputs, ribbons \u2014 interactive emphasis |
+| 4 | Black ribbon bar (\`#000000\` fill) | Section labels \u2014 the most "elevated" surface on the page |
+| 5 | Inverted footer block | Dark \`#1a1a1a\` zone with white type \u2014 the only inversion |
+
+WIRED'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.
+
+### Decorative Depth
+None. 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.
+
+## 7. Do's and Don'ts
+
+### Do
+- **Do** use 2px hard black borders on every primary button \u2014 no 1px softness, no rounded edges.
+- **Do** put a WiredMono ALL-CAPS kicker above every story headline (4\u20138px above, 0.9\u20131.2px tracking).
+- **Do** use BreveText for any paragraph longer than two lines \u2014 Apercu is for UI, not reading.
+- **Do** keep images square-cornered, edge-to-edge, with the caption hugging the bottom edge.
+- **Do** separate story tiles with hairline rules or whitespace, never with cards or shadows.
+- **Do** invert (black background, white type) only for footers, ribbons, and the utility nav strip.
+- **Do** use \`#057dbc\` link blue exclusively for hover states \u2014 never as a background or button fill.
+- **Do** scale headlines aggressively: 64px on hero, 26px on grid blocks, never 32px "safe middle ground".
+
+### Don't
+- **Don't** add \`box-shadow\` to anything. Ever. WIRED doesn't ship shadows.
+- **Don't** round corners on rectangular containers \u2014 \`border-radius: 0\` is law.
+- **Don't** mix typefaces inside one role: WiredDisplay never sets body, BreveText never sets buttons.
+- **Don't** use color outside grayscale + \`#057dbc\`. No orange CTAs, no green success pills.
+- **Don't** use Apercu in lowercase for kickers \u2014 that's WiredMono's job, and it must be UPPERCASE.
+- **Don't** use gradients, blurs, glassmorphism, or atmospheric effects \u2014 they break the printerly contract.
+- **Don't** rely on hover lift effects. WIRED's hover is a color swap on text, nothing more.
+- **Don't** invent new pill shapes. Round = icons only. Pill = inline text spans only. Everything else is square.
+
+## 8. Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Small Mobile | <375px | Single column, hamburger nav, all hero modules collapse to stacked image-headline-deck |
+| Mobile | 375\u2013767px | Single column, story grid becomes vertical scroll, "Most Popular" numbers shrink to 32px |
+| Tablet | 768\u20131023px | 2-column story grid, sidebar collapses below main feed, nav becomes condensed |
+| Desktop | 1024\u20131599px | Full editorial 3\u20134 column grid, sidebar restored, max headline scale active |
+| Large Desktop | \u22651600px | Page caps at ~1600px container, whitespace expands at the margins, no further scaling |
+
+The 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.
+
+### Touch Targets
+- Primary button: ~44x44px minimum (16px text + 12\u201314px vertical padding satisfies WCAG AAA).
+- 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.**
+- Round icon buttons in the header are ~40px circles, comfortably touch-friendly.
+
+### Collapsing Strategy
+- **Nav**: utility bar drops below 768px; main nav collapses into hamburger drawer. Bug logo recenters on mobile.
+- **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.
+- **Spacing**: vertical rhythm tightens from 48px \u2192 32px \u2192 24px between modules on mobile. Horizontal page padding shrinks from 64px \u2192 24px \u2192 16px.
+- **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).
+
+### Image Behavior
+- All images are responsive raster (\`srcset\`-driven), aspect ratios preserved: 16:9 hero, 4:3 mid, 1:1 thumbnails.
+- No art-direction swaps \u2014 the same crop scales across breakpoints.
+- \`loading="lazy"\` on all below-the-fold imagery, \`eager\` on the hero only.
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- **Primary Ink (text + ribbons)**: "WIRED Black (\`#000000\`)"
+- **Page Canvas**: "Paper White (\`#ffffff\`)"
+- **Headline / Body Text**: "Page Ink (\`#1a1a1a\`)"
+- **Caption / Metadata**: "Caption Gray (\`#757575\`)"
+- **Hairline / Quiet Border**: "Hairline Tint (\`#e2e8f0\`)"
+- **Link Hover Accent (the only color)**: "Link Blue (\`#057dbc\`)"
+
+### Example Component Prompts
+1. *"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."*
+2. *"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."*
+3. *"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."*
+4. *"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."*
+5. *"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."*
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. **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.
+2. **Audit shadows.** Strip every \`box-shadow\`. If a tile needs to feel "lifted", use a 2px black border or a hairline rule instead.
+3. **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.
+4. **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.
+5. **Audit kickers.** Every story should have an UPPERCASE mono kicker. Without it, the page reads as a generic blog, not WIRED.
+6. **Audit rules.** Add hairline \`1px solid #000\` dividers wherever two stories or modules meet without a clear visual break. Rules are the connective tissue.
+`;
+export {
+  wiredBrief
+};
+//# sourceMappingURL=wired.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/wired.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport 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 — the entire layout is held together by typographic weight and the discipline of rules and whitespace, the same way a Condé 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 — usually black caps with letter-spacing wide enough to read as a Geiger-counter tick — 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 — 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 — the Condé-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 — printerly, not webby\n- Mono ALL-CAPS eyebrows on every story with wide tracking (0.9–1.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 — 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 — 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 — 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 — 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 — 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 — also serves as the only \"interactive\" cue.\n- *(WIRED's homepage intentionally omits semantic success/error/warning palettes — 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 — gradients live *in the imagery*, not in the chrome.\n\n## 3. Typography Rules\n\n### Font Family\n- **WiredDisplay** (custom serif, fallback \\`helvetica\\`) — Display headlines and feature titles.\n- **BreveText** (humanist serif, fallback \\`helvetica\\`) — Article body, decks, longer captions.\n- **Apercu** (geometric sans, fallback \\`helvetica\\`) — UI labels, buttons, navigation, mid-weight headings.\n- **WiredMono** (custom monospace, fallback \\`helvetica\\`) — Eyebrows, kickers, timestamps, section labels, ALL CAPS.\n- **Inter** (sans, system fallback) — Utility UI in newer modules.\n- **ProximaNova** (sans, fallback \\`helvetica\\`) — Legacy UI surfaces.\n- **WIRED Mono** (custom mono, fallback \\`Monaco, Courier New, Courier\\`) — 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 — newsstand presence |\n| Display Headline (Mobile / Mid) | WiredDisplay | 26px / 1.63rem | regular | 1.08 | — | 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 — story category above headline |\n| Eyebrow Bold | WiredMono | 13px / 0.81rem | 700 | 1.23 | — | UPPERCASE — featured story marker |\n| Section Ribbon | WiredMono | 12px / 0.75rem | 700 | 1.00 | 1.2px | UPPERCASE — black-bar section labels |\n| Photo Caption | BreveText | 12.73px / 0.80rem | 700 | 2.20 (relaxed) | 0.108px | Generous leading — 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 | — | 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 | — | 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–1.50. The contrast is the editorial fingerprint.\n- **Mono is always uppercase.** Every WiredMono usage carries \\`text-transform: uppercase\\` and 0.9–1.2px letter-spacing. Treat lowercase mono as broken — 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–1.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 → 1.05, 1.08 → 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 — Black Outline (\"Subscribe\")**\n- Background: \\`#ffffff\\` (Paper White)\n- Text: \\`#000000\\` (WIRED Black), Apercu 16px / 700 / 0.3px tracking\n- Border: \\`2px solid #000000\\` — the printerly hard rule, not a 1px UI border\n- Border radius: \\`0\\` (square corners)\n- Padding: vertical ≈ 12–14px, horizontal ≈ 24px\n- Hover: background flips to \\`#000000\\`, text flips to \\`#ffffff\\` — pure inversion, no easing on the rule\n- Transition: ~150ms color/background only\n\n**Secondary — 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 — 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 — 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–40px square footprint\n\n**Tag / Span Pill**\n- Border radius: \\`1920px\\` (effectively a full pill — only used inside text spans like \"BREAKING\")\n- Background: solid black or red accent depending on context\n- Text: white, mono 11–12px 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\") — 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 — focus is signaled by the blinking caret only. (Add a 2px outset for accessibility if you ship this — WIRED's own implementation under-serves keyboard users here.)\n- **Error**: text label below in \\`#e53e3e\\` (Fides cookie overlay borrows this red — 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–40px tall, mono caps links separated by hairline dividers, \\`#ffffff\\` text, hover → \\`#057dbc\\`.\n- **Main nav**: paper-white (\\`#ffffff\\`) row beneath the bug logo, Apercu 14–16px / regular, hover → \\`#057dbc\\` underline.\n- **Logo**: WIRED bug, ~209×42px, 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 — 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 — placed directly under the image, italicized in some templates.\n- **Hover**: no zoom, no opacity dip — 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–40px, 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…) at ~40–48px, 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–48px vertical between major editorial blocks.\n- **Card padding**: there are no cards; the gutter between story tiles is 24–32px horizontally and 16–24px vertically.\n- **Inline spacing**: kickers sit ~4–8px above headlines; decks sit ~8–12px below headlines; bylines/timestamps another 8–12px below the deck.\n\n### Grid & Container\n- **Max width**: ~1280–1600px 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 — feature blocks often run a \"1 large + 2 small\" pattern with hairline rules between each.\n- **Column gutters**: ~24–32px, 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* — 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\\` — every container, every image, every button, every input. The default.\n- \\`1920px\\` — only inside text spans that need to look like a full pill (\"BREAKING\", \"LIVE\").\n- \\`50%\\` — 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 — 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 — printerly, structural |\n| 3 | 2px solid \\`#000000\\` border | Buttons, inputs, ribbons — interactive emphasis |\n| 4 | Black ribbon bar (\\`#000000\\` fill) | Section labels — the most \"elevated\" surface on the page |\n| 5 | Inverted footer block | Dark \\`#1a1a1a\\` zone with white type — 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 → 2px hard rule → 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 — no 1px softness, no rounded edges.\n- **Do** put a WiredMono ALL-CAPS kicker above every story headline (4–8px above, 0.9–1.2px tracking).\n- **Do** use BreveText for any paragraph longer than two lines — 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 — 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 — \\`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 — that's WiredMono's job, and it must be UPPERCASE.\n- **Don't** use gradients, blurs, glassmorphism, or atmospheric effects — 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–767px | Single column, story grid becomes vertical scroll, \"Most Popular\" numbers shrink to 32px |\n| Tablet | 768–1023px | 2-column story grid, sidebar collapses below main feed, nav becomes condensed |\n| Desktop | 1024–1599px | Full editorial 3–4 column grid, sidebar restored, max headline scale active |\n| Large Desktop | ≥1600px | 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) — 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–14px vertical padding satisfies WCAG AAA).\n- Mono caps links in the utility bar are smaller (~32px tall) — 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 → 3-col → 2-col → 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 → 32px → 24px between modules on mobile. Horizontal page padding shrinks from 64px → 24px → 16px.\n- **Type**: WiredDisplay hero scales from 64px to ~36–42px on mobile, headlines from 26px to ~22px, kickers stay locked at 12–13px (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 — 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–05) 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`;\n"],"mappings":";AACO,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/wise.d.ts

@@ -0,0 +1,3 @@
+declare const wiseBrief = "# Design System Inspired by Wise\n\n## 1. Visual Theme & Atmosphere\n\nWise's website is a bold, confident fintech platform that communicates \"money without borders\" through massive typography and a distinctive lime-green accent. The design operates on a warm off-white canvas with near-black text (`#0e0f0c`) and a signature Wise Green (`#9fe870`) \u2014 a fresh, lime-bright color that feels alive and optimistic, unlike the corporate blues of traditional banking.\n\nThe typography uses Wise Sans \u2014 a proprietary font used at extreme weight 900 (black) for display headings with a remarkably tight line-height of 0.85 and OpenType `\"calt\"` (contextual alternates). At 126px, the text is so dense it feels like a protest sign \u2014 bold, urgent, and impossible to ignore. Inter serves as the body font with weight 600 as the default for emphasis, creating a consistently confident voice.\n\nWhat distinguishes Wise is its green-on-white-on-black material palette. Lime Green (`#9fe870`) appears on buttons with dark green text (`#163300`), creating a nature-inspired CTA that feels fresh. Hover states use `scale(1.05)` expansion rather than color changes \u2014 buttons physically grow on interaction. The border-radius system uses 9999px for buttons (pill), 30px\u201340px for cards, and the shadow system is minimal \u2014 just `rgba(14,15,12,0.12) 0px 0px 0px 1px` ring shadows.\n\n**Key Characteristics:**\n- Wise Sans at weight 900, 0.85 line-height \u2014 billboard-scale bold headlines\n- Lime Green (`#9fe870`) accent with dark green text (`#163300`) \u2014 nature-inspired fintech\n- Inter body at weight 600 as default \u2014 confident, not light\n- Near-black (`#0e0f0c`) primary with warm green undertone\n- Scale(1.05) hover animations \u2014 buttons physically grow\n- OpenType `\"calt\"` on all text\n- Pill buttons (9999px) and large rounded cards (30px\u201340px)\n- Semantic color system with comprehensive state management\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Near Black** (`#0e0f0c`): Primary text, background for dark sections\n- **Wise Green** (`#9fe870`): Primary CTA button, brand accent\n- **Dark Green** (`#163300`): Button text on green, deep green accent\n- **Light Mint** (`#e2f6d5`): Soft green surface, badge backgrounds\n- **Pastel Green** (`#cdffad`): `--color-interactive-contrast-hover`, hover accent\n\n### Semantic\n- **Positive Green** (`#054d28`): `--color-sentiment-positive-primary`, success\n- **Danger Red** (`#d03238`): `--color-interactive-negative-hover`, error/destructive\n- **Warning Yellow** (`#ffd11a`): `--color-sentiment-warning-hover`, warnings\n- **Background Cyan** (`rgba(56,200,255,0.10)`): `--color-background-accent`, info tint\n- **Bright Orange** (`#ffc091`): `--color-bright-orange`, warm accent\n\n### Neutral\n- **Warm Dark** (`#454745`): Secondary text, borders\n- **Gray** (`#868685`): Muted text, tertiary\n- **Light Surface** (`#e8ebe6`): Subtle green-tinted light surface\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `Wise Sans`, fallback: `Inter` \u2014 OpenType `\"calt\"` on all text\n- **Body / UI**: `Inter`, fallbacks: `Helvetica, Arial`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Mega | Wise Sans | 126px (7.88rem) | 900 | 0.85 (ultra-tight) | normal | `\"calt\"` |\n| Display Hero | Wise Sans | 96px (6.00rem) | 900 | 0.85 | normal | `\"calt\"` |\n| Section Heading | Wise Sans | 64px (4.00rem) | 900 | 0.85 | normal | `\"calt\"` |\n| Sub-heading | Wise Sans | 40px (2.50rem) | 900 | 0.85 | normal | `\"calt\"` |\n| Alt Heading | Inter | 78px (4.88rem) | 600 | 1.10 (tight) | -2.34px | `\"calt\"` |\n| Card Title | Inter | 26px (1.62rem) | 600 | 1.23 (tight) | -0.39px | `\"calt\"` |\n| Feature Title | Inter | 22px (1.38rem) | 600 | 1.25 (tight) | -0.396px | `\"calt\"` |\n| Body | Inter | 18px (1.13rem) | 400 | 1.44 | 0.18px | `\"calt\"` |\n| Body Semibold | Inter | 18px (1.13rem) | 600 | 1.44 | -0.108px | `\"calt\"` |\n| Button | Inter | 18px\u201322px | 600 | 1.00\u20131.44 | -0.108px | `\"calt\"` |\n| Caption | Inter | 14px (0.88rem) | 400\u2013600 | 1.50\u20131.86 | -0.084px to -0.108px | `\"calt\"` |\n| Small | Inter | 12px (0.75rem) | 400\u2013600 | 1.00\u20132.17 | -0.084px to -0.108px | `\"calt\"` |\n\n### Principles\n- **Weight 900 as identity**: Wise Sans Black (900) is used exclusively for display \u2014 the heaviest weight in any analyzed system. It creates text that feels stamped, pressed, physical.\n- **0.85 line-height**: The tightest display line-height analyzed. Letters overlap vertically, creating dense, billboard-like text blocks.\n- **\"calt\" everywhere**: Contextual alternates enabled on ALL text \u2014 both Wise Sans and Inter.\n- **Weight 600 as body default**: Inter Semibold is the standard reading weight \u2014 confident, not light.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Green Pill**\n- Background: `#9fe870` (Wise Green)\n- Text: `#163300` (Dark Green)\n- Padding: 5px 16px\n- Radius: 9999px\n- Hover: scale(1.05) \u2014 button physically grows\n- Active: scale(0.95) \u2014 button compresses\n- Focus: inset ring + outline\n\n**Secondary Subtle Pill**\n- Background: `rgba(22, 51, 0, 0.08)` (dark green at 8% opacity)\n- Text: `#0e0f0c`\n- Padding: 8px 12px 8px 16px\n- Radius: 9999px\n- Same scale hover/active behavior\n\n### Cards & Containers\n- Radius: 16px (small), 30px (medium), 40px (large cards/tables)\n- Border: `1px solid rgba(14,15,12,0.12)` or `1px solid #9fe870` (green accent)\n- Shadow: `rgba(14,15,12,0.12) 0px 0px 0px 1px` (ring shadow)\n\n### Navigation\n- Green-tinted navigation hover: `rgba(211,242,192,0.4)`\n- Clean header with Wise wordmark\n- Pill CTAs right-aligned\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 3px, 4px, 5px, 8px, 10px, 11px, 12px, 16px, 18px, 19px, 20px, 22px, 24px\n\n### Border Radius Scale\n- Minimal (2px): Links, inputs\n- Standard (10px): Comboboxes, inputs\n- Card (16px): Small cards, buttons, radio\n- Medium (20px): Links, medium cards\n- Large (30px): Feature cards\n- Section (40px): Tables, large cards\n- Mega (1000px): Presentation elements\n- Pill (9999px): All buttons, images\n- Circle (50%): Icons, badges\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default |\n| Ring (Level 1) | `rgba(14,15,12,0.12) 0px 0px 0px 1px` | Card borders |\n| Inset (Level 2) | `rgb(134,134,133) 0px 0px 0px 1px inset` | Input focus |\n\n**Shadow Philosophy**: Wise uses minimal shadows \u2014 ring shadows only. Depth comes from the bold green accent against the neutral canvas.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Wise Sans weight 900 for display \u2014 the extreme boldness IS the brand\n- Apply line-height 0.85 on Wise Sans display \u2014 ultra-tight is intentional\n- Use Lime Green (#9fe870) for primary CTAs with Dark Green (#163300) text\n- Apply scale(1.05) hover and scale(0.95) active on buttons\n- Enable \"calt\" on all text\n- Use Inter weight 600 as the body default\n\n### Don't\n- Don't use light font weights for Wise Sans \u2014 only 900\n- Don't relax the 0.85 line-height on display \u2014 the density is the identity\n- Don't use the Wise Green as background for large surfaces \u2014 it's for buttons and accents\n- Don't skip the scale animation on buttons\n- Don't use traditional shadows \u2014 ring shadows only\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <576px | Single column |\n| Tablet | 576\u2013992px | 2-column |\n| Desktop | 992\u20131440px | Full layout |\n| Large | >1440px | Expanded |\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Text: Near Black (`#0e0f0c`)\n- Background: White (`#ffffff` / off-white)\n- Accent: Wise Green (`#9fe870`)\n- Button text: Dark Green (`#163300`)\n- Secondary: Gray (`#868685`)\n\n### Example Component Prompts\n- \"Create hero: white background. Headline at 96px Wise Sans weight 900, line-height 0.85, 'calt' enabled, #0e0f0c text. Green pill CTA (#9fe870, 9999px radius, 5px 16px padding, #163300 text). Hover: scale(1.05).\"\n- \"Build a card: 30px radius, 1px solid rgba(14,15,12,0.12). Title at 22px Inter weight 600, body at 18px weight 400.\"\n\n### Iteration Guide\n1. Wise Sans 900 at 0.85 line-height \u2014 the extreme weight IS the brand\n2. Lime Green for buttons only \u2014 dark green text on green background\n3. Scale animations (1.05 hover, 0.95 active) on all interactive elements\n4. \"calt\" on everything \u2014 contextual alternates are mandatory\n5. Inter 600 for body \u2014 confident reading weight\n";
+
+export { wiseBrief };

package/dist/presets/_briefs/wise.js

@@ -0,0 +1,179 @@
+// src/presets/_briefs/wise.ts
+var wiseBrief = `# Design System Inspired by Wise
+
+## 1. Visual Theme & Atmosphere
+
+Wise's website is a bold, confident fintech platform that communicates "money without borders" through massive typography and a distinctive lime-green accent. The design operates on a warm off-white canvas with near-black text (\`#0e0f0c\`) and a signature Wise Green (\`#9fe870\`) \u2014 a fresh, lime-bright color that feels alive and optimistic, unlike the corporate blues of traditional banking.
+
+The typography uses Wise Sans \u2014 a proprietary font used at extreme weight 900 (black) for display headings with a remarkably tight line-height of 0.85 and OpenType \`"calt"\` (contextual alternates). At 126px, the text is so dense it feels like a protest sign \u2014 bold, urgent, and impossible to ignore. Inter serves as the body font with weight 600 as the default for emphasis, creating a consistently confident voice.
+
+What distinguishes Wise is its green-on-white-on-black material palette. Lime Green (\`#9fe870\`) appears on buttons with dark green text (\`#163300\`), creating a nature-inspired CTA that feels fresh. Hover states use \`scale(1.05)\` expansion rather than color changes \u2014 buttons physically grow on interaction. The border-radius system uses 9999px for buttons (pill), 30px\u201340px for cards, and the shadow system is minimal \u2014 just \`rgba(14,15,12,0.12) 0px 0px 0px 1px\` ring shadows.
+
+**Key Characteristics:**
+- Wise Sans at weight 900, 0.85 line-height \u2014 billboard-scale bold headlines
+- Lime Green (\`#9fe870\`) accent with dark green text (\`#163300\`) \u2014 nature-inspired fintech
+- Inter body at weight 600 as default \u2014 confident, not light
+- Near-black (\`#0e0f0c\`) primary with warm green undertone
+- Scale(1.05) hover animations \u2014 buttons physically grow
+- OpenType \`"calt"\` on all text
+- Pill buttons (9999px) and large rounded cards (30px\u201340px)
+- Semantic color system with comprehensive state management
+
+## 2. Color Palette & Roles
+
+### Primary Brand
+- **Near Black** (\`#0e0f0c\`): Primary text, background for dark sections
+- **Wise Green** (\`#9fe870\`): Primary CTA button, brand accent
+- **Dark Green** (\`#163300\`): Button text on green, deep green accent
+- **Light Mint** (\`#e2f6d5\`): Soft green surface, badge backgrounds
+- **Pastel Green** (\`#cdffad\`): \`--color-interactive-contrast-hover\`, hover accent
+
+### Semantic
+- **Positive Green** (\`#054d28\`): \`--color-sentiment-positive-primary\`, success
+- **Danger Red** (\`#d03238\`): \`--color-interactive-negative-hover\`, error/destructive
+- **Warning Yellow** (\`#ffd11a\`): \`--color-sentiment-warning-hover\`, warnings
+- **Background Cyan** (\`rgba(56,200,255,0.10)\`): \`--color-background-accent\`, info tint
+- **Bright Orange** (\`#ffc091\`): \`--color-bright-orange\`, warm accent
+
+### Neutral
+- **Warm Dark** (\`#454745\`): Secondary text, borders
+- **Gray** (\`#868685\`): Muted text, tertiary
+- **Light Surface** (\`#e8ebe6\`): Subtle green-tinted light surface
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: \`Wise Sans\`, fallback: \`Inter\` \u2014 OpenType \`"calt"\` on all text
+- **Body / UI**: \`Inter\`, fallbacks: \`Helvetica, Arial\`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Mega | Wise Sans | 126px (7.88rem) | 900 | 0.85 (ultra-tight) | normal | \`"calt"\` |
+| Display Hero | Wise Sans | 96px (6.00rem) | 900 | 0.85 | normal | \`"calt"\` |
+| Section Heading | Wise Sans | 64px (4.00rem) | 900 | 0.85 | normal | \`"calt"\` |
+| Sub-heading | Wise Sans | 40px (2.50rem) | 900 | 0.85 | normal | \`"calt"\` |
+| Alt Heading | Inter | 78px (4.88rem) | 600 | 1.10 (tight) | -2.34px | \`"calt"\` |
+| Card Title | Inter | 26px (1.62rem) | 600 | 1.23 (tight) | -0.39px | \`"calt"\` |
+| Feature Title | Inter | 22px (1.38rem) | 600 | 1.25 (tight) | -0.396px | \`"calt"\` |
+| Body | Inter | 18px (1.13rem) | 400 | 1.44 | 0.18px | \`"calt"\` |
+| Body Semibold | Inter | 18px (1.13rem) | 600 | 1.44 | -0.108px | \`"calt"\` |
+| Button | Inter | 18px\u201322px | 600 | 1.00\u20131.44 | -0.108px | \`"calt"\` |
+| Caption | Inter | 14px (0.88rem) | 400\u2013600 | 1.50\u20131.86 | -0.084px to -0.108px | \`"calt"\` |
+| Small | Inter | 12px (0.75rem) | 400\u2013600 | 1.00\u20132.17 | -0.084px to -0.108px | \`"calt"\` |
+
+### Principles
+- **Weight 900 as identity**: Wise Sans Black (900) is used exclusively for display \u2014 the heaviest weight in any analyzed system. It creates text that feels stamped, pressed, physical.
+- **0.85 line-height**: The tightest display line-height analyzed. Letters overlap vertically, creating dense, billboard-like text blocks.
+- **"calt" everywhere**: Contextual alternates enabled on ALL text \u2014 both Wise Sans and Inter.
+- **Weight 600 as body default**: Inter Semibold is the standard reading weight \u2014 confident, not light.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Green Pill**
+- Background: \`#9fe870\` (Wise Green)
+- Text: \`#163300\` (Dark Green)
+- Padding: 5px 16px
+- Radius: 9999px
+- Hover: scale(1.05) \u2014 button physically grows
+- Active: scale(0.95) \u2014 button compresses
+- Focus: inset ring + outline
+
+**Secondary Subtle Pill**
+- Background: \`rgba(22, 51, 0, 0.08)\` (dark green at 8% opacity)
+- Text: \`#0e0f0c\`
+- Padding: 8px 12px 8px 16px
+- Radius: 9999px
+- Same scale hover/active behavior
+
+### Cards & Containers
+- Radius: 16px (small), 30px (medium), 40px (large cards/tables)
+- Border: \`1px solid rgba(14,15,12,0.12)\` or \`1px solid #9fe870\` (green accent)
+- Shadow: \`rgba(14,15,12,0.12) 0px 0px 0px 1px\` (ring shadow)
+
+### Navigation
+- Green-tinted navigation hover: \`rgba(211,242,192,0.4)\`
+- Clean header with Wise wordmark
+- Pill CTAs right-aligned
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 2px, 3px, 4px, 5px, 8px, 10px, 11px, 12px, 16px, 18px, 19px, 20px, 22px, 24px
+
+### Border Radius Scale
+- Minimal (2px): Links, inputs
+- Standard (10px): Comboboxes, inputs
+- Card (16px): Small cards, buttons, radio
+- Medium (20px): Links, medium cards
+- Large (30px): Feature cards
+- Section (40px): Tables, large cards
+- Mega (1000px): Presentation elements
+- Pill (9999px): All buttons, images
+- Circle (50%): Icons, badges
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Default |
+| Ring (Level 1) | \`rgba(14,15,12,0.12) 0px 0px 0px 1px\` | Card borders |
+| Inset (Level 2) | \`rgb(134,134,133) 0px 0px 0px 1px inset\` | Input focus |
+
+**Shadow Philosophy**: Wise uses minimal shadows \u2014 ring shadows only. Depth comes from the bold green accent against the neutral canvas.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Wise Sans weight 900 for display \u2014 the extreme boldness IS the brand
+- Apply line-height 0.85 on Wise Sans display \u2014 ultra-tight is intentional
+- Use Lime Green (#9fe870) for primary CTAs with Dark Green (#163300) text
+- Apply scale(1.05) hover and scale(0.95) active on buttons
+- Enable "calt" on all text
+- Use Inter weight 600 as the body default
+
+### Don't
+- Don't use light font weights for Wise Sans \u2014 only 900
+- Don't relax the 0.85 line-height on display \u2014 the density is the identity
+- Don't use the Wise Green as background for large surfaces \u2014 it's for buttons and accents
+- Don't skip the scale animation on buttons
+- Don't use traditional shadows \u2014 ring shadows only
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <576px | Single column |
+| Tablet | 576\u2013992px | 2-column |
+| Desktop | 992\u20131440px | Full layout |
+| Large | >1440px | Expanded |
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Text: Near Black (\`#0e0f0c\`)
+- Background: White (\`#ffffff\` / off-white)
+- Accent: Wise Green (\`#9fe870\`)
+- Button text: Dark Green (\`#163300\`)
+- Secondary: Gray (\`#868685\`)
+
+### Example Component Prompts
+- "Create hero: white background. Headline at 96px Wise Sans weight 900, line-height 0.85, 'calt' enabled, #0e0f0c text. Green pill CTA (#9fe870, 9999px radius, 5px 16px padding, #163300 text). Hover: scale(1.05)."
+- "Build a card: 30px radius, 1px solid rgba(14,15,12,0.12). Title at 22px Inter weight 600, body at 18px weight 400."
+
+### Iteration Guide
+1. Wise Sans 900 at 0.85 line-height \u2014 the extreme weight IS the brand
+2. Lime Green for buttons only \u2014 dark green text on green background
+3. Scale animations (1.05 hover, 0.95 active) on all interactive elements
+4. "calt" on everything \u2014 contextual alternates are mandatory
+5. Inter 600 for body \u2014 confident reading weight
+`;
+export {
+  wiseBrief
+};
+//# sourceMappingURL=wise.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/wise.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const wiseBrief = `# Design System Inspired by Wise\n\n## 1. Visual Theme & Atmosphere\n\nWise's website is a bold, confident fintech platform that communicates \"money without borders\" through massive typography and a distinctive lime-green accent. The design operates on a warm off-white canvas with near-black text (\\`#0e0f0c\\`) and a signature Wise Green (\\`#9fe870\\`) — a fresh, lime-bright color that feels alive and optimistic, unlike the corporate blues of traditional banking.\n\nThe typography uses Wise Sans — a proprietary font used at extreme weight 900 (black) for display headings with a remarkably tight line-height of 0.85 and OpenType \\`\"calt\"\\` (contextual alternates). At 126px, the text is so dense it feels like a protest sign — bold, urgent, and impossible to ignore. Inter serves as the body font with weight 600 as the default for emphasis, creating a consistently confident voice.\n\nWhat distinguishes Wise is its green-on-white-on-black material palette. Lime Green (\\`#9fe870\\`) appears on buttons with dark green text (\\`#163300\\`), creating a nature-inspired CTA that feels fresh. Hover states use \\`scale(1.05)\\` expansion rather than color changes — buttons physically grow on interaction. The border-radius system uses 9999px for buttons (pill), 30px–40px for cards, and the shadow system is minimal — just \\`rgba(14,15,12,0.12) 0px 0px 0px 1px\\` ring shadows.\n\n**Key Characteristics:**\n- Wise Sans at weight 900, 0.85 line-height — billboard-scale bold headlines\n- Lime Green (\\`#9fe870\\`) accent with dark green text (\\`#163300\\`) — nature-inspired fintech\n- Inter body at weight 600 as default — confident, not light\n- Near-black (\\`#0e0f0c\\`) primary with warm green undertone\n- Scale(1.05) hover animations — buttons physically grow\n- OpenType \\`\"calt\"\\` on all text\n- Pill buttons (9999px) and large rounded cards (30px–40px)\n- Semantic color system with comprehensive state management\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Near Black** (\\`#0e0f0c\\`): Primary text, background for dark sections\n- **Wise Green** (\\`#9fe870\\`): Primary CTA button, brand accent\n- **Dark Green** (\\`#163300\\`): Button text on green, deep green accent\n- **Light Mint** (\\`#e2f6d5\\`): Soft green surface, badge backgrounds\n- **Pastel Green** (\\`#cdffad\\`): \\`--color-interactive-contrast-hover\\`, hover accent\n\n### Semantic\n- **Positive Green** (\\`#054d28\\`): \\`--color-sentiment-positive-primary\\`, success\n- **Danger Red** (\\`#d03238\\`): \\`--color-interactive-negative-hover\\`, error/destructive\n- **Warning Yellow** (\\`#ffd11a\\`): \\`--color-sentiment-warning-hover\\`, warnings\n- **Background Cyan** (\\`rgba(56,200,255,0.10)\\`): \\`--color-background-accent\\`, info tint\n- **Bright Orange** (\\`#ffc091\\`): \\`--color-bright-orange\\`, warm accent\n\n### Neutral\n- **Warm Dark** (\\`#454745\\`): Secondary text, borders\n- **Gray** (\\`#868685\\`): Muted text, tertiary\n- **Light Surface** (\\`#e8ebe6\\`): Subtle green-tinted light surface\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: \\`Wise Sans\\`, fallback: \\`Inter\\` — OpenType \\`\"calt\"\\` on all text\n- **Body / UI**: \\`Inter\\`, fallbacks: \\`Helvetica, Arial\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Mega | Wise Sans | 126px (7.88rem) | 900 | 0.85 (ultra-tight) | normal | \\`\"calt\"\\` |\n| Display Hero | Wise Sans | 96px (6.00rem) | 900 | 0.85 | normal | \\`\"calt\"\\` |\n| Section Heading | Wise Sans | 64px (4.00rem) | 900 | 0.85 | normal | \\`\"calt\"\\` |\n| Sub-heading | Wise Sans | 40px (2.50rem) | 900 | 0.85 | normal | \\`\"calt\"\\` |\n| Alt Heading | Inter | 78px (4.88rem) | 600 | 1.10 (tight) | -2.34px | \\`\"calt\"\\` |\n| Card Title | Inter | 26px (1.62rem) | 600 | 1.23 (tight) | -0.39px | \\`\"calt\"\\` |\n| Feature Title | Inter | 22px (1.38rem) | 600 | 1.25 (tight) | -0.396px | \\`\"calt\"\\` |\n| Body | Inter | 18px (1.13rem) | 400 | 1.44 | 0.18px | \\`\"calt\"\\` |\n| Body Semibold | Inter | 18px (1.13rem) | 600 | 1.44 | -0.108px | \\`\"calt\"\\` |\n| Button | Inter | 18px–22px | 600 | 1.00–1.44 | -0.108px | \\`\"calt\"\\` |\n| Caption | Inter | 14px (0.88rem) | 400–600 | 1.50–1.86 | -0.084px to -0.108px | \\`\"calt\"\\` |\n| Small | Inter | 12px (0.75rem) | 400–600 | 1.00–2.17 | -0.084px to -0.108px | \\`\"calt\"\\` |\n\n### Principles\n- **Weight 900 as identity**: Wise Sans Black (900) is used exclusively for display — the heaviest weight in any analyzed system. It creates text that feels stamped, pressed, physical.\n- **0.85 line-height**: The tightest display line-height analyzed. Letters overlap vertically, creating dense, billboard-like text blocks.\n- **\"calt\" everywhere**: Contextual alternates enabled on ALL text — both Wise Sans and Inter.\n- **Weight 600 as body default**: Inter Semibold is the standard reading weight — confident, not light.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Green Pill**\n- Background: \\`#9fe870\\` (Wise Green)\n- Text: \\`#163300\\` (Dark Green)\n- Padding: 5px 16px\n- Radius: 9999px\n- Hover: scale(1.05) — button physically grows\n- Active: scale(0.95) — button compresses\n- Focus: inset ring + outline\n\n**Secondary Subtle Pill**\n- Background: \\`rgba(22, 51, 0, 0.08)\\` (dark green at 8% opacity)\n- Text: \\`#0e0f0c\\`\n- Padding: 8px 12px 8px 16px\n- Radius: 9999px\n- Same scale hover/active behavior\n\n### Cards & Containers\n- Radius: 16px (small), 30px (medium), 40px (large cards/tables)\n- Border: \\`1px solid rgba(14,15,12,0.12)\\` or \\`1px solid #9fe870\\` (green accent)\n- Shadow: \\`rgba(14,15,12,0.12) 0px 0px 0px 1px\\` (ring shadow)\n\n### Navigation\n- Green-tinted navigation hover: \\`rgba(211,242,192,0.4)\\`\n- Clean header with Wise wordmark\n- Pill CTAs right-aligned\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 3px, 4px, 5px, 8px, 10px, 11px, 12px, 16px, 18px, 19px, 20px, 22px, 24px\n\n### Border Radius Scale\n- Minimal (2px): Links, inputs\n- Standard (10px): Comboboxes, inputs\n- Card (16px): Small cards, buttons, radio\n- Medium (20px): Links, medium cards\n- Large (30px): Feature cards\n- Section (40px): Tables, large cards\n- Mega (1000px): Presentation elements\n- Pill (9999px): All buttons, images\n- Circle (50%): Icons, badges\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default |\n| Ring (Level 1) | \\`rgba(14,15,12,0.12) 0px 0px 0px 1px\\` | Card borders |\n| Inset (Level 2) | \\`rgb(134,134,133) 0px 0px 0px 1px inset\\` | Input focus |\n\n**Shadow Philosophy**: Wise uses minimal shadows — ring shadows only. Depth comes from the bold green accent against the neutral canvas.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Wise Sans weight 900 for display — the extreme boldness IS the brand\n- Apply line-height 0.85 on Wise Sans display — ultra-tight is intentional\n- Use Lime Green (#9fe870) for primary CTAs with Dark Green (#163300) text\n- Apply scale(1.05) hover and scale(0.95) active on buttons\n- Enable \"calt\" on all text\n- Use Inter weight 600 as the body default\n\n### Don't\n- Don't use light font weights for Wise Sans — only 900\n- Don't relax the 0.85 line-height on display — the density is the identity\n- Don't use the Wise Green as background for large surfaces — it's for buttons and accents\n- Don't skip the scale animation on buttons\n- Don't use traditional shadows — ring shadows only\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <576px | Single column |\n| Tablet | 576–992px | 2-column |\n| Desktop | 992–1440px | Full layout |\n| Large | >1440px | Expanded |\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Text: Near Black (\\`#0e0f0c\\`)\n- Background: White (\\`#ffffff\\` / off-white)\n- Accent: Wise Green (\\`#9fe870\\`)\n- Button text: Dark Green (\\`#163300\\`)\n- Secondary: Gray (\\`#868685\\`)\n\n### Example Component Prompts\n- \"Create hero: white background. Headline at 96px Wise Sans weight 900, line-height 0.85, 'calt' enabled, #0e0f0c text. Green pill CTA (#9fe870, 9999px radius, 5px 16px padding, #163300 text). Hover: scale(1.05).\"\n- \"Build a card: 30px radius, 1px solid rgba(14,15,12,0.12). Title at 22px Inter weight 600, body at 18px weight 400.\"\n\n### Iteration Guide\n1. Wise Sans 900 at 0.85 line-height — the extreme weight IS the brand\n2. Lime Green for buttons only — dark green text on green background\n3. Scale animations (1.05 hover, 0.95 active) on all interactive elements\n4. \"calt\" on everything — contextual alternates are mandatory\n5. Inter 600 for body — confident reading weight\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;","names":[]}

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

@@ -0,0 +1,3 @@
+declare const xBrief = "# Design System Inspired by xAI\n\n## 1. Visual Theme & Atmosphere\n\nxAI's website is a masterclass in dark-first, monospace-driven brutalist minimalism -- a design system that feels like it was built by engineers who understand that restraint is the ultimate form of sophistication. The entire experience is anchored to an almost-black background (`#1f2228`) with pure white text (`#ffffff`), creating a high-contrast, terminal-inspired aesthetic that signals deep technical credibility. There are no gradients, no decorative illustrations, no color accents competing for attention. This is a site that communicates through absence.\n\nThe typographic system is split between two carefully chosen typefaces. `GeistMono` (Vercel's monospace font) handles display-level headlines at an extraordinary 320px with weight 300, and also serves as the button typeface in uppercase with tracked-out letter-spacing (1.4px). `universalSans` handles all body and secondary heading text with a clean, geometric sans-serif voice. The monospace-as-display-font choice is the defining aesthetic decision -- it positions xAI not as a consumer product but as infrastructure, as something built by people who live in terminals.\n\nThe spacing system operates on an 8px base grid with values concentrated at the small end (4px, 8px, 24px, 48px), reflecting a dense, information-focused layout philosophy. Border radius is minimal -- the site barely rounds anything, maintaining sharp, architectural edges. There are no decorative shadows, no gradients, no layered elevation. Depth is communicated purely through contrast and whitespace.\n\n**Key Characteristics:**\n- Pure dark theme: `#1f2228` background with `#ffffff` text -- no gray middle ground\n- GeistMono at extreme display sizes (320px, weight 300) -- monospace as luxury\n- Uppercase monospace buttons with 1.4px letter-spacing -- technical, commanding\n- universalSans for body text at 16px/1.5 and headings at 30px/1.2 -- clean contrast\n- Zero decorative elements: no shadows, no gradients, no colored accents\n- 8px spacing grid with a sparse, deliberate scale\n- Heroicons SVG icon system -- minimal, functional\n- Tailwind CSS with arbitrary values -- utility-first engineering approach\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure White** (`#ffffff`): The singular text color, link color, and all foreground elements. In xAI's system, white is not a background -- it is the voice.\n- **Dark Background** (`#1f2228`): The canvas. A warm near-black with a subtle blue undertone (not pure black, not neutral gray). This specific hue prevents the harsh eye strain of `#000000` while maintaining deep darkness.\n\n### Interactive\n- **White Default** (`#ffffff`): Link and interactive element color in default state.\n- **White Muted** (`rgba(255, 255, 255, 0.5)`): Hover state for links -- a deliberate dimming rather than brightening, which is unusual and distinctive.\n- **White Subtle** (`rgba(255, 255, 255, 0.2)`): Borders, dividers, and subtle surface treatments.\n- **Ring Blue** (`rgb(59, 130, 246) / 0.5`): Tailwind's default focus ring color (`--tw-ring-color`), used for keyboard accessibility focus states.\n\n### Surface & Borders\n- **Surface Elevated** (`rgba(255, 255, 255, 0.05)`): Subtle card backgrounds and hover surfaces -- barely visible lift.\n- **Surface Hover** (`rgba(255, 255, 255, 0.08)`): Slightly more visible hover state for interactive containers.\n- **Border Default** (`rgba(255, 255, 255, 0.1)`): Standard border for cards, dividers, and containers.\n- **Border Strong** (`rgba(255, 255, 255, 0.2)`): Emphasized borders for active states and button outlines.\n\n### Functional\n- **Text Primary** (`#ffffff`): All headings, body text, labels.\n- **Text Secondary** (`rgba(255, 255, 255, 0.7)`): Descriptions, captions, supporting text.\n- **Text Tertiary** (`rgba(255, 255, 255, 0.5)`): Muted labels, placeholder text, timestamps.\n- **Text Quaternary** (`rgba(255, 255, 255, 0.3)`): Disabled text, very subtle annotations.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display / Buttons**: `GeistMono`, with fallback: `ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New`\n- **Body / Headings**: `universalSans`, with fallback: `universalSans Fallback`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Transform | Notes |\n|------|------|------|--------|-------------|----------------|-----------|-------|\n| Display Hero | GeistMono | 320px (20rem) | 300 | 1.50 | normal | none | Extreme scale, monospace luxury |\n| Section Heading | universalSans | 30px (1.88rem) | 400 | 1.20 (tight) | normal | none | Clean sans-serif contrast |\n| Body | universalSans | 16px (1rem) | 400 | 1.50 | normal | none | Standard reading text |\n| Button | GeistMono | 14px (0.88rem) | 400 | 1.43 | 1.4px | uppercase | Tracked monospace, commanding |\n| Label / Caption | universalSans | 14px (0.88rem) | 400 | 1.50 | normal | none | Supporting text |\n| Small / Meta | universalSans | 12px (0.75rem) | 400 | 1.50 | normal | none | Timestamps, footnotes |\n\n### Principles\n- **Monospace as display**: GeistMono at 320px is not a gimmick -- it is the brand statement. The fixed-width characters at extreme scale create a rhythmic, architectural quality that no proportional font can achieve.\n- **Light weight at scale**: Weight 300 for the 320px headline prevents the monospace from feeling heavy or brutish at extreme sizes. It reads as precise, not overwhelming.\n- **Uppercase buttons**: All button text is uppercase GeistMono with 1.4px letter-spacing. This creates a distinctly technical, almost command-line aesthetic for interactive elements.\n- **Sans-serif for reading**: universalSans at 16px/1.5 provides excellent readability for body content, creating a clean contrast against the monospace display elements.\n- **Two-font clarity**: The system uses exactly two typefaces with clear roles -- monospace for impact and interaction, sans-serif for information and reading. No overlap, no ambiguity.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (White on Dark)**\n- Background: `#ffffff`\n- Text: `#1f2228`\n- Padding: 12px 24px\n- Radius: 0px (sharp corners)\n- Font: GeistMono 14px weight 400, uppercase, letter-spacing 1.4px\n- Hover: `rgba(255, 255, 255, 0.9)` background\n- Use: Primary CTA (\"TRY GROK\", \"GET STARTED\")\n\n**Ghost / Outlined**\n- Background: transparent\n- Text: `#ffffff`\n- Padding: 12px 24px\n- Radius: 0px\n- Border: `1px solid rgba(255, 255, 255, 0.2)`\n- Font: GeistMono 14px weight 400, uppercase, letter-spacing 1.4px\n- Hover: `rgba(255, 255, 255, 0.05)` background\n- Use: Secondary actions (\"LEARN MORE\", \"VIEW API\")\n\n**Text Link**\n- Background: none\n- Text: `#ffffff`\n- Font: universalSans 16px weight 400\n- Hover: `rgba(255, 255, 255, 0.5)` -- dims on hover\n- Use: Inline links, navigation items\n\n### Cards & Containers\n- Background: `rgba(255, 255, 255, 0.03)` or transparent\n- Border: `1px solid rgba(255, 255, 255, 0.1)`\n- Radius: 0px (sharp) or 4px (subtle)\n- Shadow: none -- xAI does not use box shadows\n- Hover: border shifts to `rgba(255, 255, 255, 0.2)`\n\n### Navigation\n- Dark background matching page (`#1f2228`)\n- Brand logotype: white text, left-aligned\n- Links: universalSans 14px weight 400, `#ffffff` text\n- Hover: `rgba(255, 255, 255, 0.5)` text color\n- CTA: white primary button, right-aligned\n- Mobile: hamburger toggle\n\n### Badges / Tags\n**Monospace Tag**\n- Background: transparent\n- Text: `#ffffff`\n- Padding: 4px 8px\n- Border: `1px solid rgba(255, 255, 255, 0.2)`\n- Radius: 0px\n- Font: GeistMono 12px uppercase, letter-spacing 1px\n\n### Inputs & Forms\n- Background: transparent or `rgba(255, 255, 255, 0.05)`\n- Border: `1px solid rgba(255, 255, 255, 0.2)`\n- Radius: 0px\n- Focus: ring with `rgb(59, 130, 246) / 0.5`\n- Text: `#ffffff`\n- Placeholder: `rgba(255, 255, 255, 0.3)`\n- Label: `rgba(255, 255, 255, 0.7)`, universalSans 14px\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 8px, 24px, 48px\n- The scale is deliberately sparse -- xAI avoids granular spacing distinctions, preferring large jumps that create clear visual hierarchy through whitespace alone\n\n### Grid & Container\n- Max content width: approximately 1200px\n- Hero: full-viewport height with massive centered monospace headline\n- Feature sections: simple vertical stacking with generous section padding (48px-96px)\n- Two-column layouts for feature descriptions at desktop\n- Full-width dark sections maintain the single dark background throughout\n\n### Whitespace Philosophy\n- **Extreme generosity**: xAI uses vast amounts of whitespace. The 320px headline with 48px+ surrounding padding creates a sense of emptiness that is itself a design statement -- the content is so important it needs room to breathe.\n- **Vertical rhythm over horizontal density**: Content stacks vertically with large gaps between sections rather than packing horizontally. This creates a scroll-driven experience that feels deliberate and cinematic.\n- **No visual noise**: The absence of decorative elements, borders between sections, and color variety means whitespace is the primary structural tool.\n\n### Breakpoints\n- 2000px, 1536px, 1280px, 1024px, 1000px, 768px, 640px\n- Tailwind responsive modifiers drive breakpoint behavior\n\n### Border Radius Scale\n- Sharp (0px): Primary treatment for buttons, cards, inputs -- the default\n- Subtle (4px): Occasional softening on secondary containers\n- The near-zero radius philosophy is core to the brand's brutalist identity\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Page background, body content |\n| Surface (Level 1) | `rgba(255,255,255,0.03)` background | Subtle card surfaces |\n| Bordered (Level 2) | `1px solid rgba(255,255,255,0.1)` border | Cards, containers, dividers |\n| Active (Level 3) | `1px solid rgba(255,255,255,0.2)` border | Hover states, active elements |\n| Focus (Accessibility) | `ring` with `rgb(59,130,246)/0.5` | Keyboard focus indicator |\n\n**Elevation Philosophy**: xAI rejects the conventional shadow-based elevation system entirely. There are no box-shadows anywhere on the site. Instead, depth is communicated through three mechanisms: (1) opacity-based borders that brighten on interaction, creating a sense of elements \"activating\" rather than lifting; (2) extremely subtle background opacity shifts (`0.03` to `0.08`) that create barely-perceptible surface differentiation; and (3) the massive scale contrast between the 320px display type and 16px body text, which creates typographic depth. This is elevation through contrast and opacity, not through simulated light and shadow.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use `#1f2228` as the universal background -- never pure black `#000000`\n- Use GeistMono for all display headlines and button text -- monospace IS the brand\n- Apply uppercase + 1.4px letter-spacing to all button labels\n- Use weight 300 for the massive display headline (320px)\n- Keep borders at `rgba(255, 255, 255, 0.1)` -- barely visible, not absent\n- Dim interactive elements on hover to `rgba(255, 255, 255, 0.5)` -- the reverse of convention\n- Maintain sharp corners (0px radius) as the default -- brutalist precision\n- Use universalSans for all body and reading text at 16px/1.5\n\n### Don't\n- Don't use box-shadows -- xAI has zero shadow elevation\n- Don't introduce color accents beyond white and the dark background -- the monochromatic palette is sacred\n- Don't use large border-radius (8px+, pill shapes) -- the sharp edge is intentional\n- Don't use bold weights (600-700) for headlines -- weight 300-400 only\n- Don't brighten elements on hover -- xAI dims to `0.5` opacity instead\n- Don't add decorative gradients, illustrations, or color blocks\n- Don't use proportional fonts for buttons -- GeistMono uppercase is mandatory\n- Don't use colored status indicators unless absolutely necessary -- keep everything in the white/dark spectrum\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <640px | Single column, hero headline scales dramatically down |\n| Small Tablet | 640-768px | Slight increase in padding |\n| Tablet | 768-1024px | Two-column layouts begin, heading sizes increase |\n| Desktop | 1024-1280px | Full layout, generous whitespace |\n| Large | 1280-1536px | Wider containers, more breathing room |\n| Extra Large | 1536-2000px | Maximum content width, centered |\n| Ultra | >2000px | Content stays centered, extreme margins |\n\n### Touch Targets\n- Buttons use 12px 24px padding for comfortable touch\n- Navigation links spaced with 24px gaps\n- Minimum tap target: 44px height\n- Mobile: full-width buttons for easy thumb reach\n\n### Collapsing Strategy\n- Hero: 320px monospace headline scales down dramatically (to ~48px-64px on mobile)\n- Navigation: horizontal links collapse to hamburger menu\n- Feature sections: two-column to single-column stacking\n- Section padding: 96px -> 48px -> 24px across breakpoints\n- Massive display type is the first thing to resize -- it must remain impactful but not overflow\n\n### Image Behavior\n- Minimal imagery -- the site relies on typography and whitespace\n- Any product screenshots maintain sharp corners\n- Full-width media scales proportionally with viewport\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Dark (`#1f2228`)\n- Text Primary: White (`#ffffff`)\n- Text Secondary: White 70% (`rgba(255, 255, 255, 0.7)`)\n- Text Muted: White 50% (`rgba(255, 255, 255, 0.5)`)\n- Text Disabled: White 30% (`rgba(255, 255, 255, 0.3)`)\n- Border Default: White 10% (`rgba(255, 255, 255, 0.1)`)\n- Border Strong: White 20% (`rgba(255, 255, 255, 0.2)`)\n- Surface Subtle: White 3% (`rgba(255, 255, 255, 0.03)`)\n- Surface Hover: White 8% (`rgba(255, 255, 255, 0.08)`)\n- Focus Ring: Blue (`rgb(59, 130, 246)` at 50% opacity)\n- Button Primary BG: White (`#ffffff`), text Dark (`#1f2228`)\n\n### Example Component Prompts\n- \"Create a hero section on #1f2228 background. Headline in GeistMono at 72px weight 300, color #ffffff, centered. Subtitle in universalSans 18px weight 400, rgba(255,255,255,0.7), max-width 600px centered. Two buttons: primary (white bg, #1f2228 text, 0px radius, GeistMono 14px uppercase, 1.4px letter-spacing, 12px 24px padding) and ghost (transparent bg, 1px solid rgba(255,255,255,0.2), white text, same font treatment).\"\n- \"Design a card: transparent or rgba(255,255,255,0.03) background, 1px solid rgba(255,255,255,0.1) border, 0px radius, 24px padding. No shadow. Title in universalSans 22px weight 400, #ffffff. Body in universalSans 16px weight 400, rgba(255,255,255,0.7), line-height 1.5. Hover: border changes to rgba(255,255,255,0.2).\"\n- \"Build navigation: #1f2228 background, full-width. Brand text left (GeistMono 14px uppercase). Links in universalSans 14px #ffffff with hover to rgba(255,255,255,0.5). White primary button right-aligned (GeistMono 14px uppercase, 1.4px letter-spacing).\"\n- \"Create a form: dark background #1f2228. Label in universalSans 14px rgba(255,255,255,0.7). Input with transparent bg, 1px solid rgba(255,255,255,0.2) border, 0px radius, white text 16px universalSans. Focus: blue ring rgb(59,130,246)/0.5. Placeholder: rgba(255,255,255,0.3).\"\n- \"Design a monospace tag/badge: transparent bg, 1px solid rgba(255,255,255,0.2), 0px radius, GeistMono 12px uppercase, 1px letter-spacing, white text, 4px 8px padding.\"\n\n### Iteration Guide\n1. Always start with `#1f2228` background -- never use pure black or gray backgrounds\n2. GeistMono for display and buttons, universalSans for everything else -- never mix these roles\n3. All buttons must be GeistMono uppercase with 1.4px letter-spacing -- this is non-negotiable\n4. No shadows, ever -- depth comes from border opacity and background opacity only\n5. Borders are always white with low opacity (0.1 default, 0.2 for emphasis)\n6. Hover behavior dims to 0.5 opacity rather than brightening -- the reverse of most systems\n7. Sharp corners (0px) by default -- only use 4px for specific secondary containers\n8. Body text at 16px universalSans with 1.5 line-height for comfortable reading\n9. Generous section padding (48px-96px) -- let content breathe in the darkness\n10. The monochromatic white-on-dark palette is absolute -- resist adding color unless critical for function\n";
+
+export { xBrief };