@hex-core/themes 0.1.0 → 0.2.0

package/dist/presets/_briefs/shopify.js

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

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,3 @@
+declare 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 \u2014 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\u20130.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 \u2014 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 \u2014 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`) \u2192 aubergine hover with translate(3px) animation\n- Sidebar Blue (`#1264a3`) as secondary interactive accent\n- Uppercase labels with wide tracking (0.8px\u20130.96px) for enterprise structure\n- Soft, wide-radius shadows (32px blur at 0.1 opacity) \u2014 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 \u2014 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 \u2014 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 \u2014 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\u20131.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 | \u2014 | \u2014 | Light variant |\n| Button Large | SF-Avant-Garde / SF-Sans | 18px (1.13rem) | 700 | \u2014 | \u2014 | 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\u2013700 | 1.30\u20131.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 \u2014 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 \u2014 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 \u2014 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 \u2014 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\u20130.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 \u2014 aubergine is non-negotiable\n- Don't skip the hover animation (translate + color shift) on primary buttons\n- Don't use heavy/sharp shadows \u2014 Slack's elevation is soft and wide\n- Don't apply negative letter-spacing to button labels \u2014 buttons use positive tracking\n- Don't use aubergine as body text color \u2014 it's for surfaces and dark sections\n- Don't mix Avant-Garde into body text \u2014 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\u2013768px | Slight adjustments |\n| Tablet | 768\u20131024px | 2-column layouts begin |\n| Desktop | 1024\u20131280px | Standard desktop layout |\n| Large Desktop | 1280\u20131440px | Expanded |\n| Ultra-wide | >1440px | Maximum width |\n\n### Collapsing Strategy\n- Hero: 64px \u2192 50px \u2192 scales down\n- Navigation: horizontal \u2192 hamburger (4px radius toggle)\n- Feature sections: side-by-side \u2192 stacked\n- Stats: horizontal counters \u2192 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 \u2014 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 \u2014 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";
+
+export { slackBrief };