@hex-core/themes 0.2.3 → 0.2.6

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/sanity.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const sanityBrief = `# Design System Inspired by Sanity\n\n## 1. Visual Theme & Atmosphere\n\nSanity's website is a developer-content platform rendered as a nocturnal command center -- dark, precise, and deeply structured. The entire experience sits on a near-black canvas (\\`#0b0b0b\\`) that reads less like a \"dark mode toggle\" and more like the natural state of a tool built for people who live in terminals. Where most CMS marketing pages reach for friendly pastels and soft illustration, Sanity leans into the gravity of its own product: structured content deserves a structured stage.\n\nThe signature typographic voice is waldenburgNormal -- a distinctive, slightly geometric sans-serif with tight negative letter-spacing (-0.32px to -4.48px at display sizes) that gives headlines a compressed, engineered quality. At 112px hero scale with -4.48px tracking, the type feels almost machined -- like precision-cut steel letterforms. This is paired with IBM Plex Mono for code and technical labels, creating a dual-register voice: editorial authority meets developer credibility.\n\nWhat makes Sanity distinctive is the interplay between its monochromatic dark palette and vivid, saturated accent punctuation. The neutral scale runs from pure black through a tightly controlled gray ramp (\\`#0b0b0b\\` -> \\`#212121\\` -> \\`#353535\\` -> \\`#797979\\` -> \\`#b9b9b9\\` -> \\`#ededed\\` -> \\`#ffffff\\`) with no warm or cool bias -- just pure, achromatic precision. Against this disciplined backdrop, a neon green accent (display-p3 green) and electric blue (\\`#0052ef\\`) land with the impact of signal lights in a dark control room. The orange-red CTA (\\`#f36458\\`) provides the only warm touch in an otherwise cool system.\n\n**Key Characteristics:**\n- Near-black canvas (\\`#0b0b0b\\`) as the default, natural environment -- not a dark \"mode\" but the primary identity\n- waldenburgNormal with extreme negative tracking at display sizes, creating a precision-engineered typographic voice\n- Pure achromatic gray scale -- no warm or cool undertones, pure neutral discipline\n- Vivid accent punctuation: neon green, electric blue (\\`#0052ef\\`), and coral-red (\\`#f36458\\`) against the dark field\n- Pill-shaped primary buttons (99999px radius) contrasting with subtle rounded rectangles (3-6px) for secondary actions\n- IBM Plex Mono as the technical counterweight to the editorial display face\n- Full-bleed dark sections with content contained in measured max-width containers\n- Hover states that shift to electric blue (\\`#0052ef\\`) across all interactive elements -- a consistent \"activation\" signal\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Sanity Black** (\\`#0b0b0b\\`): The primary canvas and dominant surface color. Not pure black but close enough to feel absolute. The foundation of the entire visual identity.\n- **Pure Black** (\\`#000000\\`): Used for maximum-contrast moments, deep overlays, and certain border accents.\n- **Sanity Red** (\\`#f36458\\`): The primary CTA and brand accent -- a warm coral-red that serves as the main call-to-action color. Used for \"Get Started\" buttons and primary conversion points.\n\n### Accent & Interactive\n- **Electric Blue** (\\`#0052ef\\`): The universal hover/active state color across the entire system. Buttons, links, and interactive elements all shift to this blue on hover. Also used as \\`--color-blue-700\\` for focus rings and active states.\n- **Light Blue** (\\`#55beff\\` / \\`#afe3ff\\`): Secondary blue variants used for accent backgrounds, badges, and dimmed blue surfaces.\n- **Neon Green** (\\`color(display-p3 .270588 1 0)\\`): A vivid, wide-gamut green used as \\`--color-fg-accent-green\\` for success states and premium feature highlights. Falls back to \\`#19d600\\` in sRGB.\n- **Accent Magenta** (\\`color(display-p3 .960784 0 1)\\`): A vivid wide-gamut magenta for specialized accent moments.\n\n### Surface & Background\n- **Near Black** (\\`#0b0b0b\\`): Default page background and primary surface.\n- **Dark Gray** (\\`#212121\\`): Elevated surface color for cards, secondary containers, input backgrounds, and subtle layering above the base canvas.\n- **Medium Dark** (\\`#353535\\`): Tertiary surface and border color for creating depth between dark layers.\n- **Pure White** (\\`#ffffff\\`): Used for inverted sections, light-on-dark text, and specific button surfaces.\n- **Light Gray** (\\`#ededed\\`): Light surface for inverted/light sections and subtle background tints.\n\n### Neutrals & Text\n- **White** (\\`#ffffff\\`): Primary text color on dark surfaces, maximum legibility.\n- **Silver** (\\`#b9b9b9\\`): Secondary text, body copy on dark surfaces, muted descriptions, and placeholder text.\n- **Medium Gray** (\\`#797979\\`): Tertiary text, metadata, timestamps, and de-emphasized content.\n- **Charcoal** (\\`#212121\\`): Text on light/inverted surfaces.\n- **Near Black Text** (\\`#0b0b0b\\`): Primary text on white/light button surfaces.\n\n### Semantic\n- **Error Red** (\\`#dd0000\\`): Destructive actions, validation errors, and critical warnings -- a pure, high-saturation red.\n- **GPC Green** (\\`#37cd84\\`): Privacy/compliance indicator green.\n- **Focus Ring Blue** (\\`#0052ef\\`): Focus ring color for accessibility, matching the interactive blue.\n\n### Border System\n- **Dark Border** (\\`#0b0b0b\\`): Primary border on dark containers -- barely visible, maintaining minimal containment.\n- **Subtle Border** (\\`#212121\\`): Standard border for inputs, textareas, and card edges on dark surfaces.\n- **Medium Border** (\\`#353535\\`): More visible borders for emphasized containment and dividers.\n- **Light Border** (\\`#ffffff\\`): Border on inverted/light elements or buttons needing contrast separation.\n- **Orange Border** (\\`color(display-p3 1 0.3333 0)\\`): Special accent border for highlighted/featured elements.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display / Headline**: \\`waldenburgNormal\\`, fallback: \\`waldenburgNormal Fallback, ui-sans-serif, system-ui\\`\n- **Body / UI**: \\`waldenburgNormal\\`, fallback: \\`waldenburgNormal Fallback, ui-sans-serif, system-ui\\`\n- **Code / Technical**: \\`IBM Plex Mono\\`, fallback: \\`ibmPlexMono Fallback, ui-monospace\\`\n- **Fallback / CJK**: \\`Helvetica\\`, fallback: \\`Arial, Hiragino Sans GB, STXihei, Microsoft YaHei, WenQuanYi Micro Hei\\`\n\n*Note: waldenburgNormal is a custom typeface. For external implementations, use Inter or Space Grotesk as the sans substitute (geometric, slightly condensed feel). IBM Plex Mono is available on Google Fonts.*\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display / Hero | waldenburgNormal | 112px (7rem) | 400 | 1.00 (tight) | -4.48px | Maximum impact, compressed tracking |\n| Hero Secondary | waldenburgNormal | 72px (4.5rem) | 400 | 1.05 (tight) | -2.88px | Large section headers |\n| Section Heading | waldenburgNormal | 48px (3rem) | 400 | 1.08 (tight) | -1.68px | Primary section anchors |\n| Heading Large | waldenburgNormal | 38px (2.38rem) | 400 | 1.10 (tight) | -1.14px | Feature section titles |\n| Heading Medium | waldenburgNormal | 32px (2rem) | 425 | 1.24 (tight) | -0.32px | Card titles, subsection headers |\n| Heading Small | waldenburgNormal | 24px (1.5rem) | 425 | 1.24 (tight) | -0.24px | Smaller feature headings |\n| Subheading | waldenburgNormal | 20px (1.25rem) | 425 | 1.13 (tight) | -0.2px | Sub-section markers |\n| Body Large | waldenburgNormal | 18px (1.13rem) | 400 | 1.50 | -0.18px | Intro paragraphs, descriptions |\n| Body | waldenburgNormal | 16px (1rem) | 400 | 1.50 | normal | Standard body text |\n| Body Small | waldenburgNormal | 15px (0.94rem) | 400 | 1.50 | -0.15px | Compact body text |\n| Caption | waldenburgNormal | 13px (0.81rem) | 400-500 | 1.30-1.50 | -0.13px | Metadata, descriptions, tags |\n| Small Caption | waldenburgNormal | 12px (0.75rem) | 400 | 1.50 | -0.12px | Footnotes, timestamps |\n| Micro / Label | waldenburgNormal | 11px (0.69rem) | 500-600 | 1.00-1.50 | normal | Uppercase labels, tiny badges |\n| Code Body | IBM Plex Mono | 15px (0.94rem) | 400 | 1.50 | normal | Code blocks, technical content |\n| Code Caption | IBM Plex Mono | 13px (0.81rem) | 400-500 | 1.30-1.50 | normal | Inline code, small technical labels |\n| Code Micro | IBM Plex Mono | 10-12px | 400 | 1.30-1.50 | normal | Tiny code labels, uppercase tags |\n\n### Principles\n- **Extreme negative tracking at scale**: Display headings at 72px+ use aggressive negative letter-spacing (-2.88px to -4.48px), creating a tight, engineered quality that distinguishes Sanity from looser editorial typography.\n- **Single font, multiple registers**: waldenburgNormal handles both editorial display and functional UI text. The weight range is narrow (400-425 for most, 500-600 only for tiny labels), keeping the voice consistent.\n- **OpenType feature control**: Typography uses deliberate feature settings including \\`\"cv01\", \"cv11\", \"cv12\", \"cv13\", \"ss07\"\\` for display sizes and \\`\"calt\" 0\\` for body text, fine-tuning character alternates for different contexts.\n- **Tight headings, relaxed body**: Headings use 1.00-1.24 line-height (extremely tight), while body text breathes at 1.50. This contrast creates clear visual hierarchy.\n- **Uppercase for technical labels**: IBM Plex Mono captions and small labels frequently use \\`text-transform: uppercase\\` with tight line-heights, creating a \"system readout\" aesthetic for technical metadata.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary CTA (Pill)**\n- Background: Sanity Red (\\`#f36458\\`)\n- Text: White (\\`#ffffff\\`)\n- Padding: 8px 16px\n- Border Radius: 99999px (full pill)\n- Border: none\n- Hover: Electric Blue (\\`#0052ef\\`) background, white text\n- Font: 16px waldenburgNormal, weight 400\n\n**Secondary (Dark Pill)**\n- Background: Near Black (\\`#0b0b0b\\`)\n- Text: Silver (\\`#b9b9b9\\`)\n- Padding: 8px 12px\n- Border Radius: 99999px (full pill)\n- Border: none\n- Hover: Electric Blue (\\`#0052ef\\`) background, white text\n\n**Outlined (Light Pill)**\n- Background: White (\\`#ffffff\\`)\n- Text: Near Black (\\`#0b0b0b\\`)\n- Padding: 8px\n- Border Radius: 99999px (full pill)\n- Border: 1px solid \\`#0b0b0b\\`\n- Hover: Electric Blue (\\`#0052ef\\`) background, white text\n\n**Ghost / Subtle**\n- Background: Dark Gray (\\`#212121\\`)\n- Text: Silver (\\`#b9b9b9\\`)\n- Padding: 0px 12px\n- Border Radius: 5px\n- Border: 1px solid \\`#212121\\`\n- Hover: Electric Blue (\\`#0052ef\\`) background, white text\n\n**Uppercase Label Button**\n- Font: 11px waldenburgNormal, weight 600, uppercase\n- Background: transparent or \\`#212121\\`\n- Text: Silver (\\`#b9b9b9\\`)\n- Letter-spacing: normal\n- Used for tab-like navigation and filter controls\n\n### Cards\n\n**Dark Content Card**\n- Background: \\`#212121\\`\n- Border: 1px solid \\`#353535\\` or \\`#212121\\`\n- Border Radius: 6px\n- Padding: 24px\n- Text: White (\\`#ffffff\\`) for titles, Silver (\\`#b9b9b9\\`) for body\n- Hover: subtle border color shift or elevation change\n\n**Feature Card (Full-bleed)**\n- Background: \\`#0b0b0b\\` or full-bleed image/gradient\n- Border: none or 1px solid \\`#212121\\`\n- Border Radius: 12px\n- Padding: 32-48px\n- Contains large imagery with overlaid text\n\n### Inputs\n\n**Text Input / Textarea**\n- Background: Near Black (\\`#0b0b0b\\`)\n- Text: Silver (\\`#b9b9b9\\`)\n- Border: 1px solid \\`#212121\\`\n- Padding: 8px 12px\n- Border Radius: 3px\n- Focus: outline with \\`var(--focus-ring-color)\\` (blue), 2px solid\n- Focus background: shifts to deep cyan (\\`#072227\\`)\n\n**Search Input**\n- Background: \\`#0b0b0b\\`\n- Text: Silver (\\`#b9b9b9\\`)\n- Padding: 0px 12px\n- Border Radius: 3px\n- Placeholder: Medium Gray (\\`#797979\\`)\n\n### Navigation\n\n**Top Navigation**\n- Background: Near Black (\\`#0b0b0b\\`) with backdrop blur\n- Height: auto, compact padding\n- Logo: left-aligned, Sanity wordmark\n- Links: waldenburgNormal 16px, Silver (\\`#b9b9b9\\`)\n- Link Hover: Electric Blue via \\`--color-fg-accent-blue\\`\n- CTA Button: Sanity Red pill button right-aligned\n- Separator: 1px border-bottom \\`#212121\\`\n\n**Footer**\n- Background: Near Black (\\`#0b0b0b\\`)\n- Multi-column link layout\n- Links: Silver (\\`#b9b9b9\\`), hover to blue\n- Section headers: White (\\`#ffffff\\`), 13px uppercase IBM Plex Mono\n\n### Badges / Pills\n\n**Neutral Subtle**\n- Background: White (\\`#ffffff\\`)\n- Text: Near Black (\\`#0b0b0b\\`)\n- Padding: 8px\n- Font: 13px\n- Border Radius: 99999px\n\n**Neutral Filled**\n- Background: Near Black (\\`#0b0b0b\\`)\n- Text: White (\\`#ffffff\\`)\n- Padding: 8px\n- Font: 13px\n- Border Radius: 99999px\n\n## 5. Layout Principles\n\n### Spacing System\nBase unit: **8px**\n\n| Token | Value | Usage |\n|-------|-------|-------|\n| space-1 | 1px | Hairline gaps, border-like spacing |\n| space-2 | 2px | Minimal internal padding |\n| space-3 | 4px | Tight component internal spacing |\n| space-4 | 6px | Small element gaps |\n| space-5 | 8px | Base unit -- button padding, input padding, badge padding |\n| space-6 | 12px | Standard component gap, button horizontal padding |\n| space-7 | 16px | Section internal padding, card spacing |\n| space-8 | 24px | Large component padding, card internal spacing |\n| space-9 | 32px | Section padding, container gutters |\n| space-10 | 48px | Large section vertical spacing |\n| space-11 | 64px | Major section breaks |\n| space-12 | 96-120px | Hero vertical padding, maximum section spacing |\n\n### Grid & Container\n- Max content width: ~1440px (inferred from breakpoints)\n- Page gutter: 32px on desktop, 16px on mobile\n- Content sections use full-bleed backgrounds with centered, max-width content\n- Multi-column layouts: 2-3 columns on desktop, single column on mobile\n- Card grids: CSS Grid with consistent gaps (16-24px)\n\n### Whitespace Philosophy\nSanity uses aggressive vertical spacing between sections (64-120px) to create breathing room on the dark canvas. Within sections, spacing is tighter (16-32px), creating dense information clusters separated by generous voids. This rhythm gives the page a \"slides\" quality -- each section feels like its own focused frame.\n\n### Border Radius Scale\n\n| Token | Value | Usage |\n|-------|-------|-------|\n| radius-xs | 3px | Inputs, textareas, subtle rounding |\n| radius-sm | 4-5px | Secondary buttons, small cards, tags |\n| radius-md | 6px | Standard cards, containers |\n| radius-lg | 12px | Large cards, feature containers, forms |\n| radius-pill | 99999px | Primary buttons, badges, nav pills |\n\n## 6. Depth & Elevation\n\n### Shadow System\n\n| Level | Value | Usage |\n|-------|-------|-------|\n| Level 0 (Flat) | none | Default state for most elements -- dark surfaces create depth through color alone |\n| Level 1 (Subtle) | 0px 0px 0px 1px \\`#212121\\` | Border-like shadow for minimal containment without visible borders |\n| Level 2 (Focus) | 0 0 0 2px \\`var(--color-blue-500)\\` | Focus ring for inputs and interactive elements |\n| Level 3 (Overlay) | Backdrop blur + semi-transparent dark | Navigation overlay, modal backgrounds |\n\n### Depth Philosophy\nSanity's depth system is almost entirely **colorimetric** rather than shadow-based. Elevation is communicated through surface color shifts: \\`#0b0b0b\\` (ground) -> \\`#212121\\` (elevated) -> \\`#353535\\` (prominent) -> \\`#ffffff\\` (inverted/highest). This approach is native to dark interfaces where traditional drop shadows would be invisible. The few shadows that exist are ring-based (0px 0px 0px Npx) or blur-based (backdrop-filter) rather than offset shadows, maintaining the flat, precision-engineered aesthetic.\n\nBorder-based containment (1px solid \\`#212121\\` or \\`#353535\\`) serves as the primary spatial separator, with the border darkness calibrated to be visible but not dominant. The system avoids \"floating card\" aesthetics -- everything feels mounted to the surface rather than hovering above it.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use the achromatic gray scale as the foundation -- maintain pure neutral discipline with no warm/cool tinting\n- Apply Electric Blue (\\`#0052ef\\`) consistently as the universal hover/active state across all interactive elements\n- Use extreme negative letter-spacing (-2px to -4.48px) on display headings 48px and above\n- Keep primary CTAs as full-pill shapes (99999px radius) with the coral-red (\\`#f36458\\`)\n- Use IBM Plex Mono uppercase for technical labels, tags, and system metadata\n- Communicate depth through surface color (dark-to-light) rather than shadows\n- Maintain generous vertical section spacing (64-120px) on the dark canvas\n- Use \\`\"cv01\", \"cv11\", \"cv12\", \"cv13\", \"ss07\"\\` OpenType features for display typography\n\n### Don't\n- Don't introduce warm or cool color tints to the neutral scale -- Sanity's grays are pure achromatic\n- Don't use drop shadows for elevation -- dark interfaces demand colorimetric depth\n- Don't apply border-radius between 13px and 99998px -- the system jumps from 12px (large card) directly to pill (99999px)\n- Don't mix the coral-red CTA with the electric blue interactive color in the same element\n- Don't use heavy font weights (700+) -- the system maxes out at 600 and only for 11px uppercase labels\n- Don't place light text on light surfaces or dark text on dark surfaces without checking the gray-on-gray contrast ratio\n- Don't use traditional offset box-shadows -- ring shadows (0 0 0 Npx) or border-based containment only\n- Don't break the tight line-height on headings -- 1.00-1.24 is the range, never go to 1.5+ for display text\n\n## 8. Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Behavior |\n|------|-------|----------|\n| Desktop XL | >= 1640px | Full layout, maximum content width |\n| Desktop | >= 1440px | Standard desktop layout |\n| Desktop Compact | >= 1200px | Slightly condensed desktop |\n| Laptop | >= 1100px | Reduced column widths |\n| Tablet Landscape | >= 960px | 2-column layouts begin collapsing |\n| Tablet | >= 768px | Transition zone, some elements stack |\n| Mobile Large | >= 720px | Near-tablet layout |\n| Mobile | >= 480px | Single-column, stacked layout |\n| Mobile Small | >= 376px | Minimum supported width |\n\n### Collapsing Strategy\n- **Navigation**: Horizontal links collapse to hamburger menu below 768px\n- **Hero typography**: Scales from 112px -> 72px -> 48px -> 38px across breakpoints, maintaining tight letter-spacing ratios\n- **Grid layouts**: 3-column -> 2-column at ~960px, single-column below 768px\n- **Card grids**: Horizontal scrolling on mobile instead of wrapping (preserving card aspect ratios)\n- **Section spacing**: Vertical padding reduces by ~40% on mobile (120px -> 64px -> 48px)\n- **Button sizing**: CTA pills maintain padding but reduce font size; ghost buttons stay fixed\n- **Code blocks**: Horizontal scroll with preserved monospace formatting\n\n### Mobile-Specific Adjustments\n- Full-bleed sections extend edge-to-edge with 16px internal gutters\n- Touch targets: minimum 44px for all interactive elements\n- Heading letter-spacing relaxes slightly at mobile sizes (less aggressive negative tracking)\n- Image containers switch from fixed aspect ratios to full-width with auto height\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n\\`\\`\\`\nBackground:      #0b0b0b (near-black canvas)\nSurface:         #212121 (elevated cards/containers)\nBorder:          #353535 (visible) / #212121 (subtle)\nText Primary:    #ffffff (white on dark)\nText Secondary:  #b9b9b9 (silver on dark)\nText Tertiary:   #797979 (medium gray)\nCTA:             #f36458 (coral-red)\nInteractive:     #0052ef (electric blue, all hovers)\nSuccess:         #19d600 (green, sRGB fallback)\nError:           #dd0000 (pure red)\nLight Surface:   #ededed / #ffffff (inverted sections)\n\\`\\`\\`\n\n### Example Prompts\n\n**Landing page section:**\n\"Create a feature section with a near-black (#0b0b0b) background. Use a 48px heading in Inter with -1.68px letter-spacing, white text. Below it, 16px body text in #b9b9b9 with 1.50 line-height. Include a coral-red (#f36458) pill button with white text and a secondary dark (#0b0b0b) pill button with #b9b9b9 text. Both buttons hover to #0052ef blue.\"\n\n**Card grid:**\n\"Build a 3-column card grid on a #0b0b0b background. Each card has a #212121 surface, 1px solid #353535 border, 6px border-radius, and 24px padding. Card titles are 24px white with -0.24px letter-spacing. Body text is 13px #b9b9b9. Add a 13px IBM Plex Mono uppercase tag in #797979 at the top of each card.\"\n\n**Form section:**\n\"Design a contact form on a #0b0b0b background. Inputs have #0b0b0b background, 1px solid #212121 border, 3px border-radius, 8px 12px padding, and #b9b9b9 placeholder text. Focus state shows a 2px blue (#0052ef) ring. Submit button is a full-width coral-red (#f36458) pill. Include a 13px #797979 helper text below each field.\"\n\n**Navigation bar:**\n\"Create a sticky top navigation on #0b0b0b with backdrop blur. Left: brand text in 15px white. Center/right: nav links in 16px #b9b9b9 that hover to blue. Far right: a coral-red (#f36458) pill CTA button. Bottom border: 1px solid #212121.\"\n\n### Iteration Guide\n1. **Start dark**: Begin with \\`#0b0b0b\\` background, \\`#ffffff\\` primary text, \\`#b9b9b9\\` secondary text\n2. **Add structure**: Use \\`#212121\\` surfaces and \\`#353535\\` borders for containment -- no shadows\n3. **Apply typography**: Inter (or Space Grotesk) with tight letter-spacing on headings, 1.50 line-height on body\n4. **Color punctuation**: Add \\`#f36458\\` for CTAs and \\`#0052ef\\` for all hover/interactive states\n5. **Refine spacing**: 8px base unit, 24-32px within sections, 64-120px between sections\n6. **Technical details**: Add IBM Plex Mono uppercase labels for tags and metadata\n7. **Polish**: Ensure all interactive elements hover to \\`#0052ef\\`, all buttons are pills or subtle 5px radius, borders are hairline (1px)\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/sanity.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const sanityBrief = `# Design System Inspired by Sanity\n\n## 1. Visual Theme & Atmosphere\n\nSanity's website is a developer-content platform rendered as a nocturnal command center -- dark, precise, and deeply structured. The entire experience sits on a near-black canvas (\\`#0b0b0b\\`) that reads less like a \"dark mode toggle\" and more like the natural state of a tool built for people who live in terminals. Where most CMS marketing pages reach for friendly pastels and soft illustration, Sanity leans into the gravity of its own product: structured content deserves a structured stage.\n\nThe signature typographic voice is waldenburgNormal -- a distinctive, slightly geometric sans-serif with tight negative letter-spacing (-0.32px to -4.48px at display sizes) that gives headlines a compressed, engineered quality. At 112px hero scale with -4.48px tracking, the type feels almost machined -- like precision-cut steel letterforms. This is paired with IBM Plex Mono for code and technical labels, creating a dual-register voice: editorial authority meets developer credibility.\n\nWhat makes Sanity distinctive is the interplay between its monochromatic dark palette and vivid, saturated accent punctuation. The neutral scale runs from pure black through a tightly controlled gray ramp (\\`#0b0b0b\\` -> \\`#212121\\` -> \\`#353535\\` -> \\`#797979\\` -> \\`#b9b9b9\\` -> \\`#ededed\\` -> \\`#ffffff\\`) with no warm or cool bias -- just pure, achromatic precision. Against this disciplined backdrop, a neon green accent (display-p3 green) and electric blue (\\`#0052ef\\`) land with the impact of signal lights in a dark control room. The orange-red CTA (\\`#f36458\\`) provides the only warm touch in an otherwise cool system.\n\n**Key Characteristics:**\n- Near-black canvas (\\`#0b0b0b\\`) as the default, natural environment -- not a dark \"mode\" but the primary identity\n- waldenburgNormal with extreme negative tracking at display sizes, creating a precision-engineered typographic voice\n- Pure achromatic gray scale -- no warm or cool undertones, pure neutral discipline\n- Vivid accent punctuation: neon green, electric blue (\\`#0052ef\\`), and coral-red (\\`#f36458\\`) against the dark field\n- Pill-shaped primary buttons (99999px radius) contrasting with subtle rounded rectangles (3-6px) for secondary actions\n- IBM Plex Mono as the technical counterweight to the editorial display face\n- Full-bleed dark sections with content contained in measured max-width containers\n- Hover states that shift to electric blue (\\`#0052ef\\`) across all interactive elements -- a consistent \"activation\" signal\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Sanity Black** (\\`#0b0b0b\\`): The primary canvas and dominant surface color. Not pure black but close enough to feel absolute. The foundation of the entire visual identity.\n- **Pure Black** (\\`#000000\\`): Used for maximum-contrast moments, deep overlays, and certain border accents.\n- **Sanity Red** (\\`#f36458\\`): The primary CTA and brand accent -- a warm coral-red that serves as the main call-to-action color. Used for \"Get Started\" buttons and primary conversion points.\n\n### Accent & Interactive\n- **Electric Blue** (\\`#0052ef\\`): The universal hover/active state color across the entire system. Buttons, links, and interactive elements all shift to this blue on hover. Also used as \\`--color-blue-700\\` for focus rings and active states.\n- **Light Blue** (\\`#55beff\\` / \\`#afe3ff\\`): Secondary blue variants used for accent backgrounds, badges, and dimmed blue surfaces.\n- **Neon Green** (\\`color(display-p3 .270588 1 0)\\`): A vivid, wide-gamut green used as \\`--color-fg-accent-green\\` for success states and premium feature highlights. Falls back to \\`#19d600\\` in sRGB.\n- **Accent Magenta** (\\`color(display-p3 .960784 0 1)\\`): A vivid wide-gamut magenta for specialized accent moments.\n\n### Surface & Background\n- **Near Black** (\\`#0b0b0b\\`): Default page background and primary surface.\n- **Dark Gray** (\\`#212121\\`): Elevated surface color for cards, secondary containers, input backgrounds, and subtle layering above the base canvas.\n- **Medium Dark** (\\`#353535\\`): Tertiary surface and border color for creating depth between dark layers.\n- **Pure White** (\\`#ffffff\\`): Used for inverted sections, light-on-dark text, and specific button surfaces.\n- **Light Gray** (\\`#ededed\\`): Light surface for inverted/light sections and subtle background tints.\n\n### Neutrals & Text\n- **White** (\\`#ffffff\\`): Primary text color on dark surfaces, maximum legibility.\n- **Silver** (\\`#b9b9b9\\`): Secondary text, body copy on dark surfaces, muted descriptions, and placeholder text.\n- **Medium Gray** (\\`#797979\\`): Tertiary text, metadata, timestamps, and de-emphasized content.\n- **Charcoal** (\\`#212121\\`): Text on light/inverted surfaces.\n- **Near Black Text** (\\`#0b0b0b\\`): Primary text on white/light button surfaces.\n\n### Semantic\n- **Error Red** (\\`#dd0000\\`): Destructive actions, validation errors, and critical warnings -- a pure, high-saturation red.\n- **GPC Green** (\\`#37cd84\\`): Privacy/compliance indicator green.\n- **Focus Ring Blue** (\\`#0052ef\\`): Focus ring color for accessibility, matching the interactive blue.\n\n### Border System\n- **Dark Border** (\\`#0b0b0b\\`): Primary border on dark containers -- barely visible, maintaining minimal containment.\n- **Subtle Border** (\\`#212121\\`): Standard border for inputs, textareas, and card edges on dark surfaces.\n- **Medium Border** (\\`#353535\\`): More visible borders for emphasized containment and dividers.\n- **Light Border** (\\`#ffffff\\`): Border on inverted/light elements or buttons needing contrast separation.\n- **Orange Border** (\\`color(display-p3 1 0.3333 0)\\`): Special accent border for highlighted/featured elements.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display / Headline**: \\`waldenburgNormal\\`, fallback: \\`waldenburgNormal Fallback, ui-sans-serif, system-ui\\`\n- **Body / UI**: \\`waldenburgNormal\\`, fallback: \\`waldenburgNormal Fallback, ui-sans-serif, system-ui\\`\n- **Code / Technical**: \\`IBM Plex Mono\\`, fallback: \\`ibmPlexMono Fallback, ui-monospace\\`\n- **Fallback / CJK**: \\`Helvetica\\`, fallback: \\`Arial, Hiragino Sans GB, STXihei, Microsoft YaHei, WenQuanYi Micro Hei\\`\n\n*Note: waldenburgNormal is a custom typeface. For external implementations, use Inter or Space Grotesk as the sans substitute (geometric, slightly condensed feel). IBM Plex Mono is available on Google Fonts.*\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display / Hero | waldenburgNormal | 112px (7rem) | 400 | 1.00 (tight) | -4.48px | Maximum impact, compressed tracking |\n| Hero Secondary | waldenburgNormal | 72px (4.5rem) | 400 | 1.05 (tight) | -2.88px | Large section headers |\n| Section Heading | waldenburgNormal | 48px (3rem) | 400 | 1.08 (tight) | -1.68px | Primary section anchors |\n| Heading Large | waldenburgNormal | 38px (2.38rem) | 400 | 1.10 (tight) | -1.14px | Feature section titles |\n| Heading Medium | waldenburgNormal | 32px (2rem) | 425 | 1.24 (tight) | -0.32px | Card titles, subsection headers |\n| Heading Small | waldenburgNormal | 24px (1.5rem) | 425 | 1.24 (tight) | -0.24px | Smaller feature headings |\n| Subheading | waldenburgNormal | 20px (1.25rem) | 425 | 1.13 (tight) | -0.2px | Sub-section markers |\n| Body Large | waldenburgNormal | 18px (1.13rem) | 400 | 1.50 | -0.18px | Intro paragraphs, descriptions |\n| Body | waldenburgNormal | 16px (1rem) | 400 | 1.50 | normal | Standard body text |\n| Body Small | waldenburgNormal | 15px (0.94rem) | 400 | 1.50 | -0.15px | Compact body text |\n| Caption | waldenburgNormal | 13px (0.81rem) | 400-500 | 1.30-1.50 | -0.13px | Metadata, descriptions, tags |\n| Small Caption | waldenburgNormal | 12px (0.75rem) | 400 | 1.50 | -0.12px | Footnotes, timestamps |\n| Micro / Label | waldenburgNormal | 11px (0.69rem) | 500-600 | 1.00-1.50 | normal | Uppercase labels, tiny badges |\n| Code Body | IBM Plex Mono | 15px (0.94rem) | 400 | 1.50 | normal | Code blocks, technical content |\n| Code Caption | IBM Plex Mono | 13px (0.81rem) | 400-500 | 1.30-1.50 | normal | Inline code, small technical labels |\n| Code Micro | IBM Plex Mono | 10-12px | 400 | 1.30-1.50 | normal | Tiny code labels, uppercase tags |\n\n### Principles\n- **Extreme negative tracking at scale**: Display headings at 72px+ use aggressive negative letter-spacing (-2.88px to -4.48px), creating a tight, engineered quality that distinguishes Sanity from looser editorial typography.\n- **Single font, multiple registers**: waldenburgNormal handles both editorial display and functional UI text. The weight range is narrow (400-425 for most, 500-600 only for tiny labels), keeping the voice consistent.\n- **OpenType feature control**: Typography uses deliberate feature settings including \\`\"cv01\", \"cv11\", \"cv12\", \"cv13\", \"ss07\"\\` for display sizes and \\`\"calt\" 0\\` for body text, fine-tuning character alternates for different contexts.\n- **Tight headings, relaxed body**: Headings use 1.00-1.24 line-height (extremely tight), while body text breathes at 1.50. This contrast creates clear visual hierarchy.\n- **Uppercase for technical labels**: IBM Plex Mono captions and small labels frequently use \\`text-transform: uppercase\\` with tight line-heights, creating a \"system readout\" aesthetic for technical metadata.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary CTA (Pill)**\n- Background: Sanity Red (\\`#f36458\\`)\n- Text: White (\\`#ffffff\\`)\n- Padding: 8px 16px\n- Border Radius: 99999px (full pill)\n- Border: none\n- Hover: Electric Blue (\\`#0052ef\\`) background, white text\n- Font: 16px waldenburgNormal, weight 400\n\n**Secondary (Dark Pill)**\n- Background: Near Black (\\`#0b0b0b\\`)\n- Text: Silver (\\`#b9b9b9\\`)\n- Padding: 8px 12px\n- Border Radius: 99999px (full pill)\n- Border: none\n- Hover: Electric Blue (\\`#0052ef\\`) background, white text\n\n**Outlined (Light Pill)**\n- Background: White (\\`#ffffff\\`)\n- Text: Near Black (\\`#0b0b0b\\`)\n- Padding: 8px\n- Border Radius: 99999px (full pill)\n- Border: 1px solid \\`#0b0b0b\\`\n- Hover: Electric Blue (\\`#0052ef\\`) background, white text\n\n**Ghost / Subtle**\n- Background: Dark Gray (\\`#212121\\`)\n- Text: Silver (\\`#b9b9b9\\`)\n- Padding: 0px 12px\n- Border Radius: 5px\n- Border: 1px solid \\`#212121\\`\n- Hover: Electric Blue (\\`#0052ef\\`) background, white text\n\n**Uppercase Label Button**\n- Font: 11px waldenburgNormal, weight 600, uppercase\n- Background: transparent or \\`#212121\\`\n- Text: Silver (\\`#b9b9b9\\`)\n- Letter-spacing: normal\n- Used for tab-like navigation and filter controls\n\n### Cards\n\n**Dark Content Card**\n- Background: \\`#212121\\`\n- Border: 1px solid \\`#353535\\` or \\`#212121\\`\n- Border Radius: 6px\n- Padding: 24px\n- Text: White (\\`#ffffff\\`) for titles, Silver (\\`#b9b9b9\\`) for body\n- Hover: subtle border color shift or elevation change\n\n**Feature Card (Full-bleed)**\n- Background: \\`#0b0b0b\\` or full-bleed image/gradient\n- Border: none or 1px solid \\`#212121\\`\n- Border Radius: 12px\n- Padding: 32-48px\n- Contains large imagery with overlaid text\n\n### Inputs\n\n**Text Input / Textarea**\n- Background: Near Black (\\`#0b0b0b\\`)\n- Text: Silver (\\`#b9b9b9\\`)\n- Border: 1px solid \\`#212121\\`\n- Padding: 8px 12px\n- Border Radius: 3px\n- Focus: outline with \\`var(--focus-ring-color)\\` (blue), 2px solid\n- Focus background: shifts to deep cyan (\\`#072227\\`)\n\n**Search Input**\n- Background: \\`#0b0b0b\\`\n- Text: Silver (\\`#b9b9b9\\`)\n- Padding: 0px 12px\n- Border Radius: 3px\n- Placeholder: Medium Gray (\\`#797979\\`)\n\n### Navigation\n\n**Top Navigation**\n- Background: Near Black (\\`#0b0b0b\\`) with backdrop blur\n- Height: auto, compact padding\n- Logo: left-aligned, Sanity wordmark\n- Links: waldenburgNormal 16px, Silver (\\`#b9b9b9\\`)\n- Link Hover: Electric Blue via \\`--color-fg-accent-blue\\`\n- CTA Button: Sanity Red pill button right-aligned\n- Separator: 1px border-bottom \\`#212121\\`\n\n**Footer**\n- Background: Near Black (\\`#0b0b0b\\`)\n- Multi-column link layout\n- Links: Silver (\\`#b9b9b9\\`), hover to blue\n- Section headers: White (\\`#ffffff\\`), 13px uppercase IBM Plex Mono\n\n### Badges / Pills\n\n**Neutral Subtle**\n- Background: White (\\`#ffffff\\`)\n- Text: Near Black (\\`#0b0b0b\\`)\n- Padding: 8px\n- Font: 13px\n- Border Radius: 99999px\n\n**Neutral Filled**\n- Background: Near Black (\\`#0b0b0b\\`)\n- Text: White (\\`#ffffff\\`)\n- Padding: 8px\n- Font: 13px\n- Border Radius: 99999px\n\n## 5. Layout Principles\n\n### Spacing System\nBase unit: **8px**\n\n| Token | Value | Usage |\n|-------|-------|-------|\n| space-1 | 1px | Hairline gaps, border-like spacing |\n| space-2 | 2px | Minimal internal padding |\n| space-3 | 4px | Tight component internal spacing |\n| space-4 | 6px | Small element gaps |\n| space-5 | 8px | Base unit -- button padding, input padding, badge padding |\n| space-6 | 12px | Standard component gap, button horizontal padding |\n| space-7 | 16px | Section internal padding, card spacing |\n| space-8 | 24px | Large component padding, card internal spacing |\n| space-9 | 32px | Section padding, container gutters |\n| space-10 | 48px | Large section vertical spacing |\n| space-11 | 64px | Major section breaks |\n| space-12 | 96-120px | Hero vertical padding, maximum section spacing |\n\n### Grid & Container\n- Max content width: ~1440px (inferred from breakpoints)\n- Page gutter: 32px on desktop, 16px on mobile\n- Content sections use full-bleed backgrounds with centered, max-width content\n- Multi-column layouts: 2-3 columns on desktop, single column on mobile\n- Card grids: CSS Grid with consistent gaps (16-24px)\n\n### Whitespace Philosophy\nSanity uses aggressive vertical spacing between sections (64-120px) to create breathing room on the dark canvas. Within sections, spacing is tighter (16-32px), creating dense information clusters separated by generous voids. This rhythm gives the page a \"slides\" quality -- each section feels like its own focused frame.\n\n### Border Radius Scale\n\n| Token | Value | Usage |\n|-------|-------|-------|\n| radius-xs | 3px | Inputs, textareas, subtle rounding |\n| radius-sm | 4-5px | Secondary buttons, small cards, tags |\n| radius-md | 6px | Standard cards, containers |\n| radius-lg | 12px | Large cards, feature containers, forms |\n| radius-pill | 99999px | Primary buttons, badges, nav pills |\n\n## 6. Depth & Elevation\n\n### Shadow System\n\n| Level | Value | Usage |\n|-------|-------|-------|\n| Level 0 (Flat) | none | Default state for most elements -- dark surfaces create depth through color alone |\n| Level 1 (Subtle) | 0px 0px 0px 1px \\`#212121\\` | Border-like shadow for minimal containment without visible borders |\n| Level 2 (Focus) | 0 0 0 2px \\`var(--color-blue-500)\\` | Focus ring for inputs and interactive elements |\n| Level 3 (Overlay) | Backdrop blur + semi-transparent dark | Navigation overlay, modal backgrounds |\n\n### Depth Philosophy\nSanity's depth system is almost entirely **colorimetric** rather than shadow-based. Elevation is communicated through surface color shifts: \\`#0b0b0b\\` (ground) -> \\`#212121\\` (elevated) -> \\`#353535\\` (prominent) -> \\`#ffffff\\` (inverted/highest). This approach is native to dark interfaces where traditional drop shadows would be invisible. The few shadows that exist are ring-based (0px 0px 0px Npx) or blur-based (backdrop-filter) rather than offset shadows, maintaining the flat, precision-engineered aesthetic.\n\nBorder-based containment (1px solid \\`#212121\\` or \\`#353535\\`) serves as the primary spatial separator, with the border darkness calibrated to be visible but not dominant. The system avoids \"floating card\" aesthetics -- everything feels mounted to the surface rather than hovering above it.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use the achromatic gray scale as the foundation -- maintain pure neutral discipline with no warm/cool tinting\n- Apply Electric Blue (\\`#0052ef\\`) consistently as the universal hover/active state across all interactive elements\n- Use extreme negative letter-spacing (-2px to -4.48px) on display headings 48px and above\n- Keep primary CTAs as full-pill shapes (99999px radius) with the coral-red (\\`#f36458\\`)\n- Use IBM Plex Mono uppercase for technical labels, tags, and system metadata\n- Communicate depth through surface color (dark-to-light) rather than shadows\n- Maintain generous vertical section spacing (64-120px) on the dark canvas\n- Use \\`\"cv01\", \"cv11\", \"cv12\", \"cv13\", \"ss07\"\\` OpenType features for display typography\n\n### Don't\n- Don't introduce warm or cool color tints to the neutral scale -- Sanity's grays are pure achromatic\n- Don't use drop shadows for elevation -- dark interfaces demand colorimetric depth\n- Don't apply border-radius between 13px and 99998px -- the system jumps from 12px (large card) directly to pill (99999px)\n- Don't mix the coral-red CTA with the electric blue interactive color in the same element\n- Don't use heavy font weights (700+) -- the system maxes out at 600 and only for 11px uppercase labels\n- Don't place light text on light surfaces or dark text on dark surfaces without checking the gray-on-gray contrast ratio\n- Don't use traditional offset box-shadows -- ring shadows (0 0 0 Npx) or border-based containment only\n- Don't break the tight line-height on headings -- 1.00-1.24 is the range, never go to 1.5+ for display text\n\n## 8. Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Behavior |\n|------|-------|----------|\n| Desktop XL | >= 1640px | Full layout, maximum content width |\n| Desktop | >= 1440px | Standard desktop layout |\n| Desktop Compact | >= 1200px | Slightly condensed desktop |\n| Laptop | >= 1100px | Reduced column widths |\n| Tablet Landscape | >= 960px | 2-column layouts begin collapsing |\n| Tablet | >= 768px | Transition zone, some elements stack |\n| Mobile Large | >= 720px | Near-tablet layout |\n| Mobile | >= 480px | Single-column, stacked layout |\n| Mobile Small | >= 376px | Minimum supported width |\n\n### Collapsing Strategy\n- **Navigation**: Horizontal links collapse to hamburger menu below 768px\n- **Hero typography**: Scales from 112px -> 72px -> 48px -> 38px across breakpoints, maintaining tight letter-spacing ratios\n- **Grid layouts**: 3-column -> 2-column at ~960px, single-column below 768px\n- **Card grids**: Horizontal scrolling on mobile instead of wrapping (preserving card aspect ratios)\n- **Section spacing**: Vertical padding reduces by ~40% on mobile (120px -> 64px -> 48px)\n- **Button sizing**: CTA pills maintain padding but reduce font size; ghost buttons stay fixed\n- **Code blocks**: Horizontal scroll with preserved monospace formatting\n\n### Mobile-Specific Adjustments\n- Full-bleed sections extend edge-to-edge with 16px internal gutters\n- Touch targets: minimum 44px for all interactive elements\n- Heading letter-spacing relaxes slightly at mobile sizes (less aggressive negative tracking)\n- Image containers switch from fixed aspect ratios to full-width with auto height\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n\\`\\`\\`\nBackground:      #0b0b0b (near-black canvas)\nSurface:         #212121 (elevated cards/containers)\nBorder:          #353535 (visible) / #212121 (subtle)\nText Primary:    #ffffff (white on dark)\nText Secondary:  #b9b9b9 (silver on dark)\nText Tertiary:   #797979 (medium gray)\nCTA:             #f36458 (coral-red)\nInteractive:     #0052ef (electric blue, all hovers)\nSuccess:         #19d600 (green, sRGB fallback)\nError:           #dd0000 (pure red)\nLight Surface:   #ededed / #ffffff (inverted sections)\n\\`\\`\\`\n\n### Example Prompts\n\n**Landing page section:**\n\"Create a feature section with a near-black (#0b0b0b) background. Use a 48px heading in Inter with -1.68px letter-spacing, white text. Below it, 16px body text in #b9b9b9 with 1.50 line-height. Include a coral-red (#f36458) pill button with white text and a secondary dark (#0b0b0b) pill button with #b9b9b9 text. Both buttons hover to #0052ef blue.\"\n\n**Card grid:**\n\"Build a 3-column card grid on a #0b0b0b background. Each card has a #212121 surface, 1px solid #353535 border, 6px border-radius, and 24px padding. Card titles are 24px white with -0.24px letter-spacing. Body text is 13px #b9b9b9. Add a 13px IBM Plex Mono uppercase tag in #797979 at the top of each card.\"\n\n**Form section:**\n\"Design a contact form on a #0b0b0b background. Inputs have #0b0b0b background, 1px solid #212121 border, 3px border-radius, 8px 12px padding, and #b9b9b9 placeholder text. Focus state shows a 2px blue (#0052ef) ring. Submit button is a full-width coral-red (#f36458) pill. Include a 13px #797979 helper text below each field.\"\n\n**Navigation bar:**\n\"Create a sticky top navigation on #0b0b0b with backdrop blur. Left: brand text in 15px white. Center/right: nav links in 16px #b9b9b9 that hover to blue. Far right: a coral-red (#f36458) pill CTA button. Bottom border: 1px solid #212121.\"\n\n### Iteration Guide\n1. **Start dark**: Begin with \\`#0b0b0b\\` background, \\`#ffffff\\` primary text, \\`#b9b9b9\\` secondary text\n2. **Add structure**: Use \\`#212121\\` surfaces and \\`#353535\\` borders for containment -- no shadows\n3. **Apply typography**: Inter (or Space Grotesk) with tight letter-spacing on headings, 1.50 line-height on body\n4. **Color punctuation**: Add \\`#f36458\\` for CTAs and \\`#0052ef\\` for all hover/interactive states\n5. **Refine spacing**: 8px base unit, 24-32px within sections, 64-120px between sections\n6. **Technical details**: Add IBM Plex Mono uppercase labels for tags and metadata\n7. **Polish**: Ensure all interactive elements hover to \\`#0052ef\\`, all buttons are pills or subtle 5px radius, borders are hairline (1px)\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/sentry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/sentry.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const sentryBrief = `# Design System Inspired by Sentry\n\n## 1. Visual Theme & Atmosphere\n\nSentry's website is a dark-mode-first developer tool interface that speaks the language of code editors and terminal windows. The entire aesthetic is rooted in deep purple-black backgrounds (\\`#1f1633\\`, \\`#150f23\\`) that evoke the late-night debugging sessions Sentry was built for. Against this inky canvas, a carefully curated set of purples, pinks, and a distinctive lime-green accent (\\`#c2ef4e\\`) create a visual system that feels simultaneously technical and vibrant.\n\nThe typography pairing is deliberate: \"Dammit Sans\" appears at hero scale (88px, weight 700) as a display font with personality and attitude that matches Sentry's irreverent brand voice (\"Code breaks. Fix it faster.\"), while Rubik serves as the workhorse UI font across all functional text — headings, body, buttons, captions, and navigation. Monaco provides the monospace layer for code snippets and technical content, completing the developer-tool trinity.\n\nWhat makes Sentry distinctive is its embrace of the \"dark IDE\" aesthetic without feeling cold or sterile. Warm purple tones replace the typical cool grays of developer tools, and bold illustrative elements (3D characters, colorful product screenshots) punctuate the dark canvas. The button system uses a signature muted purple (\\`#79628c\\`) with inset shadows that creates a tactile, almost physical quality — buttons feel like they could be pressed into the surface.\n\n**Key Characteristics:**\n- Dark purple-black backgrounds (\\`#1f1633\\`, \\`#150f23\\`) — never pure black\n- Warm purple accent spectrum: from deep (\\`#362d59\\`) through mid (\\`#79628c\\`, \\`#6a5fc1\\`) to vibrant (\\`#422082\\`)\n- Lime-green accent (\\`#c2ef4e\\`) for high-visibility CTAs and highlights\n- Pink/coral accents (\\`#ffb287\\`, \\`#fa7faa\\`) for focus states and secondary highlights\n- \"Dammit Sans\" display font for brand personality at hero scale\n- Rubik as primary UI font with uppercase letter-spaced labels\n- Monaco monospace for code elements\n- Inset shadows on buttons creating tactile depth\n- Frosted glass effects with \\`blur(18px) saturate(180%)\\`\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Deep Purple** (\\`#1f1633\\`): Primary background, the defining color of the brand\n- **Darker Purple** (\\`#150f23\\`): Deeper sections, footer, secondary backgrounds\n- **Border Purple** (\\`#362d59\\`): Borders, dividers, subtle structural lines\n\n### Accent Colors\n- **Sentry Purple** (\\`#6a5fc1\\`): Primary interactive color — links, hover states, focus rings\n- **Muted Purple** (\\`#79628c\\`): Button backgrounds, secondary interactive elements\n- **Deep Violet** (\\`#422082\\`): Select dropdowns, active states, high-emphasis surfaces\n- **Lime Green** (\\`#c2ef4e\\`): High-visibility accent, special links, badge highlights\n- **Coral** (\\`#ffb287\\`): Focus state backgrounds, warm accent\n- **Pink** (\\`#fa7faa\\`): Focus outlines, decorative accents\n\n### Text Colors\n- **Pure White** (\\`#ffffff\\`): Primary text on dark backgrounds\n- **Light Gray** (\\`#e5e7eb\\`): Secondary text, muted content\n- **Code Yellow** (\\`#dcdcaa\\`): Syntax highlighting, code tokens\n\n### Surface & Overlay\n- **Glass White** (\\`rgba(255, 255, 255, 0.18)\\`): Frosted glass button backgrounds\n- **Glass Dark** (\\`rgba(54, 22, 107, 0.14)\\`): Hover overlay on glass elements\n- **Input White** (\\`#ffffff\\`): Form input backgrounds (light context)\n- **Input Border** (\\`#cfcfdb\\`): Form field borders\n\n### Shadows\n- **Ambient Glow** (\\`rgba(22, 15, 36, 0.9) 0px 4px 4px 9px\\`): Deep purple ambient shadow\n- **Button Hover** (\\`rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem\\`): Elevated hover state\n- **Card Shadow** (\\`rgba(0, 0, 0, 0.1) 0px 10px 15px -3px\\`): Standard card elevation\n- **Inset Button** (\\`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px inset\\`): Tactile pressed effect\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: \\`Dammit Sans\\` — brand personality font for hero headings\n- **Primary UI**: \\`Rubik\\`, with fallbacks: \\`-apple-system, system-ui, Segoe UI, Helvetica, Arial\\`\n- **Monospace**: \\`Monaco\\`, with fallbacks: \\`Menlo, Ubuntu Mono\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Dammit Sans | 88px (5.50rem) | 700 | 1.20 (tight) | normal | Maximum impact, brand voice |\n| Display Secondary | Dammit Sans | 60px (3.75rem) | 500 | 1.10 (tight) | normal | Secondary hero text |\n| Section Heading | Rubik | 30px (1.88rem) | 400 | 1.20 (tight) | normal | Major section titles |\n| Sub-heading | Rubik | 27px (1.69rem) | 500 | 1.25 (tight) | normal | Feature section headers |\n| Card Title | Rubik | 24px (1.50rem) | 500 | 1.25 (tight) | normal | Card and block headings |\n| Feature Title | Rubik | 20px (1.25rem) | 600 | 1.25 (tight) | normal | Emphasized feature names |\n| Body | Rubik | 16px (1.00rem) | 400 | 1.50 | normal | Standard body text |\n| Body Emphasis | Rubik | 16px (1.00rem) | 500–600 | 1.50 | normal | Bold body, nav items |\n| Nav Label | Rubik | 15px (0.94rem) | 500 | 1.40 | normal | Navigation links |\n| Uppercase Label | Rubik | 15px (0.94rem) | 500 | 1.25 (tight) | normal | \\`text-transform: uppercase\\` |\n| Button Text | Rubik | 14px (0.88rem) | 500–700 | 1.14–1.29 (tight) | 0.2px | \\`text-transform: uppercase\\` |\n| Caption | Rubik | 14px (0.88rem) | 500–700 | 1.00–1.43 | 0.2px | Often uppercase |\n| Small Caption | Rubik | 12px (0.75rem) | 600 | 2.00 (relaxed) | normal | Subtle annotations |\n| Micro Label | Rubik | 10px (0.63rem) | 600 | 1.80 (relaxed) | 0.25px | \\`text-transform: uppercase\\` |\n| Code | Monaco | 16px (1.00rem) | 400–700 | 1.50 | normal | Code blocks, technical text |\n\n### Principles\n- **Dual personality**: Dammit Sans brings irreverent brand character at display scale; Rubik provides clean professionalism for everything functional.\n- **Uppercase as system**: Buttons, captions, labels, and micro-text all use \\`text-transform: uppercase\\` with subtle letter-spacing (0.2px–0.25px), creating a systematic \"technical label\" pattern throughout.\n- **Weight stratification**: Rubik uses 400 (body), 500 (emphasis/nav), 600 (titles/strong), 700 (buttons/CTAs) — a clean four-tier weight system.\n- **Tight headings, relaxed body**: All headings use 1.10–1.25 line-height; body uses 1.50; small captions expand to 2.00 for readability at tiny sizes.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Muted Purple**\n- Background: \\`#79628c\\` (rgb(121, 98, 140))\n- Text: \\`#ffffff\\`, uppercase, 14px, weight 500–700, letter-spacing 0.2px\n- Border: \\`1px solid #584674\\`\n- Radius: 13px\n- Shadow: \\`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px inset\\` (tactile inset)\n- Hover: elevated shadow \\`rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem\\`\n\n**Glass White**\n- Background: \\`rgba(255, 255, 255, 0.18)\\` (frosted glass)\n- Text: \\`#ffffff\\`\n- Padding: 8px\n- Radius: 12px (left-aligned variant: \\`12px 0px 0px 12px\\`)\n- Shadow: \\`rgba(0, 0, 0, 0.08) 0px 2px 8px\\`\n- Hover background: \\`rgba(54, 22, 107, 0.14)\\`\n- Use: Secondary actions on dark surfaces\n\n**White Solid**\n- Background: \\`#ffffff\\`\n- Text: \\`#1f1633\\`\n- Padding: 12px 16px\n- Radius: 8px\n- Hover: background transitions to \\`#6a5fc1\\`, text to white\n- Focus: background \\`#ffb287\\` (coral), outline \\`rgb(106, 95, 193) solid 0.125rem\\`\n- Use: High-visibility CTA on dark backgrounds\n\n**Deep Violet (Select/Dropdown)**\n- Background: \\`#422082\\`\n- Text: \\`#ffffff\\`\n- Padding: 8px 16px\n- Radius: 8px\n\n### Inputs\n\n**Text Input**\n- Background: \\`#ffffff\\`\n- Text: \\`#1f1633\\`\n- Border: \\`1px solid #cfcfdb\\`\n- Padding: 8px 12px\n- Radius: 6px\n- Focus: border-color stays \\`#cfcfdb\\`, shadow \\`rgba(0, 0, 0, 0.15) 0px 2px 10px inset\\`\n\n### Links\n- **Default on dark**: \\`#ffffff\\`, underline decoration\n- **Hover**: color transitions to \\`#6a5fc1\\` (Sentry Purple)\n- **Purple links**: \\`#6a5fc1\\` default, hover underline\n- **Lime accent links**: \\`#c2ef4e\\` default, hover to \\`#6a5fc1\\`\n- **Dark context links**: \\`#362d59\\`, hover to \\`#ffffff\\`\n\n### Cards & Containers\n- Background: semi-transparent or dark purple surfaces\n- Radius: 8px–12px\n- Shadow: \\`rgba(0, 0, 0, 0.1) 0px 10px 15px -3px\\`\n- Backdrop filter: \\`blur(18px) saturate(180%)\\` for glass effects\n\n### Navigation\n- Dark transparent header over hero content\n- Rubik 15px weight 500 for nav links\n- White text, hover to Sentry Purple (\\`#6a5fc1\\`)\n- Uppercase labels with 0.2px letter-spacing for categories\n- Mobile: hamburger menu, full-width expanded\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 5px, 6px, 8px, 12px, 16px, 24px, 32px, 40px, 44px, 45px, 47px\n\n### Grid & Container\n- Max content width: 1152px (XL breakpoint)\n- Responsive padding: 2rem (mobile) → 4rem (tablet+)\n- Content centered within container\n- Full-width dark sections with contained inner content\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | < 576px | Single column, stacked layout |\n| Small Tablet | 576–640px | Minor width adjustments |\n| Tablet | 640–768px | 2-column begins |\n| Small Desktop | 768–992px | Full nav visible |\n| Desktop | 992–1152px | Standard layout |\n| Large Desktop | 1152–1440px | Max-width content |\n\n### Whitespace Philosophy\n- **Dark breathing room**: Generous vertical spacing between sections (64px–80px+) lets the dark background serve as a visual rest.\n- **Content islands**: Feature sections are self-contained blocks floating in the dark purple sea, each with its own internal spacing rhythm.\n- **Asymmetric padding**: Buttons use asymmetric padding patterns (12px 16px, 8px 12px) that feel organic rather than rigid.\n\n### Border Radius Scale\n- Minimal (6px): Form inputs, small interactive elements\n- Standard (8px): Buttons, cards, containers\n- Comfortable (10px–12px): Larger containers, glass panels\n- Rounded (13px): Primary muted buttons\n- Pill (18px): Image containers, badges\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Sunken (Level -1) | Inset shadow \\`rgba(0, 0, 0, 0.1) 0px 1px 3px inset\\` | Primary buttons (tactile pressed feel) |\n| Flat (Level 0) | No shadow | Default surfaces, dark backgrounds |\n| Surface (Level 1) | \\`rgba(0, 0, 0, 0.08) 0px 2px 8px\\` | Glass buttons, subtle cards |\n| Elevated (Level 2) | \\`rgba(0, 0, 0, 0.1) 0px 10px 15px -3px\\` | Cards, floating panels |\n| Prominent (Level 3) | \\`rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem\\` | Hover states, modals |\n| Ambient (Level 4) | \\`rgba(22, 15, 36, 0.9) 0px 4px 4px 9px\\` | Deep purple ambient glow around hero |\n\n**Shadow Philosophy**: Sentry uses a unique combination of inset shadows (buttons feel pressed INTO the surface) and ambient glows (content radiates from the dark background). The deep purple ambient shadow (\\`rgba(22, 15, 36, 0.9)\\`) is the signature — it creates a bioluminescent quality where content seems to emit its own purple-tinted light.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use deep purple backgrounds (\\`#1f1633\\`, \\`#150f23\\`) — never pure black (\\`#000000\\`)\n- Apply inset shadows on primary buttons for the tactile pressed effect\n- Use Dammit Sans ONLY for hero/display headings — Rubik for everything else\n- Apply \\`text-transform: uppercase\\` with \\`letter-spacing: 0.2px\\` on buttons and labels\n- Use the lime-green accent (\\`#c2ef4e\\`) sparingly for maximum impact\n- Employ frosted glass effects (\\`blur(18px) saturate(180%)\\`) for layered surfaces\n- Maintain the warm purple shadow tones — shadows should feel purple-tinted, not neutral gray\n- Use Rubik's 4-tier weight system: 400 (body), 500 (nav/emphasis), 600 (titles), 700 (CTAs)\n\n### Don't\n- Don't use pure black (\\`#000000\\`) for backgrounds — always use the warm purple-blacks\n- Don't apply Dammit Sans to body text or UI elements — it's display-only\n- Don't use standard gray (\\`#666\\`, \\`#999\\`) for borders — use purple-tinted grays (\\`#362d59\\`, \\`#584674\\`)\n- Don't drop the uppercase treatment on buttons — it's a system-wide pattern\n- Don't use sharp corners (0px radius) — minimum 6px for all interactive elements\n- Don't mix the lime-green accent with the coral/pink accents in the same component\n- Don't use flat (non-inset) shadows on primary buttons — the tactile quality is signature\n- Don't forget letter-spacing on uppercase text — 0.2px minimum\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <576px | Single column, hamburger nav, stacked CTAs |\n| Tablet | 576–768px | 2-column feature grids begin |\n| Small Desktop | 768–992px | Full navigation, side-by-side layouts |\n| Desktop | 992–1152px | Max-width container, full layout |\n| Large | >1152px | Content max-width maintained, generous margins |\n\n### Collapsing Strategy\n- Hero text: 88px Dammit Sans → 60px → mobile scales\n- Navigation: horizontal → hamburger with slide-out\n- Feature sections: side-by-side → stacked cards\n- Buttons: inline → full-width stacked on mobile\n- Container padding: 4rem → 2rem\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: \\`#1f1633\\` (primary), \\`#150f23\\` (deeper)\n- Text: \\`#ffffff\\` (primary), \\`#e5e7eb\\` (secondary)\n- Interactive: \\`#6a5fc1\\` (links/hover), \\`#79628c\\` (buttons)\n- Accent: \\`#c2ef4e\\` (lime highlight), \\`#ffb287\\` (coral focus)\n- Border: \\`#362d59\\` (dark), \\`#cfcfdb\\` (light context)\n\n### Example Component Prompts\n- \"Create a hero section on deep purple background (#1f1633). Headline at 88px Dammit Sans weight 700, line-height 1.20, white text. Sub-text at 16px Rubik weight 400, line-height 1.50. White solid CTA button (8px radius, 12px 16px padding), hover transitions to #6a5fc1.\"\n- \"Design a navigation bar: transparent over dark background. Rubik 15px weight 500, white text. Uppercase category labels with 0.2px letter-spacing. Hover color #6a5fc1.\"\n- \"Build a primary button: background #79628c, border 1px solid #584674, inset shadow rgba(0,0,0,0.1) 0px 1px 3px, white uppercase text at 14px Rubik weight 700, letter-spacing 0.2px, radius 13px. Hover: shadow rgba(0,0,0,0.18) 0px 0.5rem 1.5rem.\"\n- \"Create a glass card panel: background rgba(255,255,255,0.18), backdrop-filter blur(18px) saturate(180%), radius 12px. White text content inside.\"\n- \"Design a feature section: #150f23 background, 24px Rubik weight 500 heading, 16px Rubik weight 400 body text. 14px uppercase lime-green (#c2ef4e) label above heading.\"\n\n### Iteration Guide\n1. Always start with the dark purple background — the color palette is built FOR dark mode\n2. Use inset shadows on buttons, ambient purple glows on hero sections\n3. Uppercase + letter-spacing is the systematic pattern for labels, buttons, and captions\n4. Lime green (#c2ef4e) is the \"pop\" color — use once per section maximum\n5. Frosted glass for overlaid panels, solid purple for primary surfaces\n6. Rubik handles 90% of typography — Dammit Sans is hero-only\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/sentry.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const sentryBrief = `# Design System Inspired by Sentry\n\n## 1. Visual Theme & Atmosphere\n\nSentry's website is a dark-mode-first developer tool interface that speaks the language of code editors and terminal windows. The entire aesthetic is rooted in deep purple-black backgrounds (\\`#1f1633\\`, \\`#150f23\\`) that evoke the late-night debugging sessions Sentry was built for. Against this inky canvas, a carefully curated set of purples, pinks, and a distinctive lime-green accent (\\`#c2ef4e\\`) create a visual system that feels simultaneously technical and vibrant.\n\nThe typography pairing is deliberate: \"Dammit Sans\" appears at hero scale (88px, weight 700) as a display font with personality and attitude that matches Sentry's irreverent brand voice (\"Code breaks. Fix it faster.\"), while Rubik serves as the workhorse UI font across all functional text — headings, body, buttons, captions, and navigation. Monaco provides the monospace layer for code snippets and technical content, completing the developer-tool trinity.\n\nWhat makes Sentry distinctive is its embrace of the \"dark IDE\" aesthetic without feeling cold or sterile. Warm purple tones replace the typical cool grays of developer tools, and bold illustrative elements (3D characters, colorful product screenshots) punctuate the dark canvas. The button system uses a signature muted purple (\\`#79628c\\`) with inset shadows that creates a tactile, almost physical quality — buttons feel like they could be pressed into the surface.\n\n**Key Characteristics:**\n- Dark purple-black backgrounds (\\`#1f1633\\`, \\`#150f23\\`) — never pure black\n- Warm purple accent spectrum: from deep (\\`#362d59\\`) through mid (\\`#79628c\\`, \\`#6a5fc1\\`) to vibrant (\\`#422082\\`)\n- Lime-green accent (\\`#c2ef4e\\`) for high-visibility CTAs and highlights\n- Pink/coral accents (\\`#ffb287\\`, \\`#fa7faa\\`) for focus states and secondary highlights\n- \"Dammit Sans\" display font for brand personality at hero scale\n- Rubik as primary UI font with uppercase letter-spaced labels\n- Monaco monospace for code elements\n- Inset shadows on buttons creating tactile depth\n- Frosted glass effects with \\`blur(18px) saturate(180%)\\`\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Deep Purple** (\\`#1f1633\\`): Primary background, the defining color of the brand\n- **Darker Purple** (\\`#150f23\\`): Deeper sections, footer, secondary backgrounds\n- **Border Purple** (\\`#362d59\\`): Borders, dividers, subtle structural lines\n\n### Accent Colors\n- **Sentry Purple** (\\`#6a5fc1\\`): Primary interactive color — links, hover states, focus rings\n- **Muted Purple** (\\`#79628c\\`): Button backgrounds, secondary interactive elements\n- **Deep Violet** (\\`#422082\\`): Select dropdowns, active states, high-emphasis surfaces\n- **Lime Green** (\\`#c2ef4e\\`): High-visibility accent, special links, badge highlights\n- **Coral** (\\`#ffb287\\`): Focus state backgrounds, warm accent\n- **Pink** (\\`#fa7faa\\`): Focus outlines, decorative accents\n\n### Text Colors\n- **Pure White** (\\`#ffffff\\`): Primary text on dark backgrounds\n- **Light Gray** (\\`#e5e7eb\\`): Secondary text, muted content\n- **Code Yellow** (\\`#dcdcaa\\`): Syntax highlighting, code tokens\n\n### Surface & Overlay\n- **Glass White** (\\`rgba(255, 255, 255, 0.18)\\`): Frosted glass button backgrounds\n- **Glass Dark** (\\`rgba(54, 22, 107, 0.14)\\`): Hover overlay on glass elements\n- **Input White** (\\`#ffffff\\`): Form input backgrounds (light context)\n- **Input Border** (\\`#cfcfdb\\`): Form field borders\n\n### Shadows\n- **Ambient Glow** (\\`rgba(22, 15, 36, 0.9) 0px 4px 4px 9px\\`): Deep purple ambient shadow\n- **Button Hover** (\\`rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem\\`): Elevated hover state\n- **Card Shadow** (\\`rgba(0, 0, 0, 0.1) 0px 10px 15px -3px\\`): Standard card elevation\n- **Inset Button** (\\`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px inset\\`): Tactile pressed effect\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: \\`Dammit Sans\\` — brand personality font for hero headings\n- **Primary UI**: \\`Rubik\\`, with fallbacks: \\`-apple-system, system-ui, Segoe UI, Helvetica, Arial\\`\n- **Monospace**: \\`Monaco\\`, with fallbacks: \\`Menlo, Ubuntu Mono\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Dammit Sans | 88px (5.50rem) | 700 | 1.20 (tight) | normal | Maximum impact, brand voice |\n| Display Secondary | Dammit Sans | 60px (3.75rem) | 500 | 1.10 (tight) | normal | Secondary hero text |\n| Section Heading | Rubik | 30px (1.88rem) | 400 | 1.20 (tight) | normal | Major section titles |\n| Sub-heading | Rubik | 27px (1.69rem) | 500 | 1.25 (tight) | normal | Feature section headers |\n| Card Title | Rubik | 24px (1.50rem) | 500 | 1.25 (tight) | normal | Card and block headings |\n| Feature Title | Rubik | 20px (1.25rem) | 600 | 1.25 (tight) | normal | Emphasized feature names |\n| Body | Rubik | 16px (1.00rem) | 400 | 1.50 | normal | Standard body text |\n| Body Emphasis | Rubik | 16px (1.00rem) | 500–600 | 1.50 | normal | Bold body, nav items |\n| Nav Label | Rubik | 15px (0.94rem) | 500 | 1.40 | normal | Navigation links |\n| Uppercase Label | Rubik | 15px (0.94rem) | 500 | 1.25 (tight) | normal | \\`text-transform: uppercase\\` |\n| Button Text | Rubik | 14px (0.88rem) | 500–700 | 1.14–1.29 (tight) | 0.2px | \\`text-transform: uppercase\\` |\n| Caption | Rubik | 14px (0.88rem) | 500–700 | 1.00–1.43 | 0.2px | Often uppercase |\n| Small Caption | Rubik | 12px (0.75rem) | 600 | 2.00 (relaxed) | normal | Subtle annotations |\n| Micro Label | Rubik | 10px (0.63rem) | 600 | 1.80 (relaxed) | 0.25px | \\`text-transform: uppercase\\` |\n| Code | Monaco | 16px (1.00rem) | 400–700 | 1.50 | normal | Code blocks, technical text |\n\n### Principles\n- **Dual personality**: Dammit Sans brings irreverent brand character at display scale; Rubik provides clean professionalism for everything functional.\n- **Uppercase as system**: Buttons, captions, labels, and micro-text all use \\`text-transform: uppercase\\` with subtle letter-spacing (0.2px–0.25px), creating a systematic \"technical label\" pattern throughout.\n- **Weight stratification**: Rubik uses 400 (body), 500 (emphasis/nav), 600 (titles/strong), 700 (buttons/CTAs) — a clean four-tier weight system.\n- **Tight headings, relaxed body**: All headings use 1.10–1.25 line-height; body uses 1.50; small captions expand to 2.00 for readability at tiny sizes.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Muted Purple**\n- Background: \\`#79628c\\` (rgb(121, 98, 140))\n- Text: \\`#ffffff\\`, uppercase, 14px, weight 500–700, letter-spacing 0.2px\n- Border: \\`1px solid #584674\\`\n- Radius: 13px\n- Shadow: \\`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px inset\\` (tactile inset)\n- Hover: elevated shadow \\`rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem\\`\n\n**Glass White**\n- Background: \\`rgba(255, 255, 255, 0.18)\\` (frosted glass)\n- Text: \\`#ffffff\\`\n- Padding: 8px\n- Radius: 12px (left-aligned variant: \\`12px 0px 0px 12px\\`)\n- Shadow: \\`rgba(0, 0, 0, 0.08) 0px 2px 8px\\`\n- Hover background: \\`rgba(54, 22, 107, 0.14)\\`\n- Use: Secondary actions on dark surfaces\n\n**White Solid**\n- Background: \\`#ffffff\\`\n- Text: \\`#1f1633\\`\n- Padding: 12px 16px\n- Radius: 8px\n- Hover: background transitions to \\`#6a5fc1\\`, text to white\n- Focus: background \\`#ffb287\\` (coral), outline \\`rgb(106, 95, 193) solid 0.125rem\\`\n- Use: High-visibility CTA on dark backgrounds\n\n**Deep Violet (Select/Dropdown)**\n- Background: \\`#422082\\`\n- Text: \\`#ffffff\\`\n- Padding: 8px 16px\n- Radius: 8px\n\n### Inputs\n\n**Text Input**\n- Background: \\`#ffffff\\`\n- Text: \\`#1f1633\\`\n- Border: \\`1px solid #cfcfdb\\`\n- Padding: 8px 12px\n- Radius: 6px\n- Focus: border-color stays \\`#cfcfdb\\`, shadow \\`rgba(0, 0, 0, 0.15) 0px 2px 10px inset\\`\n\n### Links\n- **Default on dark**: \\`#ffffff\\`, underline decoration\n- **Hover**: color transitions to \\`#6a5fc1\\` (Sentry Purple)\n- **Purple links**: \\`#6a5fc1\\` default, hover underline\n- **Lime accent links**: \\`#c2ef4e\\` default, hover to \\`#6a5fc1\\`\n- **Dark context links**: \\`#362d59\\`, hover to \\`#ffffff\\`\n\n### Cards & Containers\n- Background: semi-transparent or dark purple surfaces\n- Radius: 8px–12px\n- Shadow: \\`rgba(0, 0, 0, 0.1) 0px 10px 15px -3px\\`\n- Backdrop filter: \\`blur(18px) saturate(180%)\\` for glass effects\n\n### Navigation\n- Dark transparent header over hero content\n- Rubik 15px weight 500 for nav links\n- White text, hover to Sentry Purple (\\`#6a5fc1\\`)\n- Uppercase labels with 0.2px letter-spacing for categories\n- Mobile: hamburger menu, full-width expanded\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 5px, 6px, 8px, 12px, 16px, 24px, 32px, 40px, 44px, 45px, 47px\n\n### Grid & Container\n- Max content width: 1152px (XL breakpoint)\n- Responsive padding: 2rem (mobile) → 4rem (tablet+)\n- Content centered within container\n- Full-width dark sections with contained inner content\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | < 576px | Single column, stacked layout |\n| Small Tablet | 576–640px | Minor width adjustments |\n| Tablet | 640–768px | 2-column begins |\n| Small Desktop | 768–992px | Full nav visible |\n| Desktop | 992–1152px | Standard layout |\n| Large Desktop | 1152–1440px | Max-width content |\n\n### Whitespace Philosophy\n- **Dark breathing room**: Generous vertical spacing between sections (64px–80px+) lets the dark background serve as a visual rest.\n- **Content islands**: Feature sections are self-contained blocks floating in the dark purple sea, each with its own internal spacing rhythm.\n- **Asymmetric padding**: Buttons use asymmetric padding patterns (12px 16px, 8px 12px) that feel organic rather than rigid.\n\n### Border Radius Scale\n- Minimal (6px): Form inputs, small interactive elements\n- Standard (8px): Buttons, cards, containers\n- Comfortable (10px–12px): Larger containers, glass panels\n- Rounded (13px): Primary muted buttons\n- Pill (18px): Image containers, badges\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Sunken (Level -1) | Inset shadow \\`rgba(0, 0, 0, 0.1) 0px 1px 3px inset\\` | Primary buttons (tactile pressed feel) |\n| Flat (Level 0) | No shadow | Default surfaces, dark backgrounds |\n| Surface (Level 1) | \\`rgba(0, 0, 0, 0.08) 0px 2px 8px\\` | Glass buttons, subtle cards |\n| Elevated (Level 2) | \\`rgba(0, 0, 0, 0.1) 0px 10px 15px -3px\\` | Cards, floating panels |\n| Prominent (Level 3) | \\`rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem\\` | Hover states, modals |\n| Ambient (Level 4) | \\`rgba(22, 15, 36, 0.9) 0px 4px 4px 9px\\` | Deep purple ambient glow around hero |\n\n**Shadow Philosophy**: Sentry uses a unique combination of inset shadows (buttons feel pressed INTO the surface) and ambient glows (content radiates from the dark background). The deep purple ambient shadow (\\`rgba(22, 15, 36, 0.9)\\`) is the signature — it creates a bioluminescent quality where content seems to emit its own purple-tinted light.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use deep purple backgrounds (\\`#1f1633\\`, \\`#150f23\\`) — never pure black (\\`#000000\\`)\n- Apply inset shadows on primary buttons for the tactile pressed effect\n- Use Dammit Sans ONLY for hero/display headings — Rubik for everything else\n- Apply \\`text-transform: uppercase\\` with \\`letter-spacing: 0.2px\\` on buttons and labels\n- Use the lime-green accent (\\`#c2ef4e\\`) sparingly for maximum impact\n- Employ frosted glass effects (\\`blur(18px) saturate(180%)\\`) for layered surfaces\n- Maintain the warm purple shadow tones — shadows should feel purple-tinted, not neutral gray\n- Use Rubik's 4-tier weight system: 400 (body), 500 (nav/emphasis), 600 (titles), 700 (CTAs)\n\n### Don't\n- Don't use pure black (\\`#000000\\`) for backgrounds — always use the warm purple-blacks\n- Don't apply Dammit Sans to body text or UI elements — it's display-only\n- Don't use standard gray (\\`#666\\`, \\`#999\\`) for borders — use purple-tinted grays (\\`#362d59\\`, \\`#584674\\`)\n- Don't drop the uppercase treatment on buttons — it's a system-wide pattern\n- Don't use sharp corners (0px radius) — minimum 6px for all interactive elements\n- Don't mix the lime-green accent with the coral/pink accents in the same component\n- Don't use flat (non-inset) shadows on primary buttons — the tactile quality is signature\n- Don't forget letter-spacing on uppercase text — 0.2px minimum\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <576px | Single column, hamburger nav, stacked CTAs |\n| Tablet | 576–768px | 2-column feature grids begin |\n| Small Desktop | 768–992px | Full navigation, side-by-side layouts |\n| Desktop | 992–1152px | Max-width container, full layout |\n| Large | >1152px | Content max-width maintained, generous margins |\n\n### Collapsing Strategy\n- Hero text: 88px Dammit Sans → 60px → mobile scales\n- Navigation: horizontal → hamburger with slide-out\n- Feature sections: side-by-side → stacked cards\n- Buttons: inline → full-width stacked on mobile\n- Container padding: 4rem → 2rem\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: \\`#1f1633\\` (primary), \\`#150f23\\` (deeper)\n- Text: \\`#ffffff\\` (primary), \\`#e5e7eb\\` (secondary)\n- Interactive: \\`#6a5fc1\\` (links/hover), \\`#79628c\\` (buttons)\n- Accent: \\`#c2ef4e\\` (lime highlight), \\`#ffb287\\` (coral focus)\n- Border: \\`#362d59\\` (dark), \\`#cfcfdb\\` (light context)\n\n### Example Component Prompts\n- \"Create a hero section on deep purple background (#1f1633). Headline at 88px Dammit Sans weight 700, line-height 1.20, white text. Sub-text at 16px Rubik weight 400, line-height 1.50. White solid CTA button (8px radius, 12px 16px padding), hover transitions to #6a5fc1.\"\n- \"Design a navigation bar: transparent over dark background. Rubik 15px weight 500, white text. Uppercase category labels with 0.2px letter-spacing. Hover color #6a5fc1.\"\n- \"Build a primary button: background #79628c, border 1px solid #584674, inset shadow rgba(0,0,0,0.1) 0px 1px 3px, white uppercase text at 14px Rubik weight 700, letter-spacing 0.2px, radius 13px. Hover: shadow rgba(0,0,0,0.18) 0px 0.5rem 1.5rem.\"\n- \"Create a glass card panel: background rgba(255,255,255,0.18), backdrop-filter blur(18px) saturate(180%), radius 12px. White text content inside.\"\n- \"Design a feature section: #150f23 background, 24px Rubik weight 500 heading, 16px Rubik weight 400 body text. 14px uppercase lime-green (#c2ef4e) label above heading.\"\n\n### Iteration Guide\n1. Always start with the dark purple background — the color palette is built FOR dark mode\n2. Use inset shadows on buttons, ambient purple glows on hero sections\n3. Uppercase + letter-spacing is the systematic pattern for labels, buttons, and captions\n4. Lime green (#c2ef4e) is the \"pop\" color — use once per section maximum\n5. Frosted glass for overlaid panels, solid purple for primary surfaces\n6. Rubik handles 90% of typography — Dammit Sans is hero-only\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/shopify.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const shopifyBrief = `# Design System Inspired by Shopify\n\n## 1. Visual Theme & Atmosphere\n\nShopify.com is a dark-first digital theatre — a website that stages its commerce platform like a cinematic premiere. The entire experience unfolds against an abyss of near-black surfaces that carry the faintest whisper of deep forest green (\\`#02090A\\`, \\`#061A1C\\`, \\`#102620\\`), creating a nocturnal atmosphere that feels less like a SaaS marketing page and more like an exclusive product reveal at a tech keynote. This darkness isn't cold or corporate — it's the warm, enveloping dark of a luxury experience, like sitting in the front row of a darkened auditorium.\n\nThe typography is the undeniable star. NeueHaasGrotesk — a refined Helvetica descendant — appears at monumental scale (96px) with impossibly light weight (330-400), creating headlines that feel etched in light rather than printed in ink. The \\`ss03\\` OpenType feature gives letterforms a distinctive character that separates Shopify's type from generic Helvetica usage. Below the display layer, Inter Variable handles body text with surgical precision, using equally unusual variable weights (420, 450, 550) that live in the spaces between traditional weight stops. This precision signals a company that sweats every detail.\n\nColor is used with extreme restraint. The primary accent is Shopify Neon Green (\\`#36F4A4\\`) — an electric mint that appears exclusively on focus rings and accent highlights, pulsing like a bioluminescent signal against the dark canvas. Softer green tints (Aloe \\`#C1FBD4\\`, Pistachio \\`#D4F9E0\\`) provide atmospheric washes. White is the only text color that matters on dark surfaces, while a zinc-based neutral scale (\\`#A1A1AA\\` through \\`#3F3F46\\`) handles the hierarchy of quiet information. The result is a design that makes commerce technology feel like it belongs in a science-fiction future.\n\n**Key Characteristics:**\n- Dark-first design with deep forest-teal undertones (not pure black)\n- Ultra-light display typography (weight 330) at monumental scale (96px) creating an ethereal presence\n- Neon Green (\\`#36F4A4\\`) as the singular high-energy accent against darkness\n- Full-pill buttons (9999px radius) as the primary interactive shape\n- Layered, multi-stage box shadows creating photographic depth\n- Product screenshots embedded in dark UI contexts, matching the surrounding darkness\n- Zinc-based neutral scale for text hierarchy — balanced between warm and cool\n\n## 2. Color Palette & Roles\n\n### Primary\n\n- **Shopify White** (\\`#FFFFFF\\`): Primary text on dark surfaces, button fills, high-contrast elements\n- **Shopify Black** (\\`#000000\\`): Body background, button text on white, maximum contrast base (--color-shade-100)\n\n### Secondary & Accent\n\n- **Neon Green** (\\`#36F4A4\\`): The signature accent — focus rings, interactive highlights, active state indicators. Electric and bioluminescent\n- **Aloe** (\\`#C1FBD4\\`): Soft green wash for decorative backgrounds, atmospheric cards (--color-aloe-10)\n- **Pistachio** (\\`#D4F9E0\\`): Lightest green tint for subtle surface differentiation (--color-pistachio-10)\n\n### Surface & Background\n\n- **Void** (\\`#000000\\`): Root page background — true black for maximum depth\n- **Deep Teal** (\\`#02090A\\`): Card surfaces, content containers — near-black with green undertone\n- **Dark Forest** (\\`#061A1C\\`): Section backgrounds with visible green character\n- **Forest** (\\`#102620\\`): Elevated dark surfaces, header backgrounds — the warmest dark shade\n- **Dark Card Border** (\\`#1E2C31\\`): Card borders on dark surfaces, subtle boundary definition\n\n### Neutrals & Text (Zinc Scale)\n\n- **Shade-30** (\\`#D4D4D8\\`): Lightest neutral, barely-there borders on dark (--color-shade-30)\n- **Muted Text** (\\`#A1A1AA\\`): Secondary text, metadata, descriptions — the quiet voice\n- **Shade-50** (\\`#71717A\\`): Tertiary text, timestamps, least important info (--color-shade-50)\n- **Shade-60** (\\`#52525B\\`): Disabled text, decorative neutrals (--color-shade-60)\n- **Shade-70** (\\`#3F3F46\\`): Subtle dividers, barely-visible UI boundaries (--color-shade-70)\n- **Light Border** (\\`#E4E4E7\\`): Borders on light surfaces (rare — only in light-mode modals)\n\n### Semantic & Accent\n\n- **Link Muted** (\\`#9797A2\\`): Muted link text with underline decoration\n- **Link Sage** (\\`#9DABAD\\`): Teal-tinted muted links\n- **Link Lavender** (\\`#BDBDCA\\`): Lighter link variant\n- **Link Mint** (\\`#99B3AD\\`): Green-tinted link variant for themed sections\n\n### Gradient System\n\n- **Dark Teal Wash**: Radial gradient from \\`#102620\\` center to \\`#02090A\\` edge — used behind product showcases\n- **Green Atmospheric**: Subtle green-tinted ambient gradients behind hero sections, creating depth without solid colors\n- **Spotlight**: Focused bright area fading to black — creates keynote-style presentation lighting\n\n## 3. Typography Rules\n\n### Font Family\n\n**Display:** NeueHaasGrotesk (refined Helvetica descendant, variable font)\n- Fallbacks: Helvetica, Arial, sans-serif\n- OpenType features: \\`ss03\\` (stylistic set 3 — distinctive letterform alternates)\n- Available weights: 330, 360, 400, 500, 750 (variable)\n- Used for all headings, hero text, and large display elements\n\n**Body:** Inter-Variable\n- Fallbacks: Helvetica, Arial, sans-serif\n- OpenType features: \\`ss03\\`\n- Available weights: 400, 420, 450, 500, 550 (variable)\n- Used for body text, links, buttons, UI elements\n\n**Mono:** ui-monospace\n- Fallbacks: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New\n- Used for code snippets, data labels, technical content\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Display XL | 96px | 400 | 1.00 | — | NeueHaasGrotesk, hero headlines, \"ss03\" |\n| Display XL Bold | 90.74px | 750 | 1.00 | 4.54px | NeueHaasGrotesk, emphasis display |\n| Display XL Tracked | 96px | 400 | 1.00 | 2.4px | NeueHaasGrotesk, spaced display |\n| Display Light | 96px | 330 | 0.96 | — | NeueHaasGrotesk, ethereal display |\n| Heading 1 | 70px | 330 | 1.00 | — | NeueHaasGrotesk, section titles |\n| Heading 2 | 55px | 330 | 1.16 | — | NeueHaasGrotesk, subsections |\n| Heading 3 | 48px | 330 | 1.14 | — | NeueHaasGrotesk, feature titles |\n| Heading 4 | 32px | 360 | 1.14 | 0.32px | NeueHaasGrotesk, card headings |\n| Heading 5 | 28px | 500 | 1.28 | 0.42px | NeueHaasGrotesk, small headings |\n| Heading 6 | 24px | 400 | 1.14 | 0.36px | NeueHaasGrotesk, minor headings |\n| Body Large | 20px | 500 | 1.40 | 0.3px | NeueHaasGrotesk / Inter, lead paragraphs |\n| Body | 18px | 400 | 1.56 | — | Inter-Variable, standard body |\n| Body Medium | 18px | 550 | 1.56 | — | Inter-Variable, emphasized body |\n| Body Small | 16px | 400 | 1.50 | — | Inter / NeueHaasGrotesk, compact body |\n| Body Small Medium | 16px | 420 | 1.50 | — | Inter-Variable, slightly emphasized |\n| Button | 16px | 400 | 1.50 | — | NeueHaasGrotesk, CTA text |\n| Nav Link | 18px | 500 | 1.25 | 0.72px | NeueHaasGrotesk, navigation items |\n| Caption | 14px | 500 | 1.49 | 0.28px | NeueHaasGrotesk / Inter, metadata |\n| Caption Medium | 14px | 550 | 1.49 | 0.28px | Inter-Variable, emphasized caption |\n| Overline | 15.36px | 400 | 1.50 | 1.54px | NeueHaasGrotesk, wide-tracked labels |\n| Micro | 13px | 500 | 1.50 | -0.13px | Inter, tight-tracked small text |\n| Label | 12px | 400 | 1.20 | 0.72px | Inter, uppercase labels |\n| Code | 16px | 400 | 1.50 | — | ui-monospace, uppercase, code blocks |\n| Code Small | 12px | 400 | 1.33 | — | ui-monospace, uppercase, inline code |\n\n### Principles\n\nShopify's typography is a masterclass in variable font precision. The display layer lives almost exclusively at weights 330-400 — featherweight text that appears to hover above the dark background like projected light. This is the opposite of the bold, heavy approach most SaaS sites take: where others shout, Shopify whispers at scale. The 96px headlines at weight 330 create a paradox of enormous size and delicate stroke that feels both monumental and fragile. The \\`ss03\\` OpenType feature activates a stylistic set that gives specific characters (likely 'a', 'g', and certain numerals) a more refined appearance, distinguishing Shopify's typography from standard Helvetica Neue usage. Inter Variable handles the body layer with surgical precision, using weights like 420 and 550 that exist between the traditional stops — every piece of text has exactly the visual weight it needs.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (White Fill)**\n- Background: White (\\`#FFFFFF\\`)\n- Text: Black (\\`#000000\\`)\n- Border: 2px solid transparent\n- Border radius: full pill (9999px)\n- Padding: 12px 26px 12px 16px (asymmetric — more right padding for visual balance)\n- Hover: slight opacity reduction or background shift\n- Focus: 2px \\`#36F4A4\\` (Neon Green) outline ring\n- Transition: all 200ms ease\n\n**Secondary (Ghost/Outlined)**\n- Background: transparent\n- Text: White (\\`#FFFFFF\\`)\n- Border: 2px solid White (\\`#FFFFFF\\`)\n- Border radius: full pill (9999px)\n- Padding: 12px 26px 12px 16px\n- Hover: fills to white bg with black text\n- Focus: 2px \\`#36F4A4\\` outline\n\n**Badge/Tag (Neutral Filled)**\n- Background: \\`rgba(255, 255, 255, 0.2)\\` (frosted glass)\n- Text: White (\\`#FFFFFF\\`)\n- Border: none\n- Border radius: subtly rounded (4px)\n- Padding: 12px 16px\n- Font: 16px regular\n\n### Cards & Containers\n\n- Background: Deep Teal (\\`#02090A\\`) on dark pages\n- Border: 1px solid \\`#1E2C31\\` (Dark Card Border) — barely visible boundary\n- Border radius: 8px for standard cards, 12px for featured cards, 20px 20px 0 0 for top-rounded cards\n- Shadow: Multi-layered system:\n  - Resting: \\`rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px\\` + \\`rgba(255,255,255,0.03) 0px 1px 0px inset\\`\n  - The inset white highlight creates a subtle top-edge glow\n- Hover: shadow expands, card may slightly brighten\n- Transition: box-shadow 300ms ease, transform 200ms ease\n\n### Inputs & Forms\n\n- Background: transparent or Dark Forest (\\`#061A1C\\`)\n- Text: White (\\`#FFFFFF\\`)\n- Border: 1px solid \\`#3F3F46\\` (Shade-70)\n- Border radius: 8px\n- Padding: 12px 16px\n- Focus: 2px solid \\`#36F4A4\\` (Neon Green focus ring)\n- Placeholder: Shade-50 (\\`#71717A\\`)\n- Transition: border-color 200ms ease\n\n### Navigation\n\n- Background: transparent (overlaid on dark hero), becomes Forest (\\`#102620\\`) on scroll\n- Height: ~64px\n- Left: Shopify wordmark logo (SVG, white on dark)\n- Center/Right: nav links in 18px/500 NeueHaasGrotesk, white, letter-spacing 0.72px\n- CTA: White pill button \"Start for free\" (right)\n- Secondary CTA: Ghost button with white border\n- Hover: links shift to Muted Text (\\`#A1A1AA\\`) or gain underline\n- Mobile: hamburger menu, full-screen dark overlay\n- Transition: background 300ms ease on scroll\n\n### Image Treatment\n\n- Product screenshots: embedded in dark UI contexts, matching the surrounding darkness\n- Admin interface previews: shown on dark backgrounds with subtle card borders\n- Aspect ratios: varied — hero images are wide (16:9-ish), feature shots are flexible\n- All images sit flush within dark containers — no bright borders or frames\n- Lazy loading with dark placeholder surfaces\n\n### Trust Indicators\n\n- Statistics displayed prominently: \"15+\" (years), \"150M+\" (buyers)\n- Numbers at display scale in NeueHaasGrotesk\n- Partner/developer ecosystem callout sections\n- Dark-themed testimonials integrated into the page flow\n\n## 5. Layout Principles\n\n### Spacing System\n\nBase unit: 8px\n\n| Token | Value | Use |\n|-------|-------|-----|\n| space-1 | 4px | Tight inline gaps |\n| space-2 | 8px | Base unit, icon gaps |\n| space-3 | 12px | Card padding, tight margins |\n| space-4 | 16px | Standard element padding |\n| space-5 | 24px | Card gaps, section padding |\n| space-6 | 28px | Medium section spacing |\n| space-7 | 32px | Section breaks |\n| space-8 | 36px | Large padding |\n| space-9 | 40px | Major section padding |\n| space-10 | 64px | Hero section padding, large gaps |\n\n### Grid & Container\n\n- Max container width: ~1280px (centered)\n- Hero: full-width, edge-to-edge dark background with centered text\n- Feature sections: 2-column layouts with text and product screenshots\n- Stats sections: horizontal layout with large numbers\n- Horizontal padding: 64px desktop, 32px tablet, 16px mobile\n- Grid gap: 24-32px between major content blocks\n\n### Whitespace Philosophy\n\nShopify's whitespace strategy is theatrical. Sections are separated by vast expanses of dark space — 80px to 120px of pure black breathing room — that create the pacing of a presentation, not a webpage. Each content block is its own \"slide\" in a keynote-style scroll. Within sections, spacing is tighter and more deliberate, creating focal density against the expansive void. The contrast between macro-level emptiness and micro-level precision is what gives the site its cinematic cadence.\n\n### Border Radius Scale\n\n| Value | Context |\n|-------|---------|\n| 4px | Tags, badges, micro-elements |\n| 8px | Standard cards, inputs, video containers |\n| 12px | Featured cards, image containers, buttons (non-pill) |\n| 20px | Top-rounded cards (20px 20px 0 0), modal headers |\n| 340px | Large rounded decorative elements |\n| 9999px | Pill buttons, pill badges, nav elements |\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Base | No shadow, dark surface | Default page background |\n| Subtle | \\`rgba(0,0,0,0.1) 0px 0px 0px 1px\\` + inset white glow | Resting cards |\n| Medium | Multi-layer: 1px ring + 2px + 4px + 8px shadow stack | Elevated cards, featured sections |\n| High | \\`rgba(0,0,0,0.25) 0px 25px 50px -12px\\` | Modals, dropdowns, overlays |\n| Focus | \\`0px 0px 0px 2px #36F4A4\\` | Keyboard focus ring (Neon Green) |\n\nShopify's shadow system is unusually sophisticated. Rather than single-value shadows, cards use a stacked, multi-layer approach: a 1px ring for boundary definition, 2px/4px/8px progressive blurs for natural light falloff, and a delicate inset white glow (\\`rgba(255,255,255,0.03)\\`) that simulates a top-lit glass surface. On dark backgrounds, shadows darken from already-dark surfaces, so the shadows function more as \"ambient occlusion\" than traditional elevation — the card appears to sink slightly into the surface rather than float above it.\n\n### Decorative Depth\n\n- **Dark teal gradients**: Ambient radial washes behind hero sections and product showcases\n- **Spotlight effects**: Bright centered areas fading to black, creating keynote-style theatrical lighting\n- **Edge glow**: Subtle light colored edges on dark cards via inset box-shadow\n- **Green atmospheric halos**: Faint green tints in background gradients, echoing the brand accent\n\n## 7. Do's and Don'ts\n\n### Do\n\n- Use the dark teal-black surface hierarchy (Void → Deep Teal → Dark Forest → Forest) for depth\n- Keep display typography at weight 330-400 — the ethereal lightness is the design's signature\n- Use Neon Green (\\`#36F4A4\\`) exclusively for focus states and critical accent highlights\n- Apply 9999px radius to all primary CTA buttons — the full pill is non-negotiable\n- Use the multi-layered shadow system for card elevation — single shadows look flat\n- Maintain the \\`ss03\\` OpenType feature across all text — it's part of the typographic identity\n- Use Inter Variable for body text and NeueHaasGrotesk for headings — never mix their roles\n- Create theatrical spacing between sections (80px+) for cinematic pacing\n\n### Don't\n\n- Don't use pure black (#000000) for text on dark backgrounds — use white (#FFFFFF) only\n- Don't introduce warm colors (orange, red, yellow) — the palette is strictly cool (greens, teals, neutrals)\n- Don't use font weights above 500 for NeueHaasGrotesk body text — heavy weights break the ethereal feel\n- Don't apply green accents to large surfaces — Neon Green is for small, precise highlights only\n- Don't use sharp corners (0px radius) on interactive elements — everything rounds\n- Don't add bright backgrounds — the dark theme is fundamental, not optional\n- Don't use single-layer box shadows — the stacked approach is the system\n- Don't set line-height above 1.56 for body text — Shopify's text is relatively compact\n- Don't mix NeueHaasGrotesk and Inter at the same size/role — their weight scales differ\n- Don't use letter-spacing below 0 for headings — Shopify headings track neutral or positive\n\n## 8. Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <640px | Single column, hamburger nav, display text scales to 48px, 16px padding |\n| Tablet | 640-1024px | 2-column grids begin, display text at 70px, 32px padding |\n| Desktop | 1024-1440px | Full layout, expanded nav, 96px display, 64px padding |\n| Large Desktop | >1440px | Max-width container centered, increased section spacing |\n\n### Touch Targets\n\n- Minimum touch target: 44x44px (WCAG AAA)\n- Pill buttons: 48px height minimum with generous horizontal padding\n- Nav links: 44px touch area\n- Card surfaces: full card is tappable where linked\n\n### Collapsing Strategy\n\n- **Navigation**: Full horizontal links → hamburger menu below 1024px; logo and CTA button remain visible\n- **Hero section**: 96px display → 70px at tablet → 48px on mobile; maintains single-column center alignment\n- **Feature sections**: 2-column text+image → stacked single column below 768px\n- **Stats**: Horizontal row → stacked vertical on mobile\n- **Section padding**: 64px → 40px → 24px → 16px as viewport narrows\n- **Cards**: Grid → stack, maintaining full-width on mobile\n\n### Image Behavior\n\n- Product screenshots: responsive within dark containers, maintain aspect ratio\n- Hero images: full-width on all breakpoints, lazy loaded with dark placeholders\n- Admin UI previews: scale proportionally, may crop on mobile\n- All images use CDN (\\`cdn.shopify.com\\`) with responsive srcset\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n\n- Primary CTA: Shopify White (\\`#FFFFFF\\`)\n- Page background: Void Black (\\`#000000\\`)\n- Card surface: Deep Teal (\\`#02090A\\`)\n- Section bg: Dark Forest (\\`#061A1C\\`)\n- Elevated bg: Forest (\\`#102620\\`)\n- Accent: Neon Green (\\`#36F4A4\\`)\n- Body text: White (\\`#FFFFFF\\`)\n- Muted text: Muted (\\`#A1A1AA\\`)\n- Border dark: Dark Card Border (\\`#1E2C31\\`)\n\n### Example Component Prompts\n\n- \"Create a hero section on true black (#000000) background with a 96px/330 NeueHaasGrotesk headline in white, a 20px/500 subtitle in #A1A1AA, and two pill buttons: white filled (9999px radius) and ghost with 2px white border\"\n- \"Design a feature card on Deep Teal (#02090A) with 1px #1E2C31 border, 12px radius, multi-layer shadow (1px ring + 2px/4px/8px blur at 10% black), containing a 32px/360 white heading and 18px/400 #A1A1AA body text\"\n- \"Build a stats section on Dark Forest (#061A1C) with 96px/750 white numbers (NeueHaasGrotesk), 16px/400 #A1A1AA descriptive labels, and generous 64px spacing between stat blocks\"\n- \"Create a sticky nav with transparent background (becomes #102620 on scroll), white Shopify logo left, 18px/500 white nav links with 0.72px letter-spacing, and a white pill 'Start for free' button right\"\n- \"Design a tag/badge with rgba(255,255,255,0.2) frosted glass background, 4px radius, 12px 16px padding, white 16px text — floating over a dark card surface\"\n\n### Iteration Guide\n\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time\n2. Reference specific color names and hex codes from this document\n3. Remember: this is a DARK-FIRST design — light surfaces are the exception, not the rule\n4. Display text should always feel feather-light (weight 330-400) — if it looks heavy, reduce the weight\n5. Neon Green (#36F4A4) is precious — use sparingly for focus and accent only\n6. The dark surface hierarchy (black → deep teal → dark forest → forest) creates subtle depth\n7. Shadows are multi-layered — a single \\`box-shadow\\` value won't capture the Shopify card feel\n8. \\`ss03\\` OpenType feature must be active on all text for typographic consistency\n`;\n"],"mappings":";AACO,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/shopify.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const shopifyBrief = `# Design System Inspired by Shopify\n\n## 1. Visual Theme & Atmosphere\n\nShopify.com is a dark-first digital theatre — a website that stages its commerce platform like a cinematic premiere. The entire experience unfolds against an abyss of near-black surfaces that carry the faintest whisper of deep forest green (\\`#02090A\\`, \\`#061A1C\\`, \\`#102620\\`), creating a nocturnal atmosphere that feels less like a SaaS marketing page and more like an exclusive product reveal at a tech keynote. This darkness isn't cold or corporate — it's the warm, enveloping dark of a luxury experience, like sitting in the front row of a darkened auditorium.\n\nThe typography is the undeniable star. NeueHaasGrotesk — a refined Helvetica descendant — appears at monumental scale (96px) with impossibly light weight (330-400), creating headlines that feel etched in light rather than printed in ink. The \\`ss03\\` OpenType feature gives letterforms a distinctive character that separates Shopify's type from generic Helvetica usage. Below the display layer, Inter Variable handles body text with surgical precision, using equally unusual variable weights (420, 450, 550) that live in the spaces between traditional weight stops. This precision signals a company that sweats every detail.\n\nColor is used with extreme restraint. The primary accent is Shopify Neon Green (\\`#36F4A4\\`) — an electric mint that appears exclusively on focus rings and accent highlights, pulsing like a bioluminescent signal against the dark canvas. Softer green tints (Aloe \\`#C1FBD4\\`, Pistachio \\`#D4F9E0\\`) provide atmospheric washes. White is the only text color that matters on dark surfaces, while a zinc-based neutral scale (\\`#A1A1AA\\` through \\`#3F3F46\\`) handles the hierarchy of quiet information. The result is a design that makes commerce technology feel like it belongs in a science-fiction future.\n\n**Key Characteristics:**\n- Dark-first design with deep forest-teal undertones (not pure black)\n- Ultra-light display typography (weight 330) at monumental scale (96px) creating an ethereal presence\n- Neon Green (\\`#36F4A4\\`) as the singular high-energy accent against darkness\n- Full-pill buttons (9999px radius) as the primary interactive shape\n- Layered, multi-stage box shadows creating photographic depth\n- Product screenshots embedded in dark UI contexts, matching the surrounding darkness\n- Zinc-based neutral scale for text hierarchy — balanced between warm and cool\n\n## 2. Color Palette & Roles\n\n### Primary\n\n- **Shopify White** (\\`#FFFFFF\\`): Primary text on dark surfaces, button fills, high-contrast elements\n- **Shopify Black** (\\`#000000\\`): Body background, button text on white, maximum contrast base (--color-shade-100)\n\n### Secondary & Accent\n\n- **Neon Green** (\\`#36F4A4\\`): The signature accent — focus rings, interactive highlights, active state indicators. Electric and bioluminescent\n- **Aloe** (\\`#C1FBD4\\`): Soft green wash for decorative backgrounds, atmospheric cards (--color-aloe-10)\n- **Pistachio** (\\`#D4F9E0\\`): Lightest green tint for subtle surface differentiation (--color-pistachio-10)\n\n### Surface & Background\n\n- **Void** (\\`#000000\\`): Root page background — true black for maximum depth\n- **Deep Teal** (\\`#02090A\\`): Card surfaces, content containers — near-black with green undertone\n- **Dark Forest** (\\`#061A1C\\`): Section backgrounds with visible green character\n- **Forest** (\\`#102620\\`): Elevated dark surfaces, header backgrounds — the warmest dark shade\n- **Dark Card Border** (\\`#1E2C31\\`): Card borders on dark surfaces, subtle boundary definition\n\n### Neutrals & Text (Zinc Scale)\n\n- **Shade-30** (\\`#D4D4D8\\`): Lightest neutral, barely-there borders on dark (--color-shade-30)\n- **Muted Text** (\\`#A1A1AA\\`): Secondary text, metadata, descriptions — the quiet voice\n- **Shade-50** (\\`#71717A\\`): Tertiary text, timestamps, least important info (--color-shade-50)\n- **Shade-60** (\\`#52525B\\`): Disabled text, decorative neutrals (--color-shade-60)\n- **Shade-70** (\\`#3F3F46\\`): Subtle dividers, barely-visible UI boundaries (--color-shade-70)\n- **Light Border** (\\`#E4E4E7\\`): Borders on light surfaces (rare — only in light-mode modals)\n\n### Semantic & Accent\n\n- **Link Muted** (\\`#9797A2\\`): Muted link text with underline decoration\n- **Link Sage** (\\`#9DABAD\\`): Teal-tinted muted links\n- **Link Lavender** (\\`#BDBDCA\\`): Lighter link variant\n- **Link Mint** (\\`#99B3AD\\`): Green-tinted link variant for themed sections\n\n### Gradient System\n\n- **Dark Teal Wash**: Radial gradient from \\`#102620\\` center to \\`#02090A\\` edge — used behind product showcases\n- **Green Atmospheric**: Subtle green-tinted ambient gradients behind hero sections, creating depth without solid colors\n- **Spotlight**: Focused bright area fading to black — creates keynote-style presentation lighting\n\n## 3. Typography Rules\n\n### Font Family\n\n**Display:** NeueHaasGrotesk (refined Helvetica descendant, variable font)\n- Fallbacks: Helvetica, Arial, sans-serif\n- OpenType features: \\`ss03\\` (stylistic set 3 — distinctive letterform alternates)\n- Available weights: 330, 360, 400, 500, 750 (variable)\n- Used for all headings, hero text, and large display elements\n\n**Body:** Inter-Variable\n- Fallbacks: Helvetica, Arial, sans-serif\n- OpenType features: \\`ss03\\`\n- Available weights: 400, 420, 450, 500, 550 (variable)\n- Used for body text, links, buttons, UI elements\n\n**Mono:** ui-monospace\n- Fallbacks: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New\n- Used for code snippets, data labels, technical content\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Display XL | 96px | 400 | 1.00 | — | NeueHaasGrotesk, hero headlines, \"ss03\" |\n| Display XL Bold | 90.74px | 750 | 1.00 | 4.54px | NeueHaasGrotesk, emphasis display |\n| Display XL Tracked | 96px | 400 | 1.00 | 2.4px | NeueHaasGrotesk, spaced display |\n| Display Light | 96px | 330 | 0.96 | — | NeueHaasGrotesk, ethereal display |\n| Heading 1 | 70px | 330 | 1.00 | — | NeueHaasGrotesk, section titles |\n| Heading 2 | 55px | 330 | 1.16 | — | NeueHaasGrotesk, subsections |\n| Heading 3 | 48px | 330 | 1.14 | — | NeueHaasGrotesk, feature titles |\n| Heading 4 | 32px | 360 | 1.14 | 0.32px | NeueHaasGrotesk, card headings |\n| Heading 5 | 28px | 500 | 1.28 | 0.42px | NeueHaasGrotesk, small headings |\n| Heading 6 | 24px | 400 | 1.14 | 0.36px | NeueHaasGrotesk, minor headings |\n| Body Large | 20px | 500 | 1.40 | 0.3px | NeueHaasGrotesk / Inter, lead paragraphs |\n| Body | 18px | 400 | 1.56 | — | Inter-Variable, standard body |\n| Body Medium | 18px | 550 | 1.56 | — | Inter-Variable, emphasized body |\n| Body Small | 16px | 400 | 1.50 | — | Inter / NeueHaasGrotesk, compact body |\n| Body Small Medium | 16px | 420 | 1.50 | — | Inter-Variable, slightly emphasized |\n| Button | 16px | 400 | 1.50 | — | NeueHaasGrotesk, CTA text |\n| Nav Link | 18px | 500 | 1.25 | 0.72px | NeueHaasGrotesk, navigation items |\n| Caption | 14px | 500 | 1.49 | 0.28px | NeueHaasGrotesk / Inter, metadata |\n| Caption Medium | 14px | 550 | 1.49 | 0.28px | Inter-Variable, emphasized caption |\n| Overline | 15.36px | 400 | 1.50 | 1.54px | NeueHaasGrotesk, wide-tracked labels |\n| Micro | 13px | 500 | 1.50 | -0.13px | Inter, tight-tracked small text |\n| Label | 12px | 400 | 1.20 | 0.72px | Inter, uppercase labels |\n| Code | 16px | 400 | 1.50 | — | ui-monospace, uppercase, code blocks |\n| Code Small | 12px | 400 | 1.33 | — | ui-monospace, uppercase, inline code |\n\n### Principles\n\nShopify's typography is a masterclass in variable font precision. The display layer lives almost exclusively at weights 330-400 — featherweight text that appears to hover above the dark background like projected light. This is the opposite of the bold, heavy approach most SaaS sites take: where others shout, Shopify whispers at scale. The 96px headlines at weight 330 create a paradox of enormous size and delicate stroke that feels both monumental and fragile. The \\`ss03\\` OpenType feature activates a stylistic set that gives specific characters (likely 'a', 'g', and certain numerals) a more refined appearance, distinguishing Shopify's typography from standard Helvetica Neue usage. Inter Variable handles the body layer with surgical precision, using weights like 420 and 550 that exist between the traditional stops — every piece of text has exactly the visual weight it needs.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (White Fill)**\n- Background: White (\\`#FFFFFF\\`)\n- Text: Black (\\`#000000\\`)\n- Border: 2px solid transparent\n- Border radius: full pill (9999px)\n- Padding: 12px 26px 12px 16px (asymmetric — more right padding for visual balance)\n- Hover: slight opacity reduction or background shift\n- Focus: 2px \\`#36F4A4\\` (Neon Green) outline ring\n- Transition: all 200ms ease\n\n**Secondary (Ghost/Outlined)**\n- Background: transparent\n- Text: White (\\`#FFFFFF\\`)\n- Border: 2px solid White (\\`#FFFFFF\\`)\n- Border radius: full pill (9999px)\n- Padding: 12px 26px 12px 16px\n- Hover: fills to white bg with black text\n- Focus: 2px \\`#36F4A4\\` outline\n\n**Badge/Tag (Neutral Filled)**\n- Background: \\`rgba(255, 255, 255, 0.2)\\` (frosted glass)\n- Text: White (\\`#FFFFFF\\`)\n- Border: none\n- Border radius: subtly rounded (4px)\n- Padding: 12px 16px\n- Font: 16px regular\n\n### Cards & Containers\n\n- Background: Deep Teal (\\`#02090A\\`) on dark pages\n- Border: 1px solid \\`#1E2C31\\` (Dark Card Border) — barely visible boundary\n- Border radius: 8px for standard cards, 12px for featured cards, 20px 20px 0 0 for top-rounded cards\n- Shadow: Multi-layered system:\n  - Resting: \\`rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px\\` + \\`rgba(255,255,255,0.03) 0px 1px 0px inset\\`\n  - The inset white highlight creates a subtle top-edge glow\n- Hover: shadow expands, card may slightly brighten\n- Transition: box-shadow 300ms ease, transform 200ms ease\n\n### Inputs & Forms\n\n- Background: transparent or Dark Forest (\\`#061A1C\\`)\n- Text: White (\\`#FFFFFF\\`)\n- Border: 1px solid \\`#3F3F46\\` (Shade-70)\n- Border radius: 8px\n- Padding: 12px 16px\n- Focus: 2px solid \\`#36F4A4\\` (Neon Green focus ring)\n- Placeholder: Shade-50 (\\`#71717A\\`)\n- Transition: border-color 200ms ease\n\n### Navigation\n\n- Background: transparent (overlaid on dark hero), becomes Forest (\\`#102620\\`) on scroll\n- Height: ~64px\n- Left: Shopify wordmark logo (SVG, white on dark)\n- Center/Right: nav links in 18px/500 NeueHaasGrotesk, white, letter-spacing 0.72px\n- CTA: White pill button \"Start for free\" (right)\n- Secondary CTA: Ghost button with white border\n- Hover: links shift to Muted Text (\\`#A1A1AA\\`) or gain underline\n- Mobile: hamburger menu, full-screen dark overlay\n- Transition: background 300ms ease on scroll\n\n### Image Treatment\n\n- Product screenshots: embedded in dark UI contexts, matching the surrounding darkness\n- Admin interface previews: shown on dark backgrounds with subtle card borders\n- Aspect ratios: varied — hero images are wide (16:9-ish), feature shots are flexible\n- All images sit flush within dark containers — no bright borders or frames\n- Lazy loading with dark placeholder surfaces\n\n### Trust Indicators\n\n- Statistics displayed prominently: \"15+\" (years), \"150M+\" (buyers)\n- Numbers at display scale in NeueHaasGrotesk\n- Partner/developer ecosystem callout sections\n- Dark-themed testimonials integrated into the page flow\n\n## 5. Layout Principles\n\n### Spacing System\n\nBase unit: 8px\n\n| Token | Value | Use |\n|-------|-------|-----|\n| space-1 | 4px | Tight inline gaps |\n| space-2 | 8px | Base unit, icon gaps |\n| space-3 | 12px | Card padding, tight margins |\n| space-4 | 16px | Standard element padding |\n| space-5 | 24px | Card gaps, section padding |\n| space-6 | 28px | Medium section spacing |\n| space-7 | 32px | Section breaks |\n| space-8 | 36px | Large padding |\n| space-9 | 40px | Major section padding |\n| space-10 | 64px | Hero section padding, large gaps |\n\n### Grid & Container\n\n- Max container width: ~1280px (centered)\n- Hero: full-width, edge-to-edge dark background with centered text\n- Feature sections: 2-column layouts with text and product screenshots\n- Stats sections: horizontal layout with large numbers\n- Horizontal padding: 64px desktop, 32px tablet, 16px mobile\n- Grid gap: 24-32px between major content blocks\n\n### Whitespace Philosophy\n\nShopify's whitespace strategy is theatrical. Sections are separated by vast expanses of dark space — 80px to 120px of pure black breathing room — that create the pacing of a presentation, not a webpage. Each content block is its own \"slide\" in a keynote-style scroll. Within sections, spacing is tighter and more deliberate, creating focal density against the expansive void. The contrast between macro-level emptiness and micro-level precision is what gives the site its cinematic cadence.\n\n### Border Radius Scale\n\n| Value | Context |\n|-------|---------|\n| 4px | Tags, badges, micro-elements |\n| 8px | Standard cards, inputs, video containers |\n| 12px | Featured cards, image containers, buttons (non-pill) |\n| 20px | Top-rounded cards (20px 20px 0 0), modal headers |\n| 340px | Large rounded decorative elements |\n| 9999px | Pill buttons, pill badges, nav elements |\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Base | No shadow, dark surface | Default page background |\n| Subtle | \\`rgba(0,0,0,0.1) 0px 0px 0px 1px\\` + inset white glow | Resting cards |\n| Medium | Multi-layer: 1px ring + 2px + 4px + 8px shadow stack | Elevated cards, featured sections |\n| High | \\`rgba(0,0,0,0.25) 0px 25px 50px -12px\\` | Modals, dropdowns, overlays |\n| Focus | \\`0px 0px 0px 2px #36F4A4\\` | Keyboard focus ring (Neon Green) |\n\nShopify's shadow system is unusually sophisticated. Rather than single-value shadows, cards use a stacked, multi-layer approach: a 1px ring for boundary definition, 2px/4px/8px progressive blurs for natural light falloff, and a delicate inset white glow (\\`rgba(255,255,255,0.03)\\`) that simulates a top-lit glass surface. On dark backgrounds, shadows darken from already-dark surfaces, so the shadows function more as \"ambient occlusion\" than traditional elevation — the card appears to sink slightly into the surface rather than float above it.\n\n### Decorative Depth\n\n- **Dark teal gradients**: Ambient radial washes behind hero sections and product showcases\n- **Spotlight effects**: Bright centered areas fading to black, creating keynote-style theatrical lighting\n- **Edge glow**: Subtle light colored edges on dark cards via inset box-shadow\n- **Green atmospheric halos**: Faint green tints in background gradients, echoing the brand accent\n\n## 7. Do's and Don'ts\n\n### Do\n\n- Use the dark teal-black surface hierarchy (Void → Deep Teal → Dark Forest → Forest) for depth\n- Keep display typography at weight 330-400 — the ethereal lightness is the design's signature\n- Use Neon Green (\\`#36F4A4\\`) exclusively for focus states and critical accent highlights\n- Apply 9999px radius to all primary CTA buttons — the full pill is non-negotiable\n- Use the multi-layered shadow system for card elevation — single shadows look flat\n- Maintain the \\`ss03\\` OpenType feature across all text — it's part of the typographic identity\n- Use Inter Variable for body text and NeueHaasGrotesk for headings — never mix their roles\n- Create theatrical spacing between sections (80px+) for cinematic pacing\n\n### Don't\n\n- Don't use pure black (#000000) for text on dark backgrounds — use white (#FFFFFF) only\n- Don't introduce warm colors (orange, red, yellow) — the palette is strictly cool (greens, teals, neutrals)\n- Don't use font weights above 500 for NeueHaasGrotesk body text — heavy weights break the ethereal feel\n- Don't apply green accents to large surfaces — Neon Green is for small, precise highlights only\n- Don't use sharp corners (0px radius) on interactive elements — everything rounds\n- Don't add bright backgrounds — the dark theme is fundamental, not optional\n- Don't use single-layer box shadows — the stacked approach is the system\n- Don't set line-height above 1.56 for body text — Shopify's text is relatively compact\n- Don't mix NeueHaasGrotesk and Inter at the same size/role — their weight scales differ\n- Don't use letter-spacing below 0 for headings — Shopify headings track neutral or positive\n\n## 8. Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <640px | Single column, hamburger nav, display text scales to 48px, 16px padding |\n| Tablet | 640-1024px | 2-column grids begin, display text at 70px, 32px padding |\n| Desktop | 1024-1440px | Full layout, expanded nav, 96px display, 64px padding |\n| Large Desktop | >1440px | Max-width container centered, increased section spacing |\n\n### Touch Targets\n\n- Minimum touch target: 44x44px (WCAG AAA)\n- Pill buttons: 48px height minimum with generous horizontal padding\n- Nav links: 44px touch area\n- Card surfaces: full card is tappable where linked\n\n### Collapsing Strategy\n\n- **Navigation**: Full horizontal links → hamburger menu below 1024px; logo and CTA button remain visible\n- **Hero section**: 96px display → 70px at tablet → 48px on mobile; maintains single-column center alignment\n- **Feature sections**: 2-column text+image → stacked single column below 768px\n- **Stats**: Horizontal row → stacked vertical on mobile\n- **Section padding**: 64px → 40px → 24px → 16px as viewport narrows\n- **Cards**: Grid → stack, maintaining full-width on mobile\n\n### Image Behavior\n\n- Product screenshots: responsive within dark containers, maintain aspect ratio\n- Hero images: full-width on all breakpoints, lazy loaded with dark placeholders\n- Admin UI previews: scale proportionally, may crop on mobile\n- All images use CDN (\\`cdn.shopify.com\\`) with responsive srcset\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n\n- Primary CTA: Shopify White (\\`#FFFFFF\\`)\n- Page background: Void Black (\\`#000000\\`)\n- Card surface: Deep Teal (\\`#02090A\\`)\n- Section bg: Dark Forest (\\`#061A1C\\`)\n- Elevated bg: Forest (\\`#102620\\`)\n- Accent: Neon Green (\\`#36F4A4\\`)\n- Body text: White (\\`#FFFFFF\\`)\n- Muted text: Muted (\\`#A1A1AA\\`)\n- Border dark: Dark Card Border (\\`#1E2C31\\`)\n\n### Example Component Prompts\n\n- \"Create a hero section on true black (#000000) background with a 96px/330 NeueHaasGrotesk headline in white, a 20px/500 subtitle in #A1A1AA, and two pill buttons: white filled (9999px radius) and ghost with 2px white border\"\n- \"Design a feature card on Deep Teal (#02090A) with 1px #1E2C31 border, 12px radius, multi-layer shadow (1px ring + 2px/4px/8px blur at 10% black), containing a 32px/360 white heading and 18px/400 #A1A1AA body text\"\n- \"Build a stats section on Dark Forest (#061A1C) with 96px/750 white numbers (NeueHaasGrotesk), 16px/400 #A1A1AA descriptive labels, and generous 64px spacing between stat blocks\"\n- \"Create a sticky nav with transparent background (becomes #102620 on scroll), white Shopify logo left, 18px/500 white nav links with 0.72px letter-spacing, and a white pill 'Start for free' button right\"\n- \"Design a tag/badge with rgba(255,255,255,0.2) frosted glass background, 4px radius, 12px 16px padding, white 16px text — floating over a dark card surface\"\n\n### Iteration Guide\n\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time\n2. Reference specific color names and hex codes from this document\n3. Remember: this is a DARK-FIRST design — light surfaces are the exception, not the rule\n4. Display text should always feel feather-light (weight 330-400) — if it looks heavy, reduce the weight\n5. Neon Green (#36F4A4) is precious — use sparingly for focus and accent only\n6. The dark surface hierarchy (black → deep teal → dark forest → forest) creates subtle depth\n7. Shadows are multi-layered — a single \\`box-shadow\\` value won't capture the Shopify card feel\n8. \\`ss03\\` OpenType feature must be active on all text for typographic consistency\n`;\n"],"mappings":";AACO,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/slack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/slack.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const slackBrief = `# Design System Inspired by Slack\n\n## 1. Visual Theme & Atmosphere\n\nSlack's marketing website is a confident, enterprise-friendly showcase that balances Salesforce's corporate muscle with Slack's original playful personality. The design operates on a white canvas with deep aubergine purple (\\`#481a54\\`, \\`#4a154b\\`) as the signature brand color — a rich, wine-dark hue that distinguishes Slack from every blue-dominated enterprise tool. Product screenshots and animated UI demos punctuate the white space, creating a \"see it in action\" experience.\n\nThe typography reflects Slack's acquisition by Salesforce: Salesforce-Avant-Garde handles display headings at massive scale (64px, weight 700) with negative letter-spacing (-0.768px), while Salesforce-Sans serves as the UI/body workhorse. Both fonts carry Salesforce's geometric precision but retain enough warmth to feel approachable. Uppercase button labels with positive letter-spacing (0.8px–0.96px) create a systematic, enterprise-label voice.\n\nWhat makes Slack distinctive is its hover behavior: buttons transition from a soft lavender (\\`#f9f0ff\\`) to deep aubergine (\\`#4a154b\\`) on hover with a \\`translate(3px)\\` shift — a playful micro-animation that retains Slack's personality within the Salesforce design language. The sidebar highlight blue (\\`#1264a3\\`) provides the secondary interactive accent, and the overall shadow system uses soft, wide-radius shadows (\\`0px 0px 32px\\` at 0.1 opacity) that create a gentle, cloud-like elevation.\n\n**Key Characteristics:**\n- Aubergine purple (\\`#481a54\\`, \\`#4a154b\\`) as singular brand color — distinctive in an ocean of blue enterprise tools\n- Salesforce-Avant-Garde for display (up to 64px, weight 700, negative tracking)\n- Salesforce-Sans for body/UI with both positive and negative letter-spacing variants\n- Soft lavender button (\\`#f9f0ff\\`) → aubergine hover with translate(3px) animation\n- Sidebar Blue (\\`#1264a3\\`) as secondary interactive accent\n- Uppercase labels with wide tracking (0.8px–0.96px) for enterprise structure\n- Soft, wide-radius shadows (32px blur at 0.1 opacity) — cloud-like elevation\n- Purple inset ring (\\`rgb(97,31,105) 0px 0px 0px 1px inset\\`) for active states\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Aubergine** (\\`#481a54\\`): Deep purple brand color — hero backgrounds, dark sections\n- **Aubergine Dark** (\\`#4a154b\\`): Button hover, slightly different shade for depth\n- **Aubergine Link** (\\`#611f69\\`): Purple link text variant\n\n### Interactive\n- **Sidebar Blue** (\\`#1264a3\\`): \\`--sidebar-highlight-color\\`, active states, focus borders\n- **Hover Blue** (\\`#3860be\\`): All link hover states transition to this blue\n- **Lavender Surface** (\\`#f9f0ff\\`): Primary button background — soft, inviting purple tint\n- **Purple Border** (\\`#592466\\`): Button borders on purple context\n- **Purple Inset** (\\`rgb(97, 31, 105)\\`): Inset ring shadow for active/focus\n\n### Text\n- **White** (\\`#ffffff\\`): Primary text on dark/purple surfaces\n- **Near Black** (\\`#1d1d1d\\`): Primary text on light surfaces\n- **Black** (\\`#000000\\`): Secondary, attachment color\n- **Mid Gray** (\\`#696969\\`): Muted text, secondary descriptions\n\n### Shadows\n- **Soft Wide** (\\`rgba(0,0,0,0.1) 0px 0px 32px\\`): Primary card elevation — cloud-like\n- **Button Lift** (\\`rgba(0,0,0,0.1) 0px 5px 20px\\`): Button default shadow\n- **Subtle** (\\`rgba(0,0,0,0.2) 0px 1px 10px\\`): Light elevation\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: \\`Salesforce-Avant-Garde\\`, fallbacks: \\`system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans\\`\n- **Body / UI**: \\`Salesforce-Sans\\`, same fallback stack\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | SF-Avant-Garde | 64px (4.00rem) | 700 | 1.12 (tight) | -0.768px | Maximum impact |\n| Display Secondary | SF-Avant-Garde | 58px (3.63rem) | 600 | 1.25 (tight) | -0.464px | Sub-hero |\n| Section Heading | SF-Avant-Garde | 50px (3.13rem) | 700 | 1.12 (tight) | -0.6px | Feature sections |\n| Sub-heading | SF-Avant-Garde | 32px (2.00rem) | 700 | 1.25 (tight) | -0.256px | Card headings |\n| Card Title | SF-Avant-Garde | 24px (1.50rem) | 700 | 1.33 | -0.096px | Smaller headings |\n| Feature Label | SF-Avant-Garde | 18px (1.13rem) | 600 | 1.56 | -0.0216px | Feature emphasis |\n| Body Bold | Salesforce-Sans | 18px (1.13rem) | 700 | 1.55–1.67 | -0.072px | Strong body |\n| Body | Salesforce-Sans | 18px (1.13rem) | 400 | 1.55 | -0.0216px | Standard reading |\n| Body Light | Salesforce-Sans | 18px (1.13rem) | 300 | — | — | Light variant |\n| Button Large | SF-Avant-Garde / SF-Sans | 18px (1.13rem) | 700 | — | — | Primary CTA |\n| Button | Salesforce-Sans | 16px (1.00rem) | 700 | 1.38 | 0.2px | Standard button |\n| Nav Bold | Salesforce-Sans | 15px (0.94rem) | 700 | 1.55 | -0.0216px | Navigation |\n| Caption | Salesforce-Sans | 14px (0.88rem) | 400–700 | 1.30–1.55 | 0.1px | Metadata |\n| Uppercase Label | Salesforce-Sans | 14px (0.88rem) | 700 | 1.29 (tight) | 0.798px | \\`text-transform: uppercase\\` |\n| Uppercase Small | Salesforce-Sans | 12px (0.75rem) | 700 | 1.00 (tight) | 0.96px | \\`text-transform: uppercase\\` |\n\n### Principles\n- **Dual-font Salesforce system**: Avant-Garde for display authority, Sans for body reliability. The enterprise weight of Salesforce's type system gives Slack corporate credibility.\n- **Negative tracking on display**: -0.256px to -0.768px on headings creates compressed, impactful titles.\n- **Positive tracking on labels**: +0.2px to +0.96px on uppercase labels creates the structured enterprise labeling system.\n- **Weight 700 dominant for headings**: Both fonts use bold as the primary heading weight — confident, not subtle.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Lavender**\n- Background: \\`#f9f0ff\\` (soft lavender)\n- Text: \\`#000000\\`\n- Padding: 10px 30px\n- Shadow: \\`rgba(0,0,0,0.1) 0px 5px 20px\\`\n- Hover: background \\`#4a154b\\` (aubergine), text white, border \\`2px solid #1264a3\\`, translate(3px)\n- Active: text \\`#1264a3\\`, inset ring \\`rgb(255,255,255) 0px 0px 0px 2px inset\\`, dotted outline \\`#611f69\\`\n- The signature button — lavender to aubergine on hover\n\n**Pill Button (90px radius)**\n- Salesforce-Sans 16px weight 700\n- Various background treatments\n- 90px radius creates large pill shape\n\n**Uppercase Small**\n- Salesforce-Sans 12px weight 700\n- \\`text-transform: uppercase\\`\n- Letter-spacing: 0.96px\n- 4px radius\n\n### Cards & Containers\n- Background: white\n- Radius: 16px (cards), 48px (large panels)\n- Shadow: \\`rgba(0,0,0,0.1) 0px 0px 32px\\` (soft, wide)\n- Border: \\`1px solid rgba(0,0,0,0.04)\\` (ultra-subtle)\n- Product screenshots as primary card content\n\n### Navigation\n- Dark aubergine header or white header\n- Salesforce-Sans 15px weight 700 for nav links\n- Slack/Salesforce logo left-aligned\n- Lavender CTA button right-aligned\n- Mobile: hamburger with 4px radius toggle\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 5px, 6px, 8px, 10px, 12px, 16px, 19px, 20px, 23px, 24px, 28px\n\n### Grid & Container\n- Centered content with generous max-width\n- Product demo sections with screenshots\n- Stat counter sections with large numbers\n- Trust bar with company logos\n- Full-width aubergine footer\n\n### Whitespace Philosophy\n- **Enterprise generosity**: Wide spacing between sections creates a professional, unhurried pace that communicates stability.\n- **Demo-forward**: Product screenshots and UI demos get generous space to breathe.\n\n### Border Radius Scale\n- Minimal (2px): Close buttons, small utility\n- Subtle (4px): Standard buttons, search\n- Standard (8px): List items, video containers\n- Comfortable (12px): Video, medium panels\n- Card (16px): Feature cards, navigation\n- Large (48px): Hero panels, large containers\n- Pill (90px): Primary CTA buttons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default surfaces |\n| Soft Wide (Level 1) | \\`rgba(0,0,0,0.1) 0px 0px 32px\\` | Cards, demo panels |\n| Button (Level 2) | \\`rgba(0,0,0,0.1) 0px 5px 20px\\` | CTA buttons |\n| Subtle (Level 3) | \\`rgba(0,0,0,0.2) 0px 1px 10px\\` | Dropdowns |\n| Purple Inset | \\`rgb(97,31,105) 0px 0px 0px 1px inset\\` | Active state ring |\n\n**Shadow Philosophy**: Slack uses notably wide-radius shadows (32px blur) at low opacity (0.1), creating a cloud-like floating quality. Elements don't appear elevated — they appear to gently hover, reflecting the \"Slack is where work happens in the cloud\" metaphor.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use aubergine (\\`#481a54\\` / \\`#4a154b\\`) as the primary brand color — it's Slack's identity\n- Apply the lavender-to-aubergine hover transition on primary buttons\n- Use Salesforce-Avant-Garde for display headings only, Salesforce-Sans for everything else\n- Apply uppercase + positive letter-spacing (0.8px–0.96px) for labels and small buttons\n- Use wide-radius shadows (32px blur) for cloud-like elevation\n- Include the translate(3px) hover animation on buttons\n- Use Sidebar Blue (\\`#1264a3\\`) for secondary interactive accents\n\n### Don't\n- Don't use standard blue as the primary brand color — aubergine is non-negotiable\n- Don't skip the hover animation (translate + color shift) on primary buttons\n- Don't use heavy/sharp shadows — Slack's elevation is soft and wide\n- Don't apply negative letter-spacing to button labels — buttons use positive tracking\n- Don't use aubergine as body text color — it's for surfaces and dark sections\n- Don't mix Avant-Garde into body text — it's display-only\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <479px | Single column, hamburger nav |\n| Mobile Large | 479–768px | Slight adjustments |\n| Tablet | 768–1024px | 2-column layouts begin |\n| Desktop | 1024–1280px | Standard desktop layout |\n| Large Desktop | 1280–1440px | Expanded |\n| Ultra-wide | >1440px | Maximum width |\n\n### Collapsing Strategy\n- Hero: 64px → 50px → scales down\n- Navigation: horizontal → hamburger (4px radius toggle)\n- Feature sections: side-by-side → stacked\n- Stats: horizontal counters → vertical\n- Buttons: maintain pill shape, full-width on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand: Aubergine (\\`#481a54\\`)\n- Button: Lavender (\\`#f9f0ff\\`)\n- Button hover: Aubergine Dark (\\`#4a154b\\`)\n- Interactive: Sidebar Blue (\\`#1264a3\\`)\n- Text light: White (\\`#ffffff\\`)\n- Text dark: Near Black (\\`#1d1d1d\\`)\n- Muted: Mid Gray (\\`#696969\\`)\n\n### Example Component Prompts\n- \"Create a hero: white background. Headline at 64px Salesforce-Avant-Garde weight 700, line-height 1.12, letter-spacing -0.768px, black text. Lavender CTA button (#f9f0ff, 10px 30px padding, shadow rgba(0,0,0,0.1) 0px 5px 20px). On hover: aubergine (#4a154b) background, white text, translate(3px).\"\n- \"Design an aubergine section: #481a54 background. White text at 32px SF-Avant-Garde weight 700. Stat counters at 50px weight 700.\"\n- \"Build uppercase label: 12px Salesforce-Sans weight 700, text-transform uppercase, letter-spacing 0.96px.\"\n- \"Create a card: white background, 16px radius, shadow rgba(0,0,0,0.1) 0px 0px 32px. Product screenshot inside.\"\n\n### Iteration Guide\n1. Aubergine purple is the signature — every design should include it somewhere\n2. Lavender (#f9f0ff) buttons with aubergine hover = the Slack interaction\n3. Salesforce-Avant-Garde for display, Salesforce-Sans for body — strict split\n4. Uppercase + positive tracking for labels and small buttons\n5. Soft wide shadows (32px blur) for the cloud-floating quality\n6. translate(3px) on hover for playful enterprise personality\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;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/slack.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const slackBrief = `# Design System Inspired by Slack\n\n## 1. Visual Theme & Atmosphere\n\nSlack's marketing website is a confident, enterprise-friendly showcase that balances Salesforce's corporate muscle with Slack's original playful personality. The design operates on a white canvas with deep aubergine purple (\\`#481a54\\`, \\`#4a154b\\`) as the signature brand color — a rich, wine-dark hue that distinguishes Slack from every blue-dominated enterprise tool. Product screenshots and animated UI demos punctuate the white space, creating a \"see it in action\" experience.\n\nThe typography reflects Slack's acquisition by Salesforce: Salesforce-Avant-Garde handles display headings at massive scale (64px, weight 700) with negative letter-spacing (-0.768px), while Salesforce-Sans serves as the UI/body workhorse. Both fonts carry Salesforce's geometric precision but retain enough warmth to feel approachable. Uppercase button labels with positive letter-spacing (0.8px–0.96px) create a systematic, enterprise-label voice.\n\nWhat makes Slack distinctive is its hover behavior: buttons transition from a soft lavender (\\`#f9f0ff\\`) to deep aubergine (\\`#4a154b\\`) on hover with a \\`translate(3px)\\` shift — a playful micro-animation that retains Slack's personality within the Salesforce design language. The sidebar highlight blue (\\`#1264a3\\`) provides the secondary interactive accent, and the overall shadow system uses soft, wide-radius shadows (\\`0px 0px 32px\\` at 0.1 opacity) that create a gentle, cloud-like elevation.\n\n**Key Characteristics:**\n- Aubergine purple (\\`#481a54\\`, \\`#4a154b\\`) as singular brand color — distinctive in an ocean of blue enterprise tools\n- Salesforce-Avant-Garde for display (up to 64px, weight 700, negative tracking)\n- Salesforce-Sans for body/UI with both positive and negative letter-spacing variants\n- Soft lavender button (\\`#f9f0ff\\`) → aubergine hover with translate(3px) animation\n- Sidebar Blue (\\`#1264a3\\`) as secondary interactive accent\n- Uppercase labels with wide tracking (0.8px–0.96px) for enterprise structure\n- Soft, wide-radius shadows (32px blur at 0.1 opacity) — cloud-like elevation\n- Purple inset ring (\\`rgb(97,31,105) 0px 0px 0px 1px inset\\`) for active states\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Aubergine** (\\`#481a54\\`): Deep purple brand color — hero backgrounds, dark sections\n- **Aubergine Dark** (\\`#4a154b\\`): Button hover, slightly different shade for depth\n- **Aubergine Link** (\\`#611f69\\`): Purple link text variant\n\n### Interactive\n- **Sidebar Blue** (\\`#1264a3\\`): \\`--sidebar-highlight-color\\`, active states, focus borders\n- **Hover Blue** (\\`#3860be\\`): All link hover states transition to this blue\n- **Lavender Surface** (\\`#f9f0ff\\`): Primary button background — soft, inviting purple tint\n- **Purple Border** (\\`#592466\\`): Button borders on purple context\n- **Purple Inset** (\\`rgb(97, 31, 105)\\`): Inset ring shadow for active/focus\n\n### Text\n- **White** (\\`#ffffff\\`): Primary text on dark/purple surfaces\n- **Near Black** (\\`#1d1d1d\\`): Primary text on light surfaces\n- **Black** (\\`#000000\\`): Secondary, attachment color\n- **Mid Gray** (\\`#696969\\`): Muted text, secondary descriptions\n\n### Shadows\n- **Soft Wide** (\\`rgba(0,0,0,0.1) 0px 0px 32px\\`): Primary card elevation — cloud-like\n- **Button Lift** (\\`rgba(0,0,0,0.1) 0px 5px 20px\\`): Button default shadow\n- **Subtle** (\\`rgba(0,0,0,0.2) 0px 1px 10px\\`): Light elevation\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: \\`Salesforce-Avant-Garde\\`, fallbacks: \\`system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans\\`\n- **Body / UI**: \\`Salesforce-Sans\\`, same fallback stack\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | SF-Avant-Garde | 64px (4.00rem) | 700 | 1.12 (tight) | -0.768px | Maximum impact |\n| Display Secondary | SF-Avant-Garde | 58px (3.63rem) | 600 | 1.25 (tight) | -0.464px | Sub-hero |\n| Section Heading | SF-Avant-Garde | 50px (3.13rem) | 700 | 1.12 (tight) | -0.6px | Feature sections |\n| Sub-heading | SF-Avant-Garde | 32px (2.00rem) | 700 | 1.25 (tight) | -0.256px | Card headings |\n| Card Title | SF-Avant-Garde | 24px (1.50rem) | 700 | 1.33 | -0.096px | Smaller headings |\n| Feature Label | SF-Avant-Garde | 18px (1.13rem) | 600 | 1.56 | -0.0216px | Feature emphasis |\n| Body Bold | Salesforce-Sans | 18px (1.13rem) | 700 | 1.55–1.67 | -0.072px | Strong body |\n| Body | Salesforce-Sans | 18px (1.13rem) | 400 | 1.55 | -0.0216px | Standard reading |\n| Body Light | Salesforce-Sans | 18px (1.13rem) | 300 | — | — | Light variant |\n| Button Large | SF-Avant-Garde / SF-Sans | 18px (1.13rem) | 700 | — | — | Primary CTA |\n| Button | Salesforce-Sans | 16px (1.00rem) | 700 | 1.38 | 0.2px | Standard button |\n| Nav Bold | Salesforce-Sans | 15px (0.94rem) | 700 | 1.55 | -0.0216px | Navigation |\n| Caption | Salesforce-Sans | 14px (0.88rem) | 400–700 | 1.30–1.55 | 0.1px | Metadata |\n| Uppercase Label | Salesforce-Sans | 14px (0.88rem) | 700 | 1.29 (tight) | 0.798px | \\`text-transform: uppercase\\` |\n| Uppercase Small | Salesforce-Sans | 12px (0.75rem) | 700 | 1.00 (tight) | 0.96px | \\`text-transform: uppercase\\` |\n\n### Principles\n- **Dual-font Salesforce system**: Avant-Garde for display authority, Sans for body reliability. The enterprise weight of Salesforce's type system gives Slack corporate credibility.\n- **Negative tracking on display**: -0.256px to -0.768px on headings creates compressed, impactful titles.\n- **Positive tracking on labels**: +0.2px to +0.96px on uppercase labels creates the structured enterprise labeling system.\n- **Weight 700 dominant for headings**: Both fonts use bold as the primary heading weight — confident, not subtle.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Lavender**\n- Background: \\`#f9f0ff\\` (soft lavender)\n- Text: \\`#000000\\`\n- Padding: 10px 30px\n- Shadow: \\`rgba(0,0,0,0.1) 0px 5px 20px\\`\n- Hover: background \\`#4a154b\\` (aubergine), text white, border \\`2px solid #1264a3\\`, translate(3px)\n- Active: text \\`#1264a3\\`, inset ring \\`rgb(255,255,255) 0px 0px 0px 2px inset\\`, dotted outline \\`#611f69\\`\n- The signature button — lavender to aubergine on hover\n\n**Pill Button (90px radius)**\n- Salesforce-Sans 16px weight 700\n- Various background treatments\n- 90px radius creates large pill shape\n\n**Uppercase Small**\n- Salesforce-Sans 12px weight 700\n- \\`text-transform: uppercase\\`\n- Letter-spacing: 0.96px\n- 4px radius\n\n### Cards & Containers\n- Background: white\n- Radius: 16px (cards), 48px (large panels)\n- Shadow: \\`rgba(0,0,0,0.1) 0px 0px 32px\\` (soft, wide)\n- Border: \\`1px solid rgba(0,0,0,0.04)\\` (ultra-subtle)\n- Product screenshots as primary card content\n\n### Navigation\n- Dark aubergine header or white header\n- Salesforce-Sans 15px weight 700 for nav links\n- Slack/Salesforce logo left-aligned\n- Lavender CTA button right-aligned\n- Mobile: hamburger with 4px radius toggle\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 5px, 6px, 8px, 10px, 12px, 16px, 19px, 20px, 23px, 24px, 28px\n\n### Grid & Container\n- Centered content with generous max-width\n- Product demo sections with screenshots\n- Stat counter sections with large numbers\n- Trust bar with company logos\n- Full-width aubergine footer\n\n### Whitespace Philosophy\n- **Enterprise generosity**: Wide spacing between sections creates a professional, unhurried pace that communicates stability.\n- **Demo-forward**: Product screenshots and UI demos get generous space to breathe.\n\n### Border Radius Scale\n- Minimal (2px): Close buttons, small utility\n- Subtle (4px): Standard buttons, search\n- Standard (8px): List items, video containers\n- Comfortable (12px): Video, medium panels\n- Card (16px): Feature cards, navigation\n- Large (48px): Hero panels, large containers\n- Pill (90px): Primary CTA buttons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default surfaces |\n| Soft Wide (Level 1) | \\`rgba(0,0,0,0.1) 0px 0px 32px\\` | Cards, demo panels |\n| Button (Level 2) | \\`rgba(0,0,0,0.1) 0px 5px 20px\\` | CTA buttons |\n| Subtle (Level 3) | \\`rgba(0,0,0,0.2) 0px 1px 10px\\` | Dropdowns |\n| Purple Inset | \\`rgb(97,31,105) 0px 0px 0px 1px inset\\` | Active state ring |\n\n**Shadow Philosophy**: Slack uses notably wide-radius shadows (32px blur) at low opacity (0.1), creating a cloud-like floating quality. Elements don't appear elevated — they appear to gently hover, reflecting the \"Slack is where work happens in the cloud\" metaphor.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use aubergine (\\`#481a54\\` / \\`#4a154b\\`) as the primary brand color — it's Slack's identity\n- Apply the lavender-to-aubergine hover transition on primary buttons\n- Use Salesforce-Avant-Garde for display headings only, Salesforce-Sans for everything else\n- Apply uppercase + positive letter-spacing (0.8px–0.96px) for labels and small buttons\n- Use wide-radius shadows (32px blur) for cloud-like elevation\n- Include the translate(3px) hover animation on buttons\n- Use Sidebar Blue (\\`#1264a3\\`) for secondary interactive accents\n\n### Don't\n- Don't use standard blue as the primary brand color — aubergine is non-negotiable\n- Don't skip the hover animation (translate + color shift) on primary buttons\n- Don't use heavy/sharp shadows — Slack's elevation is soft and wide\n- Don't apply negative letter-spacing to button labels — buttons use positive tracking\n- Don't use aubergine as body text color — it's for surfaces and dark sections\n- Don't mix Avant-Garde into body text — it's display-only\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <479px | Single column, hamburger nav |\n| Mobile Large | 479–768px | Slight adjustments |\n| Tablet | 768–1024px | 2-column layouts begin |\n| Desktop | 1024–1280px | Standard desktop layout |\n| Large Desktop | 1280–1440px | Expanded |\n| Ultra-wide | >1440px | Maximum width |\n\n### Collapsing Strategy\n- Hero: 64px → 50px → scales down\n- Navigation: horizontal → hamburger (4px radius toggle)\n- Feature sections: side-by-side → stacked\n- Stats: horizontal counters → vertical\n- Buttons: maintain pill shape, full-width on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand: Aubergine (\\`#481a54\\`)\n- Button: Lavender (\\`#f9f0ff\\`)\n- Button hover: Aubergine Dark (\\`#4a154b\\`)\n- Interactive: Sidebar Blue (\\`#1264a3\\`)\n- Text light: White (\\`#ffffff\\`)\n- Text dark: Near Black (\\`#1d1d1d\\`)\n- Muted: Mid Gray (\\`#696969\\`)\n\n### Example Component Prompts\n- \"Create a hero: white background. Headline at 64px Salesforce-Avant-Garde weight 700, line-height 1.12, letter-spacing -0.768px, black text. Lavender CTA button (#f9f0ff, 10px 30px padding, shadow rgba(0,0,0,0.1) 0px 5px 20px). On hover: aubergine (#4a154b) background, white text, translate(3px).\"\n- \"Design an aubergine section: #481a54 background. White text at 32px SF-Avant-Garde weight 700. Stat counters at 50px weight 700.\"\n- \"Build uppercase label: 12px Salesforce-Sans weight 700, text-transform uppercase, letter-spacing 0.96px.\"\n- \"Create a card: white background, 16px radius, shadow rgba(0,0,0,0.1) 0px 0px 32px. Product screenshot inside.\"\n\n### Iteration Guide\n1. Aubergine purple is the signature — every design should include it somewhere\n2. Lavender (#f9f0ff) buttons with aubergine hover = the Slack interaction\n3. Salesforce-Avant-Garde for display, Salesforce-Sans for body — strict split\n4. Uppercase + positive tracking for labels and small buttons\n5. Soft wide shadows (32px blur) for the cloud-floating quality\n6. translate(3px) on hover for playful enterprise personality\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;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/spacex.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const spacexBrief = `# Design System Inspired by SpaceX\n\n## 1. Visual Theme & Atmosphere\n\nSpaceX's website is a full-screen cinematic experience that treats aerospace engineering like a film — every section is a scene, every photograph is a frame, and the interface disappears entirely behind the imagery. The design is pure black (\\`#000000\\`) with photography of rockets, space, and planets occupying 100% of the viewport. Text overlays sit directly on these photographs with no background panels, cards, or containers — just type on image, bold and unapologetic.\n\nThe typography system uses D-DIN, an industrial geometric typeface with DIN heritage (the German industrial standard). The defining characteristic is that virtually ALL text is uppercase with positive letter-spacing (0.96px–1.17px), creating a military/aerospace labeling system where every word feels stenciled onto a spacecraft hull. D-DIN-Bold at 48px with uppercase and 0.96px tracking for the hero creates headlines that feel like mission briefing titles. Even body text at 16px maintains the uppercase/tracked treatment at smaller scales.\n\nWhat makes SpaceX distinctive is its radical minimalism: no shadows, no borders (except one ghost button border at \\`rgba(240,240,250,0.35)\\`), no color (only black and a spectral near-white \\`#f0f0fa\\`), no cards, no grids. The only visual element is photography + text. The ghost button with \\`rgba(240,240,250,0.1)\\` background and 32px radius is the sole interactive element — barely visible, floating over the imagery like a heads-up display. This isn't a design system in the traditional sense — it's a photographic exhibition with a type system and a single button.\n\n**Key Characteristics:**\n- Pure black canvas with full-viewport cinematic photography — the interface is invisible\n- D-DIN / D-DIN-Bold — industrial DIN-heritage typeface\n- Universal uppercase + positive letter-spacing (0.96px–1.17px) — aerospace stencil aesthetic\n- Near-white spectral text (\\`#f0f0fa\\`) — not pure white, a slight blue-violet tint\n- Zero shadows, zero cards, zero containers — text on image only\n- Single ghost button: \\`rgba(240,240,250,0.1)\\` background with spectral border\n- Full-viewport sections — each section is a cinematic \"scene\"\n- No decorative elements — every pixel serves the photography\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Space Black** (\\`#000000\\`): Page background, the void of space — at 50% opacity for overlay gradient\n- **Spectral White** (\\`#f0f0fa\\`): Text color — not pure white, a slight blue-violet tint that mimics starlight\n\n### Interactive\n- **Ghost Surface** (\\`rgba(240, 240, 250, 0.1)\\`): Button background — nearly invisible, 10% opacity\n- **Ghost Border** (\\`rgba(240, 240, 250, 0.35)\\`): Button border — spectral, 35% opacity\n- **Hover White** (\\`var(--white-100)\\`): Link hover state — full spectral white\n\n### Gradient\n- **Dark Overlay** (\\`rgba(0, 0, 0, 0.5)\\`): Gradient overlay on photographs to ensure text legibility\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: \\`D-DIN-Bold\\` — bold industrial geometric\n- **Body / UI**: \\`D-DIN\\`, fallbacks: \\`Arial, Verdana\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | D-DIN-Bold | 48px (3.00rem) | 700 | 1.00 (tight) | 0.96px | \\`text-transform: uppercase\\` |\n| Body | D-DIN | 16px (1.00rem) | 400 | 1.50–1.70 | normal | Standard reading text |\n| Nav Link Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | \\`text-transform: uppercase\\` |\n| Nav Link | D-DIN | 12px (0.75rem) | 400 | 2.00 (relaxed) | normal | \\`text-transform: uppercase\\` |\n| Caption Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | \\`text-transform: uppercase\\` |\n| Caption | D-DIN | 12px (0.75rem) | 400 | 1.00 (tight) | normal | \\`text-transform: uppercase\\` |\n| Micro | D-DIN | 10px (0.63rem) | 400 | 0.94 (tight) | 1px | \\`text-transform: uppercase\\` |\n\n### Principles\n- **Universal uppercase**: Nearly every text element uses \\`text-transform: uppercase\\`. This creates a systematic military/aerospace voice where all communication feels like official documentation.\n- **Positive letter-spacing as identity**: 0.96px on display, 1.17px on nav — the wide tracking creates the stenciled, industrial feel that connects to DIN's heritage as a German engineering standard.\n- **Two weights, strict hierarchy**: D-DIN-Bold (700) for headlines and nav emphasis, D-DIN (400) for body. No medium or semibold weights exist in the system.\n- **Tight line-heights**: 0.94–1.00 across most text — compressed, efficient, mission-critical communication.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Ghost Button**\n- Background: \\`rgba(240, 240, 250, 0.1)\\` (barely visible)\n- Text: Spectral White (\\`#f0f0fa\\`)\n- Padding: 18px\n- Radius: 32px\n- Border: \\`1px solid rgba(240, 240, 250, 0.35)\\`\n- Hover: background brightens, text to \\`var(--white-100)\\`\n- Use: The only button variant — \"LEARN MORE\" CTAs on photography\n\n### Cards & Containers\n- **None.** SpaceX does not use cards, panels, or containers. All content is text directly on full-viewport photographs. The absence of containers IS the design.\n\n### Inputs & Forms\n- Not present on the homepage. The site is purely presentational.\n\n### Navigation\n- Transparent overlay nav on photography\n- D-DIN 13px weight 700, uppercase, 1.17px tracking\n- Spectral white text on dark imagery\n- Logo: SpaceX wordmark at 147x19px\n- Mobile: hamburger collapse\n\n### Image Treatment\n- Full-viewport (100vh) photography sections\n- Professional aerospace photography: rockets, Mars, space\n- Dark gradient overlays (\\`rgba(0,0,0,0.5)\\`) for text legibility\n- Each section = one full-screen photograph with text overlay\n- No border radius, no frames — edge-to-edge imagery\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 3px, 5px, 12px, 15px, 18px, 20px, 24px, 30px\n- Minimal scale — spacing is not the organizing principle; photography is\n\n### Grid & Container\n- No traditional grid — each section is a full-viewport cinematic frame\n- Text is positioned absolutely or with generous padding over imagery\n- Left-aligned text blocks on photography backgrounds\n- No max-width container — content bleeds to viewport edges\n\n### Whitespace Philosophy\n- **Photography IS the whitespace**: Empty space in the design is never empty — it's filled with the dark expanse of space, the curve of a planet, or the flame of a rocket engine. Traditional whitespace concepts don't apply.\n- **Vertical pacing through viewport**: Each section is exactly one viewport tall, creating a rhythmic scroll where each \"page\" reveals a new scene.\n\n### Border Radius Scale\n- Sharp (4px): Small dividers, utility elements\n- Button (32px): Ghost buttons — the only rounded element\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Photography (Level 0) | Full-viewport imagery | Background layer — always present |\n| Overlay (Level 1) | \\`rgba(0, 0, 0, 0.5)\\` gradient | Text legibility layer over photography |\n| Text (Level 2) | Spectral white text, no shadow | Content layer — text floats directly on image |\n| Ghost (Level 3) | \\`rgba(240, 240, 250, 0.1)\\` surface | Barely-visible interactive layer |\n\n**Shadow Philosophy**: SpaceX uses ZERO shadows. In a design built entirely on photography, shadows are meaningless — every surface is already a photograph with natural lighting. Depth comes from the photographic content itself: the receding curvature of Earth, the diminishing trail of a rocket, the atmospheric haze around Mars.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use full-viewport photography as the primary design element — every section is a scene\n- Apply uppercase + positive letter-spacing to ALL text — the aerospace stencil voice\n- Use D-DIN exclusively — no other fonts exist in the system\n- Keep the color palette to black + spectral white (\\`#f0f0fa\\`) only\n- Use ghost buttons (\\`rgba(240,240,250,0.1)\\`) as the sole interactive element\n- Apply dark gradient overlays for text legibility on photographs\n- Let photography carry the emotional weight — the type system is functional, not expressive\n\n### Don't\n- Don't add cards, panels, or containers — text sits directly on photography\n- Don't use shadows — they have no meaning in a photographic context\n- Don't introduce colors — the palette is strictly achromatic with spectral tint\n- Don't use sentence case — everything is uppercase\n- Don't use negative letter-spacing — all tracking is positive (0.96px–1.17px)\n- Don't reduce photography to thumbnails — every image is full-viewport\n- Don't add decorative elements (icons, badges, dividers) — the design is photography + type + one button\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <600px | Stacked, reduced padding, smaller type |\n| Tablet Small | 600–960px | Adjusted layout |\n| Tablet | 960–1280px | Standard scaling |\n| Desktop | 1280–1350px | Full layout |\n| Large Desktop | 1350–1500px | Expanded |\n| Ultra-wide | >1500px | Maximum viewport |\n\n### Touch Targets\n- Ghost buttons: 18px padding provides adequate touch area\n- Navigation links: uppercase with generous letter-spacing aids readability\n\n### Collapsing Strategy\n- Photography: maintains full-viewport at all sizes, content reposition\n- Hero text: 48px → scales down proportionally\n- Navigation: horizontal → hamburger\n- Text blocks: reposition but maintain overlay-on-photography pattern\n- Full-viewport sections maintained on mobile\n\n### Image Behavior\n- Edge-to-edge photography at all viewport sizes\n- Background-size: cover with center focus\n- Dark overlay gradients adapt to content position\n- No art direction changes — same photographs, responsive positioning\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Space Black (\\`#000000\\`)\n- Text: Spectral White (\\`#f0f0fa\\`)\n- Button background: Ghost (\\`rgba(240, 240, 250, 0.1)\\`)\n- Button border: Ghost Border (\\`rgba(240, 240, 250, 0.35)\\`)\n- Overlay: \\`rgba(0, 0, 0, 0.5)\\`\n\n### Example Component Prompts\n- \"Create a full-viewport hero: background-image covering 100vh, dark gradient overlay rgba(0,0,0,0.5). Headline at 48px D-DIN-Bold, uppercase, letter-spacing 0.96px, spectral white (#f0f0fa) text. Ghost CTA button: rgba(240,240,250,0.1) bg, 1px solid rgba(240,240,250,0.35) border, 32px radius, 18px padding.\"\n- \"Design a navigation: transparent over photography. D-DIN 13px weight 700, uppercase, letter-spacing 1.17px, spectral white text. SpaceX wordmark left-aligned.\"\n- \"Build a content section: full-viewport height, background photography with dark overlay. Left-aligned text block with 48px D-DIN-Bold uppercase heading, 16px D-DIN body text, and ghost button below.\"\n- \"Create a micro label: D-DIN 10px, uppercase, letter-spacing 1px, spectral white, line-height 0.94.\"\n\n### Iteration Guide\n1. Start with photography — the image IS the design\n2. All text is uppercase with positive letter-spacing — no exceptions\n3. Only two colors: black and spectral white (#f0f0fa)\n4. Ghost buttons are the only interactive element — transparent, spectral-bordered\n5. Zero shadows, zero cards, zero decorative elements\n6. Every section is full-viewport (100vh) — cinematic pacing\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/spacex.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const spacexBrief = `# Design System Inspired by SpaceX\n\n## 1. Visual Theme & Atmosphere\n\nSpaceX's website is a full-screen cinematic experience that treats aerospace engineering like a film — every section is a scene, every photograph is a frame, and the interface disappears entirely behind the imagery. The design is pure black (\\`#000000\\`) with photography of rockets, space, and planets occupying 100% of the viewport. Text overlays sit directly on these photographs with no background panels, cards, or containers — just type on image, bold and unapologetic.\n\nThe typography system uses D-DIN, an industrial geometric typeface with DIN heritage (the German industrial standard). The defining characteristic is that virtually ALL text is uppercase with positive letter-spacing (0.96px–1.17px), creating a military/aerospace labeling system where every word feels stenciled onto a spacecraft hull. D-DIN-Bold at 48px with uppercase and 0.96px tracking for the hero creates headlines that feel like mission briefing titles. Even body text at 16px maintains the uppercase/tracked treatment at smaller scales.\n\nWhat makes SpaceX distinctive is its radical minimalism: no shadows, no borders (except one ghost button border at \\`rgba(240,240,250,0.35)\\`), no color (only black and a spectral near-white \\`#f0f0fa\\`), no cards, no grids. The only visual element is photography + text. The ghost button with \\`rgba(240,240,250,0.1)\\` background and 32px radius is the sole interactive element — barely visible, floating over the imagery like a heads-up display. This isn't a design system in the traditional sense — it's a photographic exhibition with a type system and a single button.\n\n**Key Characteristics:**\n- Pure black canvas with full-viewport cinematic photography — the interface is invisible\n- D-DIN / D-DIN-Bold — industrial DIN-heritage typeface\n- Universal uppercase + positive letter-spacing (0.96px–1.17px) — aerospace stencil aesthetic\n- Near-white spectral text (\\`#f0f0fa\\`) — not pure white, a slight blue-violet tint\n- Zero shadows, zero cards, zero containers — text on image only\n- Single ghost button: \\`rgba(240,240,250,0.1)\\` background with spectral border\n- Full-viewport sections — each section is a cinematic \"scene\"\n- No decorative elements — every pixel serves the photography\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Space Black** (\\`#000000\\`): Page background, the void of space — at 50% opacity for overlay gradient\n- **Spectral White** (\\`#f0f0fa\\`): Text color — not pure white, a slight blue-violet tint that mimics starlight\n\n### Interactive\n- **Ghost Surface** (\\`rgba(240, 240, 250, 0.1)\\`): Button background — nearly invisible, 10% opacity\n- **Ghost Border** (\\`rgba(240, 240, 250, 0.35)\\`): Button border — spectral, 35% opacity\n- **Hover White** (\\`var(--white-100)\\`): Link hover state — full spectral white\n\n### Gradient\n- **Dark Overlay** (\\`rgba(0, 0, 0, 0.5)\\`): Gradient overlay on photographs to ensure text legibility\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: \\`D-DIN-Bold\\` — bold industrial geometric\n- **Body / UI**: \\`D-DIN\\`, fallbacks: \\`Arial, Verdana\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | D-DIN-Bold | 48px (3.00rem) | 700 | 1.00 (tight) | 0.96px | \\`text-transform: uppercase\\` |\n| Body | D-DIN | 16px (1.00rem) | 400 | 1.50–1.70 | normal | Standard reading text |\n| Nav Link Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | \\`text-transform: uppercase\\` |\n| Nav Link | D-DIN | 12px (0.75rem) | 400 | 2.00 (relaxed) | normal | \\`text-transform: uppercase\\` |\n| Caption Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | \\`text-transform: uppercase\\` |\n| Caption | D-DIN | 12px (0.75rem) | 400 | 1.00 (tight) | normal | \\`text-transform: uppercase\\` |\n| Micro | D-DIN | 10px (0.63rem) | 400 | 0.94 (tight) | 1px | \\`text-transform: uppercase\\` |\n\n### Principles\n- **Universal uppercase**: Nearly every text element uses \\`text-transform: uppercase\\`. This creates a systematic military/aerospace voice where all communication feels like official documentation.\n- **Positive letter-spacing as identity**: 0.96px on display, 1.17px on nav — the wide tracking creates the stenciled, industrial feel that connects to DIN's heritage as a German engineering standard.\n- **Two weights, strict hierarchy**: D-DIN-Bold (700) for headlines and nav emphasis, D-DIN (400) for body. No medium or semibold weights exist in the system.\n- **Tight line-heights**: 0.94–1.00 across most text — compressed, efficient, mission-critical communication.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Ghost Button**\n- Background: \\`rgba(240, 240, 250, 0.1)\\` (barely visible)\n- Text: Spectral White (\\`#f0f0fa\\`)\n- Padding: 18px\n- Radius: 32px\n- Border: \\`1px solid rgba(240, 240, 250, 0.35)\\`\n- Hover: background brightens, text to \\`var(--white-100)\\`\n- Use: The only button variant — \"LEARN MORE\" CTAs on photography\n\n### Cards & Containers\n- **None.** SpaceX does not use cards, panels, or containers. All content is text directly on full-viewport photographs. The absence of containers IS the design.\n\n### Inputs & Forms\n- Not present on the homepage. The site is purely presentational.\n\n### Navigation\n- Transparent overlay nav on photography\n- D-DIN 13px weight 700, uppercase, 1.17px tracking\n- Spectral white text on dark imagery\n- Logo: SpaceX wordmark at 147x19px\n- Mobile: hamburger collapse\n\n### Image Treatment\n- Full-viewport (100vh) photography sections\n- Professional aerospace photography: rockets, Mars, space\n- Dark gradient overlays (\\`rgba(0,0,0,0.5)\\`) for text legibility\n- Each section = one full-screen photograph with text overlay\n- No border radius, no frames — edge-to-edge imagery\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 3px, 5px, 12px, 15px, 18px, 20px, 24px, 30px\n- Minimal scale — spacing is not the organizing principle; photography is\n\n### Grid & Container\n- No traditional grid — each section is a full-viewport cinematic frame\n- Text is positioned absolutely or with generous padding over imagery\n- Left-aligned text blocks on photography backgrounds\n- No max-width container — content bleeds to viewport edges\n\n### Whitespace Philosophy\n- **Photography IS the whitespace**: Empty space in the design is never empty — it's filled with the dark expanse of space, the curve of a planet, or the flame of a rocket engine. Traditional whitespace concepts don't apply.\n- **Vertical pacing through viewport**: Each section is exactly one viewport tall, creating a rhythmic scroll where each \"page\" reveals a new scene.\n\n### Border Radius Scale\n- Sharp (4px): Small dividers, utility elements\n- Button (32px): Ghost buttons — the only rounded element\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Photography (Level 0) | Full-viewport imagery | Background layer — always present |\n| Overlay (Level 1) | \\`rgba(0, 0, 0, 0.5)\\` gradient | Text legibility layer over photography |\n| Text (Level 2) | Spectral white text, no shadow | Content layer — text floats directly on image |\n| Ghost (Level 3) | \\`rgba(240, 240, 250, 0.1)\\` surface | Barely-visible interactive layer |\n\n**Shadow Philosophy**: SpaceX uses ZERO shadows. In a design built entirely on photography, shadows are meaningless — every surface is already a photograph with natural lighting. Depth comes from the photographic content itself: the receding curvature of Earth, the diminishing trail of a rocket, the atmospheric haze around Mars.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use full-viewport photography as the primary design element — every section is a scene\n- Apply uppercase + positive letter-spacing to ALL text — the aerospace stencil voice\n- Use D-DIN exclusively — no other fonts exist in the system\n- Keep the color palette to black + spectral white (\\`#f0f0fa\\`) only\n- Use ghost buttons (\\`rgba(240,240,250,0.1)\\`) as the sole interactive element\n- Apply dark gradient overlays for text legibility on photographs\n- Let photography carry the emotional weight — the type system is functional, not expressive\n\n### Don't\n- Don't add cards, panels, or containers — text sits directly on photography\n- Don't use shadows — they have no meaning in a photographic context\n- Don't introduce colors — the palette is strictly achromatic with spectral tint\n- Don't use sentence case — everything is uppercase\n- Don't use negative letter-spacing — all tracking is positive (0.96px–1.17px)\n- Don't reduce photography to thumbnails — every image is full-viewport\n- Don't add decorative elements (icons, badges, dividers) — the design is photography + type + one button\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <600px | Stacked, reduced padding, smaller type |\n| Tablet Small | 600–960px | Adjusted layout |\n| Tablet | 960–1280px | Standard scaling |\n| Desktop | 1280–1350px | Full layout |\n| Large Desktop | 1350–1500px | Expanded |\n| Ultra-wide | >1500px | Maximum viewport |\n\n### Touch Targets\n- Ghost buttons: 18px padding provides adequate touch area\n- Navigation links: uppercase with generous letter-spacing aids readability\n\n### Collapsing Strategy\n- Photography: maintains full-viewport at all sizes, content reposition\n- Hero text: 48px → scales down proportionally\n- Navigation: horizontal → hamburger\n- Text blocks: reposition but maintain overlay-on-photography pattern\n- Full-viewport sections maintained on mobile\n\n### Image Behavior\n- Edge-to-edge photography at all viewport sizes\n- Background-size: cover with center focus\n- Dark overlay gradients adapt to content position\n- No art direction changes — same photographs, responsive positioning\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Space Black (\\`#000000\\`)\n- Text: Spectral White (\\`#f0f0fa\\`)\n- Button background: Ghost (\\`rgba(240, 240, 250, 0.1)\\`)\n- Button border: Ghost Border (\\`rgba(240, 240, 250, 0.35)\\`)\n- Overlay: \\`rgba(0, 0, 0, 0.5)\\`\n\n### Example Component Prompts\n- \"Create a full-viewport hero: background-image covering 100vh, dark gradient overlay rgba(0,0,0,0.5). Headline at 48px D-DIN-Bold, uppercase, letter-spacing 0.96px, spectral white (#f0f0fa) text. Ghost CTA button: rgba(240,240,250,0.1) bg, 1px solid rgba(240,240,250,0.35) border, 32px radius, 18px padding.\"\n- \"Design a navigation: transparent over photography. D-DIN 13px weight 700, uppercase, letter-spacing 1.17px, spectral white text. SpaceX wordmark left-aligned.\"\n- \"Build a content section: full-viewport height, background photography with dark overlay. Left-aligned text block with 48px D-DIN-Bold uppercase heading, 16px D-DIN body text, and ghost button below.\"\n- \"Create a micro label: D-DIN 10px, uppercase, letter-spacing 1px, spectral white, line-height 0.94.\"\n\n### Iteration Guide\n1. Start with photography — the image IS the design\n2. All text is uppercase with positive letter-spacing — no exceptions\n3. Only two colors: black and spectral white (#f0f0fa)\n4. Ghost buttons are the only interactive element — transparent, spectral-bordered\n5. Zero shadows, zero cards, zero decorative elements\n6. Every section is full-viewport (100vh) — cinematic pacing\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/spotify.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const spotifyBrief = `# Design System Inspired by Spotify\n\n## 1. Visual Theme & Atmosphere\n\nSpotify's web interface is a dark, immersive music player that wraps listeners in a near-black cocoon (\\`#121212\\`, \\`#181818\\`, \\`#1f1f1f\\`) where album art and content become the primary source of color. The design philosophy is \"content-first darkness\" — the UI recedes into shadow so that music, podcasts, and playlists can glow. Every surface is a shade of charcoal, creating a theater-like environment where the only true color comes from the iconic Spotify Green (\\`#1ed760\\`) and the album artwork itself.\n\nThe typography uses SpotifyMixUI and SpotifyMixUITitle — proprietary fonts from the CircularSp family (Circular by Lineto, customized for Spotify) with an extensive fallback stack that includes Arabic, Hebrew, Cyrillic, Greek, Devanagari, and CJK fonts, reflecting Spotify's global reach. The type system is compact and functional: 700 (bold) for emphasis and navigation, 600 (semibold) for secondary emphasis, and 400 (regular) for body. Buttons use uppercase with positive letter-spacing (1.4px–2px) for a systematic, label-like quality.\n\nWhat distinguishes Spotify is its pill-and-circle geometry. Primary buttons use 500px–9999px radius (full pill), circular play buttons use 50% radius, and search inputs are 500px pills. Combined with heavy shadows (\\`rgba(0,0,0,0.5) 0px 8px 24px\\`) on elevated elements and a unique inset border-shadow combo (\\`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset\\`), the result is an interface that feels like a premium audio device — tactile, rounded, and built for touch.\n\n**Key Characteristics:**\n- Near-black immersive dark theme (\\`#121212\\`–\\`#1f1f1f\\`) — UI disappears behind content\n- Spotify Green (\\`#1ed760\\`) as singular brand accent — never decorative, always functional\n- SpotifyMixUI/CircularSp font family with global script support\n- Pill buttons (500px–9999px) and circular controls (50%) — rounded, touch-optimized\n- Uppercase button labels with wide letter-spacing (1.4px–2px)\n- Heavy shadows on elevated elements (\\`rgba(0,0,0,0.5) 0px 8px 24px\\`)\n- Semantic colors: negative red (\\`#f3727f\\`), warning orange (\\`#ffa42b\\`), announcement blue (\\`#539df5\\`)\n- Album art as the primary color source — the UI is achromatic by design\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Spotify Green** (\\`#1ed760\\`): Primary brand accent — play buttons, active states, CTAs\n- **Near Black** (\\`#121212\\`): Deepest background surface\n- **Dark Surface** (\\`#181818\\`): Cards, containers, elevated surfaces\n- **Mid Dark** (\\`#1f1f1f\\`): Button backgrounds, interactive surfaces\n\n### Text\n- **White** (\\`#ffffff\\`): \\`--text-base\\`, primary text\n- **Silver** (\\`#b3b3b3\\`): Secondary text, muted labels, inactive nav\n- **Near White** (\\`#cbcbcb\\`): Slightly brighter secondary text\n- **Light** (\\`#fdfdfd\\`): Near-pure white for maximum emphasis\n\n### Semantic\n- **Negative Red** (\\`#f3727f\\`): \\`--text-negative\\`, error states\n- **Warning Orange** (\\`#ffa42b\\`): \\`--text-warning\\`, warning states\n- **Announcement Blue** (\\`#539df5\\`): \\`--text-announcement\\`, info states\n\n### Surface & Border\n- **Dark Card** (\\`#252525\\`): Elevated card surface\n- **Mid Card** (\\`#272727\\`): Alternate card surface\n- **Border Gray** (\\`#4d4d4d\\`): Button borders on dark\n- **Light Border** (\\`#7c7c7c\\`): Outlined button borders, muted links\n- **Separator** (\\`#b3b3b3\\`): Divider lines\n- **Light Surface** (\\`#eeeeee\\`): Light-mode buttons (rare)\n- **Spotify Green Border** (\\`#1db954\\`): Green accent border variant\n\n### Shadows\n- **Heavy** (\\`rgba(0,0,0,0.5) 0px 8px 24px\\`): Dialogs, menus, elevated panels\n- **Medium** (\\`rgba(0,0,0,0.3) 0px 8px 8px\\`): Cards, dropdowns\n- **Inset Border** (\\`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset\\`): Input border-shadow combo\n\n## 3. Typography Rules\n\n### Font Families\n- **Title**: \\`SpotifyMixUITitle\\`, fallbacks: \\`CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic\\`\n- **UI / Body**: \\`SpotifyMixUI\\`, same fallback stack\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Section Title | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Bold title weight |\n| Feature Heading | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (tight) | normal | Semibold section heads |\n| Body Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Emphasized text |\n| Body | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Standard body |\n| Button Uppercase | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (tight) | 1.4px–2px | \\`text-transform: uppercase\\` |\n| Button | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Standard button |\n| Nav Link Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigation |\n| Nav Link | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Inactive nav |\n| Caption Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Bold metadata |\n| Caption | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadata |\n| Small Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tags, counts |\n| Small | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Fine print |\n| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | \\`text-transform: capitalize\\` |\n| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Smallest text |\n\n### Principles\n- **Bold/regular binary**: Most text is either 700 (bold) or 400 (regular), with 600 used sparingly. This creates a clear visual hierarchy through weight contrast rather than size variation.\n- **Uppercase buttons as system**: Button labels use uppercase + wide letter-spacing (1.4px–2px), creating a systematic \"label\" voice distinct from content text.\n- **Compact sizing**: The range is 10px–24px — narrower than most systems. Spotify's type is compact and functional, designed for scanning playlists, not reading articles.\n- **Global script support**: The extensive fallback stack (Arabic, Hebrew, Cyrillic, Greek, Devanagari, CJK) reflects Spotify's 180+ market reach.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Dark Pill**\n- Background: \\`#1f1f1f\\`\n- Text: \\`#ffffff\\` or \\`#b3b3b3\\`\n- Padding: 8px 16px\n- Radius: 9999px (full pill)\n- Use: Navigation pills, secondary actions\n\n**Dark Large Pill**\n- Background: \\`#181818\\`\n- Text: \\`#ffffff\\`\n- Padding: 0px 43px\n- Radius: 500px\n- Use: Primary app navigation buttons\n\n**Light Pill**\n- Background: \\`#eeeeee\\`\n- Text: \\`#181818\\`\n- Radius: 500px\n- Use: Light-mode CTAs (cookie consent, marketing)\n\n**Outlined Pill**\n- Background: transparent\n- Text: \\`#ffffff\\`\n- Border: \\`1px solid #7c7c7c\\`\n- Padding: 4px 16px 4px 36px (asymmetric for icon)\n- Radius: 9999px\n- Use: Follow buttons, secondary actions\n\n**Circular Play**\n- Background: \\`#1f1f1f\\`\n- Text: \\`#ffffff\\`\n- Padding: 12px\n- Radius: 50% (circle)\n- Use: Play/pause controls\n\n### Cards & Containers\n- Background: \\`#181818\\` or \\`#1f1f1f\\`\n- Radius: 6px–8px\n- No visible borders on most cards\n- Hover: slight background lightening\n- Shadow: \\`rgba(0,0,0,0.3) 0px 8px 8px\\` on elevated\n\n### Inputs\n- Search input: \\`#1f1f1f\\` background, \\`#ffffff\\` text\n- Radius: 500px (pill)\n- Padding: 12px 96px 12px 48px (icon-aware)\n- Focus: border becomes \\`#000000\\`, outline \\`1px solid\\`\n\n### Navigation\n- Dark sidebar with SpotifyMixUI 14px weight 700 for active, 400 for inactive\n- \\`#b3b3b3\\` muted color for inactive items, \\`#ffffff\\` for active\n- Circular icon buttons (50% radius)\n- Spotify logo top-left in green\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px\n\n### Grid & Container\n- Sidebar (fixed) + main content area\n- Grid-based album/playlist cards\n- Full-width now-playing bar at bottom\n- Responsive content area fills remaining space\n\n### Whitespace Philosophy\n- **Dark compression**: Spotify packs content densely — playlist grids, track lists, and navigation are all tightly spaced. The dark background provides visual rest between elements without needing large gaps.\n- **Content density over breathing room**: This is an app, not a marketing site. Every pixel serves the listening experience.\n\n### Border Radius Scale\n- Minimal (2px): Badges, explicit tags\n- Subtle (4px): Inputs, small elements\n- Standard (6px): Album art containers, cards\n- Comfortable (8px): Sections, dialogs\n- Medium (10px–20px): Panels, overlay elements\n- Large (100px): Large pill buttons\n- Pill (500px): Primary buttons, search input\n- Full Pill (9999px): Navigation pills, search\n- Circle (50%): Play buttons, avatars, icons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Base (Level 0) | \\`#121212\\` background | Deepest layer, page background |\n| Surface (Level 1) | \\`#181818\\` or \\`#1f1f1f\\` | Cards, sidebar, containers |\n| Elevated (Level 2) | \\`rgba(0,0,0,0.3) 0px 8px 8px\\` | Dropdown menus, hover cards |\n| Dialog (Level 3) | \\`rgba(0,0,0,0.5) 0px 8px 24px\\` | Modals, overlays, menus |\n| Inset (Border) | \\`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset\\` | Input borders |\n\n**Shadow Philosophy**: Spotify uses notably heavy shadows for a dark-themed app. The 0.5 opacity shadow at 24px blur creates a dramatic \"floating in darkness\" effect for dialogs and menus, while the 0.3 opacity at 8px blur provides a more subtle card lift. The unique inset border-shadow combination on inputs creates a recessed, tactile quality.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use near-black backgrounds (\\`#121212\\`–\\`#1f1f1f\\`) — depth through shade variation\n- Apply Spotify Green (\\`#1ed760\\`) only for play controls, active states, and primary CTAs\n- Use pill shape (500px–9999px) for all buttons — circular (50%) for play controls\n- Apply uppercase + wide letter-spacing (1.4px–2px) on button labels\n- Keep typography compact (10px–24px range) — this is an app, not a magazine\n- Use heavy shadows (\\`0.3–0.5 opacity\\`) for elevated elements on dark backgrounds\n- Let album art provide color — the UI itself is achromatic\n\n### Don't\n- Don't use Spotify Green decoratively or on backgrounds — it's functional only\n- Don't use light backgrounds for primary surfaces — the dark immersion is core\n- Don't skip the pill/circle geometry on buttons — square buttons break the identity\n- Don't use thin/subtle shadows — on dark backgrounds, shadows need to be heavy to be visible\n- Don't add additional brand colors — green + achromatic grays is the complete palette\n- Don't use relaxed line-heights — Spotify's typography is compact and dense\n- Don't expose raw gray borders — use shadow-based or inset borders instead\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <425px | Compact mobile layout |\n| Mobile | 425–576px | Standard mobile |\n| Tablet | 576–768px | 2-column grid |\n| Tablet Large | 768–896px | Expanded layout |\n| Desktop Small | 896–1024px | Sidebar visible |\n| Desktop | 1024–1280px | Full desktop layout |\n| Large Desktop | >1280px | Expanded grid |\n\n### Collapsing Strategy\n- Sidebar: full → collapsed → hidden\n- Album grid: 5 columns → 3 → 2 → 1\n- Now-playing bar: maintained at all sizes\n- Search: pill input maintained, width adjusts\n- Navigation: sidebar → bottom bar on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Near Black (\\`#121212\\`)\n- Surface: Dark Card (\\`#181818\\`)\n- Text: White (\\`#ffffff\\`)\n- Secondary text: Silver (\\`#b3b3b3\\`)\n- Accent: Spotify Green (\\`#1ed760\\`)\n- Border: \\`#4d4d4d\\`\n- Error: Negative Red (\\`#f3727f\\`)\n\n### Example Component Prompts\n- \"Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover.\"\n- \"Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px.\"\n- \"Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding.\"\n- \"Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset.\"\n- \"Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3.\"\n\n### Iteration Guide\n1. Start with #121212 — everything lives in near-black darkness\n2. Spotify Green for functional highlights only (play, active, CTA)\n3. Pill everything — 500px for large, 9999px for small, 50% for circular\n4. Uppercase + wide tracking on buttons — the systematic label voice\n5. Heavy shadows (0.3–0.5 opacity) for elevation — light shadows are invisible on dark\n6. Album art provides all the color — the UI stays achromatic\n`;\n"],"mappings":";AACO,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/spotify.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const spotifyBrief = `# Design System Inspired by Spotify\n\n## 1. Visual Theme & Atmosphere\n\nSpotify's web interface is a dark, immersive music player that wraps listeners in a near-black cocoon (\\`#121212\\`, \\`#181818\\`, \\`#1f1f1f\\`) where album art and content become the primary source of color. The design philosophy is \"content-first darkness\" — the UI recedes into shadow so that music, podcasts, and playlists can glow. Every surface is a shade of charcoal, creating a theater-like environment where the only true color comes from the iconic Spotify Green (\\`#1ed760\\`) and the album artwork itself.\n\nThe typography uses SpotifyMixUI and SpotifyMixUITitle — proprietary fonts from the CircularSp family (Circular by Lineto, customized for Spotify) with an extensive fallback stack that includes Arabic, Hebrew, Cyrillic, Greek, Devanagari, and CJK fonts, reflecting Spotify's global reach. The type system is compact and functional: 700 (bold) for emphasis and navigation, 600 (semibold) for secondary emphasis, and 400 (regular) for body. Buttons use uppercase with positive letter-spacing (1.4px–2px) for a systematic, label-like quality.\n\nWhat distinguishes Spotify is its pill-and-circle geometry. Primary buttons use 500px–9999px radius (full pill), circular play buttons use 50% radius, and search inputs are 500px pills. Combined with heavy shadows (\\`rgba(0,0,0,0.5) 0px 8px 24px\\`) on elevated elements and a unique inset border-shadow combo (\\`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset\\`), the result is an interface that feels like a premium audio device — tactile, rounded, and built for touch.\n\n**Key Characteristics:**\n- Near-black immersive dark theme (\\`#121212\\`–\\`#1f1f1f\\`) — UI disappears behind content\n- Spotify Green (\\`#1ed760\\`) as singular brand accent — never decorative, always functional\n- SpotifyMixUI/CircularSp font family with global script support\n- Pill buttons (500px–9999px) and circular controls (50%) — rounded, touch-optimized\n- Uppercase button labels with wide letter-spacing (1.4px–2px)\n- Heavy shadows on elevated elements (\\`rgba(0,0,0,0.5) 0px 8px 24px\\`)\n- Semantic colors: negative red (\\`#f3727f\\`), warning orange (\\`#ffa42b\\`), announcement blue (\\`#539df5\\`)\n- Album art as the primary color source — the UI is achromatic by design\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Spotify Green** (\\`#1ed760\\`): Primary brand accent — play buttons, active states, CTAs\n- **Near Black** (\\`#121212\\`): Deepest background surface\n- **Dark Surface** (\\`#181818\\`): Cards, containers, elevated surfaces\n- **Mid Dark** (\\`#1f1f1f\\`): Button backgrounds, interactive surfaces\n\n### Text\n- **White** (\\`#ffffff\\`): \\`--text-base\\`, primary text\n- **Silver** (\\`#b3b3b3\\`): Secondary text, muted labels, inactive nav\n- **Near White** (\\`#cbcbcb\\`): Slightly brighter secondary text\n- **Light** (\\`#fdfdfd\\`): Near-pure white for maximum emphasis\n\n### Semantic\n- **Negative Red** (\\`#f3727f\\`): \\`--text-negative\\`, error states\n- **Warning Orange** (\\`#ffa42b\\`): \\`--text-warning\\`, warning states\n- **Announcement Blue** (\\`#539df5\\`): \\`--text-announcement\\`, info states\n\n### Surface & Border\n- **Dark Card** (\\`#252525\\`): Elevated card surface\n- **Mid Card** (\\`#272727\\`): Alternate card surface\n- **Border Gray** (\\`#4d4d4d\\`): Button borders on dark\n- **Light Border** (\\`#7c7c7c\\`): Outlined button borders, muted links\n- **Separator** (\\`#b3b3b3\\`): Divider lines\n- **Light Surface** (\\`#eeeeee\\`): Light-mode buttons (rare)\n- **Spotify Green Border** (\\`#1db954\\`): Green accent border variant\n\n### Shadows\n- **Heavy** (\\`rgba(0,0,0,0.5) 0px 8px 24px\\`): Dialogs, menus, elevated panels\n- **Medium** (\\`rgba(0,0,0,0.3) 0px 8px 8px\\`): Cards, dropdowns\n- **Inset Border** (\\`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset\\`): Input border-shadow combo\n\n## 3. Typography Rules\n\n### Font Families\n- **Title**: \\`SpotifyMixUITitle\\`, fallbacks: \\`CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic\\`\n- **UI / Body**: \\`SpotifyMixUI\\`, same fallback stack\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Section Title | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | Bold title weight |\n| Feature Heading | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (tight) | normal | Semibold section heads |\n| Body Bold | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | Emphasized text |\n| Body | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | Standard body |\n| Button Uppercase | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (tight) | 1.4px–2px | \\`text-transform: uppercase\\` |\n| Button | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | Standard button |\n| Nav Link Bold | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | Navigation |\n| Nav Link | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Inactive nav |\n| Caption Bold | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | Bold metadata |\n| Caption | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | Metadata |\n| Small Bold | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | Tags, counts |\n| Small | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | Fine print |\n| Badge | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | \\`text-transform: capitalize\\` |\n| Micro | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | Smallest text |\n\n### Principles\n- **Bold/regular binary**: Most text is either 700 (bold) or 400 (regular), with 600 used sparingly. This creates a clear visual hierarchy through weight contrast rather than size variation.\n- **Uppercase buttons as system**: Button labels use uppercase + wide letter-spacing (1.4px–2px), creating a systematic \"label\" voice distinct from content text.\n- **Compact sizing**: The range is 10px–24px — narrower than most systems. Spotify's type is compact and functional, designed for scanning playlists, not reading articles.\n- **Global script support**: The extensive fallback stack (Arabic, Hebrew, Cyrillic, Greek, Devanagari, CJK) reflects Spotify's 180+ market reach.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Dark Pill**\n- Background: \\`#1f1f1f\\`\n- Text: \\`#ffffff\\` or \\`#b3b3b3\\`\n- Padding: 8px 16px\n- Radius: 9999px (full pill)\n- Use: Navigation pills, secondary actions\n\n**Dark Large Pill**\n- Background: \\`#181818\\`\n- Text: \\`#ffffff\\`\n- Padding: 0px 43px\n- Radius: 500px\n- Use: Primary app navigation buttons\n\n**Light Pill**\n- Background: \\`#eeeeee\\`\n- Text: \\`#181818\\`\n- Radius: 500px\n- Use: Light-mode CTAs (cookie consent, marketing)\n\n**Outlined Pill**\n- Background: transparent\n- Text: \\`#ffffff\\`\n- Border: \\`1px solid #7c7c7c\\`\n- Padding: 4px 16px 4px 36px (asymmetric for icon)\n- Radius: 9999px\n- Use: Follow buttons, secondary actions\n\n**Circular Play**\n- Background: \\`#1f1f1f\\`\n- Text: \\`#ffffff\\`\n- Padding: 12px\n- Radius: 50% (circle)\n- Use: Play/pause controls\n\n### Cards & Containers\n- Background: \\`#181818\\` or \\`#1f1f1f\\`\n- Radius: 6px–8px\n- No visible borders on most cards\n- Hover: slight background lightening\n- Shadow: \\`rgba(0,0,0,0.3) 0px 8px 8px\\` on elevated\n\n### Inputs\n- Search input: \\`#1f1f1f\\` background, \\`#ffffff\\` text\n- Radius: 500px (pill)\n- Padding: 12px 96px 12px 48px (icon-aware)\n- Focus: border becomes \\`#000000\\`, outline \\`1px solid\\`\n\n### Navigation\n- Dark sidebar with SpotifyMixUI 14px weight 700 for active, 400 for inactive\n- \\`#b3b3b3\\` muted color for inactive items, \\`#ffffff\\` for active\n- Circular icon buttons (50% radius)\n- Spotify logo top-left in green\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px\n\n### Grid & Container\n- Sidebar (fixed) + main content area\n- Grid-based album/playlist cards\n- Full-width now-playing bar at bottom\n- Responsive content area fills remaining space\n\n### Whitespace Philosophy\n- **Dark compression**: Spotify packs content densely — playlist grids, track lists, and navigation are all tightly spaced. The dark background provides visual rest between elements without needing large gaps.\n- **Content density over breathing room**: This is an app, not a marketing site. Every pixel serves the listening experience.\n\n### Border Radius Scale\n- Minimal (2px): Badges, explicit tags\n- Subtle (4px): Inputs, small elements\n- Standard (6px): Album art containers, cards\n- Comfortable (8px): Sections, dialogs\n- Medium (10px–20px): Panels, overlay elements\n- Large (100px): Large pill buttons\n- Pill (500px): Primary buttons, search input\n- Full Pill (9999px): Navigation pills, search\n- Circle (50%): Play buttons, avatars, icons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Base (Level 0) | \\`#121212\\` background | Deepest layer, page background |\n| Surface (Level 1) | \\`#181818\\` or \\`#1f1f1f\\` | Cards, sidebar, containers |\n| Elevated (Level 2) | \\`rgba(0,0,0,0.3) 0px 8px 8px\\` | Dropdown menus, hover cards |\n| Dialog (Level 3) | \\`rgba(0,0,0,0.5) 0px 8px 24px\\` | Modals, overlays, menus |\n| Inset (Border) | \\`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset\\` | Input borders |\n\n**Shadow Philosophy**: Spotify uses notably heavy shadows for a dark-themed app. The 0.5 opacity shadow at 24px blur creates a dramatic \"floating in darkness\" effect for dialogs and menus, while the 0.3 opacity at 8px blur provides a more subtle card lift. The unique inset border-shadow combination on inputs creates a recessed, tactile quality.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use near-black backgrounds (\\`#121212\\`–\\`#1f1f1f\\`) — depth through shade variation\n- Apply Spotify Green (\\`#1ed760\\`) only for play controls, active states, and primary CTAs\n- Use pill shape (500px–9999px) for all buttons — circular (50%) for play controls\n- Apply uppercase + wide letter-spacing (1.4px–2px) on button labels\n- Keep typography compact (10px–24px range) — this is an app, not a magazine\n- Use heavy shadows (\\`0.3–0.5 opacity\\`) for elevated elements on dark backgrounds\n- Let album art provide color — the UI itself is achromatic\n\n### Don't\n- Don't use Spotify Green decoratively or on backgrounds — it's functional only\n- Don't use light backgrounds for primary surfaces — the dark immersion is core\n- Don't skip the pill/circle geometry on buttons — square buttons break the identity\n- Don't use thin/subtle shadows — on dark backgrounds, shadows need to be heavy to be visible\n- Don't add additional brand colors — green + achromatic grays is the complete palette\n- Don't use relaxed line-heights — Spotify's typography is compact and dense\n- Don't expose raw gray borders — use shadow-based or inset borders instead\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <425px | Compact mobile layout |\n| Mobile | 425–576px | Standard mobile |\n| Tablet | 576–768px | 2-column grid |\n| Tablet Large | 768–896px | Expanded layout |\n| Desktop Small | 896–1024px | Sidebar visible |\n| Desktop | 1024–1280px | Full desktop layout |\n| Large Desktop | >1280px | Expanded grid |\n\n### Collapsing Strategy\n- Sidebar: full → collapsed → hidden\n- Album grid: 5 columns → 3 → 2 → 1\n- Now-playing bar: maintained at all sizes\n- Search: pill input maintained, width adjusts\n- Navigation: sidebar → bottom bar on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Near Black (\\`#121212\\`)\n- Surface: Dark Card (\\`#181818\\`)\n- Text: White (\\`#ffffff\\`)\n- Secondary text: Silver (\\`#b3b3b3\\`)\n- Accent: Spotify Green (\\`#1ed760\\`)\n- Border: \\`#4d4d4d\\`\n- Error: Negative Red (\\`#f3727f\\`)\n\n### Example Component Prompts\n- \"Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover.\"\n- \"Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px.\"\n- \"Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding.\"\n- \"Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset.\"\n- \"Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3.\"\n\n### Iteration Guide\n1. Start with #121212 — everything lives in near-black darkness\n2. Spotify Green for functional highlights only (play, active, CTA)\n3. Pill everything — 500px for large, 9999px for small, 50% for circular\n4. Uppercase + wide tracking on buttons — the systematic label voice\n5. Heavy shadows (0.3–0.5 opacity) for elevation — light shadows are invisible on dark\n6. Album art provides all the color — the UI stays achromatic\n`;\n"],"mappings":";AACO,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}