@hex-core/themes 0.1.1 → 0.2.0

package/dist/presets/_briefs/lovable.js

@@ -0,0 +1,304 @@
+// src/presets/_briefs/lovable.ts
+var lovableBrief = `# Design System Inspired by Lovable
+
+## 1. Visual Theme & Atmosphere
+
+Lovable's website radiates warmth through restraint. The entire page sits on a creamy, parchment-toned background (\`#f7f4ed\`) that immediately separates it from the cold-white conventions of most developer tool sites. This isn't minimalism for minimalism's sake \u2014 it's a deliberate choice to feel approachable, almost analog, like a well-crafted notebook. The near-black text (\`#1c1c1c\`) against this warm cream creates a contrast ratio that's easy on the eyes while maintaining sharp readability.
+
+The custom Camera Plain Variable typeface is the system's secret weapon. Unlike geometric sans-serifs that signal "tech company," Camera Plain has a humanist warmth \u2014 slightly rounded terminals, organic curves, and a comfortable reading rhythm. At display sizes (48px\u201360px), weight 600 with aggressive negative letter-spacing (-0.9px to -1.5px) compresses headlines into confident, editorial statements. The font uses \`ui-sans-serif, system-ui\` as fallbacks, acknowledging that the custom typeface carries the brand personality.
+
+What makes Lovable's visual system distinctive is its opacity-driven depth model. Rather than using a traditional gray scale, the system modulates \`#1c1c1c\` at varying opacities (0.03, 0.04, 0.4, 0.82\u20130.83) to create a unified tonal range. Every shade of gray on the page is technically the same hue \u2014 just more or less transparent. This creates a visual coherence that's nearly impossible to achieve with arbitrary hex values. The border system follows suit: \`1px solid #eceae4\` for light divisions and \`1px solid rgba(28, 28, 28, 0.4)\` for stronger interactive boundaries.
+
+**Key Characteristics:**
+- Warm parchment background (\`#f7f4ed\`) \u2014 not white, not beige, a deliberate cream that feels hand-selected
+- Camera Plain Variable typeface with humanist warmth and editorial letter-spacing at display sizes
+- Opacity-driven color system: all grays derived from \`#1c1c1c\` at varying transparency levels
+- Inset shadow technique on buttons: \`rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset\`
+- Warm neutral border palette: \`#eceae4\` for subtle, \`rgba(28,28,28,0.4)\` for interactive elements
+- Full-pill radius (\`9999px\`) used extensively for action buttons and icon containers
+- Focus state uses \`rgba(0,0,0,0.1) 0px 4px 12px\` shadow for soft, warm emphasis
+- shadcn/ui + Radix UI component primitives with Tailwind CSS utility styling
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Cream** (\`#f7f4ed\`): Page background, card surfaces, button surfaces. The foundation \u2014 warm, paper-like, human.
+- **Charcoal** (\`#1c1c1c\`): Primary text, headings, dark button backgrounds. Not pure black \u2014 organic warmth.
+- **Off-White** (\`#fcfbf8\`): Button text on dark backgrounds, subtle highlight. Barely distinguishable from pure white.
+
+### Neutral Scale (Opacity-Based)
+- **Charcoal 100%** (\`#1c1c1c\`): Primary text, headings, dark surfaces.
+- **Charcoal 83%** (\`rgba(28,28,28,0.83)\`): Strong secondary text.
+- **Charcoal 82%** (\`rgba(28,28,28,0.82)\`): Body copy.
+- **Muted Gray** (\`#5f5f5d\`): Secondary text, descriptions, captions.
+- **Charcoal 40%** (\`rgba(28,28,28,0.4)\`): Interactive borders, button outlines.
+- **Charcoal 4%** (\`rgba(28,28,28,0.04)\`): Subtle hover backgrounds, micro-tints.
+- **Charcoal 3%** (\`rgba(28,28,28,0.03)\`): Barely-visible overlays, background depth.
+
+### Surface & Border
+- **Light Cream** (\`#eceae4\`): Card borders, dividers, image outlines. The warm divider line.
+- **Cream Surface** (\`#f7f4ed\`): Card backgrounds, section fills \u2014 same as page background for seamless integration.
+
+### Interactive
+- **Ring Blue** (\`#3b82f6\` at 50% opacity): \`--tw-ring-color\`, Tailwind focus ring.
+- **Focus Shadow** (\`rgba(0,0,0,0.1) 0px 4px 12px\`): Focus and active state shadow \u2014 soft, warm, diffused.
+
+### Inset Shadows
+- **Button Inset** (\`rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px\`): The signature multi-layer inset shadow on dark buttons.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: \`Camera Plain Variable\`, with fallbacks: \`ui-sans-serif, system-ui\`
+- **Weight range**: 400 (body/reading), 480 (special display), 600 (headings/emphasis)
+- **Feature**: Variable font with continuous weight axis \u2014 allows fine-tuned intermediary weights like 480.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Camera Plain Variable | 60px (3.75rem) | 600 | 1.00\u20131.10 (tight) | -1.5px | Maximum impact, editorial |
+| Display Alt | Camera Plain Variable | 60px (3.75rem) | 480 | 1.00 (tight) | normal | Lighter hero variant |
+| Section Heading | Camera Plain Variable | 48px (3.00rem) | 600 | 1.00 (tight) | -1.2px | Feature section titles |
+| Sub-heading | Camera Plain Variable | 36px (2.25rem) | 600 | 1.10 (tight) | -0.9px | Sub-sections |
+| Card Title | Camera Plain Variable | 20px (1.25rem) | 400 | 1.25 (tight) | normal | Card headings |
+| Body Large | Camera Plain Variable | 18px (1.13rem) | 400 | 1.38 | normal | Introductions |
+| Body | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
+| Button | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Button labels |
+| Button Small | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Compact buttons |
+| Link | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Underline decoration |
+| Link Small | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Footer links |
+| Caption | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Metadata, small text |
+
+### Principles
+- **Warm humanist voice**: Camera Plain Variable gives Lovable its approachable personality. The slightly rounded terminals and organic curves contrast with the sharp geometric sans-serifs used by most developer tools.
+- **Variable weight as design tool**: The font supports continuous weight values (e.g., 480), enabling nuanced hierarchy beyond standard weight stops. Weight 480 at 60px creates a display style that feels lighter than semibold but stronger than regular.
+- **Compression at scale**: Headlines use negative letter-spacing (-0.9px to -1.5px) for editorial impact. Body text stays at normal tracking for comfortable reading.
+- **Two weights, clear roles**: 400 (body/UI/links/buttons) and 600 (headings/emphasis). The narrow weight range creates hierarchy through size and spacing, not weight variation.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Dark (Inset Shadow)**
+- Background: \`#1c1c1c\`
+- Text: \`#fcfbf8\`
+- Padding: 8px 16px
+- Radius: 6px
+- Shadow: \`rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px\`
+- Active: opacity 0.8
+- Focus: \`rgba(0,0,0,0.1) 0px 4px 12px\` shadow
+- Use: Primary CTA ("Start Building", "Get Started")
+
+**Ghost / Outline**
+- Background: transparent
+- Text: \`#1c1c1c\`
+- Padding: 8px 16px
+- Radius: 6px
+- Border: \`1px solid rgba(28,28,28,0.4)\`
+- Active: opacity 0.8
+- Focus: \`rgba(0,0,0,0.1) 0px 4px 12px\` shadow
+- Use: Secondary actions ("Log In", "Documentation")
+
+**Cream Surface**
+- Background: \`#f7f4ed\`
+- Text: \`#1c1c1c\`
+- Padding: 8px 16px
+- Radius: 6px
+- No border
+- Active: opacity 0.8
+- Use: Tertiary actions, toolbar buttons
+
+**Pill / Icon Button**
+- Background: \`#f7f4ed\`
+- Text: \`#1c1c1c\`
+- Radius: 9999px (full pill)
+- Shadow: same inset pattern as primary dark
+- Opacity: 0.5 (default), 0.8 (active)
+- Use: Additional actions, plan mode toggle, voice recording
+
+### Cards & Containers
+- Background: \`#f7f4ed\` (matches page)
+- Border: \`1px solid #eceae4\`
+- Radius: 12px (standard), 16px (featured), 8px (compact)
+- No box-shadow by default \u2014 borders define boundaries
+- Image cards: \`1px solid #eceae4\` with 12px radius
+
+### Inputs & Forms
+- Background: \`#f7f4ed\`
+- Text: \`#1c1c1c\`
+- Border: \`1px solid #eceae4\`
+- Radius: 6px
+- Focus: ring blue (\`rgba(59,130,246,0.5)\`) outline
+- Placeholder: \`#5f5f5d\`
+
+### Navigation
+- Clean horizontal nav on cream background, fixed
+- Logo/wordmark left-aligned (128.75 x 22px)
+- Links: Camera Plain 14\u201316px weight 400, \`#1c1c1c\` text
+- CTA: dark button with inset shadow, 6px radius
+- Mobile: hamburger menu with 6px radius button
+- Subtle border or no border on scroll
+
+### Links
+- Color: \`#1c1c1c\`
+- Decoration: underline (default)
+- Hover: primary accent (via CSS variable \`hsl(var(--primary))\`)
+- No color change on hover \u2014 decoration carries the interactive signal
+
+### Image Treatment
+- Showcase/portfolio images with \`1px solid #eceae4\` border
+- Consistent 12px border radius on all image containers
+- Soft gradient backgrounds behind hero content (warm multi-color wash)
+- Gallery-style presentation for template/project showcases
+
+### Distinctive Components
+
+**AI Chat Input**
+- Large prompt input area with soft borders
+- Suggestion pills with \`#eceae4\` borders
+- Voice recording / plan mode toggle buttons as pill shapes (9999px)
+- Warm, inviting input area \u2014 not clinical
+
+**Template Gallery**
+- Card grid showing project templates
+- Each card: image + title, \`1px solid #eceae4\` border, 12px radius
+- Hover: subtle shadow or border darkening
+- Category labels as text links
+
+**Stats Bar**
+- Large metrics: "0M+" pattern in 48px+ weight 600
+- Descriptive text below in muted gray
+- Horizontal layout with generous spacing
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 8px, 10px, 12px, 16px, 24px, 32px, 40px, 56px, 80px, 96px, 128px, 176px, 192px, 208px
+- The scale expands generously at the top end \u2014 sections use 80px\u2013208px vertical spacing for editorial breathing room
+
+### Grid & Container
+- Max content width: approximately 1200px (centered)
+- Hero: centered single-column with massive vertical padding (96px+)
+- Feature sections: 2\u20133 column grids
+- Full-width footer with multi-column link layout
+- Showcase sections with centered card grids
+
+### Whitespace Philosophy
+- **Editorial generosity**: Lovable's spacing is lavish at section boundaries (80px\u2013208px). The warm cream background makes these expanses feel cozy rather than empty.
+- **Content-driven rhythm**: Tight internal spacing within cards (12\u201324px) contrasts with wide section gaps, creating a reading rhythm that alternates between focused content and visual rest.
+- **Section separation**: Footer uses \`1px solid #eceae4\` border and 16px radius container. Sections defined by generous spacing rather than border lines.
+
+### Border Radius Scale
+- Micro (4px): Small buttons, interactive elements
+- Standard (6px): Buttons, inputs, navigation menu
+- Comfortable (8px): Compact cards, divs
+- Card (12px): Standard cards, image containers, templates
+- Container (16px): Large containers, footer sections
+- Full Pill (9999px): Action pills, icon buttons, toggles
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, cream background | Page surface, most content |
+| Bordered (Level 1) | \`1px solid #eceae4\` | Cards, images, dividers |
+| Inset (Level 2) | \`rgba(255,255,255,0.2) 0px 0.5px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px\` | Dark buttons, primary actions |
+| Focus (Level 3) | \`rgba(0,0,0,0.1) 0px 4px 12px\` | Active/focus states |
+| Ring (Accessibility) | \`rgba(59,130,246,0.5)\` 2px ring | Keyboard focus on inputs |
+
+**Shadow Philosophy**: Lovable's depth system is intentionally shallow. Instead of floating cards with dramatic drop-shadows, the system relies on warm borders (\`#eceae4\`) against the cream surface to create gentle containment. The only notable shadow pattern is the inset shadow on dark buttons \u2014 a subtle multi-layer technique where a white highlight line sits at the top edge while a dark ring and soft drop handle the bottom. This creates a tactile, pressed-into-surface feeling rather than a hovering-above-surface feeling. The warm focus shadow (\`rgba(0,0,0,0.1) 0px 4px 12px\`) is deliberately diffused and large, creating a soft glow rather than a sharp outline.
+
+### Decorative Depth
+- Hero: soft, warm multi-color gradient wash (pinks, oranges, blues) behind hero \u2014 atmospheric, barely visible
+- Footer: gradient background with warm tones transitioning to the bottom
+- No harsh section dividers \u2014 spacing and background warmth handle transitions
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the warm cream background (\`#f7f4ed\`) as the page foundation \u2014 it's the brand's signature warmth
+- Use Camera Plain Variable at display sizes with negative letter-spacing (-0.9px to -1.5px)
+- Derive all grays from \`#1c1c1c\` at varying opacity levels for tonal unity
+- Use the inset shadow technique on dark buttons for tactile depth
+- Use \`#eceae4\` borders instead of shadows for card containment
+- Keep the weight system narrow: 400 for body/UI, 600 for headings
+- Use full-pill radius (9999px) only for action pills and icon buttons
+- Apply opacity 0.8 on active states for responsive tactile feedback
+
+### Don't
+- Don't use pure white (\`#ffffff\`) as a page background \u2014 the cream is intentional
+- Don't use heavy box-shadows for cards \u2014 borders are the containment mechanism
+- Don't introduce saturated accent colors \u2014 the palette is intentionally warm-neutral
+- Don't use weight 700 (bold) \u2014 600 is the maximum weight in the system
+- Don't apply 9999px radius on rectangular buttons \u2014 pills are for icon/action toggles
+- Don't use sharp focus outlines \u2014 the system uses soft shadow-based focus indicators
+- Don't mix border styles \u2014 \`#eceae4\` for passive, \`rgba(28,28,28,0.4)\` for interactive
+- Don't increase letter-spacing on headings \u2014 Camera Plain is designed to run tight at scale
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <600px | Tight single column, reduced padding |
+| Mobile | 600\u2013640px | Standard mobile layout |
+| Tablet Small | 640\u2013700px | 2-column grids begin |
+| Tablet | 700\u2013768px | Card grids expand |
+| Desktop Small | 768\u20131024px | Multi-column layouts |
+| Desktop | 1024\u20131280px | Full feature layout |
+| Large Desktop | 1280\u20131536px | Maximum content width, generous margins |
+
+### Touch Targets
+- Buttons: 8px 16px padding (comfortable touch)
+- Navigation: adequate spacing between items
+- Pill buttons: 9999px radius creates large tap-friendly targets
+- Menu toggle: 6px radius button with adequate sizing
+
+### Collapsing Strategy
+- Hero: 60px \u2192 48px \u2192 36px headline scaling with proportional letter-spacing
+- Navigation: horizontal links \u2192 hamburger menu at 768px
+- Feature cards: 3-column \u2192 2-column \u2192 single column stacked
+- Template gallery: grid \u2192 stacked vertical cards
+- Stats bar: horizontal \u2192 stacked vertical
+- Footer: multi-column \u2192 stacked single column
+- Section spacing: 128px+ \u2192 64px on mobile
+
+### Image Behavior
+- Template screenshots maintain \`1px solid #eceae4\` border at all sizes
+- 12px border radius preserved across breakpoints
+- Gallery images responsive with consistent aspect ratios
+- Hero gradient softens/simplifies on mobile
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: Charcoal (\`#1c1c1c\`)
+- Background: Cream (\`#f7f4ed\`)
+- Heading text: Charcoal (\`#1c1c1c\`)
+- Body text: Muted Gray (\`#5f5f5d\`)
+- Border: \`#eceae4\` (passive), \`rgba(28,28,28,0.4)\` (interactive)
+- Focus: \`rgba(0,0,0,0.1) 0px 4px 12px\`
+- Button text on dark: \`#fcfbf8\`
+
+### Example Component Prompts
+- "Create a hero section on cream background (#f7f4ed). Headline at 60px Camera Plain Variable weight 600, line-height 1.10, letter-spacing -1.5px, color #1c1c1c. Subtitle at 18px weight 400, line-height 1.38, color #5f5f5d. Dark CTA button (#1c1c1c bg, #fcfbf8 text, 6px radius, 8px 16px padding, inset shadow) and ghost button (transparent bg, 1px solid rgba(28,28,28,0.4) border, 6px radius)."
+- "Design a card on cream (#f7f4ed) background. Border: 1px solid #eceae4. Radius 12px. No box-shadow. Title at 20px Camera Plain Variable weight 400, line-height 1.25, color #1c1c1c. Body at 14px weight 400, color #5f5f5d."
+- "Build a template gallery: grid of cards with 12px radius, 1px solid #eceae4 border, cream backgrounds. Each card: image with 12px top radius, title below. Hover: subtle border darkening."
+- "Create navigation: sticky on cream (#f7f4ed). Camera Plain 16px weight 400 for links, #1c1c1c text. Dark CTA button right-aligned with inset shadow. Mobile: hamburger menu with 6px radius."
+- "Design a stats section: large numbers at 48px Camera Plain weight 600, letter-spacing -1.2px, #1c1c1c. Labels below at 16px weight 400, #5f5f5d. Horizontal layout with 32px gap."
+
+### Iteration Guide
+1. Always use cream (\`#f7f4ed\`) as the base \u2014 never pure white
+2. Derive grays from \`#1c1c1c\` at opacity levels rather than using distinct hex values
+3. Use \`#eceae4\` borders for containment, not shadows
+4. Letter-spacing scales with size: -1.5px at 60px, -1.2px at 48px, -0.9px at 36px, normal at 16px
+5. Two weights: 400 (everything except headings) and 600 (headings)
+6. The inset shadow on dark buttons is the signature detail \u2014 don't skip it
+7. Camera Plain Variable at weight 480 is for special display moments only
+`;
+export {
+  lovableBrief
+};
+//# sourceMappingURL=lovable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/lovable.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const lovableBrief = `# Design System Inspired by Lovable\n\n## 1. Visual Theme & Atmosphere\n\nLovable's website radiates warmth through restraint. The entire page sits on a creamy, parchment-toned background (\\`#f7f4ed\\`) that immediately separates it from the cold-white conventions of most developer tool sites. This isn't minimalism for minimalism's sake — it's a deliberate choice to feel approachable, almost analog, like a well-crafted notebook. The near-black text (\\`#1c1c1c\\`) against this warm cream creates a contrast ratio that's easy on the eyes while maintaining sharp readability.\n\nThe custom Camera Plain Variable typeface is the system's secret weapon. Unlike geometric sans-serifs that signal \"tech company,\" Camera Plain has a humanist warmth — slightly rounded terminals, organic curves, and a comfortable reading rhythm. At display sizes (48px–60px), weight 600 with aggressive negative letter-spacing (-0.9px to -1.5px) compresses headlines into confident, editorial statements. The font uses \\`ui-sans-serif, system-ui\\` as fallbacks, acknowledging that the custom typeface carries the brand personality.\n\nWhat makes Lovable's visual system distinctive is its opacity-driven depth model. Rather than using a traditional gray scale, the system modulates \\`#1c1c1c\\` at varying opacities (0.03, 0.04, 0.4, 0.82–0.83) to create a unified tonal range. Every shade of gray on the page is technically the same hue — just more or less transparent. This creates a visual coherence that's nearly impossible to achieve with arbitrary hex values. The border system follows suit: \\`1px solid #eceae4\\` for light divisions and \\`1px solid rgba(28, 28, 28, 0.4)\\` for stronger interactive boundaries.\n\n**Key Characteristics:**\n- Warm parchment background (\\`#f7f4ed\\`) — not white, not beige, a deliberate cream that feels hand-selected\n- Camera Plain Variable typeface with humanist warmth and editorial letter-spacing at display sizes\n- Opacity-driven color system: all grays derived from \\`#1c1c1c\\` at varying transparency levels\n- Inset shadow technique on buttons: \\`rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset\\`\n- Warm neutral border palette: \\`#eceae4\\` for subtle, \\`rgba(28,28,28,0.4)\\` for interactive elements\n- Full-pill radius (\\`9999px\\`) used extensively for action buttons and icon containers\n- Focus state uses \\`rgba(0,0,0,0.1) 0px 4px 12px\\` shadow for soft, warm emphasis\n- shadcn/ui + Radix UI component primitives with Tailwind CSS utility styling\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Cream** (\\`#f7f4ed\\`): Page background, card surfaces, button surfaces. The foundation — warm, paper-like, human.\n- **Charcoal** (\\`#1c1c1c\\`): Primary text, headings, dark button backgrounds. Not pure black — organic warmth.\n- **Off-White** (\\`#fcfbf8\\`): Button text on dark backgrounds, subtle highlight. Barely distinguishable from pure white.\n\n### Neutral Scale (Opacity-Based)\n- **Charcoal 100%** (\\`#1c1c1c\\`): Primary text, headings, dark surfaces.\n- **Charcoal 83%** (\\`rgba(28,28,28,0.83)\\`): Strong secondary text.\n- **Charcoal 82%** (\\`rgba(28,28,28,0.82)\\`): Body copy.\n- **Muted Gray** (\\`#5f5f5d\\`): Secondary text, descriptions, captions.\n- **Charcoal 40%** (\\`rgba(28,28,28,0.4)\\`): Interactive borders, button outlines.\n- **Charcoal 4%** (\\`rgba(28,28,28,0.04)\\`): Subtle hover backgrounds, micro-tints.\n- **Charcoal 3%** (\\`rgba(28,28,28,0.03)\\`): Barely-visible overlays, background depth.\n\n### Surface & Border\n- **Light Cream** (\\`#eceae4\\`): Card borders, dividers, image outlines. The warm divider line.\n- **Cream Surface** (\\`#f7f4ed\\`): Card backgrounds, section fills — same as page background for seamless integration.\n\n### Interactive\n- **Ring Blue** (\\`#3b82f6\\` at 50% opacity): \\`--tw-ring-color\\`, Tailwind focus ring.\n- **Focus Shadow** (\\`rgba(0,0,0,0.1) 0px 4px 12px\\`): Focus and active state shadow — soft, warm, diffused.\n\n### Inset Shadows\n- **Button Inset** (\\`rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px\\`): The signature multi-layer inset shadow on dark buttons.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: \\`Camera Plain Variable\\`, with fallbacks: \\`ui-sans-serif, system-ui\\`\n- **Weight range**: 400 (body/reading), 480 (special display), 600 (headings/emphasis)\n- **Feature**: Variable font with continuous weight axis — allows fine-tuned intermediary weights like 480.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Camera Plain Variable | 60px (3.75rem) | 600 | 1.00–1.10 (tight) | -1.5px | Maximum impact, editorial |\n| Display Alt | Camera Plain Variable | 60px (3.75rem) | 480 | 1.00 (tight) | normal | Lighter hero variant |\n| Section Heading | Camera Plain Variable | 48px (3.00rem) | 600 | 1.00 (tight) | -1.2px | Feature section titles |\n| Sub-heading | Camera Plain Variable | 36px (2.25rem) | 600 | 1.10 (tight) | -0.9px | Sub-sections |\n| Card Title | Camera Plain Variable | 20px (1.25rem) | 400 | 1.25 (tight) | normal | Card headings |\n| Body Large | Camera Plain Variable | 18px (1.13rem) | 400 | 1.38 | normal | Introductions |\n| Body | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |\n| Button | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Button labels |\n| Button Small | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Compact buttons |\n| Link | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Underline decoration |\n| Link Small | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Footer links |\n| Caption | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Metadata, small text |\n\n### Principles\n- **Warm humanist voice**: Camera Plain Variable gives Lovable its approachable personality. The slightly rounded terminals and organic curves contrast with the sharp geometric sans-serifs used by most developer tools.\n- **Variable weight as design tool**: The font supports continuous weight values (e.g., 480), enabling nuanced hierarchy beyond standard weight stops. Weight 480 at 60px creates a display style that feels lighter than semibold but stronger than regular.\n- **Compression at scale**: Headlines use negative letter-spacing (-0.9px to -1.5px) for editorial impact. Body text stays at normal tracking for comfortable reading.\n- **Two weights, clear roles**: 400 (body/UI/links/buttons) and 600 (headings/emphasis). The narrow weight range creates hierarchy through size and spacing, not weight variation.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Dark (Inset Shadow)**\n- Background: \\`#1c1c1c\\`\n- Text: \\`#fcfbf8\\`\n- Padding: 8px 16px\n- Radius: 6px\n- Shadow: \\`rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px\\`\n- Active: opacity 0.8\n- Focus: \\`rgba(0,0,0,0.1) 0px 4px 12px\\` shadow\n- Use: Primary CTA (\"Start Building\", \"Get Started\")\n\n**Ghost / Outline**\n- Background: transparent\n- Text: \\`#1c1c1c\\`\n- Padding: 8px 16px\n- Radius: 6px\n- Border: \\`1px solid rgba(28,28,28,0.4)\\`\n- Active: opacity 0.8\n- Focus: \\`rgba(0,0,0,0.1) 0px 4px 12px\\` shadow\n- Use: Secondary actions (\"Log In\", \"Documentation\")\n\n**Cream Surface**\n- Background: \\`#f7f4ed\\`\n- Text: \\`#1c1c1c\\`\n- Padding: 8px 16px\n- Radius: 6px\n- No border\n- Active: opacity 0.8\n- Use: Tertiary actions, toolbar buttons\n\n**Pill / Icon Button**\n- Background: \\`#f7f4ed\\`\n- Text: \\`#1c1c1c\\`\n- Radius: 9999px (full pill)\n- Shadow: same inset pattern as primary dark\n- Opacity: 0.5 (default), 0.8 (active)\n- Use: Additional actions, plan mode toggle, voice recording\n\n### Cards & Containers\n- Background: \\`#f7f4ed\\` (matches page)\n- Border: \\`1px solid #eceae4\\`\n- Radius: 12px (standard), 16px (featured), 8px (compact)\n- No box-shadow by default — borders define boundaries\n- Image cards: \\`1px solid #eceae4\\` with 12px radius\n\n### Inputs & Forms\n- Background: \\`#f7f4ed\\`\n- Text: \\`#1c1c1c\\`\n- Border: \\`1px solid #eceae4\\`\n- Radius: 6px\n- Focus: ring blue (\\`rgba(59,130,246,0.5)\\`) outline\n- Placeholder: \\`#5f5f5d\\`\n\n### Navigation\n- Clean horizontal nav on cream background, fixed\n- Logo/wordmark left-aligned (128.75 x 22px)\n- Links: Camera Plain 14–16px weight 400, \\`#1c1c1c\\` text\n- CTA: dark button with inset shadow, 6px radius\n- Mobile: hamburger menu with 6px radius button\n- Subtle border or no border on scroll\n\n### Links\n- Color: \\`#1c1c1c\\`\n- Decoration: underline (default)\n- Hover: primary accent (via CSS variable \\`hsl(var(--primary))\\`)\n- No color change on hover — decoration carries the interactive signal\n\n### Image Treatment\n- Showcase/portfolio images with \\`1px solid #eceae4\\` border\n- Consistent 12px border radius on all image containers\n- Soft gradient backgrounds behind hero content (warm multi-color wash)\n- Gallery-style presentation for template/project showcases\n\n### Distinctive Components\n\n**AI Chat Input**\n- Large prompt input area with soft borders\n- Suggestion pills with \\`#eceae4\\` borders\n- Voice recording / plan mode toggle buttons as pill shapes (9999px)\n- Warm, inviting input area — not clinical\n\n**Template Gallery**\n- Card grid showing project templates\n- Each card: image + title, \\`1px solid #eceae4\\` border, 12px radius\n- Hover: subtle shadow or border darkening\n- Category labels as text links\n\n**Stats Bar**\n- Large metrics: \"0M+\" pattern in 48px+ weight 600\n- Descriptive text below in muted gray\n- Horizontal layout with generous spacing\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 8px, 10px, 12px, 16px, 24px, 32px, 40px, 56px, 80px, 96px, 128px, 176px, 192px, 208px\n- The scale expands generously at the top end — sections use 80px–208px vertical spacing for editorial breathing room\n\n### Grid & Container\n- Max content width: approximately 1200px (centered)\n- Hero: centered single-column with massive vertical padding (96px+)\n- Feature sections: 2–3 column grids\n- Full-width footer with multi-column link layout\n- Showcase sections with centered card grids\n\n### Whitespace Philosophy\n- **Editorial generosity**: Lovable's spacing is lavish at section boundaries (80px–208px). The warm cream background makes these expanses feel cozy rather than empty.\n- **Content-driven rhythm**: Tight internal spacing within cards (12–24px) contrasts with wide section gaps, creating a reading rhythm that alternates between focused content and visual rest.\n- **Section separation**: Footer uses \\`1px solid #eceae4\\` border and 16px radius container. Sections defined by generous spacing rather than border lines.\n\n### Border Radius Scale\n- Micro (4px): Small buttons, interactive elements\n- Standard (6px): Buttons, inputs, navigation menu\n- Comfortable (8px): Compact cards, divs\n- Card (12px): Standard cards, image containers, templates\n- Container (16px): Large containers, footer sections\n- Full Pill (9999px): Action pills, icon buttons, toggles\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, cream background | Page surface, most content |\n| Bordered (Level 1) | \\`1px solid #eceae4\\` | Cards, images, dividers |\n| Inset (Level 2) | \\`rgba(255,255,255,0.2) 0px 0.5px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px\\` | Dark buttons, primary actions |\n| Focus (Level 3) | \\`rgba(0,0,0,0.1) 0px 4px 12px\\` | Active/focus states |\n| Ring (Accessibility) | \\`rgba(59,130,246,0.5)\\` 2px ring | Keyboard focus on inputs |\n\n**Shadow Philosophy**: Lovable's depth system is intentionally shallow. Instead of floating cards with dramatic drop-shadows, the system relies on warm borders (\\`#eceae4\\`) against the cream surface to create gentle containment. The only notable shadow pattern is the inset shadow on dark buttons — a subtle multi-layer technique where a white highlight line sits at the top edge while a dark ring and soft drop handle the bottom. This creates a tactile, pressed-into-surface feeling rather than a hovering-above-surface feeling. The warm focus shadow (\\`rgba(0,0,0,0.1) 0px 4px 12px\\`) is deliberately diffused and large, creating a soft glow rather than a sharp outline.\n\n### Decorative Depth\n- Hero: soft, warm multi-color gradient wash (pinks, oranges, blues) behind hero — atmospheric, barely visible\n- Footer: gradient background with warm tones transitioning to the bottom\n- No harsh section dividers — spacing and background warmth handle transitions\n\n## 7. Do's and Don'ts\n\n### Do\n- Use the warm cream background (\\`#f7f4ed\\`) as the page foundation — it's the brand's signature warmth\n- Use Camera Plain Variable at display sizes with negative letter-spacing (-0.9px to -1.5px)\n- Derive all grays from \\`#1c1c1c\\` at varying opacity levels for tonal unity\n- Use the inset shadow technique on dark buttons for tactile depth\n- Use \\`#eceae4\\` borders instead of shadows for card containment\n- Keep the weight system narrow: 400 for body/UI, 600 for headings\n- Use full-pill radius (9999px) only for action pills and icon buttons\n- Apply opacity 0.8 on active states for responsive tactile feedback\n\n### Don't\n- Don't use pure white (\\`#ffffff\\`) as a page background — the cream is intentional\n- Don't use heavy box-shadows for cards — borders are the containment mechanism\n- Don't introduce saturated accent colors — the palette is intentionally warm-neutral\n- Don't use weight 700 (bold) — 600 is the maximum weight in the system\n- Don't apply 9999px radius on rectangular buttons — pills are for icon/action toggles\n- Don't use sharp focus outlines — the system uses soft shadow-based focus indicators\n- Don't mix border styles — \\`#eceae4\\` for passive, \\`rgba(28,28,28,0.4)\\` for interactive\n- Don't increase letter-spacing on headings — Camera Plain is designed to run tight at scale\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <600px | Tight single column, reduced padding |\n| Mobile | 600–640px | Standard mobile layout |\n| Tablet Small | 640–700px | 2-column grids begin |\n| Tablet | 700–768px | Card grids expand |\n| Desktop Small | 768–1024px | Multi-column layouts |\n| Desktop | 1024–1280px | Full feature layout |\n| Large Desktop | 1280–1536px | Maximum content width, generous margins |\n\n### Touch Targets\n- Buttons: 8px 16px padding (comfortable touch)\n- Navigation: adequate spacing between items\n- Pill buttons: 9999px radius creates large tap-friendly targets\n- Menu toggle: 6px radius button with adequate sizing\n\n### Collapsing Strategy\n- Hero: 60px → 48px → 36px headline scaling with proportional letter-spacing\n- Navigation: horizontal links → hamburger menu at 768px\n- Feature cards: 3-column → 2-column → single column stacked\n- Template gallery: grid → stacked vertical cards\n- Stats bar: horizontal → stacked vertical\n- Footer: multi-column → stacked single column\n- Section spacing: 128px+ → 64px on mobile\n\n### Image Behavior\n- Template screenshots maintain \\`1px solid #eceae4\\` border at all sizes\n- 12px border radius preserved across breakpoints\n- Gallery images responsive with consistent aspect ratios\n- Hero gradient softens/simplifies on mobile\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Charcoal (\\`#1c1c1c\\`)\n- Background: Cream (\\`#f7f4ed\\`)\n- Heading text: Charcoal (\\`#1c1c1c\\`)\n- Body text: Muted Gray (\\`#5f5f5d\\`)\n- Border: \\`#eceae4\\` (passive), \\`rgba(28,28,28,0.4)\\` (interactive)\n- Focus: \\`rgba(0,0,0,0.1) 0px 4px 12px\\`\n- Button text on dark: \\`#fcfbf8\\`\n\n### Example Component Prompts\n- \"Create a hero section on cream background (#f7f4ed). Headline at 60px Camera Plain Variable weight 600, line-height 1.10, letter-spacing -1.5px, color #1c1c1c. Subtitle at 18px weight 400, line-height 1.38, color #5f5f5d. Dark CTA button (#1c1c1c bg, #fcfbf8 text, 6px radius, 8px 16px padding, inset shadow) and ghost button (transparent bg, 1px solid rgba(28,28,28,0.4) border, 6px radius).\"\n- \"Design a card on cream (#f7f4ed) background. Border: 1px solid #eceae4. Radius 12px. No box-shadow. Title at 20px Camera Plain Variable weight 400, line-height 1.25, color #1c1c1c. Body at 14px weight 400, color #5f5f5d.\"\n- \"Build a template gallery: grid of cards with 12px radius, 1px solid #eceae4 border, cream backgrounds. Each card: image with 12px top radius, title below. Hover: subtle border darkening.\"\n- \"Create navigation: sticky on cream (#f7f4ed). Camera Plain 16px weight 400 for links, #1c1c1c text. Dark CTA button right-aligned with inset shadow. Mobile: hamburger menu with 6px radius.\"\n- \"Design a stats section: large numbers at 48px Camera Plain weight 600, letter-spacing -1.2px, #1c1c1c. Labels below at 16px weight 400, #5f5f5d. Horizontal layout with 32px gap.\"\n\n### Iteration Guide\n1. Always use cream (\\`#f7f4ed\\`) as the base — never pure white\n2. Derive grays from \\`#1c1c1c\\` at opacity levels rather than using distinct hex values\n3. Use \\`#eceae4\\` borders for containment, not shadows\n4. Letter-spacing scales with size: -1.5px at 60px, -1.2px at 48px, -0.9px at 36px, normal at 16px\n5. Two weights: 400 (everything except headings) and 600 (headings)\n6. The inset shadow on dark buttons is the signature detail — don't skip it\n7. Camera Plain Variable at weight 480 is for special display moments only\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;","names":[]}

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

@@ -0,0 +1,3 @@
+declare const mastercardBrief = "# Design System Inspired by Mastercard\n\n## 1. Visual Theme & Atmosphere\n\nMastercard's experience reads like a warm, editorial magazine built from soft stone and signal orange. The canvas is a muted putty-cream (`#F3F0EE`) \u2014 not white, not gray, but a color that feels like the paper of a premium annual report. On top of that canvas, everything that matters is shaped like a stadium, a pill, or a perfect circle. The dominant visual gesture is the **oversized radius**: heroes carry 40-point corners, cards go fully pill-shaped, service images are cropped into circular orbits, and buttons either complete the pill or fit snugly at 20 points. There are almost no sharp corners anywhere on the page.\n\nThe second gesture is **orbit and trajectory**. Circular image masks don't sit still \u2014 they're connected by thin, hand-drawn-feeling orange arcs that span entire viewport widths, implying a constellation of services rather than a list. Each circle has a small attached \"satellite\" \u2014 a white micro-CTA holding an arrow icon \u2014 docked onto its perimeter like a moon. This is the most distinctive thing about Mastercard's current design language: the circles feel like they're in motion even though the page is still.\n\nTypography is rendered entirely in **MarkForMC**, Mastercard's proprietary geometric sans. Headlines are set at a medium weight (500) with tight negative letter-spacing (-2%), giving them confidence without shouting. Body copy runs at the same family in a slightly lighter weight (450) \u2014 a weight you rarely see on the web, chosen because it reads softer than regular 400 without feeling thin. The whole system \u2014 warm cream surfaces, pill shapes, circular portraits, traced-orange orbits, black CTAs \u2014 feels simultaneously institutional (a 60-year-old payments network) and editorial (a modern brand magazine), which is exactly the tension Mastercard wants to hold.\n\n**Key Characteristics:**\n- Warm cream canvas (`#F3F0EE`) replaces traditional white \u2014 every surface is tinted, never sterile\n- Extreme border-radius as design language: 40px, 99px, 1000px dominate; anything square is a cookie-banner third-party\n- Circular image portraits with attached white satellite-CTAs and traced-orange orbital paths\n- Ghost \"watermark\" headlines (cream-on-cream text at heading scale) layered behind circle portraits\n- Black primary CTAs with 20px radius in the body \u2014 the cookie-banner orange is kept to consent flows\n- Floating pill-shaped navigation that docks below the viewport top with rounded shoulders\n- Eyebrow labels with a tiny accent dot + uppercase bold tracking \u2014 used as the section-category signal\n- Dark warm-black footer (`#141413`) with four-column link layout and large conversational headline\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Mastercard Red** (`#EB001B`): The left circle of the Mastercard mark \u2014 used only in the brand logo, never as a UI color.\n- **Mastercard Yellow** (`#F79E1B`): The right circle of the Mastercard mark \u2014 used only in the brand logo, never as a UI color.\n- **Ink Black** (`#141413`): The warm near-black used for primary CTAs, headline text on cream, and the footer surface. Slightly warm (the `13` blue value pulls toward the cream) so it never feels jet-black on the warm canvas.\n\n### Secondary & Accent\n- **Signal Orange** (`#CF4500`): The burnt/rust CTA orange used on consent actions and eyebrow dots. Deeper than the brand yellow, brighter than ink \u2014 it's the page's single aggressive color and must be used sparingly.\n- **Light Signal Orange** (`#F37338`): A lighter carroty orange used for carousel active indicators and decorative orbital arcs. Always acts as an attention cue, never as body color.\n- **Clay Brown** (`#9A3A0A`): The deep rust used for secondary link-style buttons (e.g., cookie details). Sits between ink and signal orange.\n\n### Surface & Background\n- **Canvas Cream** (`#F3F0EE`): The page canvas. Warm, putty-toned, the default body background. All editorial sections sit on this.\n- **Lifted Cream** (`#FCFBFA`): One step lighter than canvas \u2014 used for nested \"raised\" sections that want to feel like paper laid on paper.\n- **White** (`#FFFFFF`): Reserved for the floating navigation pill, modal cards, secondary button fills, and small satellite-CTA circles attached to image portraits.\n- **Soft Bone** (`#F4F4F4`): A cool-gray alternative surface used inside a handful of component subregions.\n\n### Neutrals & Text\n- **Ink Black** (`#141413`): Primary headline and body text color.\n- **Charcoal** (`#262627`): A slightly softer black used for some text alternates.\n- **Slate Gray** (`#696969`): Muted secondary text \u2014 eyebrow label alternative, disabled states, \"Privacy Choices\" bottom-row text.\n- **Granite** (`#555555`) and **Graphite** (`#565656`): Deeper gray for inline body accents and link alternates.\n- **Dust Taupe** (`#D1CDC7`): Very muted cream-gray used for disabled or \"whisper\" text (e.g., placeholder-like empty state labels). Low contrast on cream; use only for subdued content.\n\n### Semantic & Accent\n- **Link Blue** (`#3860BE`): A deep, slightly dusty blue used for inline links and informational callouts. Saturated enough to read as a link without being neon.\n- **Priceless Red + Yellow**: The full-color Mastercard logo mark is the only place the brand's red and yellow appear together; they lock the identity to the page without acting as a UI palette.\n\n### Gradient System\nMastercard uses no programmatic gradients in the core UI. The visual impression of \"gradient\" comes from two places:\n- **Circular image portraits** where a warm-orange photo subject (a card, a sunflower, a beverage) fades to the cream canvas at its edge\n- **Deep card shadows** on elevated content (`rgba(0,0,0,0.08) 0px 24px 48px`) that create a soft halo beneath pill-shaped media\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `MarkForMC` \u2014 Mastercard's proprietary geometric sans. Every headline, body paragraph, button, nav link, and footer link on the page.\n- **Secondary**: `MarkOffcForMC` \u2014 an \"Official\" cut used in a minority of contexts (legal text, some forms).\n- **Fallback stack**: `SofiaSans, Arial, sans-serif` \u2014 Sofia Sans is a reasonable open-source stand-in; Arial is the final web-safe fallback.\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| H1 (hero) | 64px | 500 | 64px | -1.28px (-2%) | Set to `1:1` line-height for very tight vertical rhythm on multi-line hero |\n| H2 (section) | 36px | 500 | 44px | -0.72px (-2%) | Used in ghost-watermark headline treatments and section titles |\n| H3 (card title) | 24px | 500 | 28.8px (1.2) | -0.48px (-2%) | Titles inside service/solution cards |\n| H4 (subhead) | 14px | 700 | 18.2px (1.3) | normal | Rarely used in marketing surfaces |\n| Eyebrow (H5) | 14px | 700 | 14px | 0.56px (+4%) | Uppercase, paired with a tiny accent dot (e.g., \"\u2022 SERVICES\") |\n| Body paragraph | 16px | 450 | 22.4px (1.4) | normal | The half-step 450 weight is MarkForMC's signature \u2014 softer than 500, firmer than 400 |\n| Nav link / Button label | 16px | 500 | 16px | -0.48px (-3%) | Tight, compact, no text-transform |\n| Footer link | 14px | 450 | ~20px | normal | Lighter weight on dark footer for airier density |\n| Footer column header | 12\u201314px | 700 | 14px | 0.56px (+4%) | Uppercase, muted gray, short tracking |\n\n### Principles\n- **Weight 450 is load-bearing**. Most brands use 400/500/700; Mastercard uses 450 for body copy, which creates an unusually soft reading tone. Replacing it with 400 flattens the identity.\n- **Tight negative tracking on headlines** (-2%) gives display text its editorial density \u2014 the words lock together rather than breathe.\n- **Uppercase tracking only on the eyebrow scale** (14px / 700 / +4% tracking). Don't use uppercase anywhere else; no shouty section titles.\n- **One-font system**. Resist the urge to add a second typeface for contrast. The contrast comes from scale, weight, and letter-spacing, not from a serif or display accent.\n- **Line-height ratio drops with size**. H1 is 1:1, H3 is 1.2, body is 1.4. Tight display, comfortable reading.\n\n### Note on Font Substitutes\nMarkForMC is proprietary and licensed. When rebuilding a matching aesthetic without access to the original:\n- **Sofia Sans** (Google Fonts) is the closest open-source match \u2014 it's already in Mastercard's declared fallback stack.\n- **Inter** at weights 450/500/700 works as a generic stand-in; expect slightly taller x-height and looser letter shapes.\n- **Neue Haas Grotesk** or **Geist** can approximate the geometric feel for commercial projects.\n- Whichever substitute is used, preserve the **-2% letter-spacing on headlines** and the **450 body weight** (use `font-weight: 450` with variable fonts, or substitute `font-weight: 400` and tighten the letter-spacing by ~-0.5% to compensate).\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary \u2014 Ink Pill**\n- Background: Ink Black (`#141413`)\n- Text: Canvas Cream (`#F3F0EE`) \u2014 not pure white\n- Border: 1.5px solid Ink Black (same as bg, creates crisp edge)\n- Radius: 20px\n- Padding: 6px 24px\n- Font: MarkForMC 16px / weight 500 / letter-spacing -0.32px\n- Default: as above; solid warm-black pill on cream canvas\n- Active / pressed: subtle inward-shrink or 2px offset (not a hover variant)\n- Use for: all marketing CTAs in the page body (\"Learn more\", \"Explore\", \"Discover\")\n\n**Secondary \u2014 Outlined Pill**\n- Background: White (`#FFFFFF`)\n- Text: Ink Black (`#141413`)\n- Border: 1.5px solid Ink Black\n- Radius: 20px\n- Padding: 6px 24px\n- Font: MarkForMC 16px / weight 450 / line-height 20.8px\n- Default: white-on-cream pill with crisp ink outline\n- Active / pressed: subtle compression\n- Use for: secondary actions paired with a primary, or standalone utility CTAs\n\n**Consent / Signal \u2014 Orange Pill**\n- Background: Signal Orange (`#CF4500`)\n- Text: White (`#FFFFFF`)\n- Border: 0\n- Radius: 24px\n- Padding: 1px 30px (very tight vertical, wide horizontal)\n- Font: MarkForMC 13px / weight 400 / letter-spacing 0.13px\n- Default: as above; bright rust pill with white text\n- Use for: cookie consent, privacy preference, and other legally-distinct confirmations. **Do not** use this orange for marketing CTAs \u2014 it reads as a compliance color.\n\n**Satellite \u2014 Circular Micro-CTA**\n- Background: White (`#FFFFFF`)\n- Icon: Ink Black arrow (`\u2192`) at ~20px\n- Border: none\n- Radius: 50% (perfect circle)\n- Size: ~50\u201360px diameter\n- Shadow: none or very subtle (the portrait's shadow carries the elevation)\n- Default: docks onto the bottom-right edge of a circular portrait, protruding partway outside the portrait's circle\n- Use for: the primary entry point into service/solution cards; always paired with a circular portrait\n\n**Icon-Only Circle Button (carousel, play/pause)**\n- Background: transparent or white\n- Icon: 10\u201320px centered\n- Border: 1px solid Ink Black (when on cream) or none (when over media)\n- Radius: 50%\n- Size: 40px diameter minimum for carousel controls; 80px for hero video play\n- Use for: carousel pagination/play-pause, hero video play, search toggle\n\n### Cards & Containers\n\n**Hero Media Frame (Stadium)**\n- Background: Dark video or full-bleed imagery (typically black `#000000` or `#2B2B2B` behind video)\n- Radius: 40px all corners (creates a stadium shape on wide viewports)\n- Width: ~full viewport minus ~48px gutter on each side\n- Height: ~60\u201370% of viewport\n- Shadow: none (sits directly on canvas)\n- Corners: the extreme 40px radius on a media element is the most iconic Mastercard gesture \u2014 do not round less\n\n**Service / Solution Portrait Card**\n- Shape: Perfect circle (radius 50%) or ellipse (radius 999px / 1000px)\n- Diameter: 260\u2013340px desktop; ~220px mobile\n- Image crop: square source, cropped to circle\n- Attached element: White satellite circular CTA (see above) docked bottom-right, ~40% outside the portrait\n- Eyebrow below: accent dot + uppercase label (e.g., \"\u2022 SERVICES\", \"\u2022 SOLUTIONS\")\n- Title below: H3 (24px / weight 500 / -2% tracking), 1\u20132 lines max\n- Decorative orbit: thin ~1px Light Signal Orange curved line spanning from this card outward to the next, implying connection\n\n**Pill Carousel Card**\n- Radius: 1000px (full pill) or 40px corners (rounded stadium)\n- Width: ~40\u201360% of viewport\n- Height: ~380\u2013420px (portrait-pill orientation)\n- Content: full-bleed photography with small overlaid chip labels\n- Chip inside: White pill (~ 999px radius), Ink Black text, padding 8px 20px, used for category tags like \"Story\"\n- Large inline CTA inside: Ink Pill button, oversized (padding 16px 40px, radius 40px)\n\n**Ghost Watermark Text Block**\n- Font: MarkForMC 72\u2013128px / weight 500 / tight -2% tracking\n- Color: Canvas Cream slightly darkened (`#E8E2DA` or similar \u2014 cream-on-cream)\n- Position: layered behind portrait circles, bleeding off the viewport edge\n- Purpose: sets section theme without competing with foreground copy\n\n### Inputs & Forms\nMinimal form surface on the marketing page. The search input in the nav header is:\n- Initial state: a 48px circular button with a magnifier icon\n- Expanded state: horizontal input field, border `1px solid` Ink Black at ~50% opacity, radius 999px, padding 12px 24px, white background\n\n**Country/language selector (footer)**\n- Background: Ink Black (same as footer)\n- Text: White\n- Border: 1px solid `rgba(255,255,255,0.4)`\n- Radius: 999px (full pill)\n- Icon: downward chevron on the right\n\n### Navigation\n\n**Floating Nav Pill (desktop)**\n- Container: white-to-translucent-white pill floating below the very top of the viewport with a ~24px top margin\n- Radius: 999px / 1000px (full pill)\n- Padding: ~16px 40px internal\n- Shadow: very soft (`rgba(0, 0, 0, 0.04) 0px 4px 24px 0px`) \u2014 just enough to lift it off the cream canvas\n- Content: Mastercard logo left, primary link group center (\"For you\", \"For business\", \"For the world\", \"For innovators\", \"News and trends\"), search icon right\n- Link spacing: ~48\u201356px gap between primary links\n- Link style: Ink Black, weight 500, 16px, no underline, no pill surround until active\n\n**Mobile Nav**\n- The same pill shape but collapsed to: logo + hamburger menu button + search icon only\n- Menu opens into a full-screen overlay with the primary links stacked vertically\n\n### Image Treatment\n\n- **Aspect ratios used**: 1:1 (all service portraits \u2014 cropped to circle), ~3:4 or ~4:5 (carousel pill cards), 16:9 or wider (hero video frame)\n- **Full-bleed vs padded**: Hero is viewport-wide with gutters; service portraits are always centered in their column with generous whitespace around; footer imagery is rare\n- **Masking**: Aggressive circular masking is the defining treatment \u2014 square source images are cropped to perfect circles of matching diameter. Never use rectangular service imagery.\n- **Lazy loading**: Standard `loading=\"lazy\"` with a soft blur-up transition from a cream-tinted placeholder, preserving the warm palette during load\n\n### Decorative Orbital Lines\n\nA signature motif: thin (~1\u20131.5px) single-weight curved lines in Light Signal Orange (`#F37338`) tracing arcs between circular portraits. These lines:\n- Imply connection between service cards without literal arrows\n- Span widths from ~200px up to full-viewport arcs\n- Feel hand-drawn (subtle irregularity) rather than perfect CSS curves\n- Appear only in sections with circular portrait content \u2014 never on pill sections, never in the footer\n\n### Footer\n\n- Background: Ink Black (`#141413`)\n- Text: White\n- Padding: 48px horizontal 100px / bottom 148px (very tall bottom space)\n- Structure: large conversational H2 (\"We're always here when you need us\") left-aligned, then a 4-column link grid below\n- Column headers: uppercase, muted, weight 700, letter-spacing +4%\n- Link rows: white, weight 450, 14px; entries prefixed with a small icon (support bubble, card, map pin, question mark) for the \"NEED HELP?\" column\n- External link marker: a small upper-right arrow (`\u2197`) after link text\n- Bottom row (below a 1px white-at-opacity divider): copyright + privacy small-print + country-language pill dropdown + four social icons (LinkedIn, Facebook, X, YouTube)\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px (confirmed by dembrandt extraction and computed styles)\n- **Scale**: 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 (powers of 8)\n- **Section vertical padding**: ~96\u2013128px between major sections on desktop; ~48\u201364px on mobile\n- **Card internal padding**: 32\u201340px on desktop, ~24px on mobile\n- **Nav top margin**: ~24px from viewport top (the pill floats, doesn't touch)\n\n### Grid & Container\n- **Max content width**: ~1200\u20131280px centered, with ~48\u2013100px horizontal gutter\n- **Column pattern**: 12-column implied, but practical layouts use 2-up asymmetric (large headline left, supporting text right), 1-up full-bleed (hero, video), or staggered single-portrait placement (service cards sit in varying grid positions creating the \"constellation\" feel)\n- **Footer grid**: 4 equal columns on desktop, collapses to single column accordion on mobile\n\n### Whitespace Philosophy\nMastercard treats whitespace as structure, not absence. A typical service section has:\n- A ghost headline occupying the top ~40% of the section (mostly empty cream)\n- A single circular portrait positioned ~60% down, asymmetric to left or right\n- ~300\u2013500px of blank canvas between the portrait and the next section\nThis deliberate emptiness tells the eye \"slow down, read one thing at a time\" \u2014 the opposite of dense dashboard UIs.\n\n### Border Radius Scale\n\n| Radius | Use |\n|--------|-----|\n| 3\u20136px | Tiny decorative elements, cookie banner micro-chips |\n| 20px | Primary and secondary body CTAs (the signature button radius) |\n| 24px | Consent/orange pill buttons, modal inner chips |\n| 40px | Hero media frames, large section container corners, H2 pill labels |\n| 50% | Circular portraits, icon-only buttons, satellite CTAs |\n| 99px / 999px / 1000px | Full pill shapes \u2014 navigation, carousel cards, footer country selector, primary inline chips |\n\nThe scale is unusual: most systems use 4/8/12/16. Mastercard skips those and commits to **either small (\u22646), medium-large (20\u201340), or full-pill (99+)**. The middle ground of 8\u201312 is absent, which is why the UI feels either \"precise and utility\" or \"soft and editorial\" with no in-between.\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| 0 | No shadow | The default \u2014 95% of surfaces sit directly on cream canvas |\n| 1 | `rgba(0, 0, 0, 0.04) 0px 4px 24px 0px` | Floating nav pill \u2014 barely-there lift |\n| 2 | `rgba(0, 0, 0, 0.08) 0px 24px 48px 0px` | Hero media frames, elevated cards \u2014 a soft large-radius halo rather than a hard drop |\n| 3 | `rgba(0, 0, 0, 0.25) 0px 70px 110px 0px` | Rare; dramatic elevation on a feature tile |\n\n### Shadow Philosophy\nMastercard uses shadows as **atmospheric cushioning**, not directional light. The Level 2 shadow has a 48px spread and only 8% opacity \u2014 it barely exists as dark pixels but creates a \"the card is breathing above the canvas\" feel. There are almost no hard-edged, tight shadows anywhere in the system. Border lines are preferred over shadows for functional delineation (form inputs, footer divider).\n\n### Decorative Depth\n- **Orbital arcs** (Light Signal Orange, ~1px): trace connective paths across sections\n- **Ghost watermark headlines**: cream-on-cream text gives sections an almost-pressed-paper quality\n- **Circle-image fade**: warm-toned photography at the edge of circular portraits dissolves into the canvas, implying soft atmospheric depth\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Canvas Cream (`#F3F0EE`) as the default body background \u2014 never pure white\n- Mask service/feature imagery as perfect circles, not rectangles or rounded rectangles\n- Attach a white satellite CTA to the bottom-right of each circular portrait\n- Set headlines in MarkForMC weight 500 with -2% letter-spacing\n- Use weight 450 (not 400) for body paragraphs\n- Keep primary CTAs as Ink Black pills (20px radius) with cream text\n- Use Signal Orange only on consent, legal, or compliance actions\n- Float the nav as a rounded white pill below the viewport top, not flush at y=0\n- Build page rhythm from three surface tones: canvas cream \u2192 lifted cream \u2192 ink footer\n- Use thin Light Signal Orange arcs between service cards to imply connection\n\n### Don't\n- Don't use pure white as a page background \u2014 it breaks the warm editorial tone\n- Don't round image frames at 8\u201316px \u2014 Mastercard either uses full-pill, 40px, or full-circle. In-between radii look generic\n- Don't use Signal Orange for marketing CTAs \u2014 it reads as cookie-consent orange and dilutes the legal color signal\n- Don't mix typefaces \u2014 no serif accent, no script, no secondary display font\n- Don't crowd the nav with more than six top-level links \u2014 the pill is meant to feel airy\n- Don't drop hard shadows \u2014 all elevation should use 48px+ spread and \u226410% opacity\n- Don't use uppercase for anything larger than the 14px eyebrow label\n- Don't omit the tiny accent dot before eyebrow labels \u2014 it's the identity\n- Don't place circular portraits on a grid \u2014 their magic comes from asymmetric placement\n\n## 8. Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | \u2264 767px | Nav pill shows logo + menu + search only; primary links hide behind hamburger; service portraits stack single-column centered; hero headline drops from 64px to ~40px; footer columns collapse into a vertical accordion |\n| Tablet | 768\u20131023px | Nav pill shows 2\u20133 primary links truncated; service portraits arrange 2-up; hero headline ~48px |\n| Desktop | \u2265 1024px | Full nav with 5 primary links centered; service portraits asymmetrically placed with decorative orbital lines; hero headline 64px |\n| Wide | \u2265 1440px | Content max-width caps at ~1280px; gutters grow symmetrically; orbital lines extend further |\n\n### Touch Targets\nAll interactive elements comfortably exceed 44\u00D744px. The satellite CTA (circle + arrow) is ~50\u201360px. The nav pill buttons are ~48px tall. Mobile hamburger and search are 48\u00D748px. No link or button drops below 40px in any breakpoint.\n\n### Collapsing Strategy\n- **Nav**: full pill \u2192 compact pill with hamburger. Pill shape is preserved across breakpoints \u2014 always rounded, always floating.\n- **Service grid**: asymmetric constellation \u2192 2-up \u2192 1-up stack. Orbital arcs are removed on mobile (they only work with asymmetric placement).\n- **Spacing**: section vertical padding compresses from 128px to 48px on mobile.\n- **Content**: two-column hero (headline left / supporting text right) becomes stacked (headline on top, supporting text below).\n- **Footer**: 4 columns \u2192 1 column accordion with chevron toggles per section.\n\n### Image Behavior\nCircular portraits scale proportionally (maintaining the perfect circle at every size). Hero video frames maintain their 40px radius at every breakpoint, but the frame itself shrinks with the viewport. Lazy loading is standard with a cream-tinted blur-up placeholder, preserving the palette during load.\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: \"Ink Black (`#141413`) \u2014 the warm near-black used for primary pill buttons and footer\"\n- Background: \"Canvas Cream (`#F3F0EE`) \u2014 warm putty body canvas, never pure white\"\n- Lifted surface: \"Lifted Cream (`#FCFBFA`) \u2014 one step lighter than canvas for nested sections\"\n- Heading text: \"Ink Black (`#141413`)\"\n- Body text: \"Ink Black (`#141413`) at weight 450\"\n- Muted text: \"Slate Gray (`#696969`)\"\n- Signal / Consent: \"Signal Orange (`#CF4500`) \u2014 reserve for cookie consent and legal actions\"\n- Accent arc: \"Light Signal Orange (`#F37338`) \u2014 orbital decorative lines only\"\n- Border / Outline: \"Ink Black at 1.5px for pill buttons; 1px at low opacity elsewhere\"\n- Footer: \"Ink Black (`#141413`) with White text\"\n\n### Example Component Prompts\n- \"Create a circular portrait card 300px in diameter, with a square photograph cropped to a perfect circle. Attach a 56px white satellite button with a dark arrow icon at the bottom-right, so it protrudes ~40% outside the portrait. Below the portrait, add an eyebrow label with a Light Signal Orange dot and uppercase 'SERVICES' text in MarkForMC weight 700 at 14px. Below the eyebrow, set a 24px / weight 500 title in Ink Black.\"\n- \"Design a primary CTA button: Ink Black (`#141413`) background, Canvas Cream (`#F3F0EE`) text, 20px border-radius, 6px vertical and 24px horizontal padding, MarkForMC font at 16px weight 500 with -2% letter-spacing.\"\n- \"Build a floating navigation pill: white background with `rgba(0, 0, 0, 0.04) 0px 4px 24px 0px` shadow, 999px border-radius, ~16px vertical and 40px horizontal internal padding. Position it 24px below the viewport top, centered, with the Mastercard logo at the left, five primary links centered with 48px gap, and a circular 48px search button at the right.\"\n- \"Create a hero media frame: 40px border-radius on all corners, full viewport width minus 48px gutters, ~60% viewport height, dark background for video content. Place it directly on the cream canvas with no shadow.\"\n- \"Design a footer: Ink Black (`#141413`) background, white text, 4-column link grid with uppercase muted column headers at 14px weight 700 +4% tracking. Include a large conversational H2 above the grid, a 1px white-at-30%-opacity horizontal divider below, and a bottom row with copyright, legal small-print links, a pill-shaped country selector, and four social icons.\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time \u2014 don't redesign multiple surfaces in parallel\n2. Reference specific color names AND hex codes from this document\n3. Use natural language (\"warm putty cream\", \"stadium pill\", \"circular portrait with satellite CTA\") alongside technical values\n4. Describe the desired \"feel\" (editorial, soft, institutional) alongside specific measurements\n5. When in doubt, reach for one of three radii: 20px (buttons), 40px (hero/stadium), or 999px (pill/nav)\n6. Default backgrounds to Canvas Cream (`#F3F0EE`), not white \u2014 this single change shifts the entire mood toward Mastercard\n\n### Known Gaps\n- The live page uses MarkForMC, a proprietary licensed typeface. Sofia Sans is the closest open-source substitute and is listed in Mastercard's own fallback stack.\n- Tablet breakpoint specifics (768\u20131023px) were inferred from desktop and mobile captures; intermediate layouts may vary per section.\n- The exact \"whisper\" cream tone used for ghost-watermark headlines behind circular portraits reads between `#E8E2DA` and `#D1CDC7` in captures; the precise value varies per section.\n- Third-party consent orange (`#CF4500`) is Mastercard's documented consent signal and should not be confused with any marketing CTA color.\n- The Mastercard logo mark (red `#EB001B` + yellow `#F79E1B`) is a brand asset, not a UI palette entry.\n";
+
+export { mastercardBrief };