@hex-core/themes 0.1.0 → 0.2.0

package/dist/presets/_briefs/meta.js

@@ -0,0 +1,372 @@
+// src/presets/_briefs/meta.ts
+var metaBrief = `# Design System Inspired by Meta (Store)
+
+## 1. Visual Theme & Atmosphere
+
+The Meta Store is a product-forward retail experience built to sell hardware \u2014 Quest VR headsets, Ray-Ban Meta smart glasses, and accessories. The design walks a tightrope between consumer electronics showroom and lifestyle editorial, deploying cinematic product photography against expansive white canvas to create a gallery-like sense of aspiration. Every design decision serves the merchandise: generous negative space frames hero product shots like museum pieces, while alternating light and dark surface sections create a visual rhythm that mimics the experience of walking through a physical retail space.
+
+The "Dolly" design system (Meta's internal name for the store layer) sits atop the broader FDS (Facebook Design System) foundation, inheriting its gray scale and semantic tokens while overlaying its own product-focused palette. The result is a system that feels distinctly Meta \u2014 the custom Optimistic typeface brings warmth and approachability to what could otherwise be cold tech retail \u2014 yet flexible enough to showcase wildly different product lines (from VR headsets to fashion eyewear) without feeling disjointed. The surface strategy is binary: pure white for browsing and information, rich dark for immersive product moments.
+
+The store's visual hierarchy is ruthlessly simple. Photography does the heavy lifting, supported by short, punchy headlines in Optimistic Medium and body text that stays brief and scannable. Calls to action are pill-shaped, unmistakable, and always Meta Blue. There is no visual noise, no decoration for decoration's sake \u2014 every element either sells or navigates.
+
+**Key Characteristics:**
+- Photography-first retail design where products are the visual heroes, not UI
+- Binary surface strategy: pure white for information, deep dark for immersive product moments
+- Pill-shaped CTAs in saturated blue create unmistakable action points
+- Optimistic VF typeface with OpenType ss01/ss02 features brings geometric warmth
+- Generous whitespace frames products like gallery exhibits
+- 8px spacing grid with disciplined vertical rhythm
+- Alternating light/dark sections create a "walkthrough" retail cadence
+
+## 2. Color Palette & Roles
+
+### Primary
+
+- **Meta Blue** (\`#0064E0\`): Primary CTA background, interactive links, action-driving elements throughout the store
+- **Meta Blue Hover** (\`#0143B5\`): Darkened blue for hover states on primary buttons
+- **Meta Blue Pressed** (\`#004BB9\`): Deepest blue for active/pressed button states
+- **Meta Blue Light** (\`#47A5FA\`): Lighter blue variant used on dark backgrounds for CTAs
+- **Facebook Blue** (\`#1877F2\`): Legacy accent inherited from FDS, used for deemphasized button text and badges
+
+### Secondary & Accent
+
+- **Ray-Ban Red** (\`#D6311F\`): Product-specific accent for Ray-Ban Meta smart glasses sections
+- **Oculus Purple** (\`#A121CE\`): Quest/Oculus product accent for VR content
+- **Work Purple** (\`#6441D2\`): Accent for Meta for Work/enterprise content
+- **Portal Blue** (\`#1B365D\`): Deep navy accent for Portal product line
+- **Portal Hero Blue** (\`#C8E4E8\`): Soft teal-blue for Portal hero backgrounds
+- **Portal Light Blue** (\`#ADD4E0\`): Secondary Portal surface tint
+
+### Surface & Background
+
+- **White** (\`#FFFFFF\`): Primary page canvas, nav bar background, card surfaces
+- **Soft Gray** (\`#F1F4F7\`): Secondary background for content sections (--dolly-bg-grey)
+- **Warm Gray** (\`#F7F8FA\`): Flat card background, subtle surface differentiation
+- **Web Wash** (\`#F0F2F5\`): Deemphasized background areas, attachment footers
+- **Linen** (\`#F2F0E6\`): Warm off-white for lifestyle-adjacent sections
+- **Baby Blue** (\`#E8F3FF\`): Highlight background, subtle blue tint for informational areas
+- **Near Black** (\`#1C1E21\`): Dark section backgrounds, immersive product showcase areas
+- **Oculus Light** (\`#181A1B\`): Slightly warm dark surface for Quest product sections
+- **Oculus Dark** (\`#000000\`): Pure black for maximum contrast product displays
+- **Overlay** (\`rgba(0, 0, 0, 0.6)\`): Modal/lightbox backdrop
+
+### Neutrals & Text
+
+- **Primary Text** (\`#050505\`): Main body and heading text on light surfaces
+- **Dark Charcoal** (\`#1C2B33\`): Dolly system primary text, slightly warmer than pure black (--dolly-text-primary)
+- **Icon Secondary** (\`#465A69\`): Secondary icon fills, subdued UI elements
+- **Secondary Text** (\`#65676B\`): Supporting copy, labels, timestamps (--secondary-text)
+- **Slate Gray** (\`#5D6C7B\`): Meta Store secondary text, product descriptions (--dolly-text-secondary)
+- **Section Header** (\`#4B4C4F\`): Mid-gray for section titles
+- **Button Text Gray** (\`#444950\`): FDS button text default (--fds-button-text)
+- **Disabled Text** (\`#BCC0C4\`): Inactive button labels, placeholder text
+- **CTA Disabled Text** (\`#8595A4\`): Muted blue-gray for disabled interactive labels
+- **Divider** (\`#CED0D4\`): Content separators, input borders
+- **Divider Gray** (\`#DEE3E9\`): Lighter divider for Dolly sections
+- **CTA Gray Border** (\`#CBD2D9\`): Outline button borders
+- **Dark Gray Border** (\`#909396\`): Stronger outline for emphasis
+
+### Semantic & Accent
+
+- **Success Green** (\`#31A24C\`): Badge success background, positive indicators
+- **Store Success** (\`#007D1E\`): Darker success green for Dolly store confirmations
+- **Error Red** (\`#E41E3F\`): Critical badge background, notification badges
+- **Store Error** (\`#C80A28\`): Darker error red for Dolly store error states
+- **Warning Amber** (\`#F7B928\`): Attention badges, caution indicators
+- **Positive BG** (\`rgba(36, 228, 0, 0.15)\`): Subtle success background tint
+- **Error BG** (\`rgba(255, 123, 145, 0.15)\`): Subtle error background tint
+- **Warning BG** (\`rgba(255, 226, 0, 0.15)\`): Subtle warning background tint
+- **Info BG** (\`rgba(0, 145, 255, 0.15)\`): Subtle informational blue tint
+
+### Base Color Spectrum (FDS)
+
+- **Cherry** (\`#F3425F\`): Expressive accent
+- **Grape** (\`#9360F7\`): Purple accent
+- **Lime** (\`#45BD62\`): Green accent
+- **Seafoam** (\`#54C7EC\`): Cyan accent
+- **Teal** (\`#2ABBA7\`): Teal accent
+- **Tomato** (\`#FB724B\`): Orange accent
+- **Pink** (\`#FF66BF\`): Pink accent
+
+### Gradient System
+
+- **Dark Overlay Gradient**: \`linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))\` \u2014 applied over dark product photography for text legibility
+- **Blue Infinity Gradient**: The Meta symbol uses a blue-to-teal gradient on brand materials, though the store uses flat blue
+- **Shadow Alpha Scale**: 0.05, 0.10, 0.15, 0.20, 0.30, 0.40, 0.50, 0.60, 0.80 \u2014 both black and white alpha ramps for layered transparency
+
+## 3. Typography Rules
+
+### Font Family
+
+**Primary:** Optimistic VF (variable font by Dalton Maag, commissioned by Meta)
+- Fallbacks: Montserrat, Helvetica, Arial, Noto Sans
+- OpenType features: \`"ss01", "ss02"\` \u2014 stylistic sets that activate Meta-specific alternate glyphs
+- Variable font with continuous weight axis (observed: 300, 400, 500, 700)
+
+**Secondary:** Helvetica
+- Fallbacks: Arial
+- Used for small utility text (12px footer links, legal copy)
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Display 1 | 64px | 500 (Medium) | 1.16 | \u2014 | Hero headlines on desktop, ss01+ss02 |
+| Display 2 | 48px | 500 (Medium) | 1.17 | \u2014 | Section heroes, product titles |
+| Heading 1 | 36px | 500 (Medium) | 1.28 | \u2014 | Major section headings |
+| Heading 2 | 28px | 300 (Light) | 1.21 | \u2014 | Subheadings, lighter feel |
+| Heading 3 | 18px | 700 (Bold) | 1.44 | \u2014 | Card titles, bold callouts, ss01+ss02 |
+| Body | 18px | 400 (Regular) | 1.44 | \u2014 | Product descriptions, body copy |
+| Body Compact | 16px | 500 (Medium) | 1.50 | -0.16px | Navigation links, UI labels |
+| Caption Bold | 14px | 700 (Bold) | 1.43 | \u2014 | Emphasized labels, price text |
+| Caption | 14px | 400 (Regular) | 1.43 | -0.14px | Secondary labels, metadata |
+| Small | 12px | 400 (Regular) | 1.33 | \u2014 | Footer links, legal text, timestamps |
+| Button | 14px | 400 (Regular) | 1.43 | -0.14px | Button label text |
+
+### Principles
+
+Optimistic VF is the cornerstone of Meta's typographic identity \u2014 a humanist sans-serif with geometric underpinnings that strikes a balance between Silicon Valley precision and consumer warmth. The "ss01" and "ss02" stylistic sets introduce alternate glyphs that give headlines a distinctive Meta character. Weight 500 (Medium) dominates headlines, creating a presence that commands without shouting, while the unexpected use of weight 300 (Light) at 28px adds an airy, editorial quality to subheadings. Negative letter-spacing at smaller sizes (-0.14px to -0.16px) tightens the optical rhythm for UI elements, keeping the reading experience crisp and efficient.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Pill)**
+- Background: Meta Blue (\`#0064E0\`)
+- Text: White (\`#FFFFFF\`)
+- Border: none
+- Border radius: fully rounded pill (100px)
+- Padding: 10px 22px
+- Font: Optimistic VF, 14px, regular, -0.14px tracking
+- Hover: darkens to \`#0143B5\`, scale(1.1) transform
+- Pressed: \`#004BB9\`, scale(0.9), opacity 0.5
+- Focus: 3px ring in accent color, outline auto 2px
+- Transition: background 200ms ease, transform 150ms ease
+
+**Secondary (Outlined Pill)**
+- Background: transparent
+- Text: Dark Charcoal (\`#1C2B33\`) at 50% opacity
+- Border: 2px solid \`rgba(10, 19, 23, 0.12)\`
+- Border radius: fully rounded pill (100px)
+- Padding: 10px 22px
+- Hover: background shifts to \`rgba(70, 90, 105, 0.7)\`, text to white
+
+**Ghost/Link Button**
+- Background: transparent / \`rgba(255, 255, 255, 0)\`
+- Text: Link Blue (\`#385898\`)
+- Border radius: 24px
+- Padding: 4px 12px
+
+**Disabled**
+- Background: \`#DEE3E9\` (--dolly-cta-disabled)
+- Text: \`#8595A4\` (--dolly-cta-disabled-text)
+- Cursor: not-allowed, no hover effects
+
+### Cards & Containers
+
+- Background: White (\`#FFFFFF\`) or Flat Gray (\`#F7F8FA\`)
+- Corner radius: 20px (--card-corner-radius) for standard cards, 24px for product feature cards
+- Padding: 10px horizontal, 20px vertical (--card-padding)
+- Shadow: \`0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1)\` (elevated cards)
+- Hover: subtle lift via translateY(-2px) and shadow intensification
+- Transition: transform 300ms ease, box-shadow 300ms ease
+- Product cards use full-bleed imagery with text overlay on dark gradient
+
+### Inputs & Forms
+
+- Background: White (\`#FFFFFF\`)
+- Border: 1px solid \`#CED0D4\` (--input-border-color)
+- Border radius: 8px
+- Font: Optimistic VF, 16px
+- Focus: border color shifts to accent blue \`hsl(214, 89%, 52%)\`, 3px outer ring
+- Error: border and label color \`hsl(350, 87%, 55%)\`
+- Placeholder: \`#65676B\` (--secondary-text)
+- Transition: border-color 200ms ease, box-shadow 200ms ease
+
+### Navigation
+
+- Background: White (\`#FFFFFF\`), sticky at top
+- Frosted glass effect: \`rgba(241, 244, 247, 0.8)\` with backdrop-filter blur
+- Logo: Meta wordmark SVG, left-aligned
+- Links: Optimistic VF, 16px/500, Dark Charcoal (\`#1C2B33\`)
+- Hover: underline decoration
+- CTA: Blue pill button, right-aligned
+- Mobile: hamburger collapse, full-screen overlay nav
+- Height: approximately 56px desktop, 48px mobile
+- Border-bottom: subtle \`rgba(0,0,0,0.1)\` separator
+
+### Image Treatment
+
+- Product hero: full-width, cinematic aspect ratio (~21:9 on desktop, ~4:3 on mobile)
+- Product cards: 1:1 or 4:3, edge-to-edge within card radius
+- Feature images: rounded corners matching card radius (20-24px)
+- Dark text-over-image: gradient overlay \`linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))\`
+- Lazy loading: native loading="lazy" on below-fold images
+- WebP format with JPEG fallback
+
+### Product-Specific Sections
+
+- **Quest sections**: Dark backgrounds (\`#181A1B\` or \`#000000\`), white/light text, purple accents (\`#A121CE\`)
+- **Ray-Ban sections**: Warm lifestyle photography, red accents (\`#D6311F\`), linen tones (\`#F2F0E6\`)
+- **Portal sections**: Teal-blue palette (\`#C8E4E8\`, \`#ADD4E0\`), navy accents (\`#1B365D\`)
+
+## 5. Layout Principles
+
+### Spacing System
+
+Base unit: 8px
+
+| Token | Value | Use |
+|-------|-------|-----|
+| space-1 | 1px | Hairline borders |
+| space-2 | 4px | Tight internal padding |
+| space-3 | 8px | Base unit, icon gaps |
+| space-4 | 10px | Card horizontal padding |
+| space-5 | 12px | Button icon spacing, tight margins |
+| space-6 | 14px | Caption line height spacing |
+| space-7 | 16px | Standard paragraph spacing, nav padding |
+| space-8 | 18px | Body text vertical rhythm |
+| space-9 | 24px | Card section spacing, grid gaps |
+| space-10 | 32px | Section content padding |
+| space-11 | 40px | Major content block spacing |
+| space-12 | 48px | Section vertical padding (compact) |
+| space-13 | 64px | Section vertical padding (standard) |
+| space-14 | 80px | Hero section padding, large section gaps |
+
+### Grid & Container
+
+- Max container width: ~1440px, centered with auto margins
+- Product grid: 3-column on desktop, 2-column on tablet, 1-column on mobile
+- Feature grid: 2-column split (image + content), stacks on mobile
+- Grid gap: 24px between cards, 16px on mobile
+- Page horizontal padding: 24-40px depending on breakpoint
+
+### Whitespace Philosophy
+
+Whitespace is the store's primary luxury signifier. Sections breathe with 64-80px vertical padding, creating a sense of unhurried browsing. Product images float in generous negative space rather than being crammed edge-to-edge. This restrained spacing communicates premium positioning \u2014 the visual equivalent of wide aisles in a high-end retail store.
+
+### Border Radius Scale
+
+| Value | Context |
+|-------|---------|
+| 8px | Inputs, small UI elements, glimmer placeholders |
+| 20px | Cards (--card-corner-radius) |
+| 24px | Feature cards, product highlight areas, ghost buttons |
+| 100px | Pill buttons, tags, badges (fully rounded) |
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat | No shadow, background differentiation only | Default cards, sections |
+| Level 1 | \`0 2px 4px 0 rgba(0,0,0,0.1)\` | Subtle lift for interactive cards |
+| Level 2 | \`0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1)\` | Elevated cards, dropdowns |
+| Overlay | \`rgba(0,0,0,0.6)\` full-screen | Modal/lightbox backdrop |
+| Inset | \`rgba(255,255,255,0.5)\` inset | Inner glow on glass-effect surfaces |
+
+The Meta Store favors a primarily flat elevation model. Most surface differentiation comes from background color shifts (white \u2192 soft gray \u2192 dark) rather than shadows. When shadows appear, they are soft, diffused, and use the dual-shadow pattern (a large blurred shadow for ambient light + a small sharp shadow for direct light). This creates a physically plausible depth feel without heavy visual weight.
+
+### Decorative Depth
+
+- **Frosted glass nav**: \`rgba(241, 244, 247, 0.8)\` background with backdrop-filter blur, creating a translucent navigation bar
+- **Dark section gradient**: \`linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))\` overlay on product photography for text legibility
+- **Glimmer loading states**: Pulsating opacity animation (0.25 \u2192 1.0) on \`#979A9F\` base color with 8px radius, 1000ms steps timing \u2014 used for skeleton screens during product image loading
+
+## 7. Do's and Don'ts
+
+### Do
+
+- Use pill-shaped (100px radius) buttons for all primary and secondary CTAs
+- Let product photography dominate \u2014 make images the visual hero of every section
+- Alternate between light and dark surface sections to create visual rhythm
+- Use Optimistic VF with ss01 and ss02 features for all display text
+- Keep body copy brief and scannable \u2014 this is retail, not editorial
+- Use the dual-shadow pattern (ambient + direct) when elevation is needed
+- Apply Meta Blue (\`#0064E0\`) exclusively for actionable elements
+- Use generous whitespace (64-80px section padding) to convey premium feel
+- Apply gradient overlays on dark photography when placing text over images
+- Use the semantic color tokens (success, error, warning) consistently for status communication
+
+### Don't
+
+- Don't use sharp corners (< 8px radius) \u2014 the Meta Store is all smooth curves
+- Don't mix product-specific accents (Ray-Ban Red with Quest Purple in the same section)
+- Don't add decorative borders or ornamental dividers \u2014 dividers are functional only
+- Don't place important text directly on photography without a gradient scrim
+- Don't use weight 300 for anything smaller than 28px \u2014 it becomes too thin
+- Don't use Facebook Blue (\`#1877F2\`) as a primary CTA color \u2014 use Meta Blue (\`#0064E0\`) instead
+- Don't crowd product images \u2014 maintain generous padding around all photography
+- Don't use more than 2 levels of text hierarchy in a single card
+- Don't add drop shadows to cards in dark sections \u2014 rely on border and color separation
+- Don't use long paragraphs \u2014 limit to 2-3 lines of body copy per block
+
+## 8. Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | Single column, hamburger nav, hero text shrinks to 36px, full-width product cards, 48px section padding |
+| Tablet | 768-1024px | 2-column product grid, compact nav, hero text at 48px |
+| Desktop | 1024-1440px | 3-column product grid, full horizontal nav, hero text at 64px, 80px section padding |
+| Large Desktop | >1440px | Max-width container (1440px) centered, increased horizontal margins |
+
+### Touch Targets
+
+- Minimum touch target: 44x44px (WCAG AAA compliant)
+- Mobile button height: minimum 44px with 10px vertical padding
+- Nav hamburger icon: 48x48px touch area
+- Product card tappable area: full card surface
+
+### Collapsing Strategy
+
+- **Navigation**: Horizontal links collapse to hamburger menu below 768px; CTA button remains visible
+- **Product grids**: 3-col \u2192 2-col at 1024px \u2192 1-col at 768px
+- **Hero sections**: Display text scales from 64px \u2192 48px \u2192 36px; CTA buttons stack vertically on mobile
+- **Feature sections**: 2-column (image + text) \u2192 full-width stacked below 768px, image on top
+- **Section padding**: 80px \u2192 64px \u2192 48px \u2192 32px as viewport narrows
+- **Card radius**: Remains consistent at 20-24px across all breakpoints
+
+### Image Behavior
+
+- Responsive images via srcset with multiple resolutions
+- WebP format with progressive JPEG fallback
+- Hero images: full-bleed on mobile, contained on desktop
+- Product grid images: maintain aspect ratio, scale proportionally
+- Art direction: hero crop changes between desktop (wide cinematic) and mobile (tighter product focus)
+- Lazy loading with glimmer skeleton (pulsating gray placeholder) during load
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+
+- Primary CTA: Meta Blue (\`#0064E0\`)
+- Background: White (\`#FFFFFF\`)
+- Heading text: Dark Charcoal (\`#1C2B33\`)
+- Body text: Slate Gray (\`#5D6C7B\`)
+- Border/divider: Divider Gray (\`#DEE3E9\`)
+- Secondary surface: Soft Gray (\`#F1F4F7\`)
+- Dark sections: Near Black (\`#1C1E21\`)
+
+### Example Component Prompts
+
+- "Create a product hero section with a full-width cinematic image, \`linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))\` text overlay, Optimistic-style 64px/500 white headline, and a Meta Blue (\`#0064E0\`) pill button (100px radius, 10px 22px padding)"
+- "Design a 3-column product card grid with 20px rounded corners, white backgrounds, edge-to-edge product images at top, 18px/400 body text in Slate Gray (\`#5D6C7B\`), and 24px grid gap"
+- "Build a sticky navigation bar with white background, \`rgba(241, 244, 247, 0.8)\` frosted glass effect, 16px/500 dark text links, and a right-aligned Meta Blue pill CTA"
+- "Create a dark product showcase section with \`#1C1E21\` background, white 48px/500 headline, \`#5D6C7B\` body text, and a secondary outlined pill button with \`rgba(10, 19, 23, 0.12)\` border"
+- "Design a feature comparison grid with Soft Gray (\`#F1F4F7\`) background, 24px rounded cards, Meta Blue checkmark icons, and 14px/700 bold labels"
+
+### 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. Use natural language descriptions, not CSS values \u2014 "pill-shaped Meta Blue button" not "border-radius: 100px; background: #0064E0"
+4. Describe the desired "feel" alongside specific measurements \u2014 "generous whitespace like a gallery" means 64-80px section padding
+5. For dark sections, specify which product context (Quest dark \`#181A1B\`, pure black \`#000000\`, or standard dark \`#1C1E21\`)
+6. Always specify the Optimistic VF weight explicitly (300, 400, 500, or 700) \u2014 each creates a dramatically different feel
+`;
+export {
+  metaBrief
+};
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/meta.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const metaBrief = `# Design System Inspired by Meta (Store)\n\n## 1. Visual Theme & Atmosphere\n\nThe Meta Store is a product-forward retail experience built to sell hardware — Quest VR headsets, Ray-Ban Meta smart glasses, and accessories. The design walks a tightrope between consumer electronics showroom and lifestyle editorial, deploying cinematic product photography against expansive white canvas to create a gallery-like sense of aspiration. Every design decision serves the merchandise: generous negative space frames hero product shots like museum pieces, while alternating light and dark surface sections create a visual rhythm that mimics the experience of walking through a physical retail space.\n\nThe \"Dolly\" design system (Meta's internal name for the store layer) sits atop the broader FDS (Facebook Design System) foundation, inheriting its gray scale and semantic tokens while overlaying its own product-focused palette. The result is a system that feels distinctly Meta — the custom Optimistic typeface brings warmth and approachability to what could otherwise be cold tech retail — yet flexible enough to showcase wildly different product lines (from VR headsets to fashion eyewear) without feeling disjointed. The surface strategy is binary: pure white for browsing and information, rich dark for immersive product moments.\n\nThe store's visual hierarchy is ruthlessly simple. Photography does the heavy lifting, supported by short, punchy headlines in Optimistic Medium and body text that stays brief and scannable. Calls to action are pill-shaped, unmistakable, and always Meta Blue. There is no visual noise, no decoration for decoration's sake — every element either sells or navigates.\n\n**Key Characteristics:**\n- Photography-first retail design where products are the visual heroes, not UI\n- Binary surface strategy: pure white for information, deep dark for immersive product moments\n- Pill-shaped CTAs in saturated blue create unmistakable action points\n- Optimistic VF typeface with OpenType ss01/ss02 features brings geometric warmth\n- Generous whitespace frames products like gallery exhibits\n- 8px spacing grid with disciplined vertical rhythm\n- Alternating light/dark sections create a \"walkthrough\" retail cadence\n\n## 2. Color Palette & Roles\n\n### Primary\n\n- **Meta Blue** (\\`#0064E0\\`): Primary CTA background, interactive links, action-driving elements throughout the store\n- **Meta Blue Hover** (\\`#0143B5\\`): Darkened blue for hover states on primary buttons\n- **Meta Blue Pressed** (\\`#004BB9\\`): Deepest blue for active/pressed button states\n- **Meta Blue Light** (\\`#47A5FA\\`): Lighter blue variant used on dark backgrounds for CTAs\n- **Facebook Blue** (\\`#1877F2\\`): Legacy accent inherited from FDS, used for deemphasized button text and badges\n\n### Secondary & Accent\n\n- **Ray-Ban Red** (\\`#D6311F\\`): Product-specific accent for Ray-Ban Meta smart glasses sections\n- **Oculus Purple** (\\`#A121CE\\`): Quest/Oculus product accent for VR content\n- **Work Purple** (\\`#6441D2\\`): Accent for Meta for Work/enterprise content\n- **Portal Blue** (\\`#1B365D\\`): Deep navy accent for Portal product line\n- **Portal Hero Blue** (\\`#C8E4E8\\`): Soft teal-blue for Portal hero backgrounds\n- **Portal Light Blue** (\\`#ADD4E0\\`): Secondary Portal surface tint\n\n### Surface & Background\n\n- **White** (\\`#FFFFFF\\`): Primary page canvas, nav bar background, card surfaces\n- **Soft Gray** (\\`#F1F4F7\\`): Secondary background for content sections (--dolly-bg-grey)\n- **Warm Gray** (\\`#F7F8FA\\`): Flat card background, subtle surface differentiation\n- **Web Wash** (\\`#F0F2F5\\`): Deemphasized background areas, attachment footers\n- **Linen** (\\`#F2F0E6\\`): Warm off-white for lifestyle-adjacent sections\n- **Baby Blue** (\\`#E8F3FF\\`): Highlight background, subtle blue tint for informational areas\n- **Near Black** (\\`#1C1E21\\`): Dark section backgrounds, immersive product showcase areas\n- **Oculus Light** (\\`#181A1B\\`): Slightly warm dark surface for Quest product sections\n- **Oculus Dark** (\\`#000000\\`): Pure black for maximum contrast product displays\n- **Overlay** (\\`rgba(0, 0, 0, 0.6)\\`): Modal/lightbox backdrop\n\n### Neutrals & Text\n\n- **Primary Text** (\\`#050505\\`): Main body and heading text on light surfaces\n- **Dark Charcoal** (\\`#1C2B33\\`): Dolly system primary text, slightly warmer than pure black (--dolly-text-primary)\n- **Icon Secondary** (\\`#465A69\\`): Secondary icon fills, subdued UI elements\n- **Secondary Text** (\\`#65676B\\`): Supporting copy, labels, timestamps (--secondary-text)\n- **Slate Gray** (\\`#5D6C7B\\`): Meta Store secondary text, product descriptions (--dolly-text-secondary)\n- **Section Header** (\\`#4B4C4F\\`): Mid-gray for section titles\n- **Button Text Gray** (\\`#444950\\`): FDS button text default (--fds-button-text)\n- **Disabled Text** (\\`#BCC0C4\\`): Inactive button labels, placeholder text\n- **CTA Disabled Text** (\\`#8595A4\\`): Muted blue-gray for disabled interactive labels\n- **Divider** (\\`#CED0D4\\`): Content separators, input borders\n- **Divider Gray** (\\`#DEE3E9\\`): Lighter divider for Dolly sections\n- **CTA Gray Border** (\\`#CBD2D9\\`): Outline button borders\n- **Dark Gray Border** (\\`#909396\\`): Stronger outline for emphasis\n\n### Semantic & Accent\n\n- **Success Green** (\\`#31A24C\\`): Badge success background, positive indicators\n- **Store Success** (\\`#007D1E\\`): Darker success green for Dolly store confirmations\n- **Error Red** (\\`#E41E3F\\`): Critical badge background, notification badges\n- **Store Error** (\\`#C80A28\\`): Darker error red for Dolly store error states\n- **Warning Amber** (\\`#F7B928\\`): Attention badges, caution indicators\n- **Positive BG** (\\`rgba(36, 228, 0, 0.15)\\`): Subtle success background tint\n- **Error BG** (\\`rgba(255, 123, 145, 0.15)\\`): Subtle error background tint\n- **Warning BG** (\\`rgba(255, 226, 0, 0.15)\\`): Subtle warning background tint\n- **Info BG** (\\`rgba(0, 145, 255, 0.15)\\`): Subtle informational blue tint\n\n### Base Color Spectrum (FDS)\n\n- **Cherry** (\\`#F3425F\\`): Expressive accent\n- **Grape** (\\`#9360F7\\`): Purple accent\n- **Lime** (\\`#45BD62\\`): Green accent\n- **Seafoam** (\\`#54C7EC\\`): Cyan accent\n- **Teal** (\\`#2ABBA7\\`): Teal accent\n- **Tomato** (\\`#FB724B\\`): Orange accent\n- **Pink** (\\`#FF66BF\\`): Pink accent\n\n### Gradient System\n\n- **Dark Overlay Gradient**: \\`linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))\\` — applied over dark product photography for text legibility\n- **Blue Infinity Gradient**: The Meta symbol uses a blue-to-teal gradient on brand materials, though the store uses flat blue\n- **Shadow Alpha Scale**: 0.05, 0.10, 0.15, 0.20, 0.30, 0.40, 0.50, 0.60, 0.80 — both black and white alpha ramps for layered transparency\n\n## 3. Typography Rules\n\n### Font Family\n\n**Primary:** Optimistic VF (variable font by Dalton Maag, commissioned by Meta)\n- Fallbacks: Montserrat, Helvetica, Arial, Noto Sans\n- OpenType features: \\`\"ss01\", \"ss02\"\\` — stylistic sets that activate Meta-specific alternate glyphs\n- Variable font with continuous weight axis (observed: 300, 400, 500, 700)\n\n**Secondary:** Helvetica\n- Fallbacks: Arial\n- Used for small utility text (12px footer links, legal copy)\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Display 1 | 64px | 500 (Medium) | 1.16 | — | Hero headlines on desktop, ss01+ss02 |\n| Display 2 | 48px | 500 (Medium) | 1.17 | — | Section heroes, product titles |\n| Heading 1 | 36px | 500 (Medium) | 1.28 | — | Major section headings |\n| Heading 2 | 28px | 300 (Light) | 1.21 | — | Subheadings, lighter feel |\n| Heading 3 | 18px | 700 (Bold) | 1.44 | — | Card titles, bold callouts, ss01+ss02 |\n| Body | 18px | 400 (Regular) | 1.44 | — | Product descriptions, body copy |\n| Body Compact | 16px | 500 (Medium) | 1.50 | -0.16px | Navigation links, UI labels |\n| Caption Bold | 14px | 700 (Bold) | 1.43 | — | Emphasized labels, price text |\n| Caption | 14px | 400 (Regular) | 1.43 | -0.14px | Secondary labels, metadata |\n| Small | 12px | 400 (Regular) | 1.33 | — | Footer links, legal text, timestamps |\n| Button | 14px | 400 (Regular) | 1.43 | -0.14px | Button label text |\n\n### Principles\n\nOptimistic VF is the cornerstone of Meta's typographic identity — a humanist sans-serif with geometric underpinnings that strikes a balance between Silicon Valley precision and consumer warmth. The \"ss01\" and \"ss02\" stylistic sets introduce alternate glyphs that give headlines a distinctive Meta character. Weight 500 (Medium) dominates headlines, creating a presence that commands without shouting, while the unexpected use of weight 300 (Light) at 28px adds an airy, editorial quality to subheadings. Negative letter-spacing at smaller sizes (-0.14px to -0.16px) tightens the optical rhythm for UI elements, keeping the reading experience crisp and efficient.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (Pill)**\n- Background: Meta Blue (\\`#0064E0\\`)\n- Text: White (\\`#FFFFFF\\`)\n- Border: none\n- Border radius: fully rounded pill (100px)\n- Padding: 10px 22px\n- Font: Optimistic VF, 14px, regular, -0.14px tracking\n- Hover: darkens to \\`#0143B5\\`, scale(1.1) transform\n- Pressed: \\`#004BB9\\`, scale(0.9), opacity 0.5\n- Focus: 3px ring in accent color, outline auto 2px\n- Transition: background 200ms ease, transform 150ms ease\n\n**Secondary (Outlined Pill)**\n- Background: transparent\n- Text: Dark Charcoal (\\`#1C2B33\\`) at 50% opacity\n- Border: 2px solid \\`rgba(10, 19, 23, 0.12)\\`\n- Border radius: fully rounded pill (100px)\n- Padding: 10px 22px\n- Hover: background shifts to \\`rgba(70, 90, 105, 0.7)\\`, text to white\n\n**Ghost/Link Button**\n- Background: transparent / \\`rgba(255, 255, 255, 0)\\`\n- Text: Link Blue (\\`#385898\\`)\n- Border radius: 24px\n- Padding: 4px 12px\n\n**Disabled**\n- Background: \\`#DEE3E9\\` (--dolly-cta-disabled)\n- Text: \\`#8595A4\\` (--dolly-cta-disabled-text)\n- Cursor: not-allowed, no hover effects\n\n### Cards & Containers\n\n- Background: White (\\`#FFFFFF\\`) or Flat Gray (\\`#F7F8FA\\`)\n- Corner radius: 20px (--card-corner-radius) for standard cards, 24px for product feature cards\n- Padding: 10px horizontal, 20px vertical (--card-padding)\n- Shadow: \\`0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1)\\` (elevated cards)\n- Hover: subtle lift via translateY(-2px) and shadow intensification\n- Transition: transform 300ms ease, box-shadow 300ms ease\n- Product cards use full-bleed imagery with text overlay on dark gradient\n\n### Inputs & Forms\n\n- Background: White (\\`#FFFFFF\\`)\n- Border: 1px solid \\`#CED0D4\\` (--input-border-color)\n- Border radius: 8px\n- Font: Optimistic VF, 16px\n- Focus: border color shifts to accent blue \\`hsl(214, 89%, 52%)\\`, 3px outer ring\n- Error: border and label color \\`hsl(350, 87%, 55%)\\`\n- Placeholder: \\`#65676B\\` (--secondary-text)\n- Transition: border-color 200ms ease, box-shadow 200ms ease\n\n### Navigation\n\n- Background: White (\\`#FFFFFF\\`), sticky at top\n- Frosted glass effect: \\`rgba(241, 244, 247, 0.8)\\` with backdrop-filter blur\n- Logo: Meta wordmark SVG, left-aligned\n- Links: Optimistic VF, 16px/500, Dark Charcoal (\\`#1C2B33\\`)\n- Hover: underline decoration\n- CTA: Blue pill button, right-aligned\n- Mobile: hamburger collapse, full-screen overlay nav\n- Height: approximately 56px desktop, 48px mobile\n- Border-bottom: subtle \\`rgba(0,0,0,0.1)\\` separator\n\n### Image Treatment\n\n- Product hero: full-width, cinematic aspect ratio (~21:9 on desktop, ~4:3 on mobile)\n- Product cards: 1:1 or 4:3, edge-to-edge within card radius\n- Feature images: rounded corners matching card radius (20-24px)\n- Dark text-over-image: gradient overlay \\`linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))\\`\n- Lazy loading: native loading=\"lazy\" on below-fold images\n- WebP format with JPEG fallback\n\n### Product-Specific Sections\n\n- **Quest sections**: Dark backgrounds (\\`#181A1B\\` or \\`#000000\\`), white/light text, purple accents (\\`#A121CE\\`)\n- **Ray-Ban sections**: Warm lifestyle photography, red accents (\\`#D6311F\\`), linen tones (\\`#F2F0E6\\`)\n- **Portal sections**: Teal-blue palette (\\`#C8E4E8\\`, \\`#ADD4E0\\`), navy accents (\\`#1B365D\\`)\n\n## 5. Layout Principles\n\n### Spacing System\n\nBase unit: 8px\n\n| Token | Value | Use |\n|-------|-------|-----|\n| space-1 | 1px | Hairline borders |\n| space-2 | 4px | Tight internal padding |\n| space-3 | 8px | Base unit, icon gaps |\n| space-4 | 10px | Card horizontal padding |\n| space-5 | 12px | Button icon spacing, tight margins |\n| space-6 | 14px | Caption line height spacing |\n| space-7 | 16px | Standard paragraph spacing, nav padding |\n| space-8 | 18px | Body text vertical rhythm |\n| space-9 | 24px | Card section spacing, grid gaps |\n| space-10 | 32px | Section content padding |\n| space-11 | 40px | Major content block spacing |\n| space-12 | 48px | Section vertical padding (compact) |\n| space-13 | 64px | Section vertical padding (standard) |\n| space-14 | 80px | Hero section padding, large section gaps |\n\n### Grid & Container\n\n- Max container width: ~1440px, centered with auto margins\n- Product grid: 3-column on desktop, 2-column on tablet, 1-column on mobile\n- Feature grid: 2-column split (image + content), stacks on mobile\n- Grid gap: 24px between cards, 16px on mobile\n- Page horizontal padding: 24-40px depending on breakpoint\n\n### Whitespace Philosophy\n\nWhitespace is the store's primary luxury signifier. Sections breathe with 64-80px vertical padding, creating a sense of unhurried browsing. Product images float in generous negative space rather than being crammed edge-to-edge. This restrained spacing communicates premium positioning — the visual equivalent of wide aisles in a high-end retail store.\n\n### Border Radius Scale\n\n| Value | Context |\n|-------|---------|\n| 8px | Inputs, small UI elements, glimmer placeholders |\n| 20px | Cards (--card-corner-radius) |\n| 24px | Feature cards, product highlight areas, ghost buttons |\n| 100px | Pill buttons, tags, badges (fully rounded) |\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat | No shadow, background differentiation only | Default cards, sections |\n| Level 1 | \\`0 2px 4px 0 rgba(0,0,0,0.1)\\` | Subtle lift for interactive cards |\n| Level 2 | \\`0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1)\\` | Elevated cards, dropdowns |\n| Overlay | \\`rgba(0,0,0,0.6)\\` full-screen | Modal/lightbox backdrop |\n| Inset | \\`rgba(255,255,255,0.5)\\` inset | Inner glow on glass-effect surfaces |\n\nThe Meta Store favors a primarily flat elevation model. Most surface differentiation comes from background color shifts (white → soft gray → dark) rather than shadows. When shadows appear, they are soft, diffused, and use the dual-shadow pattern (a large blurred shadow for ambient light + a small sharp shadow for direct light). This creates a physically plausible depth feel without heavy visual weight.\n\n### Decorative Depth\n\n- **Frosted glass nav**: \\`rgba(241, 244, 247, 0.8)\\` background with backdrop-filter blur, creating a translucent navigation bar\n- **Dark section gradient**: \\`linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))\\` overlay on product photography for text legibility\n- **Glimmer loading states**: Pulsating opacity animation (0.25 → 1.0) on \\`#979A9F\\` base color with 8px radius, 1000ms steps timing — used for skeleton screens during product image loading\n\n## 7. Do's and Don'ts\n\n### Do\n\n- Use pill-shaped (100px radius) buttons for all primary and secondary CTAs\n- Let product photography dominate — make images the visual hero of every section\n- Alternate between light and dark surface sections to create visual rhythm\n- Use Optimistic VF with ss01 and ss02 features for all display text\n- Keep body copy brief and scannable — this is retail, not editorial\n- Use the dual-shadow pattern (ambient + direct) when elevation is needed\n- Apply Meta Blue (\\`#0064E0\\`) exclusively for actionable elements\n- Use generous whitespace (64-80px section padding) to convey premium feel\n- Apply gradient overlays on dark photography when placing text over images\n- Use the semantic color tokens (success, error, warning) consistently for status communication\n\n### Don't\n\n- Don't use sharp corners (< 8px radius) — the Meta Store is all smooth curves\n- Don't mix product-specific accents (Ray-Ban Red with Quest Purple in the same section)\n- Don't add decorative borders or ornamental dividers — dividers are functional only\n- Don't place important text directly on photography without a gradient scrim\n- Don't use weight 300 for anything smaller than 28px — it becomes too thin\n- Don't use Facebook Blue (\\`#1877F2\\`) as a primary CTA color — use Meta Blue (\\`#0064E0\\`) instead\n- Don't crowd product images — maintain generous padding around all photography\n- Don't use more than 2 levels of text hierarchy in a single card\n- Don't add drop shadows to cards in dark sections — rely on border and color separation\n- Don't use long paragraphs — limit to 2-3 lines of body copy per block\n\n## 8. Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <768px | Single column, hamburger nav, hero text shrinks to 36px, full-width product cards, 48px section padding |\n| Tablet | 768-1024px | 2-column product grid, compact nav, hero text at 48px |\n| Desktop | 1024-1440px | 3-column product grid, full horizontal nav, hero text at 64px, 80px section padding |\n| Large Desktop | >1440px | Max-width container (1440px) centered, increased horizontal margins |\n\n### Touch Targets\n\n- Minimum touch target: 44x44px (WCAG AAA compliant)\n- Mobile button height: minimum 44px with 10px vertical padding\n- Nav hamburger icon: 48x48px touch area\n- Product card tappable area: full card surface\n\n### Collapsing Strategy\n\n- **Navigation**: Horizontal links collapse to hamburger menu below 768px; CTA button remains visible\n- **Product grids**: 3-col → 2-col at 1024px → 1-col at 768px\n- **Hero sections**: Display text scales from 64px → 48px → 36px; CTA buttons stack vertically on mobile\n- **Feature sections**: 2-column (image + text) → full-width stacked below 768px, image on top\n- **Section padding**: 80px → 64px → 48px → 32px as viewport narrows\n- **Card radius**: Remains consistent at 20-24px across all breakpoints\n\n### Image Behavior\n\n- Responsive images via srcset with multiple resolutions\n- WebP format with progressive JPEG fallback\n- Hero images: full-bleed on mobile, contained on desktop\n- Product grid images: maintain aspect ratio, scale proportionally\n- Art direction: hero crop changes between desktop (wide cinematic) and mobile (tighter product focus)\n- Lazy loading with glimmer skeleton (pulsating gray placeholder) during load\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n\n- Primary CTA: Meta Blue (\\`#0064E0\\`)\n- Background: White (\\`#FFFFFF\\`)\n- Heading text: Dark Charcoal (\\`#1C2B33\\`)\n- Body text: Slate Gray (\\`#5D6C7B\\`)\n- Border/divider: Divider Gray (\\`#DEE3E9\\`)\n- Secondary surface: Soft Gray (\\`#F1F4F7\\`)\n- Dark sections: Near Black (\\`#1C1E21\\`)\n\n### Example Component Prompts\n\n- \"Create a product hero section with a full-width cinematic image, \\`linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))\\` text overlay, Optimistic-style 64px/500 white headline, and a Meta Blue (\\`#0064E0\\`) pill button (100px radius, 10px 22px padding)\"\n- \"Design a 3-column product card grid with 20px rounded corners, white backgrounds, edge-to-edge product images at top, 18px/400 body text in Slate Gray (\\`#5D6C7B\\`), and 24px grid gap\"\n- \"Build a sticky navigation bar with white background, \\`rgba(241, 244, 247, 0.8)\\` frosted glass effect, 16px/500 dark text links, and a right-aligned Meta Blue pill CTA\"\n- \"Create a dark product showcase section with \\`#1C1E21\\` background, white 48px/500 headline, \\`#5D6C7B\\` body text, and a secondary outlined pill button with \\`rgba(10, 19, 23, 0.12)\\` border\"\n- \"Design a feature comparison grid with Soft Gray (\\`#F1F4F7\\`) background, 24px rounded cards, Meta Blue checkmark icons, and 14px/700 bold labels\"\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. Use natural language descriptions, not CSS values — \"pill-shaped Meta Blue button\" not \"border-radius: 100px; background: #0064E0\"\n4. Describe the desired \"feel\" alongside specific measurements — \"generous whitespace like a gallery\" means 64-80px section padding\n5. For dark sections, specify which product context (Quest dark \\`#181A1B\\`, pure black \\`#000000\\`, or standard dark \\`#1C1E21\\`)\n6. Always specify the Optimistic VF weight explicitly (300, 400, 500, or 700) — each creates a dramatically different feel\n`;\n"],"mappings":";AACO,IAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/minimax.d.ts

@@ -0,0 +1,3 @@
+declare const minimaxBrief = "# Design System Inspired by MiniMax\n\n## 1. Visual Theme & Atmosphere\n\nMiniMax's website is a clean, product-showcase platform for a Chinese AI technology company that bridges consumer-friendly appeal with technical credibility. The design language is predominantly white-space-driven with a light, airy feel \u2014 pure white backgrounds (`#ffffff`) dominate, letting colorful product cards and AI model illustrations serve as the visual anchors. The overall aesthetic sits at the intersection of Apple's product marketing clarity and a playful, rounded design language that makes AI technology feel approachable.\n\nThe typography system is notably multi-font: DM Sans serves as the primary UI workhorse, Outfit handles display headings with geometric elegance, Poppins appears for mid-tier headings, and Roboto handles data-heavy contexts. This variety reflects a brand in rapid growth \u2014 each font serves a distinct communicative purpose rather than competing for attention. The hero heading at 80px weight 500 in both DM Sans and Outfit with a tight 1.10 line-height creates a bold but not aggressive opening statement.\n\nWhat makes MiniMax distinctive is its pill-button geometry (9999px radius) for navigation and primary actions, combined with softer 8px\u201324px radiused cards for product showcases. The product cards themselves are richly colorful \u2014 vibrant gradients in pink, purple, orange, and blue \u2014 creating a \"gallery of AI capabilities\" feel. Against the white canvas, these colorful cards pop like app icons on a phone home screen, making each AI model/product feel like a self-contained creative tool.\n\n**Key Characteristics:**\n- White-dominant layout with colorful product card accents\n- Multi-font system: DM Sans (UI), Outfit (display), Poppins (mid-tier), Roboto (data)\n- Pill buttons (9999px radius) for primary navigation and CTAs\n- Generous rounded cards (20px\u201324px radius) for product showcases\n- Brand blue spectrum: from `#1456f0` (brand-6) through `#3b82f6` (primary-500) to `#60a5fa` (light)\n- Brand pink (`#ea5ec1`) as secondary accent\n- Near-black text (`#222222`, `#18181b`) on white backgrounds\n- Purple-tinted shadows (`rgba(44, 30, 116, 0.16)`) creating subtle brand-colored depth\n- Dark footer section (`#181e25`) with product/company links\n\n## 2. Color Palette & Roles\n\n### Brand Primary\n- **Brand Blue** (`#1456f0`): `--brand-6`, primary brand identity color\n- **Sky Blue** (`#3daeff`): `--col-brand00`, lighter brand variant for accents\n- **Brand Pink** (`#ea5ec1`): `--col-brand02`, secondary brand accent\n\n### Blue Scale (Primary)\n- **Primary 200** (`#bfdbfe`): `--color-primary-200`, light blue backgrounds\n- **Primary Light** (`#60a5fa`): `--color-primary-light`, active states, highlights\n- **Primary 500** (`#3b82f6`): `--color-primary-500`, standard blue actions\n- **Primary 600** (`#2563eb`): `--color-primary-600`, hover states\n- **Primary 700** (`#1d4ed8`): `--color-primary-700`, pressed/active states\n- **Brand Deep** (`#17437d`): `--brand-3`, deep blue for emphasis\n\n### Text Colors\n- **Near Black** (`#222222`): `--col-text00`, primary text\n- **Dark** (`#18181b`): Button text, headings\n- **Charcoal** (`#181e25`): Dark surface text, footer background\n- **Dark Gray** (`#45515e`): `--col-text04`, secondary text\n- **Mid Gray** (`#8e8e93`): Tertiary text, muted labels\n- **Light Gray** (`#5f5f5f`): `--brand-2`, helper text\n\n### Surface & Background\n- **Pure White** (`#ffffff`): `--col-bg13`, primary background\n- **Light Gray** (`#f0f0f0`): Secondary button backgrounds\n- **Glass White** (`hsla(0, 0%, 100%, 0.4)`): `--fill-bg-white`, frosted glass overlay\n- **Border Light** (`#f2f3f5`): Subtle section dividers\n- **Border Gray** (`#e5e7eb`): Component borders\n\n### Semantic\n- **Success Background** (`#e8ffea`): `--success-bg`, positive state backgrounds\n\n### Shadows\n- **Standard** (`rgba(0, 0, 0, 0.08) 0px 4px 6px`): Default card shadow\n- **Soft Glow** (`rgba(0, 0, 0, 0.08) 0px 0px 22.576px`): Ambient soft shadow\n- **Brand Purple** (`rgba(44, 30, 116, 0.16) 0px 0px 15px`): Brand-tinted glow\n- **Brand Purple Offset** (`rgba(44, 30, 116, 0.11) 6.5px 2px 17.5px`): Directional brand glow\n- **Card Elevation** (`rgba(36, 36, 36, 0.08) 0px 12px 16px -4px`): Lifted card shadow\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary UI**: `DM Sans`, with fallbacks: `Helvetica Neue, Helvetica, Arial`\n- **Display**: `Outfit`, with fallbacks: `Helvetica Neue, Helvetica, Arial`\n- **Mid-tier**: `Poppins`\n- **Data/Technical**: `Roboto`, with fallbacks: `Helvetica Neue, Helvetica, Arial`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Notes |\n|------|------|------|--------|-------------|-------|\n| Display Hero | DM Sans / Outfit | 80px (5.00rem) | 500 | 1.10 (tight) | Hero headlines |\n| Section Heading | Outfit | 31px (1.94rem) | 600 | 1.50 | Feature section titles |\n| Section Heading Alt | Roboto / DM Sans | 32px (2.00rem) | 600 | 0.88 (tight) | Compact headers |\n| Card Title | Outfit | 28px (1.75rem) | 500\u2013600 | 1.71 (relaxed) | Product card headings |\n| Sub-heading | Poppins | 24px (1.50rem) | 500 | 1.50 | Mid-tier headings |\n| Feature Label | Poppins | 18px (1.13rem) | 500 | 1.50 | Feature names |\n| Body Large | DM Sans | 20px (1.25rem) | 500 | 1.50 | Emphasized body |\n| Body | DM Sans | 16px (1.00rem) | 400\u2013500 | 1.50 | Standard body text |\n| Body Bold | DM Sans | 16px (1.00rem) | 700 | 1.50 | Strong emphasis |\n| Nav/Link | DM Sans | 14px (0.88rem) | 400\u2013500 | 1.50 | Navigation, links |\n| Button Small | DM Sans | 13px (0.81rem) | 600 | 1.50 | Compact buttons |\n| Caption | DM Sans / Poppins | 13px (0.81rem) | 400 | 1.70 (relaxed) | Metadata |\n| Small Label | DM Sans | 12px (0.75rem) | 500\u2013600 | 1.25\u20131.50 | Tags, badges |\n| Micro | DM Sans / Outfit | 10px (0.63rem) | 400\u2013500 | 1.50\u20131.80 | Tiny annotations |\n\n### Principles\n- **Multi-font purpose**: DM Sans = UI workhorse (body, nav, buttons); Outfit = geometric display (headings, product names); Poppins = friendly mid-tier (sub-headings, features); Roboto = technical/data contexts.\n- **Universal 1.50 line-height**: The overwhelming majority of text uses 1.50 line-height, creating a consistent reading rhythm regardless of font or size. Exceptions: display (1.10 tight) and some captions (1.70 relaxed).\n- **Weight 500 as default emphasis**: Most headings use 500 (medium) rather than bold, creating a modern, approachable tone. 600 for section titles, 700 reserved for strong emphasis.\n- **Compact hierarchy**: The size scale jumps from 80px display straight to 28\u201332px section, then 16\u201320px body \u2014 a deliberate compression that keeps the visual hierarchy feeling efficient.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Pill Primary Dark**\n- Background: `#181e25`\n- Text: `#ffffff`\n- Padding: 11px 20px\n- Radius: 8px\n- Use: Primary CTA (\"Get Started\", \"Learn More\")\n\n**Pill Nav**\n- Background: `rgba(0, 0, 0, 0.05)` (subtle tint)\n- Text: `#18181b`\n- Radius: 9999px (full pill)\n- Use: Navigation tabs, filter toggles\n\n**Pill White**\n- Background: `#ffffff`\n- Text: `rgba(24, 30, 37, 0.8)`\n- Radius: 9999px\n- Opacity: 0.5 (default state)\n- Use: Secondary nav, inactive tabs\n\n**Secondary Light**\n- Background: `#f0f0f0`\n- Text: `#333333`\n- Padding: 11px 20px\n- Radius: 8px\n- Use: Secondary actions\n\n### Product Cards\n- Background: Vibrant gradients (pink/purple/orange/blue)\n- Radius: 20px\u201324px (generous rounding)\n- Shadow: `rgba(44, 30, 116, 0.16) 0px 0px 15px` (brand purple glow)\n- Content: Product name, model version, descriptive text\n- Each card has its own color palette matching the product identity\n\n### AI Product Cards (Matrix)\n- Background: white with subtle shadow\n- Radius: 13px\u201316px\n- Shadow: `rgba(0, 0, 0, 0.08) 0px 4px 6px`\n- Icon/illustration centered above product name\n- Product name in DM Sans 14\u201316px weight 500\n\n### Links\n- **Primary**: `#18181b` or `#181e25`, underline on dark text\n- **Secondary**: `#8e8e93`, muted for less emphasis\n- **On Dark**: `rgba(255, 255, 255, 0.8)` for footer and dark sections\n\n### Navigation\n- Clean horizontal nav on white background\n- MiniMax logo left-aligned (red accent in logo)\n- DM Sans 14px weight 500 for nav items\n- Pill-shaped active indicators (9999px radius)\n- \"Login\" text link, minimal right-side actions\n- Sticky header behavior\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 14px, 16px, 24px, 32px, 40px, 50px, 64px, 80px\n\n### Grid & Container\n- Max content width centered on page\n- Product card grids: horizontal scroll or 3\u20134 column layout\n- Full-width white sections with contained content\n- Dark footer at full-width\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <768px | Single column, stacked cards |\n| Tablet | 768\u20131024px | 2-column grids |\n| Desktop | >1024px | Full layout, horizontal card scrolls |\n\n### Whitespace Philosophy\n- **Gallery spacing**: Products are presented like gallery items with generous white space between cards, letting each AI model breathe as its own showcase.\n- **Section rhythm**: Large vertical gaps (64px\u201380px) between major sections create distinct \"chapters\" of content.\n- **Card breathing**: Product cards use internal padding of 16px\u201324px with ample whitespace around text.\n\n### Border Radius Scale\n- Minimal (4px): Small tags, micro badges\n- Standard (8px): Buttons, small cards\n- Comfortable (11px\u201313px): Medium cards, panels\n- Generous (16px\u201320px): Large product cards\n- Large (22px\u201324px): Hero product cards, major containers\n- Pill (30px\u201332px): Badge pills, rounded panels\n- Full (9999px): Buttons, nav tabs\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | White background, text blocks |\n| Subtle (Level 1) | `rgba(0, 0, 0, 0.08) 0px 4px 6px` | Standard cards, containers |\n| Ambient (Level 2) | `rgba(0, 0, 0, 0.08) 0px 0px 22.576px` | Soft glow around elements |\n| Brand Glow (Level 3) | `rgba(44, 30, 116, 0.16) 0px 0px 15px` | Featured product cards |\n| Elevated (Level 4) | `rgba(36, 36, 36, 0.08) 0px 12px 16px -4px` | Lifted cards, hover states |\n\n**Shadow Philosophy**: MiniMax uses a distinctive purple-tinted shadow (`rgba(44, 30, 116, ...)`) for featured elements, creating a subtle brand-color glow that connects the shadow system to the blue brand identity. Standard shadows use neutral black but at low opacity (0.08), keeping everything feeling light and airy. The directional shadow variant (6.5px offset) adds dimensional interest to hero product cards.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use white as the dominant background \u2014 let product cards provide the color\n- Apply pill radius (9999px) for navigation tabs and toggle buttons\n- Use generous border radius (20px\u201324px) for product showcase cards\n- Employ the purple-tinted shadow for featured/hero product cards\n- Keep body text at DM Sans weight 400\u2013500 \u2014 heavier weights for buttons only\n- Use Outfit for display headings, DM Sans for everything functional\n- Maintain the universal 1.50 line-height across body text\n- Let colorful product illustrations/gradients serve as the primary visual interest\n\n### Don't\n- Don't add colored backgrounds to main content sections \u2014 white is structural\n- Don't use sharp corners (0\u20134px radius) on product cards \u2014 the rounded aesthetic is core\n- Don't apply the brand pink (`#ea5ec1`) to text or buttons \u2014 it's for logo and decorative accents only\n- Don't mix more than one display font per section (Outfit OR Poppins, not both)\n- Don't use weight 700 for headings \u2014 500\u2013600 is the range, 700 is reserved for strong emphasis in body text\n- Don't darken shadows beyond 0.16 opacity \u2014 the light, airy feel requires restraint\n- Don't use Roboto for headings \u2014 it's the data/technical context font only\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <768px | Single column, stacked product cards, hamburger nav |\n| Tablet | 768\u20131024px | 2-column product grids, condensed spacing |\n| Desktop | >1024px | Full horizontal card layouts, expanded spacing |\n\n### Collapsing Strategy\n- Hero: 80px \u2192 responsive scaling to ~40px on mobile\n- Product card grid: horizontal scroll \u2192 2-column \u2192 single column stacked\n- Navigation: horizontal \u2192 hamburger menu\n- Footer: multi-column \u2192 stacked sections\n- Spacing: 64\u201380px gaps \u2192 32\u201340px on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: `#ffffff` (primary), `#181e25` (dark/footer)\n- Text: `#222222` (primary), `#45515e` (secondary), `#8e8e93` (muted)\n- Brand Blue: `#1456f0` (brand), `#3b82f6` (primary-500), `#2563eb` (hover)\n- Brand Pink: `#ea5ec1` (accent only)\n- Borders: `#e5e7eb`, `#f2f3f5`\n\n### Example Component Prompts\n- \"Create a hero section on white background. Headline at 80px Outfit weight 500, line-height 1.10, near-black (#222222) text. Sub-text at 16px DM Sans weight 400, line-height 1.50, #45515e. Dark CTA button (#181e25, 8px radius, 11px 20px padding, white text).\"\n- \"Design a product card grid: white cards with 20px border-radius, shadow rgba(44,30,116,0.16) 0px 0px 15px. Product name at 28px Outfit weight 600. Internal gradient background for the product illustration area.\"\n- \"Build navigation bar: white background, DM Sans 14px weight 500 for links, #18181b text. Pill-shaped active tab (9999px radius, rgba(0,0,0,0.05) background). MiniMax logo left-aligned.\"\n- \"Create an AI product matrix: 4-column grid of cards with 13px radius, subtle shadow rgba(0,0,0,0.08) 0px 4px 6px. Centered icon above product name in DM Sans 16px weight 500.\"\n- \"Design footer on dark (#181e25) background. Product links in DM Sans 14px, rgba(255,255,255,0.8). Multi-column layout.\"\n\n### Iteration Guide\n1. Start with white \u2014 color comes from product cards and illustrations only\n2. Pill buttons (9999px) for nav/tabs, standard radius (8px) for CTA buttons\n3. Purple-tinted shadows for featured cards, neutral shadows for everything else\n4. DM Sans handles 70% of text \u2014 Outfit is display-only, Poppins is mid-tier only\n5. Keep weights moderate (500\u2013600 for headings) \u2014 the brand tone is confident but approachable\n6. Large radius cards (20\u201324px) for products, smaller radius (8\u201313px) for UI elements\n";
+
+export { minimaxBrief };