@hex-core/themes 0.2.4 → 0.2.7

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/lamborghini.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const lamborghiniBrief = `# Design System Inspired by Lamborghini\n\n## 1. Visual Theme & Atmosphere\n\nLamborghini's website is a cathedral of darkness — a digital stage where jet-black surfaces stretch infinitely and every element emerges from the void like a machine under a spotlight. The page is almost entirely black. Not dark gray, not near-black — true, uncompromising black (\\`#000000\\`) that saturates the viewport and refuses to yield. Into this abyss, white type and Lamborghini Gold (\\`#FFC000\\`) are deployed with surgical precision, creating a visual language that feels like walking through a nighttime motorsport event where every surface absorbs light except the things that matter.\n\nThe hero is a full-viewport video — dark, cinematic, immersive — showing event footage or vehicle reveals with the Lamborghini bull logo floating ethereally above. The navigation is minimal: a centered bull logo, a \"MENU\" hamburger on the left, and search/bookmark icons on the right, all rendered in white against the black canvas. There are no borders, no visible nav containers, no background color on the header — just white marks floating in darkness. The overall mood is nocturnal luxury: exclusive, theatrical, and deliberately intimidating. Each section transition is a scroll through darkness into the next revelation.\n\nTypography is the voice of this darkness. LamboType — a custom Neo-Grotesk typeface created by Character Type and design agency Strichpunkt — is used for everything from 120px uppercase display headlines to 10px micro labels. Its distinctive 12° angled terminals are inspired by the aerodynamic lines of Lamborghini's super sports cars, and its proportions range from Normal to Ultracompressed width. Headlines SHOUT in uppercase at enormous scales with tight line-heights (0.92 at 120px), creating dense blocks of text that feel stamped from steel. The typeface carries hexagonal geometric DNA — constructed from hexagons, three-armed stars, and circles — that echoes throughout the interface in the hexagonal pause button and UI icons. Built on Bootstrap grid with 68 Element Plus/UI components, the technical infrastructure is substantial beneath the theatrical surface.\n\n**Key Characteristics:**\n- True black (\\`#000000\\`) dominant surfaces with white and gold as the only relief colors\n- LamboType custom Neo-Grotesk font with 12° angled terminals inspired by aerodynamic car lines\n- Lamborghini Gold (\\`#FFC000\\`) as the sole accent color — used exclusively for primary CTA buttons\n- All-uppercase display typography at extreme scales (120px, 80px, 54px) with tight line-heights\n- Full-viewport video heroes with cinematic event/vehicle content\n- Zero border-radius on buttons — sharp, angular, uncompromising rectangles\n- Hexagonal motifs in UI elements (pause button, icon system) echoing brand geometry\n- Bootstrap grid system + Element Plus/UI 68 components underneath\n- Transparent ghost buttons with white borders at 50% opacity as the secondary CTA pattern\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Lamborghini Gold** (\\`#FFC000\\`): The signature accent color — a warm, saturated amber-gold (rgb 255, 192, 0) used exclusively for primary action buttons (\"Discover More\", \"Tickets\", \"Start Configuration\"). The only chromatic color in the entire interface, it ignites against the black canvas like a headlight cutting through night\n- **Pure White** (\\`#FFFFFF\\`): Primary text color on dark surfaces, logo rendering, nav elements, and light-mode button fills — the voice that speaks from the darkness\n\n### Secondary & Accent\n- **Dark Gold** (\\`#917300\\`): Hover/pressed state for gold buttons — a deep amber (rgb 145, 115, 0) that darkens the gold to signal interaction\n- **Gold Text** (\\`#FFCE3E\\`): Slightly lighter gold variant (rgb 255, 206, 62) used for inline text accents and highlighted labels\n- **Cyan Pulse** (\\`#29ABE2\\`): Electric blue-cyan (rgb 41, 171, 226) appearing as an informational accent and interactive element highlight\n- **Link Blue** (\\`#3860BE\\`): Medium blue (rgb 56, 96, 190) used universally for link hover states across all text colors\n\n### Surface & Background\n- **Absolute Black** (\\`#000000\\`): The dominant surface color — used for page background, hero sections, header, footer, and most containers\n- **Charcoal** (\\`#202020\\`): Elevated dark surface (rgb 32, 32, 32) — the primary \"dark gray\" for cards, panels, and text containers sitting above the black canvas\n- **Dark Iron** (\\`#181818\\`): Subtle surface variant (rgb 24, 24, 24) — barely distinguishable from black, used for footer and deep sections\n- **Overlay Black** (\\`rgba(0,0,0,0.7)\\`): Semi-transparent overlay for modals and video dimming\n- **Near White** (\\`#F8F8F8\\`): Rare light surface (rgb 248, 248, 248) for content blocks in white-mode sections\n- **Mist** (\\`#E6E6E6\\`): Light gray surface for secondary light-mode containers\n\n### Neutrals & Text\n- **Pure White** (\\`#FFFFFF\\`): Primary text on dark backgrounds — headlines, body, nav labels\n- **Smoke** (\\`#F5F5F5\\`): Secondary text on dark surfaces — slightly softer than pure white\n- **Graphite** (\\`#494949\\`): Dark gray text on light surfaces (rgb 73, 73, 73)\n- **Ash** (\\`#7D7D7D\\`): Mid-range gray for muted text, timestamps, and metadata (rgb 125, 125, 125)\n- **Steel** (\\`#969696\\`): Lighter gray for disabled text and subtle labels (rgb 150, 150, 150)\n- **Slate** (\\`#666666\\`): Alternative mid-gray for secondary content\n- **Iron** (\\`#555555\\`): Dark mid-gray for body text variants\n- **Shadow** (\\`#313131\\`): Very dark gray for text on dark surfaces where white is too strong\n\n### Semantic & Accent\n- **Cyan Pulse** (\\`#29ABE2\\`): Used for informational highlights and interactive feedback\n- **Link Blue** (\\`#3860BE\\`): Universal hover state for all hyperlinks\n- **Teal Action** (\\`#1EAEDB\\`): Button hover background for transparent/ghost variants (rgb 30, 174, 219)\n\n### Gradient System\n- No explicit gradients in the color palette — the dark-to-light progression is achieved through surface layering: \\`#000000\\` → \\`#181818\\` → \\`#202020\\` → \\`#494949\\` → \\`#7D7D7D\\`\n- Video heroes use natural atmospheric gradients from the content itself\n- Top-of-page gradient: subtle dark-to-darker fade at the edges of full-bleed imagery\n\n## 3. Typography Rules\n\n### Font Family\n- **Display & UI**: \\`LamboType\\`, Roboto, Helvetica Neue, Arial — custom Neo-Grotesk typeface by Character Type for Lamborghini's 2024 brand refresh. Available in widths from Normal to Ultracompressed and weights from Light (300) to Black. Features 12° angled terminals inspired by aerodynamic car geometry, hexagonal construction logic, and support for 200+ languages including Latin, Cyrillic, and Greek\n- **Fallback/UI**: \\`Open Sans\\` — used for some button/form contexts as system fallback\n- **No italic variants** observed on the marketing site — the brand voice is always upright\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Hero Display | 120px (7.50rem) | 400 | 0.92 | normal | LamboType, uppercase, maximum impact |\n| Display 2 | 80px (5.00rem) | 400 | 1.13 | normal | LamboType, uppercase, major section titles |\n| Section Title | 54px (3.38rem) | 400 | 1.19 | normal | LamboType, uppercase |\n| Sub-section | 40px (2.50rem) | 400 | 1.15 | normal | LamboType, uppercase |\n| Feature Heading | 27px (1.69rem) | 400 | 1.37 | normal | LamboType, uppercase |\n| Card Title | 24px (1.50rem) | 400 | — | normal | LamboType |\n| Body Large | 18px (1.13rem) | 400 | 1.56 | normal | LamboType, mixed case and uppercase variants |\n| Body / UI | 16px (1.00rem) | 400/700 | 1.50 | normal/0.16px | LamboType, primary body text |\n| Button Large | 16px (1.00rem) | 400 | 1.50 | normal | Gold CTA buttons |\n| Button Standard | 14.4px (0.90rem) | 300/700 | 1.00 | 0.14–0.2px | LamboType, uppercase, ghost buttons |\n| Button Small | 13px (0.81rem) | 300/500 | 1.20 | 0.13–0.2px | LamboType, compact button variant |\n| Caption | 14px (0.88rem) | 600/700 | 1.14–1.50 | -0.42px | LamboType, uppercase, negative tracking |\n| Label | 12px (0.75rem) | 400/500 | 1.83 | 0.96px | LamboType, uppercase badges and micro labels |\n| Micro | 10px (0.63rem) | 400 | 1.00–2.00 | 0.225px | LamboType, uppercase, smallest text |\n\n### Principles\n- **ALL-CAPS is the default voice**: Display and feature headings are universally uppercase. This creates a shouting, commanding tone that matches the brand's aggression\n- **Extreme scale range**: From 120px heroes to 10px micro labels — a 12:1 ratio that creates dramatic visual hierarchy\n- **Tight line-heights at scale**: Display sizes use 0.92-1.19 line-height, creating dense, compressed blocks of type that feel stamped rather than typeset\n- **Weight 400 dominates**: Unlike many design systems that use bold for emphasis, Lamborghini's regular weight carries the headlines — the typeface itself is so distinctive it doesn't need weight variation\n- **Negative tracking on captions**: -0.42px letter-spacing on 14px captions creates a compressed, technical aesthetic\n- **Positive tracking on micro text**: +0.225px at 10px ensures legibility at the smallest sizes\n- **Single typeface discipline**: LamboType handles everything — the 12° angled terminals and hexagonal geometry provide visual coherence across all sizes\n\n## 4. Component Stylings\n\n### Buttons\nAll buttons use **zero border-radius** — sharp, angular rectangles that echo the aggressive lines of Lamborghini vehicles.\n\n**Gold Accent CTA** — The primary action:\n- Default: bg \\`#FFC000\\` (Lamborghini Gold), text \\`#000000\\`, padding 24px, fontSize 16px, fontWeight 400, borderRadius 0px, no border\n- Hover: bg \\`#917300\\` (Dark Gold), darkens significantly\n- Class: \\`btn-accent btn-large\\`\n- Used for: \"Discover More\", \"Tickets\", \"Start Configuration\"\n\n**Transparent Ghost** — The secondary action on dark backgrounds:\n- Default: bg transparent, text \\`#FFFFFF\\`, border 1px solid \\`#FFFFFF\\`, padding 16px, opacity 0.5\n- Hover: bg \\`#1EAEDB\\` (Teal Action), text white, opacity 0.7\n- Focus: bg \\`#1EAEDB\\`, border 1px solid \\`#000000\\`, outline 2px solid \\`#000000\\`\n- Used for: secondary CTAs on hero sections and dark panels\n\n**White Filled** — Light-mode primary:\n- Default: bg \\`#FFFFFF\\`, text \\`#202020\\`, no border\n- Used for: CTAs on dark sections where gold isn't appropriate\n\n**Black Filled** — Dark filled variant:\n- Default: bg \\`#000000\\`, text \\`#202020\\`\n- Used for: Inverted CTA on light sections\n\n**Gray Neutral** — Subtle action:\n- Default: bg \\`#969696\\`, text \\`#202020\\`\n- Used for: secondary/tertiary actions, badge-like buttons\n\n### Cards & Containers\n- Background: \\`#202020\\` (Charcoal) on black canvas, or \\`#000000\\` on lighter sections\n- Border: \\`0px 1px solid #202020\\` bottom borders for section dividers\n- Border-radius: 0px (completely sharp corners)\n- Shadow: minimal, uses overlay opacity for depth\n- Content: full-bleed photography + overlaid text in white\n\n### Inputs & Forms\n- Minimal form presence on the marketing site\n- Switch elements: border-radius 20px (the only rounded element), border 1px solid \\`#DDDDDD\\`\n- Cookie banner input style: white text on black with \\`#7D7D7D\\` borders\n\n### Navigation\n- **Desktop**: Centered bull logo, \"MENU\" hamburger with icon on left, search icon + bookmarks icon on right\n- **Background**: Transparent (inherits black page background)\n- **Sticky**: Fixed to top, floats above content\n- **No visible borders or shadows** — elements float in the darkness\n- **\"MENU\" label**: White text at 14px weight 400, uppercase, accompanies hamburger icon\n- **Hexagonal motifs**: Pause button on hero sections uses hexagonal outline shape\n\n### Image Treatment\n- **Hero**: Full-viewport video sections (100vh) with cinematic event/vehicle footage\n- **Event photography**: Full-bleed aerial shots of Lamborghini Arena events\n- **Vehicle imagery**: High-contrast studio shots on dark backgrounds, full-width\n- **Aspect ratios**: Predominantly 16:9 and wider for cinematic feel\n- **Dark gradient overlays**: Subtle darkening at top/bottom edges of video to ensure text legibility\n\n### Distinctive Components\n- **Hexagonal Pause Button**: Video control uses a hexagonal outline (matching the brand's geometric DNA from the typeface), positioned bottom-right of hero sections\n- **Progress Bar**: Thin white line at bottom of hero sections indicating video/slide progress\n- **Badge/Tag**: bg \\`#969696\\`, text white, padding 8px, fontSize 10px, borderRadius 2px — tiny metallic pills\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Full scale**: 2px, 4px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 32px, 40px, 48px, 56px\n- **Button padding**: 16px (ghost), 24px (gold accent)\n- **Section padding**: 48–56px vertical, 40px horizontal\n- **Small spacing**: 2–5px for fine adjustments (badge padding, border spacing)\n\n### Grid & Container\n- **Framework**: Bootstrap grid system (container + row + col)\n- **Max width**: 1440px (largest breakpoint)\n- **Columns**: Standard 12-column Bootstrap grid\n- **Full-bleed**: Hero sections break out of grid to fill viewport edge-to-edge\n- **Content areas**: Centered within 1200px max-width containers\n\n### Whitespace Philosophy\nLamborghini uses darkness as whitespace. The generous black expanses between content blocks serve the same function as white space in a light design — creating breathing room that elevates each element to the status of exhibit. A model name floating in the middle of a black viewport has the same visual weight as a gallery piece on a white wall. The absence of color IS the design.\n\n### Border Radius Scale\n| Value | Context |\n|-------|---------|\n| 0px | Default for everything — buttons, cards, containers, images |\n| 1px | Subtle span elements |\n| 2px | Badges, close buttons, cookie elements — barely perceptible |\n| 20px | Toggle switches only — the sole rounded element |\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Abyss) | \\`#000000\\` flat | Page background, deepest layer |\n| Level 1 (Surface) | \\`#181818\\` or \\`#202020\\` | Cards, content panels, elevated sections |\n| Level 2 (Overlay) | \\`rgba(0,0,0,0.7)\\` | Modal backdrops, video dimming |\n| Level 3 (Fog) | \\`rgba(0,0,0,0.5)\\` | Lighter overlays, hover states |\n| Level 4 (Mist) | \\`rgba(0,0,0,0.25)\\` | Subtle depth hints |\n\n### Shadow Philosophy\nLamborghini achieves depth through surface color layering rather than shadows. On a black canvas, traditional drop shadows are invisible — instead, the system creates elevation by shifting from absolute black to progressively lighter dark grays: \\`#000000\\` → \\`#181818\\` → \\`#202020\\` → \\`#494949\\`. This \"darkness gradient\" approach means that elevated elements are literally lighter than their surroundings, inverting the traditional shadow model.\n\n### Decorative Depth\n- Full-bleed video provides atmospheric depth through cinematic lighting\n- The hexagonal pause button floats with a thin white outline stroke\n- Progress bars at hero section bottoms create a subtle horizon line\n- No gradients, glows, or blur effects on UI elements — the photography provides all visual richness\n\n## 7. Do's and Don'ts\n\n### Do\n- Use absolute black (\\`#000000\\`) as the primary background — never dark gray as a substitute\n- Apply Lamborghini Gold (\\`#FFC000\\`) exclusively for primary CTA buttons — never for decorative purposes\n- Set all display headings in uppercase with LamboType — the brand voice is always SHOUTING\n- Use zero border-radius on buttons and cards — sharp angles are non-negotiable\n- Maintain tight line-heights (0.92–1.19) on display type to create dense, architectural text blocks\n- Use the transparent ghost button (white border, 50% opacity) as the secondary CTA on dark backgrounds\n- Let full-viewport video/photography carry emotional weight — UI is infrastructure, not decoration\n- Reserve hexagonal geometry for UI icons and the video control button\n- Use weight 400 (regular) for headlines — the typeface is distinctive enough without bold emphasis\n- Keep the gray palette achromatic — all neutrals are pure gray without color tinting\n\n### Don't\n- Introduce additional accent colors beyond gold — the monochrome-plus-gold system is sacred\n- Apply border-radius to buttons or cards — curved edges contradict the angular vehicle aesthetic\n- Use LamboType in italic or decorative styles — the brand is always upright and direct\n- Add gradients to buttons or surfaces — depth comes from surface layering, not blending\n- Use light backgrounds as the primary canvas — darkness is the default state, light is the exception\n- Mix lowercase into display headings — the uppercase convention communicates authority and power\n- Add hover animations with scale or translate — interactions should be color-only (background/opacity shifts)\n- Use Open Sans for display text — LamboType must handle all visible typography\n- Create busy layouts with many small elements — Lamborghini's design is about singular, bold statements\n- Apply shadows to elements — on a black canvas, shadows are meaningless; use surface color shifts instead\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <425px | Single column, reduced type scale, stacked buttons |\n| Mobile | 425-576px | Single column, hamburger nav, hero text ~40px |\n| Tablet Small | 576-768px | 2-column grid begins, padding adjusts |\n| Tablet | 768-1024px | 2-column layout, expanded hero, vehicle cards side-by-side |\n| Desktop | 1024-1280px | Full navigation, 3+ column grids, display text at 80px |\n| Desktop Large | 1280-1440px | Full layout, hero at 120px display, max-width containers |\n| Wide | >1440px | Content centered, margins expand, hero fills viewport |\n\n### Touch Targets\n- Gold CTA buttons: 48px+ minimum height with 24px padding (exceeds WCAG 44×44px)\n- Ghost buttons: 48px+ with 16px padding\n- Hamburger menu: large touch target (~48px square)\n- Hexagonal pause button: approximately 48px diameter\n\n### Collapsing Strategy\n- **Navigation**: Always hamburger-based (\"MENU\" + icon) — no horizontal nav expansion on any breakpoint\n- **Hero video**: Maintains full-viewport height across all breakpoints, adjusting object-fit\n- **Display type**: Scales from 120px (desktop) → 80px (tablet) → 54px/40px (mobile)\n- **Button layout**: Side-by-side on desktop, stacks vertically on mobile\n- **Grid columns**: 3-column → 2-column → 1-column progression\n- **Section spacing**: Reduces from 56px → 40px → 24px vertical padding\n\n### Image Behavior\n- Hero videos use \\`object-fit: cover\\` to maintain cinematic framing at all sizes\n- Vehicle images scale within their containers with maintained aspect ratios\n- Event photography crops to viewport width on narrow screens\n- Background images darken at edges to maintain text contrast on all viewports\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: \"Lamborghini Gold (#FFC000)\"\n- Background: \"Absolute Black (#000000)\"\n- Surface: \"Charcoal (#202020)\"\n- Heading text: \"Pure White (#FFFFFF)\"\n- Body text: \"Ash (#7D7D7D)\"\n- Link hover: \"Link Blue (#3860BE)\"\n- Accent: \"Cyan Pulse (#29ABE2)\"\n- Border: \"Pure White (#FFFFFF) at 50% opacity\"\n\n### Example Component Prompts\n- \"Create a hero section with a full-viewport black background, the model name 'TEMERARIO' in LamboType at 120px uppercase weight 400 white text with 0.92 line-height, centered vertically, with a Lamborghini Gold (#FFC000) 'Discover More' button below — sharp corners, 0px radius, 24px padding, black text\"\n- \"Design a transparent ghost button with 1px solid white border at 50% opacity, white text at 14.4px uppercase with 0.2px letter-spacing, padding 16px, on a black background — hover state changes to Teal Action (#1EAEDB) background with 70% opacity\"\n- \"Build a navigation bar with zero visible background on absolute black, a centered bull logo, 'MENU' text label with hamburger icon on the left, and search + bookmark icons on the right — all in white, sticky position\"\n- \"Create a news card grid on charcoal (#202020) background with white headlines at 27px uppercase, body text in #7D7D7D at 16px, and a white underlined 'Read More' link that turns #3860BE on hover\"\n- \"Design a section divider using a 1px solid bottom border in #202020 on a black canvas — the elevation difference is purely through surface color shift, not shadow\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time — Lamborghini's system is extreme and every element must feel aggressive\n2. Reference specific color names and hex codes from this document — the palette has only about 5 active colors\n3. Use natural language descriptions, not CSS values — \"sharp-cut golden rectangle\" not \"border-radius: 0px; background: #FFC000\"\n4. Describe the desired \"feel\" alongside specific measurements — \"floating in total darkness\" communicates the black canvas better than \"background: #000000\"\n5. Remember that UPPERCASE IS THE DEFAULT — if text isn't uppercase at display sizes, it probably should be\n`;\n"],"mappings":";AACO,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/lamborghini.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const lamborghiniBrief = `# Design System Inspired by Lamborghini\n\n## 1. Visual Theme & Atmosphere\n\nLamborghini's website is a cathedral of darkness — a digital stage where jet-black surfaces stretch infinitely and every element emerges from the void like a machine under a spotlight. The page is almost entirely black. Not dark gray, not near-black — true, uncompromising black (\\`#000000\\`) that saturates the viewport and refuses to yield. Into this abyss, white type and Lamborghini Gold (\\`#FFC000\\`) are deployed with surgical precision, creating a visual language that feels like walking through a nighttime motorsport event where every surface absorbs light except the things that matter.\n\nThe hero is a full-viewport video — dark, cinematic, immersive — showing event footage or vehicle reveals with the Lamborghini bull logo floating ethereally above. The navigation is minimal: a centered bull logo, a \"MENU\" hamburger on the left, and search/bookmark icons on the right, all rendered in white against the black canvas. There are no borders, no visible nav containers, no background color on the header — just white marks floating in darkness. The overall mood is nocturnal luxury: exclusive, theatrical, and deliberately intimidating. Each section transition is a scroll through darkness into the next revelation.\n\nTypography is the voice of this darkness. LamboType — a custom Neo-Grotesk typeface created by Character Type and design agency Strichpunkt — is used for everything from 120px uppercase display headlines to 10px micro labels. Its distinctive 12° angled terminals are inspired by the aerodynamic lines of Lamborghini's super sports cars, and its proportions range from Normal to Ultracompressed width. Headlines SHOUT in uppercase at enormous scales with tight line-heights (0.92 at 120px), creating dense blocks of text that feel stamped from steel. The typeface carries hexagonal geometric DNA — constructed from hexagons, three-armed stars, and circles — that echoes throughout the interface in the hexagonal pause button and UI icons. Built on Bootstrap grid with 68 Element Plus/UI components, the technical infrastructure is substantial beneath the theatrical surface.\n\n**Key Characteristics:**\n- True black (\\`#000000\\`) dominant surfaces with white and gold as the only relief colors\n- LamboType custom Neo-Grotesk font with 12° angled terminals inspired by aerodynamic car lines\n- Lamborghini Gold (\\`#FFC000\\`) as the sole accent color — used exclusively for primary CTA buttons\n- All-uppercase display typography at extreme scales (120px, 80px, 54px) with tight line-heights\n- Full-viewport video heroes with cinematic event/vehicle content\n- Zero border-radius on buttons — sharp, angular, uncompromising rectangles\n- Hexagonal motifs in UI elements (pause button, icon system) echoing brand geometry\n- Bootstrap grid system + Element Plus/UI 68 components underneath\n- Transparent ghost buttons with white borders at 50% opacity as the secondary CTA pattern\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Lamborghini Gold** (\\`#FFC000\\`): The signature accent color — a warm, saturated amber-gold (rgb 255, 192, 0) used exclusively for primary action buttons (\"Discover More\", \"Tickets\", \"Start Configuration\"). The only chromatic color in the entire interface, it ignites against the black canvas like a headlight cutting through night\n- **Pure White** (\\`#FFFFFF\\`): Primary text color on dark surfaces, logo rendering, nav elements, and light-mode button fills — the voice that speaks from the darkness\n\n### Secondary & Accent\n- **Dark Gold** (\\`#917300\\`): Hover/pressed state for gold buttons — a deep amber (rgb 145, 115, 0) that darkens the gold to signal interaction\n- **Gold Text** (\\`#FFCE3E\\`): Slightly lighter gold variant (rgb 255, 206, 62) used for inline text accents and highlighted labels\n- **Cyan Pulse** (\\`#29ABE2\\`): Electric blue-cyan (rgb 41, 171, 226) appearing as an informational accent and interactive element highlight\n- **Link Blue** (\\`#3860BE\\`): Medium blue (rgb 56, 96, 190) used universally for link hover states across all text colors\n\n### Surface & Background\n- **Absolute Black** (\\`#000000\\`): The dominant surface color — used for page background, hero sections, header, footer, and most containers\n- **Charcoal** (\\`#202020\\`): Elevated dark surface (rgb 32, 32, 32) — the primary \"dark gray\" for cards, panels, and text containers sitting above the black canvas\n- **Dark Iron** (\\`#181818\\`): Subtle surface variant (rgb 24, 24, 24) — barely distinguishable from black, used for footer and deep sections\n- **Overlay Black** (\\`rgba(0,0,0,0.7)\\`): Semi-transparent overlay for modals and video dimming\n- **Near White** (\\`#F8F8F8\\`): Rare light surface (rgb 248, 248, 248) for content blocks in white-mode sections\n- **Mist** (\\`#E6E6E6\\`): Light gray surface for secondary light-mode containers\n\n### Neutrals & Text\n- **Pure White** (\\`#FFFFFF\\`): Primary text on dark backgrounds — headlines, body, nav labels\n- **Smoke** (\\`#F5F5F5\\`): Secondary text on dark surfaces — slightly softer than pure white\n- **Graphite** (\\`#494949\\`): Dark gray text on light surfaces (rgb 73, 73, 73)\n- **Ash** (\\`#7D7D7D\\`): Mid-range gray for muted text, timestamps, and metadata (rgb 125, 125, 125)\n- **Steel** (\\`#969696\\`): Lighter gray for disabled text and subtle labels (rgb 150, 150, 150)\n- **Slate** (\\`#666666\\`): Alternative mid-gray for secondary content\n- **Iron** (\\`#555555\\`): Dark mid-gray for body text variants\n- **Shadow** (\\`#313131\\`): Very dark gray for text on dark surfaces where white is too strong\n\n### Semantic & Accent\n- **Cyan Pulse** (\\`#29ABE2\\`): Used for informational highlights and interactive feedback\n- **Link Blue** (\\`#3860BE\\`): Universal hover state for all hyperlinks\n- **Teal Action** (\\`#1EAEDB\\`): Button hover background for transparent/ghost variants (rgb 30, 174, 219)\n\n### Gradient System\n- No explicit gradients in the color palette — the dark-to-light progression is achieved through surface layering: \\`#000000\\` → \\`#181818\\` → \\`#202020\\` → \\`#494949\\` → \\`#7D7D7D\\`\n- Video heroes use natural atmospheric gradients from the content itself\n- Top-of-page gradient: subtle dark-to-darker fade at the edges of full-bleed imagery\n\n## 3. Typography Rules\n\n### Font Family\n- **Display & UI**: \\`LamboType\\`, Roboto, Helvetica Neue, Arial — custom Neo-Grotesk typeface by Character Type for Lamborghini's 2024 brand refresh. Available in widths from Normal to Ultracompressed and weights from Light (300) to Black. Features 12° angled terminals inspired by aerodynamic car geometry, hexagonal construction logic, and support for 200+ languages including Latin, Cyrillic, and Greek\n- **Fallback/UI**: \\`Open Sans\\` — used for some button/form contexts as system fallback\n- **No italic variants** observed on the marketing site — the brand voice is always upright\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Hero Display | 120px (7.50rem) | 400 | 0.92 | normal | LamboType, uppercase, maximum impact |\n| Display 2 | 80px (5.00rem) | 400 | 1.13 | normal | LamboType, uppercase, major section titles |\n| Section Title | 54px (3.38rem) | 400 | 1.19 | normal | LamboType, uppercase |\n| Sub-section | 40px (2.50rem) | 400 | 1.15 | normal | LamboType, uppercase |\n| Feature Heading | 27px (1.69rem) | 400 | 1.37 | normal | LamboType, uppercase |\n| Card Title | 24px (1.50rem) | 400 | — | normal | LamboType |\n| Body Large | 18px (1.13rem) | 400 | 1.56 | normal | LamboType, mixed case and uppercase variants |\n| Body / UI | 16px (1.00rem) | 400/700 | 1.50 | normal/0.16px | LamboType, primary body text |\n| Button Large | 16px (1.00rem) | 400 | 1.50 | normal | Gold CTA buttons |\n| Button Standard | 14.4px (0.90rem) | 300/700 | 1.00 | 0.14–0.2px | LamboType, uppercase, ghost buttons |\n| Button Small | 13px (0.81rem) | 300/500 | 1.20 | 0.13–0.2px | LamboType, compact button variant |\n| Caption | 14px (0.88rem) | 600/700 | 1.14–1.50 | -0.42px | LamboType, uppercase, negative tracking |\n| Label | 12px (0.75rem) | 400/500 | 1.83 | 0.96px | LamboType, uppercase badges and micro labels |\n| Micro | 10px (0.63rem) | 400 | 1.00–2.00 | 0.225px | LamboType, uppercase, smallest text |\n\n### Principles\n- **ALL-CAPS is the default voice**: Display and feature headings are universally uppercase. This creates a shouting, commanding tone that matches the brand's aggression\n- **Extreme scale range**: From 120px heroes to 10px micro labels — a 12:1 ratio that creates dramatic visual hierarchy\n- **Tight line-heights at scale**: Display sizes use 0.92-1.19 line-height, creating dense, compressed blocks of type that feel stamped rather than typeset\n- **Weight 400 dominates**: Unlike many design systems that use bold for emphasis, Lamborghini's regular weight carries the headlines — the typeface itself is so distinctive it doesn't need weight variation\n- **Negative tracking on captions**: -0.42px letter-spacing on 14px captions creates a compressed, technical aesthetic\n- **Positive tracking on micro text**: +0.225px at 10px ensures legibility at the smallest sizes\n- **Single typeface discipline**: LamboType handles everything — the 12° angled terminals and hexagonal geometry provide visual coherence across all sizes\n\n## 4. Component Stylings\n\n### Buttons\nAll buttons use **zero border-radius** — sharp, angular rectangles that echo the aggressive lines of Lamborghini vehicles.\n\n**Gold Accent CTA** — The primary action:\n- Default: bg \\`#FFC000\\` (Lamborghini Gold), text \\`#000000\\`, padding 24px, fontSize 16px, fontWeight 400, borderRadius 0px, no border\n- Hover: bg \\`#917300\\` (Dark Gold), darkens significantly\n- Class: \\`btn-accent btn-large\\`\n- Used for: \"Discover More\", \"Tickets\", \"Start Configuration\"\n\n**Transparent Ghost** — The secondary action on dark backgrounds:\n- Default: bg transparent, text \\`#FFFFFF\\`, border 1px solid \\`#FFFFFF\\`, padding 16px, opacity 0.5\n- Hover: bg \\`#1EAEDB\\` (Teal Action), text white, opacity 0.7\n- Focus: bg \\`#1EAEDB\\`, border 1px solid \\`#000000\\`, outline 2px solid \\`#000000\\`\n- Used for: secondary CTAs on hero sections and dark panels\n\n**White Filled** — Light-mode primary:\n- Default: bg \\`#FFFFFF\\`, text \\`#202020\\`, no border\n- Used for: CTAs on dark sections where gold isn't appropriate\n\n**Black Filled** — Dark filled variant:\n- Default: bg \\`#000000\\`, text \\`#202020\\`\n- Used for: Inverted CTA on light sections\n\n**Gray Neutral** — Subtle action:\n- Default: bg \\`#969696\\`, text \\`#202020\\`\n- Used for: secondary/tertiary actions, badge-like buttons\n\n### Cards & Containers\n- Background: \\`#202020\\` (Charcoal) on black canvas, or \\`#000000\\` on lighter sections\n- Border: \\`0px 1px solid #202020\\` bottom borders for section dividers\n- Border-radius: 0px (completely sharp corners)\n- Shadow: minimal, uses overlay opacity for depth\n- Content: full-bleed photography + overlaid text in white\n\n### Inputs & Forms\n- Minimal form presence on the marketing site\n- Switch elements: border-radius 20px (the only rounded element), border 1px solid \\`#DDDDDD\\`\n- Cookie banner input style: white text on black with \\`#7D7D7D\\` borders\n\n### Navigation\n- **Desktop**: Centered bull logo, \"MENU\" hamburger with icon on left, search icon + bookmarks icon on right\n- **Background**: Transparent (inherits black page background)\n- **Sticky**: Fixed to top, floats above content\n- **No visible borders or shadows** — elements float in the darkness\n- **\"MENU\" label**: White text at 14px weight 400, uppercase, accompanies hamburger icon\n- **Hexagonal motifs**: Pause button on hero sections uses hexagonal outline shape\n\n### Image Treatment\n- **Hero**: Full-viewport video sections (100vh) with cinematic event/vehicle footage\n- **Event photography**: Full-bleed aerial shots of Lamborghini Arena events\n- **Vehicle imagery**: High-contrast studio shots on dark backgrounds, full-width\n- **Aspect ratios**: Predominantly 16:9 and wider for cinematic feel\n- **Dark gradient overlays**: Subtle darkening at top/bottom edges of video to ensure text legibility\n\n### Distinctive Components\n- **Hexagonal Pause Button**: Video control uses a hexagonal outline (matching the brand's geometric DNA from the typeface), positioned bottom-right of hero sections\n- **Progress Bar**: Thin white line at bottom of hero sections indicating video/slide progress\n- **Badge/Tag**: bg \\`#969696\\`, text white, padding 8px, fontSize 10px, borderRadius 2px — tiny metallic pills\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Full scale**: 2px, 4px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 32px, 40px, 48px, 56px\n- **Button padding**: 16px (ghost), 24px (gold accent)\n- **Section padding**: 48–56px vertical, 40px horizontal\n- **Small spacing**: 2–5px for fine adjustments (badge padding, border spacing)\n\n### Grid & Container\n- **Framework**: Bootstrap grid system (container + row + col)\n- **Max width**: 1440px (largest breakpoint)\n- **Columns**: Standard 12-column Bootstrap grid\n- **Full-bleed**: Hero sections break out of grid to fill viewport edge-to-edge\n- **Content areas**: Centered within 1200px max-width containers\n\n### Whitespace Philosophy\nLamborghini uses darkness as whitespace. The generous black expanses between content blocks serve the same function as white space in a light design — creating breathing room that elevates each element to the status of exhibit. A model name floating in the middle of a black viewport has the same visual weight as a gallery piece on a white wall. The absence of color IS the design.\n\n### Border Radius Scale\n| Value | Context |\n|-------|---------|\n| 0px | Default for everything — buttons, cards, containers, images |\n| 1px | Subtle span elements |\n| 2px | Badges, close buttons, cookie elements — barely perceptible |\n| 20px | Toggle switches only — the sole rounded element |\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Abyss) | \\`#000000\\` flat | Page background, deepest layer |\n| Level 1 (Surface) | \\`#181818\\` or \\`#202020\\` | Cards, content panels, elevated sections |\n| Level 2 (Overlay) | \\`rgba(0,0,0,0.7)\\` | Modal backdrops, video dimming |\n| Level 3 (Fog) | \\`rgba(0,0,0,0.5)\\` | Lighter overlays, hover states |\n| Level 4 (Mist) | \\`rgba(0,0,0,0.25)\\` | Subtle depth hints |\n\n### Shadow Philosophy\nLamborghini achieves depth through surface color layering rather than shadows. On a black canvas, traditional drop shadows are invisible — instead, the system creates elevation by shifting from absolute black to progressively lighter dark grays: \\`#000000\\` → \\`#181818\\` → \\`#202020\\` → \\`#494949\\`. This \"darkness gradient\" approach means that elevated elements are literally lighter than their surroundings, inverting the traditional shadow model.\n\n### Decorative Depth\n- Full-bleed video provides atmospheric depth through cinematic lighting\n- The hexagonal pause button floats with a thin white outline stroke\n- Progress bars at hero section bottoms create a subtle horizon line\n- No gradients, glows, or blur effects on UI elements — the photography provides all visual richness\n\n## 7. Do's and Don'ts\n\n### Do\n- Use absolute black (\\`#000000\\`) as the primary background — never dark gray as a substitute\n- Apply Lamborghini Gold (\\`#FFC000\\`) exclusively for primary CTA buttons — never for decorative purposes\n- Set all display headings in uppercase with LamboType — the brand voice is always SHOUTING\n- Use zero border-radius on buttons and cards — sharp angles are non-negotiable\n- Maintain tight line-heights (0.92–1.19) on display type to create dense, architectural text blocks\n- Use the transparent ghost button (white border, 50% opacity) as the secondary CTA on dark backgrounds\n- Let full-viewport video/photography carry emotional weight — UI is infrastructure, not decoration\n- Reserve hexagonal geometry for UI icons and the video control button\n- Use weight 400 (regular) for headlines — the typeface is distinctive enough without bold emphasis\n- Keep the gray palette achromatic — all neutrals are pure gray without color tinting\n\n### Don't\n- Introduce additional accent colors beyond gold — the monochrome-plus-gold system is sacred\n- Apply border-radius to buttons or cards — curved edges contradict the angular vehicle aesthetic\n- Use LamboType in italic or decorative styles — the brand is always upright and direct\n- Add gradients to buttons or surfaces — depth comes from surface layering, not blending\n- Use light backgrounds as the primary canvas — darkness is the default state, light is the exception\n- Mix lowercase into display headings — the uppercase convention communicates authority and power\n- Add hover animations with scale or translate — interactions should be color-only (background/opacity shifts)\n- Use Open Sans for display text — LamboType must handle all visible typography\n- Create busy layouts with many small elements — Lamborghini's design is about singular, bold statements\n- Apply shadows to elements — on a black canvas, shadows are meaningless; use surface color shifts instead\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <425px | Single column, reduced type scale, stacked buttons |\n| Mobile | 425-576px | Single column, hamburger nav, hero text ~40px |\n| Tablet Small | 576-768px | 2-column grid begins, padding adjusts |\n| Tablet | 768-1024px | 2-column layout, expanded hero, vehicle cards side-by-side |\n| Desktop | 1024-1280px | Full navigation, 3+ column grids, display text at 80px |\n| Desktop Large | 1280-1440px | Full layout, hero at 120px display, max-width containers |\n| Wide | >1440px | Content centered, margins expand, hero fills viewport |\n\n### Touch Targets\n- Gold CTA buttons: 48px+ minimum height with 24px padding (exceeds WCAG 44×44px)\n- Ghost buttons: 48px+ with 16px padding\n- Hamburger menu: large touch target (~48px square)\n- Hexagonal pause button: approximately 48px diameter\n\n### Collapsing Strategy\n- **Navigation**: Always hamburger-based (\"MENU\" + icon) — no horizontal nav expansion on any breakpoint\n- **Hero video**: Maintains full-viewport height across all breakpoints, adjusting object-fit\n- **Display type**: Scales from 120px (desktop) → 80px (tablet) → 54px/40px (mobile)\n- **Button layout**: Side-by-side on desktop, stacks vertically on mobile\n- **Grid columns**: 3-column → 2-column → 1-column progression\n- **Section spacing**: Reduces from 56px → 40px → 24px vertical padding\n\n### Image Behavior\n- Hero videos use \\`object-fit: cover\\` to maintain cinematic framing at all sizes\n- Vehicle images scale within their containers with maintained aspect ratios\n- Event photography crops to viewport width on narrow screens\n- Background images darken at edges to maintain text contrast on all viewports\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: \"Lamborghini Gold (#FFC000)\"\n- Background: \"Absolute Black (#000000)\"\n- Surface: \"Charcoal (#202020)\"\n- Heading text: \"Pure White (#FFFFFF)\"\n- Body text: \"Ash (#7D7D7D)\"\n- Link hover: \"Link Blue (#3860BE)\"\n- Accent: \"Cyan Pulse (#29ABE2)\"\n- Border: \"Pure White (#FFFFFF) at 50% opacity\"\n\n### Example Component Prompts\n- \"Create a hero section with a full-viewport black background, the model name 'TEMERARIO' in LamboType at 120px uppercase weight 400 white text with 0.92 line-height, centered vertically, with a Lamborghini Gold (#FFC000) 'Discover More' button below — sharp corners, 0px radius, 24px padding, black text\"\n- \"Design a transparent ghost button with 1px solid white border at 50% opacity, white text at 14.4px uppercase with 0.2px letter-spacing, padding 16px, on a black background — hover state changes to Teal Action (#1EAEDB) background with 70% opacity\"\n- \"Build a navigation bar with zero visible background on absolute black, a centered bull logo, 'MENU' text label with hamburger icon on the left, and search + bookmark icons on the right — all in white, sticky position\"\n- \"Create a news card grid on charcoal (#202020) background with white headlines at 27px uppercase, body text in #7D7D7D at 16px, and a white underlined 'Read More' link that turns #3860BE on hover\"\n- \"Design a section divider using a 1px solid bottom border in #202020 on a black canvas — the elevation difference is purely through surface color shift, not shadow\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time — Lamborghini's system is extreme and every element must feel aggressive\n2. Reference specific color names and hex codes from this document — the palette has only about 5 active colors\n3. Use natural language descriptions, not CSS values — \"sharp-cut golden rectangle\" not \"border-radius: 0px; background: #FFC000\"\n4. Describe the desired \"feel\" alongside specific measurements — \"floating in total darkness\" communicates the black canvas better than \"background: #000000\"\n5. Remember that UPPERCASE IS THE DEFAULT — if text isn't uppercase at display sizes, it probably should be\n`;\n"],"mappings":";AACO,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/linear.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/presets/_briefs/linear.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const linearBrief = `# Design System Inspired by Linear\n\n## 1. Visual Theme & Atmosphere\n\nLinear's website is a masterclass in dark-mode-first product design — a near-black canvas (\\`#08090a\\`) where content emerges from darkness like starlight. The overall impression is one of extreme precision engineering: every element exists in a carefully calibrated hierarchy of luminance, from barely-visible borders (\\`rgba(255,255,255,0.05)\\`) to soft, luminous text (\\`#f7f8f8\\`). This is not a dark theme applied to a light design — it is darkness as the native medium, where information density is managed through subtle gradations of white opacity rather than color variation.\n\nThe typography system is built entirely on Inter Variable with OpenType features \\`\"cv01\"\\` and \\`\"ss03\"\\` enabled globally, giving the typeface a cleaner, more geometric character. Inter is used at a remarkable range of weights — from 300 (light body) through 510 (medium, Linear's signature weight) to 590 (semibold emphasis). The 510 weight is particularly distinctive: it sits between regular and medium, creating a subtle emphasis that doesn't shout. At display sizes (72px, 64px, 48px), Inter uses aggressive negative letter-spacing (-1.584px to -1.056px), creating compressed, authoritative headlines that feel engineered rather than designed. Berkeley Mono serves as the monospace companion for code and technical labels, with fallbacks to ui-monospace, SF Mono, and Menlo.\n\nThe color system is almost entirely achromatic — dark backgrounds with white/gray text — punctuated by a single brand accent: Linear's signature indigo-violet (\\`#5e6ad2\\` for backgrounds, \\`#7170ff\\` for interactive accents). This accent color is used sparingly and intentionally, appearing only on CTAs, active states, and brand elements. The border system uses ultra-thin, semi-transparent white borders (\\`rgba(255,255,255,0.05)\\` to \\`rgba(255,255,255,0.08)\\`) that create structure without visual noise, like wireframes drawn in moonlight.\n\n**Key Characteristics:**\n- Dark-mode-native: \\`#08090a\\` marketing background, \\`#0f1011\\` panel background, \\`#191a1b\\` elevated surfaces\n- Inter Variable with \\`\"cv01\", \"ss03\"\\` globally — geometric alternates for a cleaner aesthetic\n- Signature weight 510 (between regular and medium) for most UI text\n- Aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)\n- Brand indigo-violet: \\`#5e6ad2\\` (bg) / \\`#7170ff\\` (accent) / \\`#828fff\\` (hover) — the only chromatic color in the system\n- Semi-transparent white borders throughout: \\`rgba(255,255,255,0.05)\\` to \\`rgba(255,255,255,0.08)\\`\n- Button backgrounds at near-zero opacity: \\`rgba(255,255,255,0.02)\\` to \\`rgba(255,255,255,0.05)\\`\n- Multi-layered shadows with inset variants for depth on dark surfaces\n- Radix UI primitives as the component foundation (6 detected primitives)\n- Success green (\\`#27a644\\`, \\`#10b981\\`) used only for status indicators\n\n## 2. Color Palette & Roles\n\n### Background Surfaces\n- **Marketing Black** (\\`#010102\\` / \\`#08090a\\`): The deepest background — the canvas for hero sections and marketing pages. Near-pure black with an imperceptible blue-cool undertone.\n- **Panel Dark** (\\`#0f1011\\`): Sidebar and panel backgrounds. One step up from the marketing black.\n- **Level 3 Surface** (\\`#191a1b\\`): Elevated surface areas, card backgrounds, dropdowns.\n- **Secondary Surface** (\\`#28282c\\`): The lightest dark surface — used for hover states and slightly elevated components.\n\n### Text & Content\n- **Primary Text** (\\`#f7f8f8\\`): Near-white with a barely-warm cast. The default text color — not pure white, preventing eye strain on dark backgrounds.\n- **Secondary Text** (\\`#d0d6e0\\`): Cool silver-gray for body text, descriptions, and secondary content.\n- **Tertiary Text** (\\`#8a8f98\\`): Muted gray for placeholders, metadata, and de-emphasized content.\n- **Quaternary Text** (\\`#62666d\\`): The most subdued text — timestamps, disabled states, subtle labels.\n\n### Brand & Accent\n- **Brand Indigo** (\\`#5e6ad2\\`): Primary brand color — used for CTA button backgrounds, brand marks, and key interactive surfaces.\n- **Accent Violet** (\\`#7170ff\\`): Brighter variant for interactive elements — links, active states, selected items.\n- **Accent Hover** (\\`#828fff\\`): Lighter, more saturated variant for hover states on accent elements.\n- **Security Lavender** (\\`#7a7fad\\`): Muted indigo used specifically for security-related UI elements.\n\n### Status Colors\n- **Green** (\\`#27a644\\`): Primary success/active status. Used for \"in progress\" indicators.\n- **Emerald** (\\`#10b981\\`): Secondary success — pill badges, completion states.\n\n### Border & Divider\n- **Border Primary** (\\`#23252a\\`): Solid dark border for prominent separations.\n- **Border Secondary** (\\`#34343a\\`): Slightly lighter solid border.\n- **Border Tertiary** (\\`#3e3e44\\`): Lightest solid border variant.\n- **Border Subtle** (\\`rgba(255,255,255,0.05)\\`): Ultra-subtle semi-transparent border — the default.\n- **Border Standard** (\\`rgba(255,255,255,0.08)\\`): Standard semi-transparent border for cards, inputs, code blocks.\n- **Line Tint** (\\`#141516\\`): Nearly invisible line for the subtlest divisions.\n- **Line Tertiary** (\\`#18191a\\`): Slightly more visible divider line.\n\n### Light Mode Neutrals (for light theme contexts)\n- **Light Background** (\\`#f7f8f8\\`): Page background in light mode.\n- **Light Surface** (\\`#f3f4f5\\` / \\`#f5f6f7\\`): Subtle surface tinting.\n- **Light Border** (\\`#d0d6e0\\`): Visible border in light contexts.\n- **Light Border Alt** (\\`#e6e6e6\\`): Alternative lighter border.\n- **Pure White** (\\`#ffffff\\`): Card surfaces, highlights.\n\n### Overlay\n- **Overlay Primary** (\\`rgba(0,0,0,0.85)\\`): Modal/dialog backdrop — extremely dark for focus isolation.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: \\`Inter Variable\\`, with fallbacks: \\`SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue\\`\n- **Monospace**: \\`Berkeley Mono\\`, with fallbacks: \\`ui-monospace, SF Mono, Menlo\\`\n- **OpenType Features**: \\`\"cv01\", \"ss03\"\\` enabled globally — cv01 provides an alternate lowercase 'a' (single-story), ss03 adjusts specific letterforms for a cleaner geometric appearance.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display XL | Inter Variable | 72px (4.50rem) | 510 | 1.00 (tight) | -1.584px | Hero headlines, maximum impact |\n| Display Large | Inter Variable | 64px (4.00rem) | 510 | 1.00 (tight) | -1.408px | Secondary hero text |\n| Display | Inter Variable | 48px (3.00rem) | 510 | 1.00 (tight) | -1.056px | Section headlines |\n| Heading 1 | Inter Variable | 32px (2.00rem) | 400 | 1.13 (tight) | -0.704px | Major section titles |\n| Heading 2 | Inter Variable | 24px (1.50rem) | 400 | 1.33 | -0.288px | Sub-section headings |\n| Heading 3 | Inter Variable | 20px (1.25rem) | 590 | 1.33 | -0.24px | Feature titles, card headers |\n| Body Large | Inter Variable | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.165px | Introduction text, feature descriptions |\n| Body Emphasis | Inter Variable | 17px (1.06rem) | 590 | 1.60 (relaxed) | normal | Emphasized body, sub-headings in content |\n| Body | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |\n| Body Medium | Inter Variable | 16px (1.00rem) | 510 | 1.50 | normal | Navigation, labels |\n| Body Semibold | Inter Variable | 16px (1.00rem) | 590 | 1.50 | normal | Strong emphasis |\n| Small | Inter Variable | 15px (0.94rem) | 400 | 1.60 (relaxed) | -0.165px | Secondary body text |\n| Small Medium | Inter Variable | 15px (0.94rem) | 510 | 1.60 (relaxed) | -0.165px | Emphasized small text |\n| Small Semibold | Inter Variable | 15px (0.94rem) | 590 | 1.60 (relaxed) | -0.165px | Strong small text |\n| Small Light | Inter Variable | 15px (0.94rem) | 300 | 1.47 | -0.165px | De-emphasized body |\n| Caption Large | Inter Variable | 14px (0.88rem) | 510–590 | 1.50 | -0.182px | Sub-labels, category headers |\n| Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | Metadata, timestamps |\n| Label | Inter Variable | 12px (0.75rem) | 400–590 | 1.40 | normal | Button text, small labels |\n| Micro | Inter Variable | 11px (0.69rem) | 510 | 1.40 | normal | Tiny labels |\n| Tiny | Inter Variable | 10px (0.63rem) | 400–510 | 1.50 | -0.15px | Overline text, sometimes uppercase |\n| Link Large | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard links |\n| Link Medium | Inter Variable | 15px (0.94rem) | 510 | 2.67 | normal | Spaced navigation links |\n| Link Small | Inter Variable | 14px (0.88rem) | 510 | 1.50 | normal | Compact links |\n| Link Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | Footer, metadata links |\n| Mono Body | Berkeley Mono | 14px (0.88rem) | 400 | 1.50 | normal | Code blocks |\n| Mono Caption | Berkeley Mono | 13px (0.81rem) | 400 | 1.50 | normal | Code labels |\n| Mono Label | Berkeley Mono | 12px (0.75rem) | 400 | 1.40 | normal | Code metadata, sometimes uppercase |\n\n### Principles\n- **510 is the signature weight**: Linear uses Inter Variable's 510 weight (between regular 400 and medium 500) as its default emphasis weight. This creates a subtly bolded feel without the heaviness of traditional medium or semibold.\n- **Compression at scale**: Display sizes use progressively tighter letter-spacing — -1.584px at 72px, -1.408px at 64px, -1.056px at 48px, -0.704px at 32px. Below 24px, spacing relaxes toward normal.\n- **OpenType as identity**: \\`\"cv01\", \"ss03\"\\` aren't decorative — they transform Inter into Linear's distinctive typeface, giving it a more geometric, purposeful character.\n- **Three-tier weight system**: 400 (reading), 510 (emphasis/UI), 590 (strong emphasis). The 300 weight appears only in deliberately de-emphasized contexts.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Ghost Button (Default)**\n- Background: \\`rgba(255,255,255,0.02)\\`\n- Text: \\`#e2e4e7\\` (near-white)\n- Padding: comfortable\n- Radius: 6px\n- Border: \\`1px solid rgb(36, 40, 44)\\`\n- Outline: none\n- Focus shadow: \\`rgba(0,0,0,0.1) 0px 4px 12px\\`\n- Use: Standard actions, secondary CTAs\n\n**Subtle Button**\n- Background: \\`rgba(255,255,255,0.04)\\`\n- Text: \\`#d0d6e0\\` (silver-gray)\n- Padding: 0px 6px\n- Radius: 6px\n- Use: Toolbar actions, contextual buttons\n\n**Primary Brand Button (Inferred)**\n- Background: \\`#5e6ad2\\` (brand indigo)\n- Text: \\`#ffffff\\`\n- Padding: 8px 16px\n- Radius: 6px\n- Hover: \\`#828fff\\` shift\n- Use: Primary CTAs (\"Start building\", \"Sign up\")\n\n**Icon Button (Circle)**\n- Background: \\`rgba(255,255,255,0.03)\\` or \\`rgba(255,255,255,0.05)\\`\n- Text: \\`#f7f8f8\\` or \\`#ffffff\\`\n- Radius: 50%\n- Border: \\`1px solid rgba(255,255,255,0.08)\\`\n- Use: Close, menu toggle, icon-only actions\n\n**Pill Button**\n- Background: transparent\n- Text: \\`#d0d6e0\\`\n- Padding: 0px 10px 0px 5px\n- Radius: 9999px\n- Border: \\`1px solid rgb(35, 37, 42)\\`\n- Use: Filter chips, tags, status indicators\n\n**Small Toolbar Button**\n- Background: \\`rgba(255,255,255,0.05)\\`\n- Text: \\`#62666d\\` (muted)\n- Radius: 2px\n- Border: \\`1px solid rgba(255,255,255,0.05)\\`\n- Shadow: \\`rgba(0,0,0,0.03) 0px 1.2px 0px 0px\\`\n- Font: 12px weight 510\n- Use: Toolbar actions, quick-access controls\n\n### Cards & Containers\n- Background: \\`rgba(255,255,255,0.02)\\` to \\`rgba(255,255,255,0.05)\\` (never solid — always translucent)\n- Border: \\`1px solid rgba(255,255,255,0.08)\\` (standard) or \\`1px solid rgba(255,255,255,0.05)\\` (subtle)\n- Radius: 8px (standard), 12px (featured), 22px (large panels)\n- Shadow: \\`rgba(0,0,0,0.2) 0px 0px 0px 1px\\` or layered multi-shadow stacks\n- Hover: subtle background opacity increase\n\n### Inputs & Forms\n\n**Text Area**\n- Background: \\`rgba(255,255,255,0.02)\\`\n- Text: \\`#d0d6e0\\`\n- Border: \\`1px solid rgba(255,255,255,0.08)\\`\n- Padding: 12px 14px\n- Radius: 6px\n\n**Search Input**\n- Background: transparent\n- Text: \\`#f7f8f8\\`\n- Padding: 1px 32px (icon-aware)\n\n**Button-style Input**\n- Text: \\`#8a8f98\\`\n- Padding: 1px 6px\n- Radius: 5px\n- Focus shadow: multi-layer stack\n\n### Badges & Pills\n\n**Success Pill**\n- Background: \\`#10b981\\`\n- Text: \\`#f7f8f8\\`\n- Radius: 50% (circular)\n- Font: 10px weight 510\n- Use: Status dots, completion indicators\n\n**Neutral Pill**\n- Background: transparent\n- Text: \\`#d0d6e0\\`\n- Padding: 0px 10px 0px 5px\n- Radius: 9999px\n- Border: \\`1px solid rgb(35, 37, 42)\\`\n- Font: 12px weight 510\n- Use: Tags, filter chips, category labels\n\n**Subtle Badge**\n- Background: \\`rgba(255,255,255,0.05)\\`\n- Text: \\`#f7f8f8\\`\n- Padding: 0px 8px 0px 2px\n- Radius: 2px\n- Border: \\`1px solid rgba(255,255,255,0.05)\\`\n- Font: 10px weight 510\n- Use: Inline labels, version tags\n\n### Navigation\n- Dark sticky header on near-black background\n- Linear logomark left-aligned (SVG icon)\n- Links: Inter Variable 13–14px weight 510, \\`#d0d6e0\\` text\n- Active/hover: text lightens to \\`#f7f8f8\\`\n- CTA: Brand indigo button or ghost button\n- Mobile: hamburger collapse\n- Search: command palette trigger (\\`/\\` or \\`Cmd+K\\`)\n\n### Image Treatment\n- Product screenshots on dark backgrounds with subtle border (\\`rgba(255,255,255,0.08)\\`)\n- Top-rounded images: \\`12px 12px 0px 0px\\` radius\n- Dashboard/issue previews dominate feature sections\n- Subtle shadow beneath screenshots: \\`rgba(0,0,0,0.4) 0px 2px 4px\\`\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 4px, 7px, 8px, 11px, 12px, 16px, 19px, 20px, 22px, 24px, 28px, 32px, 35px\n- The 7px and 11px values suggest micro-adjustments for optical alignment\n- Primary rhythm: 8px, 16px, 24px, 32px (standard 8px grid)\n\n### Grid & Container\n- Max content width: approximately 1200px\n- Hero: centered single-column with generous vertical padding\n- Feature sections: 2–3 column grids for feature cards\n- Full-width dark sections with internal max-width constraints\n- Changelog: single-column timeline layout\n\n### Whitespace Philosophy\n- **Darkness as space**: On Linear's dark canvas, empty space isn't white — it's absence. The near-black background IS the whitespace, and content emerges from it.\n- **Compressed headlines, expanded surroundings**: Display text at 72px with -1.584px tracking is dense and compressed, but sits within vast dark padding. The contrast between typographic density and spatial generosity creates tension.\n- **Section isolation**: Each feature section is separated by generous vertical padding (80px+) with no visible dividers — the dark background provides natural separation.\n\n### Border Radius Scale\n- Micro (2px): Inline badges, toolbar buttons, subtle tags\n- Standard (4px): Small containers, list items\n- Comfortable (6px): Buttons, inputs, functional elements\n- Card (8px): Cards, dropdowns, popovers\n- Panel (12px): Panels, featured cards, section containers\n- Large (22px): Large panel elements\n- Full Pill (9999px): Chips, filter pills, status tags\n- Circle (50%): Icon buttons, avatars, status dots\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, \\`#010102\\` bg | Page background, deepest canvas |\n| Subtle (Level 1) | \\`rgba(0,0,0,0.03) 0px 1.2px 0px\\` | Toolbar buttons, micro-elevation |\n| Surface (Level 2) | \\`rgba(255,255,255,0.05)\\` bg + \\`1px solid rgba(255,255,255,0.08)\\` border | Cards, input fields, containers |\n| Inset (Level 2b) | \\`rgba(0,0,0,0.2) 0px 0px 12px 0px inset\\` | Recessed panels, inner shadows |\n| Ring (Level 3) | \\`rgba(0,0,0,0.2) 0px 0px 0px 1px\\` | Border-as-shadow technique |\n| Elevated (Level 4) | \\`rgba(0,0,0,0.4) 0px 2px 4px\\` | Floating elements, dropdowns |\n| Dialog (Level 5) | Multi-layer stack: \\`rgba(0,0,0,0) 0px 8px 2px, rgba(0,0,0,0.01) 0px 5px 2px, rgba(0,0,0,0.04) 0px 3px 2px, rgba(0,0,0,0.07) 0px 1px 1px, rgba(0,0,0,0.08) 0px 0px 1px\\` | Popovers, command palette, modals |\n| Focus | \\`rgba(0,0,0,0.1) 0px 4px 12px\\` + additional layers | Keyboard focus on interactive elements |\n\n**Shadow Philosophy**: On dark surfaces, traditional shadows (dark on dark) are nearly invisible. Linear solves this by using semi-transparent white borders as the primary depth indicator. Elevation isn't communicated through shadow darkness but through background luminance steps — each level slightly increases the white opacity of the surface background (\\`0.02\\` → \\`0.04\\` → \\`0.05\\`), creating a subtle stacking effect. The inset shadow technique (\\`rgba(0,0,0,0.2) 0px 0px 12px 0px inset\\`) creates a unique \"sunken\" effect for recessed panels, adding dimensional depth that traditional dark themes lack.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Inter Variable with \\`\"cv01\", \"ss03\"\\` on ALL text — these features are fundamental to Linear's typeface identity\n- Use weight 510 as your default emphasis weight — it's Linear's signature between-weight\n- Apply aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)\n- Build on near-black backgrounds: \\`#08090a\\` for marketing, \\`#0f1011\\` for panels, \\`#191a1b\\` for elevated surfaces\n- Use semi-transparent white borders (\\`rgba(255,255,255,0.05)\\` to \\`rgba(255,255,255,0.08)\\`) instead of solid dark borders\n- Keep button backgrounds nearly transparent: \\`rgba(255,255,255,0.02)\\` to \\`rgba(255,255,255,0.05)\\`\n- Reserve brand indigo (\\`#5e6ad2\\` / \\`#7170ff\\`) for primary CTAs and interactive accents only\n- Use \\`#f7f8f8\\` for primary text — not pure \\`#ffffff\\`, which would be too harsh\n- Apply the luminance stacking model: deeper = darker bg, elevated = slightly lighter bg\n\n### Don't\n- Don't use pure white (\\`#ffffff\\`) as primary text — \\`#f7f8f8\\` prevents eye strain\n- Don't use solid colored backgrounds for buttons — transparency is the system (rgba white at 0.02–0.05)\n- Don't apply the brand indigo decoratively — it's reserved for interactive/CTA elements only\n- Don't use positive letter-spacing on display text — Inter at large sizes always runs negative\n- Don't use visible/opaque borders on dark backgrounds — borders should be whisper-thin semi-transparent white\n- Don't skip the OpenType features (\\`\"cv01\", \"ss03\"\\`) — without them, it's generic Inter, not Linear's Inter\n- Don't use weight 700 (bold) — Linear's maximum weight is 590, with 510 as the workhorse\n- Don't introduce warm colors into the UI chrome — the palette is cool gray with blue-violet accent only\n- Don't use drop shadows for elevation on dark surfaces — use background luminance stepping instead\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <600px | Single column, compact padding |\n| Mobile | 600–640px | Standard mobile layout |\n| Tablet | 640–768px | Two-column grids begin |\n| Desktop Small | 768–1024px | Full card grids, expanded padding |\n| Desktop | 1024–1280px | Standard desktop, full navigation |\n| Large Desktop | >1280px | Full layout, generous margins |\n\n### Touch Targets\n- Buttons use comfortable padding with 6px radius minimum\n- Navigation links at 13–14px with adequate spacing\n- Pill tags have 10px horizontal padding for touch accessibility\n- Icon buttons at 50% radius ensure circular, easy-to-tap targets\n- Search trigger is prominently placed with generous hit area\n\n### Collapsing Strategy\n- Hero: 72px → 48px → 32px display text, tracking adjusts proportionally\n- Navigation: horizontal links + CTAs → hamburger menu at 768px\n- Feature cards: 3-column → 2-column → single column stacked\n- Product screenshots: maintain aspect ratio, may reduce padding\n- Changelog: timeline maintains single-column through all sizes\n- Footer: multi-column → stacked single column\n- Section spacing: 80px+ → 48px on mobile\n\n### Image Behavior\n- Dashboard screenshots maintain border treatment at all sizes\n- Hero visuals simplify on mobile (fewer floating UI elements)\n- Product screenshots use responsive sizing with consistent radius\n- Dark background ensures screenshots blend naturally at any viewport\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Brand Indigo (\\`#5e6ad2\\`)\n- Page Background: Marketing Black (\\`#08090a\\`)\n- Panel Background: Panel Dark (\\`#0f1011\\`)\n- Surface: Level 3 (\\`#191a1b\\`)\n- Heading text: Primary White (\\`#f7f8f8\\`)\n- Body text: Silver Gray (\\`#d0d6e0\\`)\n- Muted text: Tertiary Gray (\\`#8a8f98\\`)\n- Subtle text: Quaternary Gray (\\`#62666d\\`)\n- Accent: Violet (\\`#7170ff\\`)\n- Accent Hover: Light Violet (\\`#828fff\\`)\n- Border (default): \\`rgba(255,255,255,0.08)\\`\n- Border (subtle): \\`rgba(255,255,255,0.05)\\`\n- Focus ring: Multi-layer shadow stack\n\n### Example Component Prompts\n- \"Create a hero section on \\`#08090a\\` background. Headline at 48px Inter Variable weight 510, line-height 1.00, letter-spacing -1.056px, color \\`#f7f8f8\\`, font-feature-settings \\`'cv01', 'ss03'\\`. Subtitle at 18px weight 400, line-height 1.60, color \\`#8a8f98\\`. Brand CTA button (\\`#5e6ad2\\`, 6px radius, 8px 16px padding) and ghost button (\\`rgba(255,255,255,0.02)\\` bg, \\`1px solid rgba(255,255,255,0.08)\\` border, 6px radius).\"\n- \"Design a card on dark background: \\`rgba(255,255,255,0.02)\\` background, \\`1px solid rgba(255,255,255,0.08)\\` border, 8px radius. Title at 20px Inter Variable weight 590, letter-spacing -0.24px, color \\`#f7f8f8\\`. Body at 15px weight 400, color \\`#8a8f98\\`, letter-spacing -0.165px.\"\n- \"Build a pill badge: transparent background, \\`#d0d6e0\\` text, 9999px radius, 0px 10px padding, \\`1px solid #23252a\\` border, 12px Inter Variable weight 510.\"\n- \"Create navigation: dark sticky header on \\`#0f1011\\`. Inter Variable 13px weight 510 for links, \\`#d0d6e0\\` text. Brand indigo CTA \\`#5e6ad2\\` right-aligned with 6px radius. Bottom border: \\`1px solid rgba(255,255,255,0.05)\\`.\"\n- \"Design a command palette: \\`#191a1b\\` background, \\`1px solid rgba(255,255,255,0.08)\\` border, 12px radius, multi-layer shadow stack. Input at 16px Inter Variable weight 400, \\`#f7f8f8\\` text. Results list with 13px weight 510 labels in \\`#d0d6e0\\` and 12px metadata in \\`#62666d\\`.\"\n\n### Iteration Guide\n1. Always set font-feature-settings \\`\"cv01\", \"ss03\"\\` on all Inter text — this is non-negotiable for Linear's look\n2. Letter-spacing scales with font size: -1.584px at 72px, -1.056px at 48px, -0.704px at 32px, normal below 16px\n3. Three weights: 400 (read), 510 (emphasize/navigate), 590 (announce)\n4. Surface elevation via background opacity: \\`rgba(255,255,255, 0.02 → 0.04 → 0.05)\\` — never solid backgrounds on dark\n5. Brand indigo (\\`#5e6ad2\\` / \\`#7170ff\\`) is the only chromatic color — everything else is grayscale\n6. Borders are always semi-transparent white, never solid dark colors on dark backgrounds\n7. Berkeley Mono for any code or technical content, Inter Variable for everything else\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/linear.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\nexport const linearBrief = `# Design System Inspired by Linear\n\n## 1. Visual Theme & Atmosphere\n\nLinear's website is a masterclass in dark-mode-first product design — a near-black canvas (\\`#08090a\\`) where content emerges from darkness like starlight. The overall impression is one of extreme precision engineering: every element exists in a carefully calibrated hierarchy of luminance, from barely-visible borders (\\`rgba(255,255,255,0.05)\\`) to soft, luminous text (\\`#f7f8f8\\`). This is not a dark theme applied to a light design — it is darkness as the native medium, where information density is managed through subtle gradations of white opacity rather than color variation.\n\nThe typography system is built entirely on Inter Variable with OpenType features \\`\"cv01\"\\` and \\`\"ss03\"\\` enabled globally, giving the typeface a cleaner, more geometric character. Inter is used at a remarkable range of weights — from 300 (light body) through 510 (medium, Linear's signature weight) to 590 (semibold emphasis). The 510 weight is particularly distinctive: it sits between regular and medium, creating a subtle emphasis that doesn't shout. At display sizes (72px, 64px, 48px), Inter uses aggressive negative letter-spacing (-1.584px to -1.056px), creating compressed, authoritative headlines that feel engineered rather than designed. Berkeley Mono serves as the monospace companion for code and technical labels, with fallbacks to ui-monospace, SF Mono, and Menlo.\n\nThe color system is almost entirely achromatic — dark backgrounds with white/gray text — punctuated by a single brand accent: Linear's signature indigo-violet (\\`#5e6ad2\\` for backgrounds, \\`#7170ff\\` for interactive accents). This accent color is used sparingly and intentionally, appearing only on CTAs, active states, and brand elements. The border system uses ultra-thin, semi-transparent white borders (\\`rgba(255,255,255,0.05)\\` to \\`rgba(255,255,255,0.08)\\`) that create structure without visual noise, like wireframes drawn in moonlight.\n\n**Key Characteristics:**\n- Dark-mode-native: \\`#08090a\\` marketing background, \\`#0f1011\\` panel background, \\`#191a1b\\` elevated surfaces\n- Inter Variable with \\`\"cv01\", \"ss03\"\\` globally — geometric alternates for a cleaner aesthetic\n- Signature weight 510 (between regular and medium) for most UI text\n- Aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)\n- Brand indigo-violet: \\`#5e6ad2\\` (bg) / \\`#7170ff\\` (accent) / \\`#828fff\\` (hover) — the only chromatic color in the system\n- Semi-transparent white borders throughout: \\`rgba(255,255,255,0.05)\\` to \\`rgba(255,255,255,0.08)\\`\n- Button backgrounds at near-zero opacity: \\`rgba(255,255,255,0.02)\\` to \\`rgba(255,255,255,0.05)\\`\n- Multi-layered shadows with inset variants for depth on dark surfaces\n- Radix UI primitives as the component foundation (6 detected primitives)\n- Success green (\\`#27a644\\`, \\`#10b981\\`) used only for status indicators\n\n## 2. Color Palette & Roles\n\n### Background Surfaces\n- **Marketing Black** (\\`#010102\\` / \\`#08090a\\`): The deepest background — the canvas for hero sections and marketing pages. Near-pure black with an imperceptible blue-cool undertone.\n- **Panel Dark** (\\`#0f1011\\`): Sidebar and panel backgrounds. One step up from the marketing black.\n- **Level 3 Surface** (\\`#191a1b\\`): Elevated surface areas, card backgrounds, dropdowns.\n- **Secondary Surface** (\\`#28282c\\`): The lightest dark surface — used for hover states and slightly elevated components.\n\n### Text & Content\n- **Primary Text** (\\`#f7f8f8\\`): Near-white with a barely-warm cast. The default text color — not pure white, preventing eye strain on dark backgrounds.\n- **Secondary Text** (\\`#d0d6e0\\`): Cool silver-gray for body text, descriptions, and secondary content.\n- **Tertiary Text** (\\`#8a8f98\\`): Muted gray for placeholders, metadata, and de-emphasized content.\n- **Quaternary Text** (\\`#62666d\\`): The most subdued text — timestamps, disabled states, subtle labels.\n\n### Brand & Accent\n- **Brand Indigo** (\\`#5e6ad2\\`): Primary brand color — used for CTA button backgrounds, brand marks, and key interactive surfaces.\n- **Accent Violet** (\\`#7170ff\\`): Brighter variant for interactive elements — links, active states, selected items.\n- **Accent Hover** (\\`#828fff\\`): Lighter, more saturated variant for hover states on accent elements.\n- **Security Lavender** (\\`#7a7fad\\`): Muted indigo used specifically for security-related UI elements.\n\n### Status Colors\n- **Green** (\\`#27a644\\`): Primary success/active status. Used for \"in progress\" indicators.\n- **Emerald** (\\`#10b981\\`): Secondary success — pill badges, completion states.\n\n### Border & Divider\n- **Border Primary** (\\`#23252a\\`): Solid dark border for prominent separations.\n- **Border Secondary** (\\`#34343a\\`): Slightly lighter solid border.\n- **Border Tertiary** (\\`#3e3e44\\`): Lightest solid border variant.\n- **Border Subtle** (\\`rgba(255,255,255,0.05)\\`): Ultra-subtle semi-transparent border — the default.\n- **Border Standard** (\\`rgba(255,255,255,0.08)\\`): Standard semi-transparent border for cards, inputs, code blocks.\n- **Line Tint** (\\`#141516\\`): Nearly invisible line for the subtlest divisions.\n- **Line Tertiary** (\\`#18191a\\`): Slightly more visible divider line.\n\n### Light Mode Neutrals (for light theme contexts)\n- **Light Background** (\\`#f7f8f8\\`): Page background in light mode.\n- **Light Surface** (\\`#f3f4f5\\` / \\`#f5f6f7\\`): Subtle surface tinting.\n- **Light Border** (\\`#d0d6e0\\`): Visible border in light contexts.\n- **Light Border Alt** (\\`#e6e6e6\\`): Alternative lighter border.\n- **Pure White** (\\`#ffffff\\`): Card surfaces, highlights.\n\n### Overlay\n- **Overlay Primary** (\\`rgba(0,0,0,0.85)\\`): Modal/dialog backdrop — extremely dark for focus isolation.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: \\`Inter Variable\\`, with fallbacks: \\`SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue\\`\n- **Monospace**: \\`Berkeley Mono\\`, with fallbacks: \\`ui-monospace, SF Mono, Menlo\\`\n- **OpenType Features**: \\`\"cv01\", \"ss03\"\\` enabled globally — cv01 provides an alternate lowercase 'a' (single-story), ss03 adjusts specific letterforms for a cleaner geometric appearance.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display XL | Inter Variable | 72px (4.50rem) | 510 | 1.00 (tight) | -1.584px | Hero headlines, maximum impact |\n| Display Large | Inter Variable | 64px (4.00rem) | 510 | 1.00 (tight) | -1.408px | Secondary hero text |\n| Display | Inter Variable | 48px (3.00rem) | 510 | 1.00 (tight) | -1.056px | Section headlines |\n| Heading 1 | Inter Variable | 32px (2.00rem) | 400 | 1.13 (tight) | -0.704px | Major section titles |\n| Heading 2 | Inter Variable | 24px (1.50rem) | 400 | 1.33 | -0.288px | Sub-section headings |\n| Heading 3 | Inter Variable | 20px (1.25rem) | 590 | 1.33 | -0.24px | Feature titles, card headers |\n| Body Large | Inter Variable | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.165px | Introduction text, feature descriptions |\n| Body Emphasis | Inter Variable | 17px (1.06rem) | 590 | 1.60 (relaxed) | normal | Emphasized body, sub-headings in content |\n| Body | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |\n| Body Medium | Inter Variable | 16px (1.00rem) | 510 | 1.50 | normal | Navigation, labels |\n| Body Semibold | Inter Variable | 16px (1.00rem) | 590 | 1.50 | normal | Strong emphasis |\n| Small | Inter Variable | 15px (0.94rem) | 400 | 1.60 (relaxed) | -0.165px | Secondary body text |\n| Small Medium | Inter Variable | 15px (0.94rem) | 510 | 1.60 (relaxed) | -0.165px | Emphasized small text |\n| Small Semibold | Inter Variable | 15px (0.94rem) | 590 | 1.60 (relaxed) | -0.165px | Strong small text |\n| Small Light | Inter Variable | 15px (0.94rem) | 300 | 1.47 | -0.165px | De-emphasized body |\n| Caption Large | Inter Variable | 14px (0.88rem) | 510–590 | 1.50 | -0.182px | Sub-labels, category headers |\n| Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | Metadata, timestamps |\n| Label | Inter Variable | 12px (0.75rem) | 400–590 | 1.40 | normal | Button text, small labels |\n| Micro | Inter Variable | 11px (0.69rem) | 510 | 1.40 | normal | Tiny labels |\n| Tiny | Inter Variable | 10px (0.63rem) | 400–510 | 1.50 | -0.15px | Overline text, sometimes uppercase |\n| Link Large | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard links |\n| Link Medium | Inter Variable | 15px (0.94rem) | 510 | 2.67 | normal | Spaced navigation links |\n| Link Small | Inter Variable | 14px (0.88rem) | 510 | 1.50 | normal | Compact links |\n| Link Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | Footer, metadata links |\n| Mono Body | Berkeley Mono | 14px (0.88rem) | 400 | 1.50 | normal | Code blocks |\n| Mono Caption | Berkeley Mono | 13px (0.81rem) | 400 | 1.50 | normal | Code labels |\n| Mono Label | Berkeley Mono | 12px (0.75rem) | 400 | 1.40 | normal | Code metadata, sometimes uppercase |\n\n### Principles\n- **510 is the signature weight**: Linear uses Inter Variable's 510 weight (between regular 400 and medium 500) as its default emphasis weight. This creates a subtly bolded feel without the heaviness of traditional medium or semibold.\n- **Compression at scale**: Display sizes use progressively tighter letter-spacing — -1.584px at 72px, -1.408px at 64px, -1.056px at 48px, -0.704px at 32px. Below 24px, spacing relaxes toward normal.\n- **OpenType as identity**: \\`\"cv01\", \"ss03\"\\` aren't decorative — they transform Inter into Linear's distinctive typeface, giving it a more geometric, purposeful character.\n- **Three-tier weight system**: 400 (reading), 510 (emphasis/UI), 590 (strong emphasis). The 300 weight appears only in deliberately de-emphasized contexts.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Ghost Button (Default)**\n- Background: \\`rgba(255,255,255,0.02)\\`\n- Text: \\`#e2e4e7\\` (near-white)\n- Padding: comfortable\n- Radius: 6px\n- Border: \\`1px solid rgb(36, 40, 44)\\`\n- Outline: none\n- Focus shadow: \\`rgba(0,0,0,0.1) 0px 4px 12px\\`\n- Use: Standard actions, secondary CTAs\n\n**Subtle Button**\n- Background: \\`rgba(255,255,255,0.04)\\`\n- Text: \\`#d0d6e0\\` (silver-gray)\n- Padding: 0px 6px\n- Radius: 6px\n- Use: Toolbar actions, contextual buttons\n\n**Primary Brand Button (Inferred)**\n- Background: \\`#5e6ad2\\` (brand indigo)\n- Text: \\`#ffffff\\`\n- Padding: 8px 16px\n- Radius: 6px\n- Hover: \\`#828fff\\` shift\n- Use: Primary CTAs (\"Start building\", \"Sign up\")\n\n**Icon Button (Circle)**\n- Background: \\`rgba(255,255,255,0.03)\\` or \\`rgba(255,255,255,0.05)\\`\n- Text: \\`#f7f8f8\\` or \\`#ffffff\\`\n- Radius: 50%\n- Border: \\`1px solid rgba(255,255,255,0.08)\\`\n- Use: Close, menu toggle, icon-only actions\n\n**Pill Button**\n- Background: transparent\n- Text: \\`#d0d6e0\\`\n- Padding: 0px 10px 0px 5px\n- Radius: 9999px\n- Border: \\`1px solid rgb(35, 37, 42)\\`\n- Use: Filter chips, tags, status indicators\n\n**Small Toolbar Button**\n- Background: \\`rgba(255,255,255,0.05)\\`\n- Text: \\`#62666d\\` (muted)\n- Radius: 2px\n- Border: \\`1px solid rgba(255,255,255,0.05)\\`\n- Shadow: \\`rgba(0,0,0,0.03) 0px 1.2px 0px 0px\\`\n- Font: 12px weight 510\n- Use: Toolbar actions, quick-access controls\n\n### Cards & Containers\n- Background: \\`rgba(255,255,255,0.02)\\` to \\`rgba(255,255,255,0.05)\\` (never solid — always translucent)\n- Border: \\`1px solid rgba(255,255,255,0.08)\\` (standard) or \\`1px solid rgba(255,255,255,0.05)\\` (subtle)\n- Radius: 8px (standard), 12px (featured), 22px (large panels)\n- Shadow: \\`rgba(0,0,0,0.2) 0px 0px 0px 1px\\` or layered multi-shadow stacks\n- Hover: subtle background opacity increase\n\n### Inputs & Forms\n\n**Text Area**\n- Background: \\`rgba(255,255,255,0.02)\\`\n- Text: \\`#d0d6e0\\`\n- Border: \\`1px solid rgba(255,255,255,0.08)\\`\n- Padding: 12px 14px\n- Radius: 6px\n\n**Search Input**\n- Background: transparent\n- Text: \\`#f7f8f8\\`\n- Padding: 1px 32px (icon-aware)\n\n**Button-style Input**\n- Text: \\`#8a8f98\\`\n- Padding: 1px 6px\n- Radius: 5px\n- Focus shadow: multi-layer stack\n\n### Badges & Pills\n\n**Success Pill**\n- Background: \\`#10b981\\`\n- Text: \\`#f7f8f8\\`\n- Radius: 50% (circular)\n- Font: 10px weight 510\n- Use: Status dots, completion indicators\n\n**Neutral Pill**\n- Background: transparent\n- Text: \\`#d0d6e0\\`\n- Padding: 0px 10px 0px 5px\n- Radius: 9999px\n- Border: \\`1px solid rgb(35, 37, 42)\\`\n- Font: 12px weight 510\n- Use: Tags, filter chips, category labels\n\n**Subtle Badge**\n- Background: \\`rgba(255,255,255,0.05)\\`\n- Text: \\`#f7f8f8\\`\n- Padding: 0px 8px 0px 2px\n- Radius: 2px\n- Border: \\`1px solid rgba(255,255,255,0.05)\\`\n- Font: 10px weight 510\n- Use: Inline labels, version tags\n\n### Navigation\n- Dark sticky header on near-black background\n- Linear logomark left-aligned (SVG icon)\n- Links: Inter Variable 13–14px weight 510, \\`#d0d6e0\\` text\n- Active/hover: text lightens to \\`#f7f8f8\\`\n- CTA: Brand indigo button or ghost button\n- Mobile: hamburger collapse\n- Search: command palette trigger (\\`/\\` or \\`Cmd+K\\`)\n\n### Image Treatment\n- Product screenshots on dark backgrounds with subtle border (\\`rgba(255,255,255,0.08)\\`)\n- Top-rounded images: \\`12px 12px 0px 0px\\` radius\n- Dashboard/issue previews dominate feature sections\n- Subtle shadow beneath screenshots: \\`rgba(0,0,0,0.4) 0px 2px 4px\\`\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 4px, 7px, 8px, 11px, 12px, 16px, 19px, 20px, 22px, 24px, 28px, 32px, 35px\n- The 7px and 11px values suggest micro-adjustments for optical alignment\n- Primary rhythm: 8px, 16px, 24px, 32px (standard 8px grid)\n\n### Grid & Container\n- Max content width: approximately 1200px\n- Hero: centered single-column with generous vertical padding\n- Feature sections: 2–3 column grids for feature cards\n- Full-width dark sections with internal max-width constraints\n- Changelog: single-column timeline layout\n\n### Whitespace Philosophy\n- **Darkness as space**: On Linear's dark canvas, empty space isn't white — it's absence. The near-black background IS the whitespace, and content emerges from it.\n- **Compressed headlines, expanded surroundings**: Display text at 72px with -1.584px tracking is dense and compressed, but sits within vast dark padding. The contrast between typographic density and spatial generosity creates tension.\n- **Section isolation**: Each feature section is separated by generous vertical padding (80px+) with no visible dividers — the dark background provides natural separation.\n\n### Border Radius Scale\n- Micro (2px): Inline badges, toolbar buttons, subtle tags\n- Standard (4px): Small containers, list items\n- Comfortable (6px): Buttons, inputs, functional elements\n- Card (8px): Cards, dropdowns, popovers\n- Panel (12px): Panels, featured cards, section containers\n- Large (22px): Large panel elements\n- Full Pill (9999px): Chips, filter pills, status tags\n- Circle (50%): Icon buttons, avatars, status dots\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, \\`#010102\\` bg | Page background, deepest canvas |\n| Subtle (Level 1) | \\`rgba(0,0,0,0.03) 0px 1.2px 0px\\` | Toolbar buttons, micro-elevation |\n| Surface (Level 2) | \\`rgba(255,255,255,0.05)\\` bg + \\`1px solid rgba(255,255,255,0.08)\\` border | Cards, input fields, containers |\n| Inset (Level 2b) | \\`rgba(0,0,0,0.2) 0px 0px 12px 0px inset\\` | Recessed panels, inner shadows |\n| Ring (Level 3) | \\`rgba(0,0,0,0.2) 0px 0px 0px 1px\\` | Border-as-shadow technique |\n| Elevated (Level 4) | \\`rgba(0,0,0,0.4) 0px 2px 4px\\` | Floating elements, dropdowns |\n| Dialog (Level 5) | Multi-layer stack: \\`rgba(0,0,0,0) 0px 8px 2px, rgba(0,0,0,0.01) 0px 5px 2px, rgba(0,0,0,0.04) 0px 3px 2px, rgba(0,0,0,0.07) 0px 1px 1px, rgba(0,0,0,0.08) 0px 0px 1px\\` | Popovers, command palette, modals |\n| Focus | \\`rgba(0,0,0,0.1) 0px 4px 12px\\` + additional layers | Keyboard focus on interactive elements |\n\n**Shadow Philosophy**: On dark surfaces, traditional shadows (dark on dark) are nearly invisible. Linear solves this by using semi-transparent white borders as the primary depth indicator. Elevation isn't communicated through shadow darkness but through background luminance steps — each level slightly increases the white opacity of the surface background (\\`0.02\\` → \\`0.04\\` → \\`0.05\\`), creating a subtle stacking effect. The inset shadow technique (\\`rgba(0,0,0,0.2) 0px 0px 12px 0px inset\\`) creates a unique \"sunken\" effect for recessed panels, adding dimensional depth that traditional dark themes lack.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Inter Variable with \\`\"cv01\", \"ss03\"\\` on ALL text — these features are fundamental to Linear's typeface identity\n- Use weight 510 as your default emphasis weight — it's Linear's signature between-weight\n- Apply aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)\n- Build on near-black backgrounds: \\`#08090a\\` for marketing, \\`#0f1011\\` for panels, \\`#191a1b\\` for elevated surfaces\n- Use semi-transparent white borders (\\`rgba(255,255,255,0.05)\\` to \\`rgba(255,255,255,0.08)\\`) instead of solid dark borders\n- Keep button backgrounds nearly transparent: \\`rgba(255,255,255,0.02)\\` to \\`rgba(255,255,255,0.05)\\`\n- Reserve brand indigo (\\`#5e6ad2\\` / \\`#7170ff\\`) for primary CTAs and interactive accents only\n- Use \\`#f7f8f8\\` for primary text — not pure \\`#ffffff\\`, which would be too harsh\n- Apply the luminance stacking model: deeper = darker bg, elevated = slightly lighter bg\n\n### Don't\n- Don't use pure white (\\`#ffffff\\`) as primary text — \\`#f7f8f8\\` prevents eye strain\n- Don't use solid colored backgrounds for buttons — transparency is the system (rgba white at 0.02–0.05)\n- Don't apply the brand indigo decoratively — it's reserved for interactive/CTA elements only\n- Don't use positive letter-spacing on display text — Inter at large sizes always runs negative\n- Don't use visible/opaque borders on dark backgrounds — borders should be whisper-thin semi-transparent white\n- Don't skip the OpenType features (\\`\"cv01\", \"ss03\"\\`) — without them, it's generic Inter, not Linear's Inter\n- Don't use weight 700 (bold) — Linear's maximum weight is 590, with 510 as the workhorse\n- Don't introduce warm colors into the UI chrome — the palette is cool gray with blue-violet accent only\n- Don't use drop shadows for elevation on dark surfaces — use background luminance stepping instead\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <600px | Single column, compact padding |\n| Mobile | 600–640px | Standard mobile layout |\n| Tablet | 640–768px | Two-column grids begin |\n| Desktop Small | 768–1024px | Full card grids, expanded padding |\n| Desktop | 1024–1280px | Standard desktop, full navigation |\n| Large Desktop | >1280px | Full layout, generous margins |\n\n### Touch Targets\n- Buttons use comfortable padding with 6px radius minimum\n- Navigation links at 13–14px with adequate spacing\n- Pill tags have 10px horizontal padding for touch accessibility\n- Icon buttons at 50% radius ensure circular, easy-to-tap targets\n- Search trigger is prominently placed with generous hit area\n\n### Collapsing Strategy\n- Hero: 72px → 48px → 32px display text, tracking adjusts proportionally\n- Navigation: horizontal links + CTAs → hamburger menu at 768px\n- Feature cards: 3-column → 2-column → single column stacked\n- Product screenshots: maintain aspect ratio, may reduce padding\n- Changelog: timeline maintains single-column through all sizes\n- Footer: multi-column → stacked single column\n- Section spacing: 80px+ → 48px on mobile\n\n### Image Behavior\n- Dashboard screenshots maintain border treatment at all sizes\n- Hero visuals simplify on mobile (fewer floating UI elements)\n- Product screenshots use responsive sizing with consistent radius\n- Dark background ensures screenshots blend naturally at any viewport\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Brand Indigo (\\`#5e6ad2\\`)\n- Page Background: Marketing Black (\\`#08090a\\`)\n- Panel Background: Panel Dark (\\`#0f1011\\`)\n- Surface: Level 3 (\\`#191a1b\\`)\n- Heading text: Primary White (\\`#f7f8f8\\`)\n- Body text: Silver Gray (\\`#d0d6e0\\`)\n- Muted text: Tertiary Gray (\\`#8a8f98\\`)\n- Subtle text: Quaternary Gray (\\`#62666d\\`)\n- Accent: Violet (\\`#7170ff\\`)\n- Accent Hover: Light Violet (\\`#828fff\\`)\n- Border (default): \\`rgba(255,255,255,0.08)\\`\n- Border (subtle): \\`rgba(255,255,255,0.05)\\`\n- Focus ring: Multi-layer shadow stack\n\n### Example Component Prompts\n- \"Create a hero section on \\`#08090a\\` background. Headline at 48px Inter Variable weight 510, line-height 1.00, letter-spacing -1.056px, color \\`#f7f8f8\\`, font-feature-settings \\`'cv01', 'ss03'\\`. Subtitle at 18px weight 400, line-height 1.60, color \\`#8a8f98\\`. Brand CTA button (\\`#5e6ad2\\`, 6px radius, 8px 16px padding) and ghost button (\\`rgba(255,255,255,0.02)\\` bg, \\`1px solid rgba(255,255,255,0.08)\\` border, 6px radius).\"\n- \"Design a card on dark background: \\`rgba(255,255,255,0.02)\\` background, \\`1px solid rgba(255,255,255,0.08)\\` border, 8px radius. Title at 20px Inter Variable weight 590, letter-spacing -0.24px, color \\`#f7f8f8\\`. Body at 15px weight 400, color \\`#8a8f98\\`, letter-spacing -0.165px.\"\n- \"Build a pill badge: transparent background, \\`#d0d6e0\\` text, 9999px radius, 0px 10px padding, \\`1px solid #23252a\\` border, 12px Inter Variable weight 510.\"\n- \"Create navigation: dark sticky header on \\`#0f1011\\`. Inter Variable 13px weight 510 for links, \\`#d0d6e0\\` text. Brand indigo CTA \\`#5e6ad2\\` right-aligned with 6px radius. Bottom border: \\`1px solid rgba(255,255,255,0.05)\\`.\"\n- \"Design a command palette: \\`#191a1b\\` background, \\`1px solid rgba(255,255,255,0.08)\\` border, 12px radius, multi-layer shadow stack. Input at 16px Inter Variable weight 400, \\`#f7f8f8\\` text. Results list with 13px weight 510 labels in \\`#d0d6e0\\` and 12px metadata in \\`#62666d\\`.\"\n\n### Iteration Guide\n1. Always set font-feature-settings \\`\"cv01\", \"ss03\"\\` on all Inter text — this is non-negotiable for Linear's look\n2. Letter-spacing scales with font size: -1.584px at 72px, -1.056px at 48px, -0.704px at 32px, normal below 16px\n3. Three weights: 400 (read), 510 (emphasize/navigate), 590 (announce)\n4. Surface elevation via background opacity: \\`rgba(255,255,255, 0.02 → 0.04 → 0.05)\\` — never solid backgrounds on dark\n5. Brand indigo (\\`#5e6ad2\\` / \\`#7170ff\\`) is the only chromatic color — everything else is grayscale\n6. Borders are always semi-transparent white, never solid dark colors on dark backgrounds\n7. Berkeley Mono for any code or technical content, Inter Variable for everything else\n`;\n"],"mappings":";AACO,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

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

@@ -1 +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":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/lovable.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\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.js.map

@@ -1 +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":[]}
+{"version":3,"sources":["../../../src/presets/_briefs/mastercard.ts"],"sourcesContent":["// Originally generated from voltagent/awesome-design-md (MIT) and hand-curated since.\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.js.map

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