@hex-core/themes 0.1.1 → 0.2.1

package/dist/presets/_briefs/mastercard.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/mastercard.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport 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\\`) — 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 — 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\" — a white micro-CTA holding an arrow icon — 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) — a weight you rarely see on the web, chosen because it reads softer than regular 400 without feeling thin. The whole system — warm cream surfaces, pill shapes, circular portraits, traced-orange orbits, black CTAs — 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 — 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 — 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 — 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 — used only in the brand logo, never as a UI color.\n- **Mastercard Yellow** (\\`#F79E1B\\`): The right circle of the Mastercard mark — 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 — 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 — 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 — 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\\` — Mastercard's proprietary geometric sans. Every headline, body paragraph, button, nav link, and footer link on the page.\n- **Secondary**: \\`MarkOffcForMC\\` — an \"Official\" cut used in a minority of contexts (legal text, some forms).\n- **Fallback stack**: \\`SofiaSans, Arial, sans-serif\\` — 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., \"• SERVICES\") |\n| Body paragraph | 16px | 450 | 22.4px (1.4) | normal | The half-step 450 weight is MarkForMC's signature — 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–14px | 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 — 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 — 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 — Ink Pill**\n- Background: Ink Black (\\`#141413\\`)\n- Text: Canvas Cream (\\`#F3F0EE\\`) — 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 — 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 — 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 — it reads as a compliance color.\n\n**Satellite — Circular Micro-CTA**\n- Background: White (\\`#FFFFFF\\`)\n- Icon: Ink Black arrow (\\`→\\`) at ~20px\n- Border: none\n- Radius: 50% (perfect circle)\n- Size: ~50–60px 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–20px 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–70% 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 — do not round less\n\n**Service / Solution Portrait Card**\n- Shape: Perfect circle (radius 50%) or ellipse (radius 999px / 1000px)\n- Diameter: 260–340px 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., \"• SERVICES\", \"• SOLUTIONS\")\n- Title below: H3 (24px / weight 500 / -2% tracking), 1–2 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–60% of viewport\n- Height: ~380–420px (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–128px / weight 500 / tight -2% tracking\n- Color: Canvas Cream slightly darkened (\\`#E8E2DA\\` or similar — 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\\`) — 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–56px 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 — 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 — 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–1.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 — 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 (\\`↗\\`) 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–128px between major sections on desktop; ~48–64px on mobile\n- **Card internal padding**: 32–40px 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–1280px centered, with ~48–100px 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–500px of blank canvas between the portrait and the next section\nThis deliberate emptiness tells the eye \"slow down, read one thing at a time\" — the opposite of dense dashboard UIs.\n\n### Border Radius Scale\n\n| Radius | Use |\n|--------|-----|\n| 3–6px | 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 — 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 (≤6), medium-large (20–40), or full-pill (99+)**. The middle ground of 8–12 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 — 95% of surfaces sit directly on cream canvas |\n| 1 | \\`rgba(0, 0, 0, 0.04) 0px 4px 24px 0px\\` | Floating nav pill — barely-there lift |\n| 2 | \\`rgba(0, 0, 0, 0.08) 0px 24px 48px 0px\\` | Hero media frames, elevated cards — 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 — 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 — 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 → lifted cream → 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 — it breaks the warm editorial tone\n- Don't round image frames at 8–16px — Mastercard either uses full-pill, 40px, or full-circle. In-between radii look generic\n- Don't use Signal Orange for marketing CTAs — it reads as cookie-consent orange and dilutes the legal color signal\n- Don't mix typefaces — no serif accent, no script, no secondary display font\n- Don't crowd the nav with more than six top-level links — the pill is meant to feel airy\n- Don't drop hard shadows — all elevation should use 48px+ spread and ≤10% 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 — it's the identity\n- Don't place circular portraits on a grid — their magic comes from asymmetric placement\n\n## 8. Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | ≤ 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–1023px | Nav pill shows 2–3 primary links truncated; service portraits arrange 2-up; hero headline ~48px |\n| Desktop | ≥ 1024px | Full nav with 5 primary links centered; service portraits asymmetrically placed with decorative orbital lines; hero headline 64px |\n| Wide | ≥ 1440px | Content max-width caps at ~1280px; gutters grow symmetrically; orbital lines extend further |\n\n### Touch Targets\nAll interactive elements comfortably exceed 44×44px. The satellite CTA (circle + arrow) is ~50–60px. The nav pill buttons are ~48px tall. Mobile hamburger and search are 48×48px. No link or button drops below 40px in any breakpoint.\n\n### Collapsing Strategy\n- **Nav**: full pill → compact pill with hamburger. Pill shape is preserved across breakpoints — always rounded, always floating.\n- **Service grid**: asymmetric constellation → 2-up → 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 → 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\\`) — the warm near-black used for primary pill buttons and footer\"\n- Background: \"Canvas Cream (\\`#F3F0EE\\`) — warm putty body canvas, never pure white\"\n- Lifted surface: \"Lifted Cream (\\`#FCFBFA\\`) — 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\\`) — reserve for cookie consent and legal actions\"\n- Accent arc: \"Light Signal Orange (\\`#F37338\\`) — 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 — 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 — 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–1023px) 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`;\n"],"mappings":";AACO,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/meta.d.ts

@@ -0,0 +1,3 @@
+declare 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 \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.\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 \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.\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 \u2014 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))` \u2014 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 \u2014 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\"` \u2014 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 | \u2014 | Hero headlines on desktop, ss01+ss02 |\n| Display 2 | 48px | 500 (Medium) | 1.17 | \u2014 | Section heroes, product titles |\n| Heading 1 | 36px | 500 (Medium) | 1.28 | \u2014 | Major section headings |\n| Heading 2 | 28px | 300 (Light) | 1.21 | \u2014 | Subheadings, lighter feel |\n| Heading 3 | 18px | 700 (Bold) | 1.44 | \u2014 | Card titles, bold callouts, ss01+ss02 |\n| Body | 18px | 400 (Regular) | 1.44 | \u2014 | 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 | \u2014 | Emphasized labels, price text |\n| Caption | 14px | 400 (Regular) | 1.43 | -0.14px | Secondary labels, metadata |\n| Small | 12px | 400 (Regular) | 1.33 | \u2014 | 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 \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.\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 \u2014 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 \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.\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 \u2192 1.0) on `#979A9F` base color with 8px radius, 1000ms steps timing \u2014 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 \u2014 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 \u2014 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) \u2014 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 \u2014 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 \u2014 it becomes too thin\n- Don't use Facebook Blue (`#1877F2`) as a primary CTA color \u2014 use Meta Blue (`#0064E0`) instead\n- Don't crowd product images \u2014 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 \u2014 rely on border and color separation\n- Don't use long paragraphs \u2014 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 \u2192 2-col at 1024px \u2192 1-col at 768px\n- **Hero sections**: Display text scales from 64px \u2192 48px \u2192 36px; CTA buttons stack vertically on mobile\n- **Feature sections**: 2-column (image + text) \u2192 full-width stacked below 768px, image on top\n- **Section padding**: 80px \u2192 64px \u2192 48px \u2192 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 \u2014 \"pill-shaped Meta Blue button\" not \"border-radius: 100px; background: #0064E0\"\n4. Describe the desired \"feel\" alongside specific measurements \u2014 \"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) \u2014 each creates a dramatically different feel\n";
+
+export { metaBrief };