@hex-core/themes 0.1.1 → 0.2.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/opencode.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const opencodeBrief = `# Design System Inspired by OpenCode\n\n## 1. Visual Theme & Atmosphere\n\nOpenCode's website embodies a terminal-native, monospace-first aesthetic that reflects its identity as an open source AI coding agent. The entire visual system is built on a stark dark-on-light contrast using a near-black background (\\`#201d1d\\`) with warm off-white text (\\`#fdfcfc\\`). This isn't a generic dark theme -- it's a warm, slightly reddish-brown dark that feels like a sophisticated terminal emulator rather than a cold IDE. The warm undertone in both the darks and lights (notice the subtle red channel in \\`#201d1d\\` -- rgb(32, 29, 29)) creates a cohesive, lived-in quality.\n\nBerkeley Mono is the sole typeface, establishing an unapologetic monospace identity. Every element -- headings, body text, buttons, navigation -- shares this single font family, creating a unified \"everything is code\" philosophy. The heading at 38px bold with 1.50 line-height is generous and readable, while body text at 16px with weight 500 provides a slightly heavier-than-normal reading weight that enhances legibility on screen. The monospace grid naturally enforces alignment and rhythm across the layout.\n\nThe color system is deliberately minimal. The primary palette consists of just three functional tones: the warm near-black (\\`#201d1d\\`), a medium warm gray (\\`#9a9898\\`), and a bright off-white (\\`#fdfcfc\\`). Semantic colors borrow from the Apple HIG palette -- blue accent (\\`#007aff\\`), red danger (\\`#ff3b30\\`), green success (\\`#30d158\\`), orange warning (\\`#ff9f0a\\`) -- giving the interface familiar, trustworthy signal colors without adding brand complexity. Borders use a subtle warm transparency (\\`rgba(15, 0, 0, 0.12)\\`) that ties into the warm undertone of the entire system.\n\n**Key Characteristics:**\n- Berkeley Mono as the sole typeface -- monospace everywhere, no sans-serif or serif voices\n- Warm near-black primary (\\`#201d1d\\`) with reddish-brown undertone, not pure black\n- Off-white text (\\`#fdfcfc\\`) with warm tint, not pure white\n- Minimal 4px border radius throughout -- sharp, utilitarian corners\n- 8px base spacing system scaling up to 96px\n- Apple HIG-inspired semantic colors (blue, red, green, orange)\n- Transparent warm borders using \\`rgba(15, 0, 0, 0.12)\\`\n- Email input with generous 20px padding and 6px radius -- the most generous component radius\n- Single button variant: dark background, light text, tight vertical padding (4px 20px)\n- Underlined links as default link style, reinforcing the text-centric identity\n\n## 2. Color Palette & Roles\n\n### Primary\n- **OpenCode Dark** (\\`#201d1d\\`): Primary background, button fills, link text. A warm near-black with subtle reddish-brown warmth -- rgb(32, 29, 29).\n- **OpenCode Light** (\\`#fdfcfc\\`): Primary text on dark surfaces, button text. A barely-warm off-white that avoids clinical pure white.\n- **Mid Gray** (\\`#9a9898\\`): Secondary text, muted links. A neutral warm gray that bridges dark and light.\n\n### Secondary\n- **Dark Surface** (\\`#302c2c\\`): Slightly lighter than primary dark, used for elevated surfaces and subtle differentiation.\n- **Border Gray** (\\`#646262\\`): Stronger borders, outline rings on interactive elements.\n- **Light Surface** (\\`#f1eeee\\`): Light mode surface, subtle background variation.\n\n### Accent\n- **Accent Blue** (\\`#007aff\\`): Primary accent, links, interactive highlights. Apple system blue.\n- **Accent Blue Hover** (\\`#0056b3\\`): Darker blue for hover states.\n- **Accent Blue Active** (\\`#004085\\`): Deepest blue for pressed/active states.\n\n### Semantic\n- **Danger Red** (\\`#ff3b30\\`): Error states, destructive actions. Apple system red.\n- **Danger Hover** (\\`#d70015\\`): Darker red for hover on danger elements.\n- **Danger Active** (\\`#a50011\\`): Deepest red for pressed danger states.\n- **Success Green** (\\`#30d158\\`): Success states, positive feedback. Apple system green.\n- **Warning Orange** (\\`#ff9f0a\\`): Warning states, caution signals. Apple system orange.\n- **Warning Hover** (\\`#cc7f08\\`): Darker orange for hover on warning elements.\n- **Warning Active** (\\`#995f06\\`): Deepest orange for pressed warning states.\n\n### Text Scale\n- **Text Muted** (\\`#6e6e73\\`): Muted labels, disabled text, placeholder content.\n- **Text Secondary** (\\`#424245\\`): Secondary text on light backgrounds, captions.\n\n### Border\n- **Border Warm** (\\`rgba(15, 0, 0, 0.12)\\`): Primary border color, warm transparent black with red tint.\n- **Border Tab** (\\`#9a9898\\`): Tab underline border, 2px solid bottom.\n- **Border Outline** (\\`#646262\\`): 1px solid outline border for containers.\n\n## 3. Typography Rules\n\n### Font Family\n- **Universal**: \\`Berkeley Mono\\`, with fallbacks: \\`IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace\\`\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Notes |\n|------|------|--------|-------------|-------|\n| Heading 1 | 38px (2.38rem) | 700 | 1.50 | Hero headlines, page titles |\n| Heading 2 | 16px (1.00rem) | 700 | 1.50 | Section titles, bold emphasis |\n| Body | 16px (1.00rem) | 400 | 1.50 | Standard body text, paragraphs |\n| Body Medium | 16px (1.00rem) | 500 | 1.50 | Links, button text, nav items |\n| Body Tight | 16px (1.00rem) | 500 | 1.00 (tight) | Compact labels, tab items |\n| Caption | 14px (0.88rem) | 400 | 2.00 (relaxed) | Footnotes, metadata, small labels |\n\n### Principles\n- **One font, one voice**: Berkeley Mono is used exclusively. There is no typographic variation between display, body, and code -- everything speaks in the same monospace register. Hierarchy is achieved through size and weight alone.\n- **Weight as hierarchy**: 700 for headings, 500 for interactive/medium emphasis, 400 for body text. Three weight levels create the entire hierarchy.\n- **Generous line-height**: 1.50 as the standard line-height gives text room to breathe within the monospace grid. The relaxed 2.00 line-height on captions creates clear visual separation.\n- **Tight for interaction**: Interactive elements (tabs, compact labels) use 1.00 line-height for dense, clickable targets.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (Dark Fill)**\n- Background: \\`#201d1d\\` (OpenCode Dark)\n- Text: \\`#fdfcfc\\` (OpenCode Light)\n- Padding: 4px 20px\n- Radius: 4px\n- Font: 16px Berkeley Mono, weight 500, line-height 2.00 (relaxed)\n- Outline: \\`rgb(253, 252, 252) none 0px\\`\n- Use: Primary CTAs, main actions\n\n### Inputs\n\n**Email Input**\n- Background: \\`#f8f7f7\\` (light neutral)\n- Text: \\`#201d1d\\`\n- Border: \\`1px solid rgba(15, 0, 0, 0.12)\\`\n- Padding: 20px\n- Radius: 6px\n- Font: Berkeley Mono, standard size\n- Use: Form fields, email capture\n\n### Links\n\n**Default Link**\n- Color: \\`#201d1d\\`\n- Decoration: underline 1px\n- Font-weight: 500\n- Use: Primary text links in body content\n\n**Light Link**\n- Color: \\`#fdfcfc\\`\n- Decoration: none\n- Use: Links on dark backgrounds, navigation\n\n**Muted Link**\n- Color: \\`#9a9898\\`\n- Decoration: none\n- Use: Footer links, secondary navigation\n\n### Tabs\n\n**Tab Navigation**\n- Border-bottom: \\`2px solid #9a9898\\` (active tab indicator)\n- Font: 16px, weight 500, line-height 1.00\n- Use: Section switching, content filtering\n\n### Navigation\n- Clean horizontal layout with Berkeley Mono throughout\n- Brand logotype left-aligned in monospace\n- Links at 16px weight 500 with underline decoration\n- Dark background matching page background\n- No backdrop blur or transparency -- solid surfaces only\n\n### Image Treatment\n- Terminal/code screenshots as hero imagery\n- Dark terminal aesthetic with monospace type\n- Minimal borders, content speaks for itself\n\n### Distinctive Components\n\n**Terminal Hero**\n- Full-width dark terminal window as hero element\n- ASCII art / stylized logo within terminal frame\n- Monospace command examples with syntax highlighting\n- Reinforces the CLI-first identity of the product\n\n**Feature List**\n- Bulleted feature items with Berkeley Mono text\n- Weight 500 for feature names, 400 for descriptions\n- Tight vertical spacing between items\n- No cards or borders -- pure text layout\n\n**Email Capture**\n- Light background input (\\`#f8f7f7\\`) contrasting dark page\n- Generous 20px padding for comfortable typing\n- 6px radius -- the roundest element in the system\n- Newsletter/waitlist pattern\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Fine scale: 1px, 2px, 4px (sub-8px for borders and micro-adjustments)\n- Standard scale: 8px, 12px, 16px, 20px, 24px\n- Extended scale: 32px, 40px, 48px, 64px, 80px, 96px\n- The system follows a clean 4/8px grid with consistent doubling\n\n### Grid & Container\n- Max content width: approximately 800-900px (narrow, reading-optimized)\n- Single-column layout as the primary pattern\n- Centered content with generous horizontal margins\n- Hero section: full-width dark terminal element\n- Feature sections: single-column text blocks\n- Footer: multi-column link grid\n\n### Whitespace Philosophy\n- **Monospace rhythm**: The fixed-width nature of Berkeley Mono creates a natural vertical grid. Line-heights of 1.50 and 2.00 maintain consistent rhythm.\n- **Narrow and focused**: Content is constrained to a narrow column, creating generous side margins that focus attention on the text.\n- **Sections through spacing**: No decorative dividers. Sections are separated by generous vertical spacing (48-96px) rather than borders or background changes.\n\n### Border Radius Scale\n- Micro (4px): Default for all elements -- buttons, containers, badges\n- Input (6px): Form inputs get slightly more roundness\n- The entire system uses just two radius values, reinforcing the utilitarian aesthetic\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Default state for most elements |\n| Border Subtle (Level 1) | \\`1px solid rgba(15, 0, 0, 0.12)\\` | Section dividers, input borders, horizontal rules |\n| Border Tab (Level 2) | \\`2px solid #9a9898\\` bottom only | Active tab indicator |\n| Border Outline (Level 3) | \\`1px solid #646262\\` | Container outlines, elevated elements |\n\n**Shadow Philosophy**: OpenCode's depth system is intentionally flat. There are no box-shadows in the extracted tokens -- zero shadow values were detected. Depth is communicated exclusively through border treatments and background color shifts. This flatness is consistent with the terminal aesthetic: terminals don't have shadows, and neither does OpenCode. The three border levels (transparent warm, tab indicator, solid outline) create sufficient visual hierarchy without any elevation illusion.\n\n### Decorative Depth\n- Background color shifts between \\`#201d1d\\` and \\`#302c2c\\` create subtle surface differentiation\n- Transparent borders at 12% opacity provide barely-visible structure\n- The warm reddish tint in border colors (\\`rgba(15, 0, 0, 0.12)\\`) ties borders to the overall warm dark palette\n- No gradients, no blurs, no ambient effects -- pure flat terminal aesthetic\n\n## 7. Interaction & Motion\n\n### Hover States\n- Links: color shift from default to accent blue (\\`#007aff\\`) or underline style change\n- Buttons: subtle background lightening or border emphasis\n- Accent blue provides a three-stage hover sequence: \\`#007aff\\` → \\`#0056b3\\` → \\`#004085\\` (default → hover → active)\n- Danger red: \\`#ff3b30\\` → \\`#d70015\\` → \\`#a50011\\`\n- Warning orange: \\`#ff9f0a\\` → \\`#cc7f08\\` → \\`#995f06\\`\n\n### Focus States\n- Border-based focus: increased border opacity or solid border color\n- No shadow-based focus rings -- consistent with the flat, no-shadow aesthetic\n- Keyboard focus likely uses outline or border color shift to accent blue\n\n### Transitions\n- Minimal transitions expected -- terminal-inspired interfaces favor instant state changes\n- Color transitions: 100-150ms for subtle state feedback\n- No scale, rotate, or complex transform animations\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <640px | Single column, reduced padding, heading scales down |\n| Tablet | 640-1024px | Content width expands, slight padding increase |\n| Desktop | >1024px | Full content width (~800-900px centered), maximum whitespace |\n\n### Touch Targets\n- Buttons with 4px 20px padding provide adequate horizontal touch area\n- Input fields with 20px padding ensure comfortable mobile typing\n- Tab items at 16px with tight line-height may need mobile adaptation\n\n### Collapsing Strategy\n- Hero heading: 38px → 28px → 24px on smaller screens\n- Navigation: horizontal links → hamburger/drawer on mobile\n- Feature lists: maintain single-column, reduce horizontal padding\n- Terminal hero: maintain full-width, reduce internal padding\n- Footer columns: multi-column → stacked single column\n- Section spacing: 96px → 64px → 48px on mobile\n\n### Image Behavior\n- Terminal screenshots maintain aspect ratio and border treatment\n- Full-width elements scale proportionally\n- Monospace type maintains readability at all sizes due to fixed-width nature\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Page background: \\`#201d1d\\` (warm near-black)\n- Primary text: \\`#fdfcfc\\` (warm off-white)\n- Secondary text: \\`#9a9898\\` (warm gray)\n- Muted text: \\`#6e6e73\\`\n- Accent: \\`#007aff\\` (blue)\n- Danger: \\`#ff3b30\\` (red)\n- Success: \\`#30d158\\` (green)\n- Warning: \\`#ff9f0a\\` (orange)\n- Button bg: \\`#201d1d\\`, button text: \\`#fdfcfc\\`\n- Border: \\`rgba(15, 0, 0, 0.12)\\` (warm transparent)\n- Input bg: \\`#f8f7f7\\`, input border: \\`rgba(15, 0, 0, 0.12)\\`\n\n### Example Component Prompts\n- \"Create a hero section on \\`#201d1d\\` warm dark background. Headline at 38px Berkeley Mono weight 700, line-height 1.50, color \\`#fdfcfc\\`. Subtitle at 16px weight 400, color \\`#9a9898\\`. Primary CTA button (\\`#201d1d\\` bg with \\`1px solid #646262\\` border, 4px radius, 4px 20px padding, \\`#fdfcfc\\` text at weight 500).\"\n- \"Design a feature list: single-column on \\`#201d1d\\` background. Feature name at 16px Berkeley Mono weight 700, color \\`#fdfcfc\\`. Description at 16px weight 400, color \\`#9a9898\\`. No cards, no borders -- pure text with 16px vertical gap between items.\"\n- \"Build an email capture form: \\`#f8f7f7\\` background input, \\`1px solid rgba(15, 0, 0, 0.12)\\` border, 6px radius, 20px padding. Adjacent dark button (\\`#201d1d\\` bg, \\`#fdfcfc\\` text, 4px radius, 4px 20px padding). Berkeley Mono throughout.\"\n- \"Create navigation: sticky \\`#201d1d\\` background. 16px Berkeley Mono weight 500 for links, \\`#fdfcfc\\` text. Brand name left-aligned in monospace. Links with underline decoration. No blur, no transparency -- solid dark surface.\"\n- \"Design a footer: \\`#201d1d\\` background, multi-column link grid. Links at 16px Berkeley Mono weight 400, color \\`#9a9898\\`. Section headers at weight 700. Border-top \\`1px solid rgba(15, 0, 0, 0.12)\\` separator.\"\n\n### Iteration Guide\n1. Berkeley Mono is the only font -- never introduce a second typeface. Size and weight create all hierarchy.\n2. Keep surfaces flat: no shadows, no gradients, no blur effects. Use borders and background shifts only.\n3. The warm undertone matters: use \\`#201d1d\\` not \\`#000000\\`, use \\`#fdfcfc\\` not \\`#ffffff\\`. The reddish warmth is subtle but essential.\n4. Border radius is 4px everywhere except inputs (6px). Never use rounded pills or large radii.\n5. Semantic colors follow Apple HIG: \\`#007aff\\` blue, \\`#ff3b30\\` red, \\`#30d158\\` green, \\`#ff9f0a\\` orange. Each has hover and active darkened variants.\n6. Three-stage interaction: default → hover (darkened) → active (deeply darkened) for all semantic colors.\n7. Borders use \\`rgba(15, 0, 0, 0.12)\\` -- a warm transparent dark, not neutral gray. This ties borders to the warm palette.\n8. Spacing follows an 8px grid: 8, 16, 24, 32, 40, 48, 64, 80, 96px. Use 4px for fine adjustments only.\n`;\n"],"mappings":";AACO,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/pinterest.d.ts

@@ -0,0 +1,3 @@
+declare const pinterestBrief = "# Design System Inspired by Pinterest\n\n## 1. Visual Theme & Atmosphere\n\nPinterest's website is a warm, inspiration-driven canvas that treats visual discovery like a lifestyle magazine. The design operates on a soft, slightly warm white background with Pinterest Red (`#e60023`) as the singular, bold brand accent. Unlike the cool blues of most tech platforms, Pinterest's neutral scale has a distinctly warm undertone \u2014 grays lean toward olive/sand (`#91918c`, `#62625b`, `#e5e5e0`) rather than cool steel, creating a cozy, craft-like atmosphere that invites browsing.\n\nThe typography uses Pin Sans \u2014 a custom proprietary font with a broad fallback stack including Japanese fonts, reflecting Pinterest's global reach. At display scale (70px, weight 600), Pin Sans creates large, inviting headlines. At smaller sizes, the system is compact: buttons at 12px, captions at 12\u201314px. The CSS variable naming system (`--comp-*`, `--sema-*`, `--base-*`) reveals a sophisticated three-tier design token architecture: component-level, semantic-level, and base-level tokens.\n\nWhat distinguishes Pinterest is its generous border-radius system (12px\u201340px, plus 50% for circles) and warm-tinted button backgrounds. The secondary button (`#e5e5e0`) has a distinctly warm, sand-like tone rather than cold gray. The primary red button uses 16px radius \u2014 rounded but not pill-shaped. Combined with warm badge backgrounds (`hsla(60,20%,98%,.5)` \u2014 a subtle yellow-warm wash) and photography-dominant layouts, the result is a design that feels handcrafted and personal, not corporate and sterile.\n\n**Key Characteristics:**\n- Warm white canvas with olive/sand-toned neutrals \u2014 cozy, not clinical\n- Pinterest Red (`#e60023`) as singular bold accent \u2014 never subtle, always confident\n- Pin Sans custom font with global fallback stack (including CJK)\n- Three-tier token architecture: `--comp-*` / `--sema-*` / `--base-*`\n- Warm secondary surfaces: sand gray (`#e5e5e0`), warm badge (`hsla(60,20%,98%,.5)`)\n- Generous border-radius: 16px standard, up to 40px for large containers\n- Photography-first content \u2014 pins/images are the primary visual element\n- Dark near-purple text (`#211922`) \u2014 warm, with a hint of plum\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Pinterest Red** (`#e60023`): Primary CTA, brand accent \u2014 bold, confident red\n- **Green 700** (`#103c25`): `--base-color-green-700`, success/nature accent\n- **Green 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, pressed green\n\n### Text\n- **Plum Black** (`#211922`): Primary text \u2014 warm near-black with plum undertone\n- **Black** (`#000000`): Secondary text, button text\n- **Olive Gray** (`#62625b`): Secondary descriptions, muted text\n- **Warm Silver** (`#91918c`): `--comp-button-color-text-transparent-disabled`, disabled text, input borders\n- **White** (`#ffffff`): Text on dark/colored surfaces\n\n### Interactive\n- **Focus Blue** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, focus rings\n- **Performance Purple** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, performance features\n- **Recommendation Purple** (`#7e238b`): `--sema-color-hover-text-recommendation`, AI recommendation\n- **Link Blue** (`#2b48d4`): Link text color\n- **Facebook Blue** (`#0866ff`): `--facebook-background-color`, social login\n- **Pressed Blue** (`#617bff`): `--base-color-pressed-blue-200`, pressed state\n\n### Surface & Border\n- **Sand Gray** (`#e5e5e0`): Secondary button background \u2014 warm, craft-like\n- **Warm Light** (`#e0e0d9`): Circular button backgrounds, badges\n- **Warm Wash** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, subtle warm badge bg\n- **Fog** (`#f6f6f3`): Light surface (at 50% opacity)\n- **Border Disabled** (`#c8c8c1`): `--sema-color-border-disabled`, disabled borders\n- **Hover Gray** (`#bcbcb3`): `--base-color-hover-grayscale-150`, hover border\n- **Dark Surface** (`#33332e`): Dark section backgrounds\n\n### Semantic\n- **Error Red** (`#9e0a0a`): Checkbox/form error states\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `Pin Sans`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, \u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 Pro W3, \u30E1\u30A4\u30EA\u30AA, Meiryo, \uFF2D\uFF33 \uFF30\u30B4\u30B7\u30C3\u30AF, Arial`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Pin Sans | 70px (4.38rem) | 600 | normal | normal | Maximum impact |\n| Section Heading | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | Negative tracking |\n| Body | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | Standard reading |\n| Caption Bold | Pin Sans | 14px (0.88rem) | 700 | normal | normal | Strong metadata |\n| Caption | Pin Sans | 12px (0.75rem) | 400\u2013500 | 1.50 | normal | Small text, tags |\n| Button | Pin Sans | 12px (0.75rem) | 400 | normal | normal | Button labels |\n\n### Principles\n- **Compact type scale**: The range is 12px\u201370px with a dramatic jump \u2014 most functional text is 12\u201316px, creating a dense, app-like information hierarchy.\n- **Warm weight distribution**: 600\u2013700 for headings, 400\u2013500 for body. No ultra-light weights \u2014 the type always feels substantial.\n- **Negative tracking on headings**: -1.2px on 28px headings creates cozy, intimate section titles.\n- **Single font family**: Pin Sans handles everything \u2014 no secondary display or monospace font detected.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Red**\n- Background: `#e60023` (Pinterest Red)\n- Text: `#000000` (black \u2014 unusual choice for contrast on red)\n- Padding: 6px 14px\n- Radius: 16px (generously rounded, not pill)\n- Border: `2px solid rgba(255, 255, 255, 0)` (transparent)\n- Focus: semantic border + outline via CSS variables\n\n**Secondary Sand**\n- Background: `#e5e5e0` (warm sand gray)\n- Text: `#000000`\n- Padding: 6px 14px\n- Radius: 16px\n- Focus: same semantic border system\n\n**Circular Action**\n- Background: `#e0e0d9` (warm light)\n- Text: `#211922` (plum black)\n- Radius: 50% (circle)\n- Use: Pin actions, navigation controls\n\n**Ghost / Transparent**\n- Background: transparent\n- Text: `#000000`\n- No border\n- Use: Tertiary actions\n\n### Cards & Containers\n- Photography-first pin cards with generous radius (12px\u201320px)\n- No traditional box-shadow on most cards\n- White or warm fog backgrounds\n- 8px white thick border on some image containers\n\n### Inputs\n- Email input: white background, `1px solid #91918c` border, 16px radius, 11px 15px padding\n- Focus: semantic border + outline system via CSS variables\n\n### Navigation\n- Clean header on white or warm background\n- Pinterest logo + search bar centered\n- Pin Sans 16px for nav links\n- Pinterest Red accents for active states\n\n### Image Treatment\n- Pin-style masonry grid (signature Pinterest layout)\n- Rounded corners: 12px\u201320px on images\n- Photography as primary content \u2014 every pin is an image\n- Thick white borders (8px) on featured image containers\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px\n- Large jumps: 32px \u2192 80px \u2192 100px for section spacing\n\n### Grid & Container\n- Masonry grid for pin content (signature layout)\n- Centered content sections with generous max-width\n- Full-width dark footer\n- Search bar as primary navigation element\n\n### Whitespace Philosophy\n- **Inspiration density**: The masonry grid packs pins tightly \u2014 the content density IS the value proposition. Whitespace exists between sections, not within the grid.\n- **Breathing above, density below**: Hero/feature sections get generous padding; the pin grid is compact and immersive.\n\n### Border Radius Scale\n- Standard (12px): Small cards, links\n- Button (16px): Buttons, inputs, medium cards\n- Comfortable (20px): Feature cards\n- Large (28px): Large containers\n- Section (32px): Tab elements, large panels\n- Hero (40px): Hero containers, large feature blocks\n- Circle (50%): Action buttons, tab indicators\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default \u2014 pins rely on content, not shadow |\n| Subtle (Level 1) | Minimal shadow (from tokens) | Elevated overlays, dropdowns |\n| Focus (Accessibility) | `--sema-color-border-focus-outer-default` ring | Focus states |\n\n**Shadow Philosophy**: Pinterest uses minimal shadows. The masonry grid relies on content (photography) to create visual interest rather than elevation effects. Depth comes from the warmth of surface colors and the generous rounding of containers.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use warm neutrals (`#e5e5e0`, `#e0e0d9`, `#91918c`) \u2014 the warm olive/sand tone is the identity\n- Apply Pinterest Red (`#e60023`) only for primary CTAs \u2014 it's bold and singular\n- Use Pin Sans exclusively \u2014 one font for everything\n- Apply generous border-radius: 16px for buttons/inputs, 20px+ for cards\n- Keep the masonry grid dense \u2014 content density is the value\n- Use warm badge backgrounds (`hsla(60,20%,98%,.5)`) for subtle warm washes\n- Use `#211922` (plum black) for primary text \u2014 it's warmer than pure black\n\n### Don't\n- Don't use cool gray neutrals \u2014 always warm/olive-toned\n- Don't use pure black (`#000000`) as primary text \u2014 use plum black (`#211922`)\n- Don't use pill-shaped buttons \u2014 16px radius is rounded but not pill\n- Don't add heavy shadows \u2014 Pinterest is flat by design, depth from content\n- Don't use small border-radius (<12px) on cards \u2014 the generous rounding is core\n- Don't introduce additional brand colors \u2014 red + warm neutrals is the complete palette\n- Don't use thin font weights \u2014 Pin Sans at 400 minimum\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <576px | Single column, compact layout |\n| Mobile Large | 576\u2013768px | 2-column pin grid |\n| Tablet | 768\u2013890px | Expanded grid |\n| Desktop Small | 890\u20131312px | Standard masonry grid |\n| Desktop | 1312\u20131440px | Full layout |\n| Large Desktop | 1440\u20131680px | Expanded grid columns |\n| Ultra-wide | >1680px | Maximum grid density |\n\n### Collapsing Strategy\n- Pin grid: 5+ columns \u2192 3 \u2192 2 \u2192 1\n- Navigation: search bar + icons \u2192 simplified mobile nav\n- Feature sections: side-by-side \u2192 stacked\n- Hero: 70px \u2192 scales down proportionally\n- Footer: dark multi-column \u2192 stacked\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand: Pinterest Red (`#e60023`)\n- Background: White (`#ffffff`)\n- Text: Plum Black (`#211922`)\n- Secondary text: Olive Gray (`#62625b`)\n- Button surface: Sand Gray (`#e5e5e0`)\n- Border: Warm Silver (`#91918c`)\n- Focus: Focus Blue (`#435ee5`)\n\n### Example Component Prompts\n- \"Create a hero: white background. Headline at 70px Pin Sans weight 600, plum black (#211922). Red CTA button (#e60023, 16px radius, 6px 14px padding). Secondary sand button (#e5e5e0, 16px radius).\"\n- \"Design a pin card: white background, 16px radius, no shadow. Photography fills top, 16px Pin Sans weight 400 description below in #62625b.\"\n- \"Build a circular action button: #e0e0d9 background, 50% radius, #211922 icon.\"\n- \"Create an input field: white background, 1px solid #91918c, 16px radius, 11px 15px padding. Focus: blue outline via semantic tokens.\"\n- \"Design the dark footer: #33332e background. Pinterest script logo in white. 12px Pin Sans links in #91918c.\"\n\n### Iteration Guide\n1. Warm neutrals everywhere \u2014 olive/sand grays, never cool steel\n2. Pinterest Red for CTAs only \u2014 bold and singular\n3. 16px radius on buttons/inputs, 20px+ on cards \u2014 generous but not pill\n4. Pin Sans is the only font \u2014 compact at 12px for UI, 70px for display\n5. Photography carries the design \u2014 the UI stays warm and minimal\n6. Plum black (#211922) for text \u2014 warmer than pure black\n";
+
+export { pinterestBrief };

package/dist/presets/_briefs/pinterest.js

@@ -0,0 +1,236 @@
+// src/presets/_briefs/pinterest.ts
+var pinterestBrief = `# Design System Inspired by Pinterest
+
+## 1. Visual Theme & Atmosphere
+
+Pinterest's website is a warm, inspiration-driven canvas that treats visual discovery like a lifestyle magazine. The design operates on a soft, slightly warm white background with Pinterest Red (\`#e60023\`) as the singular, bold brand accent. Unlike the cool blues of most tech platforms, Pinterest's neutral scale has a distinctly warm undertone \u2014 grays lean toward olive/sand (\`#91918c\`, \`#62625b\`, \`#e5e5e0\`) rather than cool steel, creating a cozy, craft-like atmosphere that invites browsing.
+
+The typography uses Pin Sans \u2014 a custom proprietary font with a broad fallback stack including Japanese fonts, reflecting Pinterest's global reach. At display scale (70px, weight 600), Pin Sans creates large, inviting headlines. At smaller sizes, the system is compact: buttons at 12px, captions at 12\u201314px. The CSS variable naming system (\`--comp-*\`, \`--sema-*\`, \`--base-*\`) reveals a sophisticated three-tier design token architecture: component-level, semantic-level, and base-level tokens.
+
+What distinguishes Pinterest is its generous border-radius system (12px\u201340px, plus 50% for circles) and warm-tinted button backgrounds. The secondary button (\`#e5e5e0\`) has a distinctly warm, sand-like tone rather than cold gray. The primary red button uses 16px radius \u2014 rounded but not pill-shaped. Combined with warm badge backgrounds (\`hsla(60,20%,98%,.5)\` \u2014 a subtle yellow-warm wash) and photography-dominant layouts, the result is a design that feels handcrafted and personal, not corporate and sterile.
+
+**Key Characteristics:**
+- Warm white canvas with olive/sand-toned neutrals \u2014 cozy, not clinical
+- Pinterest Red (\`#e60023\`) as singular bold accent \u2014 never subtle, always confident
+- Pin Sans custom font with global fallback stack (including CJK)
+- Three-tier token architecture: \`--comp-*\` / \`--sema-*\` / \`--base-*\`
+- Warm secondary surfaces: sand gray (\`#e5e5e0\`), warm badge (\`hsla(60,20%,98%,.5)\`)
+- Generous border-radius: 16px standard, up to 40px for large containers
+- Photography-first content \u2014 pins/images are the primary visual element
+- Dark near-purple text (\`#211922\`) \u2014 warm, with a hint of plum
+
+## 2. Color Palette & Roles
+
+### Primary Brand
+- **Pinterest Red** (\`#e60023\`): Primary CTA, brand accent \u2014 bold, confident red
+- **Green 700** (\`#103c25\`): \`--base-color-green-700\`, success/nature accent
+- **Green 700 Hover** (\`#0b2819\`): \`--base-color-hover-green-700\`, pressed green
+
+### Text
+- **Plum Black** (\`#211922\`): Primary text \u2014 warm near-black with plum undertone
+- **Black** (\`#000000\`): Secondary text, button text
+- **Olive Gray** (\`#62625b\`): Secondary descriptions, muted text
+- **Warm Silver** (\`#91918c\`): \`--comp-button-color-text-transparent-disabled\`, disabled text, input borders
+- **White** (\`#ffffff\`): Text on dark/colored surfaces
+
+### Interactive
+- **Focus Blue** (\`#435ee5\`): \`--comp-button-color-border-focus-outer-transparent\`, focus rings
+- **Performance Purple** (\`#6845ab\`): \`--sema-color-hover-icon-performance-plus\`, performance features
+- **Recommendation Purple** (\`#7e238b\`): \`--sema-color-hover-text-recommendation\`, AI recommendation
+- **Link Blue** (\`#2b48d4\`): Link text color
+- **Facebook Blue** (\`#0866ff\`): \`--facebook-background-color\`, social login
+- **Pressed Blue** (\`#617bff\`): \`--base-color-pressed-blue-200\`, pressed state
+
+### Surface & Border
+- **Sand Gray** (\`#e5e5e0\`): Secondary button background \u2014 warm, craft-like
+- **Warm Light** (\`#e0e0d9\`): Circular button backgrounds, badges
+- **Warm Wash** (\`hsla(60, 20%, 98%, 0.5)\`): \`--comp-badge-color-background-wash-light\`, subtle warm badge bg
+- **Fog** (\`#f6f6f3\`): Light surface (at 50% opacity)
+- **Border Disabled** (\`#c8c8c1\`): \`--sema-color-border-disabled\`, disabled borders
+- **Hover Gray** (\`#bcbcb3\`): \`--base-color-hover-grayscale-150\`, hover border
+- **Dark Surface** (\`#33332e\`): Dark section backgrounds
+
+### Semantic
+- **Error Red** (\`#9e0a0a\`): Checkbox/form error states
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: \`Pin Sans\`, fallbacks: \`-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, \u30D2\u30E9\u30AE\u30CE\u89D2\u30B4 Pro W3, \u30E1\u30A4\u30EA\u30AA, Meiryo, \uFF2D\uFF33 \uFF30\u30B4\u30B7\u30C3\u30AF, Arial\`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Pin Sans | 70px (4.38rem) | 600 | normal | normal | Maximum impact |
+| Section Heading | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | Negative tracking |
+| Body | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | Standard reading |
+| Caption Bold | Pin Sans | 14px (0.88rem) | 700 | normal | normal | Strong metadata |
+| Caption | Pin Sans | 12px (0.75rem) | 400\u2013500 | 1.50 | normal | Small text, tags |
+| Button | Pin Sans | 12px (0.75rem) | 400 | normal | normal | Button labels |
+
+### Principles
+- **Compact type scale**: The range is 12px\u201370px with a dramatic jump \u2014 most functional text is 12\u201316px, creating a dense, app-like information hierarchy.
+- **Warm weight distribution**: 600\u2013700 for headings, 400\u2013500 for body. No ultra-light weights \u2014 the type always feels substantial.
+- **Negative tracking on headings**: -1.2px on 28px headings creates cozy, intimate section titles.
+- **Single font family**: Pin Sans handles everything \u2014 no secondary display or monospace font detected.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Red**
+- Background: \`#e60023\` (Pinterest Red)
+- Text: \`#000000\` (black \u2014 unusual choice for contrast on red)
+- Padding: 6px 14px
+- Radius: 16px (generously rounded, not pill)
+- Border: \`2px solid rgba(255, 255, 255, 0)\` (transparent)
+- Focus: semantic border + outline via CSS variables
+
+**Secondary Sand**
+- Background: \`#e5e5e0\` (warm sand gray)
+- Text: \`#000000\`
+- Padding: 6px 14px
+- Radius: 16px
+- Focus: same semantic border system
+
+**Circular Action**
+- Background: \`#e0e0d9\` (warm light)
+- Text: \`#211922\` (plum black)
+- Radius: 50% (circle)
+- Use: Pin actions, navigation controls
+
+**Ghost / Transparent**
+- Background: transparent
+- Text: \`#000000\`
+- No border
+- Use: Tertiary actions
+
+### Cards & Containers
+- Photography-first pin cards with generous radius (12px\u201320px)
+- No traditional box-shadow on most cards
+- White or warm fog backgrounds
+- 8px white thick border on some image containers
+
+### Inputs
+- Email input: white background, \`1px solid #91918c\` border, 16px radius, 11px 15px padding
+- Focus: semantic border + outline system via CSS variables
+
+### Navigation
+- Clean header on white or warm background
+- Pinterest logo + search bar centered
+- Pin Sans 16px for nav links
+- Pinterest Red accents for active states
+
+### Image Treatment
+- Pin-style masonry grid (signature Pinterest layout)
+- Rounded corners: 12px\u201320px on images
+- Photography as primary content \u2014 every pin is an image
+- Thick white borders (8px) on featured image containers
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
+- Large jumps: 32px \u2192 80px \u2192 100px for section spacing
+
+### Grid & Container
+- Masonry grid for pin content (signature layout)
+- Centered content sections with generous max-width
+- Full-width dark footer
+- Search bar as primary navigation element
+
+### Whitespace Philosophy
+- **Inspiration density**: The masonry grid packs pins tightly \u2014 the content density IS the value proposition. Whitespace exists between sections, not within the grid.
+- **Breathing above, density below**: Hero/feature sections get generous padding; the pin grid is compact and immersive.
+
+### Border Radius Scale
+- Standard (12px): Small cards, links
+- Button (16px): Buttons, inputs, medium cards
+- Comfortable (20px): Feature cards
+- Large (28px): Large containers
+- Section (32px): Tab elements, large panels
+- Hero (40px): Hero containers, large feature blocks
+- Circle (50%): Action buttons, tab indicators
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Default \u2014 pins rely on content, not shadow |
+| Subtle (Level 1) | Minimal shadow (from tokens) | Elevated overlays, dropdowns |
+| Focus (Accessibility) | \`--sema-color-border-focus-outer-default\` ring | Focus states |
+
+**Shadow Philosophy**: Pinterest uses minimal shadows. The masonry grid relies on content (photography) to create visual interest rather than elevation effects. Depth comes from the warmth of surface colors and the generous rounding of containers.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use warm neutrals (\`#e5e5e0\`, \`#e0e0d9\`, \`#91918c\`) \u2014 the warm olive/sand tone is the identity
+- Apply Pinterest Red (\`#e60023\`) only for primary CTAs \u2014 it's bold and singular
+- Use Pin Sans exclusively \u2014 one font for everything
+- Apply generous border-radius: 16px for buttons/inputs, 20px+ for cards
+- Keep the masonry grid dense \u2014 content density is the value
+- Use warm badge backgrounds (\`hsla(60,20%,98%,.5)\`) for subtle warm washes
+- Use \`#211922\` (plum black) for primary text \u2014 it's warmer than pure black
+
+### Don't
+- Don't use cool gray neutrals \u2014 always warm/olive-toned
+- Don't use pure black (\`#000000\`) as primary text \u2014 use plum black (\`#211922\`)
+- Don't use pill-shaped buttons \u2014 16px radius is rounded but not pill
+- Don't add heavy shadows \u2014 Pinterest is flat by design, depth from content
+- Don't use small border-radius (<12px) on cards \u2014 the generous rounding is core
+- Don't introduce additional brand colors \u2014 red + warm neutrals is the complete palette
+- Don't use thin font weights \u2014 Pin Sans at 400 minimum
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <576px | Single column, compact layout |
+| Mobile Large | 576\u2013768px | 2-column pin grid |
+| Tablet | 768\u2013890px | Expanded grid |
+| Desktop Small | 890\u20131312px | Standard masonry grid |
+| Desktop | 1312\u20131440px | Full layout |
+| Large Desktop | 1440\u20131680px | Expanded grid columns |
+| Ultra-wide | >1680px | Maximum grid density |
+
+### Collapsing Strategy
+- Pin grid: 5+ columns \u2192 3 \u2192 2 \u2192 1
+- Navigation: search bar + icons \u2192 simplified mobile nav
+- Feature sections: side-by-side \u2192 stacked
+- Hero: 70px \u2192 scales down proportionally
+- Footer: dark multi-column \u2192 stacked
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand: Pinterest Red (\`#e60023\`)
+- Background: White (\`#ffffff\`)
+- Text: Plum Black (\`#211922\`)
+- Secondary text: Olive Gray (\`#62625b\`)
+- Button surface: Sand Gray (\`#e5e5e0\`)
+- Border: Warm Silver (\`#91918c\`)
+- Focus: Focus Blue (\`#435ee5\`)
+
+### Example Component Prompts
+- "Create a hero: white background. Headline at 70px Pin Sans weight 600, plum black (#211922). Red CTA button (#e60023, 16px radius, 6px 14px padding). Secondary sand button (#e5e5e0, 16px radius)."
+- "Design a pin card: white background, 16px radius, no shadow. Photography fills top, 16px Pin Sans weight 400 description below in #62625b."
+- "Build a circular action button: #e0e0d9 background, 50% radius, #211922 icon."
+- "Create an input field: white background, 1px solid #91918c, 16px radius, 11px 15px padding. Focus: blue outline via semantic tokens."
+- "Design the dark footer: #33332e background. Pinterest script logo in white. 12px Pin Sans links in #91918c."
+
+### Iteration Guide
+1. Warm neutrals everywhere \u2014 olive/sand grays, never cool steel
+2. Pinterest Red for CTAs only \u2014 bold and singular
+3. 16px radius on buttons/inputs, 20px+ on cards \u2014 generous but not pill
+4. Pin Sans is the only font \u2014 compact at 12px for UI, 70px for display
+5. Photography carries the design \u2014 the UI stays warm and minimal
+6. Plum black (#211922) for text \u2014 warmer than pure black
+`;
+export {
+  pinterestBrief
+};
+//# sourceMappingURL=pinterest.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/pinterest.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const pinterestBrief = `# Design System Inspired by Pinterest\n\n## 1. Visual Theme & Atmosphere\n\nPinterest's website is a warm, inspiration-driven canvas that treats visual discovery like a lifestyle magazine. The design operates on a soft, slightly warm white background with Pinterest Red (\\`#e60023\\`) as the singular, bold brand accent. Unlike the cool blues of most tech platforms, Pinterest's neutral scale has a distinctly warm undertone — grays lean toward olive/sand (\\`#91918c\\`, \\`#62625b\\`, \\`#e5e5e0\\`) rather than cool steel, creating a cozy, craft-like atmosphere that invites browsing.\n\nThe typography uses Pin Sans — a custom proprietary font with a broad fallback stack including Japanese fonts, reflecting Pinterest's global reach. At display scale (70px, weight 600), Pin Sans creates large, inviting headlines. At smaller sizes, the system is compact: buttons at 12px, captions at 12–14px. The CSS variable naming system (\\`--comp-*\\`, \\`--sema-*\\`, \\`--base-*\\`) reveals a sophisticated three-tier design token architecture: component-level, semantic-level, and base-level tokens.\n\nWhat distinguishes Pinterest is its generous border-radius system (12px–40px, plus 50% for circles) and warm-tinted button backgrounds. The secondary button (\\`#e5e5e0\\`) has a distinctly warm, sand-like tone rather than cold gray. The primary red button uses 16px radius — rounded but not pill-shaped. Combined with warm badge backgrounds (\\`hsla(60,20%,98%,.5)\\` — a subtle yellow-warm wash) and photography-dominant layouts, the result is a design that feels handcrafted and personal, not corporate and sterile.\n\n**Key Characteristics:**\n- Warm white canvas with olive/sand-toned neutrals — cozy, not clinical\n- Pinterest Red (\\`#e60023\\`) as singular bold accent — never subtle, always confident\n- Pin Sans custom font with global fallback stack (including CJK)\n- Three-tier token architecture: \\`--comp-*\\` / \\`--sema-*\\` / \\`--base-*\\`\n- Warm secondary surfaces: sand gray (\\`#e5e5e0\\`), warm badge (\\`hsla(60,20%,98%,.5)\\`)\n- Generous border-radius: 16px standard, up to 40px for large containers\n- Photography-first content — pins/images are the primary visual element\n- Dark near-purple text (\\`#211922\\`) — warm, with a hint of plum\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Pinterest Red** (\\`#e60023\\`): Primary CTA, brand accent — bold, confident red\n- **Green 700** (\\`#103c25\\`): \\`--base-color-green-700\\`, success/nature accent\n- **Green 700 Hover** (\\`#0b2819\\`): \\`--base-color-hover-green-700\\`, pressed green\n\n### Text\n- **Plum Black** (\\`#211922\\`): Primary text — warm near-black with plum undertone\n- **Black** (\\`#000000\\`): Secondary text, button text\n- **Olive Gray** (\\`#62625b\\`): Secondary descriptions, muted text\n- **Warm Silver** (\\`#91918c\\`): \\`--comp-button-color-text-transparent-disabled\\`, disabled text, input borders\n- **White** (\\`#ffffff\\`): Text on dark/colored surfaces\n\n### Interactive\n- **Focus Blue** (\\`#435ee5\\`): \\`--comp-button-color-border-focus-outer-transparent\\`, focus rings\n- **Performance Purple** (\\`#6845ab\\`): \\`--sema-color-hover-icon-performance-plus\\`, performance features\n- **Recommendation Purple** (\\`#7e238b\\`): \\`--sema-color-hover-text-recommendation\\`, AI recommendation\n- **Link Blue** (\\`#2b48d4\\`): Link text color\n- **Facebook Blue** (\\`#0866ff\\`): \\`--facebook-background-color\\`, social login\n- **Pressed Blue** (\\`#617bff\\`): \\`--base-color-pressed-blue-200\\`, pressed state\n\n### Surface & Border\n- **Sand Gray** (\\`#e5e5e0\\`): Secondary button background — warm, craft-like\n- **Warm Light** (\\`#e0e0d9\\`): Circular button backgrounds, badges\n- **Warm Wash** (\\`hsla(60, 20%, 98%, 0.5)\\`): \\`--comp-badge-color-background-wash-light\\`, subtle warm badge bg\n- **Fog** (\\`#f6f6f3\\`): Light surface (at 50% opacity)\n- **Border Disabled** (\\`#c8c8c1\\`): \\`--sema-color-border-disabled\\`, disabled borders\n- **Hover Gray** (\\`#bcbcb3\\`): \\`--base-color-hover-grayscale-150\\`, hover border\n- **Dark Surface** (\\`#33332e\\`): Dark section backgrounds\n\n### Semantic\n- **Error Red** (\\`#9e0a0a\\`): Checkbox/form error states\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: \\`Pin Sans\\`, fallbacks: \\`-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Pin Sans | 70px (4.38rem) | 600 | normal | normal | Maximum impact |\n| Section Heading | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | Negative tracking |\n| Body | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | Standard reading |\n| Caption Bold | Pin Sans | 14px (0.88rem) | 700 | normal | normal | Strong metadata |\n| Caption | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | Small text, tags |\n| Button | Pin Sans | 12px (0.75rem) | 400 | normal | normal | Button labels |\n\n### Principles\n- **Compact type scale**: The range is 12px–70px with a dramatic jump — most functional text is 12–16px, creating a dense, app-like information hierarchy.\n- **Warm weight distribution**: 600–700 for headings, 400–500 for body. No ultra-light weights — the type always feels substantial.\n- **Negative tracking on headings**: -1.2px on 28px headings creates cozy, intimate section titles.\n- **Single font family**: Pin Sans handles everything — no secondary display or monospace font detected.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Red**\n- Background: \\`#e60023\\` (Pinterest Red)\n- Text: \\`#000000\\` (black — unusual choice for contrast on red)\n- Padding: 6px 14px\n- Radius: 16px (generously rounded, not pill)\n- Border: \\`2px solid rgba(255, 255, 255, 0)\\` (transparent)\n- Focus: semantic border + outline via CSS variables\n\n**Secondary Sand**\n- Background: \\`#e5e5e0\\` (warm sand gray)\n- Text: \\`#000000\\`\n- Padding: 6px 14px\n- Radius: 16px\n- Focus: same semantic border system\n\n**Circular Action**\n- Background: \\`#e0e0d9\\` (warm light)\n- Text: \\`#211922\\` (plum black)\n- Radius: 50% (circle)\n- Use: Pin actions, navigation controls\n\n**Ghost / Transparent**\n- Background: transparent\n- Text: \\`#000000\\`\n- No border\n- Use: Tertiary actions\n\n### Cards & Containers\n- Photography-first pin cards with generous radius (12px–20px)\n- No traditional box-shadow on most cards\n- White or warm fog backgrounds\n- 8px white thick border on some image containers\n\n### Inputs\n- Email input: white background, \\`1px solid #91918c\\` border, 16px radius, 11px 15px padding\n- Focus: semantic border + outline system via CSS variables\n\n### Navigation\n- Clean header on white or warm background\n- Pinterest logo + search bar centered\n- Pin Sans 16px for nav links\n- Pinterest Red accents for active states\n\n### Image Treatment\n- Pin-style masonry grid (signature Pinterest layout)\n- Rounded corners: 12px–20px on images\n- Photography as primary content — every pin is an image\n- Thick white borders (8px) on featured image containers\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px\n- Large jumps: 32px → 80px → 100px for section spacing\n\n### Grid & Container\n- Masonry grid for pin content (signature layout)\n- Centered content sections with generous max-width\n- Full-width dark footer\n- Search bar as primary navigation element\n\n### Whitespace Philosophy\n- **Inspiration density**: The masonry grid packs pins tightly — the content density IS the value proposition. Whitespace exists between sections, not within the grid.\n- **Breathing above, density below**: Hero/feature sections get generous padding; the pin grid is compact and immersive.\n\n### Border Radius Scale\n- Standard (12px): Small cards, links\n- Button (16px): Buttons, inputs, medium cards\n- Comfortable (20px): Feature cards\n- Large (28px): Large containers\n- Section (32px): Tab elements, large panels\n- Hero (40px): Hero containers, large feature blocks\n- Circle (50%): Action buttons, tab indicators\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Default — pins rely on content, not shadow |\n| Subtle (Level 1) | Minimal shadow (from tokens) | Elevated overlays, dropdowns |\n| Focus (Accessibility) | \\`--sema-color-border-focus-outer-default\\` ring | Focus states |\n\n**Shadow Philosophy**: Pinterest uses minimal shadows. The masonry grid relies on content (photography) to create visual interest rather than elevation effects. Depth comes from the warmth of surface colors and the generous rounding of containers.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use warm neutrals (\\`#e5e5e0\\`, \\`#e0e0d9\\`, \\`#91918c\\`) — the warm olive/sand tone is the identity\n- Apply Pinterest Red (\\`#e60023\\`) only for primary CTAs — it's bold and singular\n- Use Pin Sans exclusively — one font for everything\n- Apply generous border-radius: 16px for buttons/inputs, 20px+ for cards\n- Keep the masonry grid dense — content density is the value\n- Use warm badge backgrounds (\\`hsla(60,20%,98%,.5)\\`) for subtle warm washes\n- Use \\`#211922\\` (plum black) for primary text — it's warmer than pure black\n\n### Don't\n- Don't use cool gray neutrals — always warm/olive-toned\n- Don't use pure black (\\`#000000\\`) as primary text — use plum black (\\`#211922\\`)\n- Don't use pill-shaped buttons — 16px radius is rounded but not pill\n- Don't add heavy shadows — Pinterest is flat by design, depth from content\n- Don't use small border-radius (<12px) on cards — the generous rounding is core\n- Don't introduce additional brand colors — red + warm neutrals is the complete palette\n- Don't use thin font weights — Pin Sans at 400 minimum\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <576px | Single column, compact layout |\n| Mobile Large | 576–768px | 2-column pin grid |\n| Tablet | 768–890px | Expanded grid |\n| Desktop Small | 890–1312px | Standard masonry grid |\n| Desktop | 1312–1440px | Full layout |\n| Large Desktop | 1440–1680px | Expanded grid columns |\n| Ultra-wide | >1680px | Maximum grid density |\n\n### Collapsing Strategy\n- Pin grid: 5+ columns → 3 → 2 → 1\n- Navigation: search bar + icons → simplified mobile nav\n- Feature sections: side-by-side → stacked\n- Hero: 70px → scales down proportionally\n- Footer: dark multi-column → stacked\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand: Pinterest Red (\\`#e60023\\`)\n- Background: White (\\`#ffffff\\`)\n- Text: Plum Black (\\`#211922\\`)\n- Secondary text: Olive Gray (\\`#62625b\\`)\n- Button surface: Sand Gray (\\`#e5e5e0\\`)\n- Border: Warm Silver (\\`#91918c\\`)\n- Focus: Focus Blue (\\`#435ee5\\`)\n\n### Example Component Prompts\n- \"Create a hero: white background. Headline at 70px Pin Sans weight 600, plum black (#211922). Red CTA button (#e60023, 16px radius, 6px 14px padding). Secondary sand button (#e5e5e0, 16px radius).\"\n- \"Design a pin card: white background, 16px radius, no shadow. Photography fills top, 16px Pin Sans weight 400 description below in #62625b.\"\n- \"Build a circular action button: #e0e0d9 background, 50% radius, #211922 icon.\"\n- \"Create an input field: white background, 1px solid #91918c, 16px radius, 11px 15px padding. Focus: blue outline via semantic tokens.\"\n- \"Design the dark footer: #33332e background. Pinterest script logo in white. 12px Pin Sans links in #91918c.\"\n\n### Iteration Guide\n1. Warm neutrals everywhere — olive/sand grays, never cool steel\n2. Pinterest Red for CTAs only — bold and singular\n3. 16px radius on buttons/inputs, 20px+ on cards — generous but not pill\n4. Pin Sans is the only font — compact at 12px for UI, 70px for display\n5. Photography carries the design — the UI stays warm and minimal\n6. Plum black (#211922) for text — warmer than pure black\n`;\n"],"mappings":";AACO,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/playstation.d.ts

@@ -0,0 +1,3 @@
+declare const playstationBrief = "# Design System Inspired by PlayStation\n\n## 1. Visual Theme & Atmosphere\n\nPlayStation.com carries itself like the marketing wing of a premium consumer-electronics brand that happens to sell entertainment. The page is organized as a **vertical channel of alternating surfaces**: a near-black masthead and hero, a sequence of paper-white editorial panels in the middle, and a deep cobalt-blue footer that anchors the entire experience. Between those surface modes the site leans hard on photography and 3D product renders \u2014 the PS5 console, game cover art, DualSense controllers \u2014 letting the hardware do the emotional work while the chrome stays restrained.\n\nThe signature typographic move is **SST Light (weight 300) at large sizes**. Sony's custom SST family is used from 22px up to 54px in weight 300, giving display headlines a whispered, elegant quality that feels closer to a luxury watch ad than a game store. That \"quiet authority\" is the exact opposite of The Verge's Manuka shout or Wired's newsstand density \u2014 PlayStation wants the type to recede and the product to lead. Body and UI lean on weights 500\u2013700, but the *display* voice is consistently thin and calm.\n\nThe one place restraint breaks is **interaction**. Every primary button has the same hover move: fill swaps to an electric cyan `#1eaedb`, a 2px white border appears, a 2px PlayStation-blue outer ring blooms behind it, and the entire button **scales up 1.2\u00D7**. That combination of color pop, border, ring, and lift-scale is a signature move unique to Sony among major brands \u2014 a miniature \"power-on\" animation that the site repeats hundreds of times across a single page.\n\n**Key Characteristics:**\n- Three-surface channel layout: near-black hero, paper-white content, cobalt-blue footer \u2014 alternating, never blending\n- SST weight 300 at 22\u201354px for display \u2014 \"quiet authority\" headlines that let product photography lead\n- PlayStation Blue `#0070cc` as the brand anchor; cyan `#1eaedb` reserved exclusively for hover/focus states\n- Every interactive element scales 1.2\u00D7 on hover \u2014 a signature \"power-on\" lift unique to PlayStation\n- Pill buttons at full 999px radius; card art in rounded 12\u201324px rectangles\n- Commerce-orange `#d53b00` used exclusively for PlayStation Store / buy-state CTAs\n- Wide breakpoint coverage up to 2120px \u2014 the site scales all the way to 4K-TV browsing contexts\n\n## 2. Color Palette & Roles\n\n### Primary (Brand Anchor)\n- **PlayStation Blue** (`#0070cc`): The brand's anchor color. Used on the primary footer, inline links, primary button fills on dark surfaces, and every \"official\" marker. Treat this as immovable \u2014 it is the color the brand is most associated with in consumer memory.\n- **Console Black** (`#000000`): Pure black for the masthead, hero backdrops, and product presentation zones. PlayStation uses black to frame hardware the way a museum uses black to frame a sculpture.\n\n### Secondary & Accent\n- **PlayStation Cyan** (`#1eaedb`): The interaction color. Applied ONLY to hover, focus, and active states of buttons and links. Never appears as a default background or a text color at rest. Pair with a 2px `#ffffff` border and a 2px `#0070cc` outer ring on hover for the full signature treatment.\n- **Link Hover Blue** (`#1883fd`): The brighter variant used on inline text-link hovers. Distinct from Cyan \u2014 this is the link color, Cyan is the button color.\n- **Dark Link Blue** (`#0068bd`): The link color at rest on light surfaces \u2014 a slightly more saturated cousin of the brand blue.\n\n### Surface & Background\n- **Paper White** (`#ffffff`): Primary content canvas for editorial panels between the masthead and footer.\n- **Ice Mist** (`#f5f7fa`): The atmospheric end-stop of the light section-gradient. Used subtly behind certain panels to lift them off pure white.\n- **Divider Tint** (`#f3f3f3`): The quiet horizontal-rule color between content rows.\n- **Masthead Black** (`#000000`): Top nav and hero canvas \u2014 reserved for product-forward zones.\n- **Shadow Black** (`#121314`): The starting anchor of the dark section-gradient when a panel needs atmospheric depth.\n- **Filter Mist** (`rgba(245, 247, 250, 0.3)`): Translucent background used behind sticky filter bars \u2014 the only \"glassmorphism\" moment on the site.\n\n### Neutrals & Text\n- **Display Ink** (`#000000`): Primary display headlines on white surfaces.\n- **Deep Charcoal** (`#1f1f1f`): Body headlines and link color at rest \u2014 slightly softer than pure black to reduce visual ring on large blocks.\n- **Body Gray** (`#6b6b6b`): Secondary body text and metadata.\n- **Mute Gray** (`#cccccc`): Tertiary labels, disabled states.\n- **Placeholder Ink** (`rgba(0, 0, 0, 0.6)`): Form placeholder text \u2014 60% black, not a separate gray value.\n- **Inverse White** (`#ffffff`): Primary text on dark and blue surfaces.\n- **Dark-Link Blue** (`#53b1ff`): The link color at rest on dark/black surfaces \u2014 a lighter airborne variant of PlayStation Blue for legibility on black.\n\n### Semantic & Commerce\n- **Commerce Orange** (`#d53b00`): Reserved for PlayStation Store buy-state CTAs, price callouts, and \"on sale\" badges. The only warm color on the site \u2014 use sparingly and never outside a commerce context.\n- **Commerce Orange Active** (`#aa2f00`): The pressed/active state of commerce buttons.\n- **Warning Red** (`#c81b3a`): Form errors and destructive-action warnings.\n- **Shadow Wash 80** (`rgba(0, 0, 0, 0.8)`): The dramatic scrim used behind hero text on product photography.\n- **Shadow Wash 16** (`rgba(0, 0, 0, 0.16)`): Low-weight elevation ring on cards.\n- **Shadow Wash 08** (`rgba(0, 0, 0, 0.08)`): Featherweight card elevation \u2014 barely visible but separates white panels from white background.\n- **Shadow Wash 06** (`rgba(0, 0, 0, 0.06)`): The lightest shadow in the system.\n\n### Gradient System\nPlayStation uses **two section gradients** and nothing else:\n- **Light Section Gradient**: from `#ffffff` \u2192 `#f5f7fa` \u2014 an almost-imperceptible wash that quietly lifts a panel off the canvas.\n- **Dark Section Gradient**: from `#121314` \u2192 `#000000` \u2014 a short vertical wash that gives hero panels a subtle vignette without introducing any hue shift.\n\nBoth gradients are used **only as section backgrounds**, never inside components. There are no gradient buttons, no gradient text, no glowing halos. The brand is blue \u2014 not blue-to-purple, not blue-to-cyan.\n\n## 3. Typography Rules\n\n### Font Family\n- **SST** / **Playstation SST** (Sony, proprietary) \u2014 fallback: `Arial`, `Helvetica`. Sony's custom global typeface, designed by Toshi Omagari and Akira Kobayashi. Covers weights 300 / 500 / 600 / 700 across the homepage. The weight **300 at 22\u201354px** is PlayStation's typographic signature.\n- **SST (condensed / alternate)** \u2014 fallback: `helvetica`, `arial`. A compressed variant used in a handful of UI modules where width matters.\n- **Arial** \u2014 utility fallback for the rare button variant that renders in system sans.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|---|---|---|---|---|---|---|\n| Hero Display (XL) | SST | 54px / 3.38rem | 300 | 1.25 | -0.1px | The biggest SST moment on the page \u2014 quiet-weight luxury headline |\n| Hero Display (L) | SST | 44px / 2.75rem | 300 | 1.25 | 0.1px | Secondary hero headlines |\n| Large Display | SST | 35px / 2.20rem | 300 | 1.25 | \u2014 | Feature panel headlines |\n| Mid Display | SST | 28px / 1.75rem | 300 | 1.25 | 0.1px | Section headings |\n| Compact Display | SST | 22px / 1.38rem | 300 | 1.25 | 0.1px | Module titles \u2014 still in light weight 300 |\n| Playstation SST Sub | Playstation SST | 22.5px / 1.41rem | 400 | 1.30 | \u2014 | Promotional sub-heading |\n| UI Heading Small | SST | 18px / 1.13rem | 600 | 1.00 | \u2014 | Tight UI headings |\n| Button / CTA | SST | 18px / 1.13rem | 500 | 1.25 | 0.4px | Primary button label |\n| Button / Emphasized | SST | 18px / 1.13rem | 700 | 1.25 | 0.45px | Higher-emphasis CTAs (buy, subscribe) |\n| Button Serif | SST | 18px / 1.13rem | 600 | 1.50 | \u2014 | Secondary button label |\n| Body Relaxed | SST | 18px / 1.13rem | 400 | 1.50 | 0.1px | Standard reading body |\n| Link Body | SST | 18px / 1.13rem | 400 | 1.50 | \u2014 | Inline link text |\n| Compact Button | SST | 14px / 0.88rem | 700 | 1.25 | 0.324px | Mini CTAs in cards |\n| Utility Caption | SST | 14px / 0.88rem | 500 | 1.50 | \u2014 | Captions, tag labels |\n| Caption Body | SST | 14px / 0.88rem | 400 | 1.50 | \u2014 | Standard metadata |\n| Playstation Caption Bold | Playstation SST | 14px / 0.88rem | 700 | 1.40 | \u2014 | Emphasized caption |\n| Playstation Caption Mid | Playstation SST | 14px / 0.88rem | 600 | 1.40 | \u2014 | Semi-bold caption |\n| Playstation Button | Playstation SST | 14.4px / 0.90rem | 700 | 1.00 | 0.144px | UI button with tight leading |\n| Playstation Tab | Playstation SST | 14px / 0.88rem | 400 | 1.10 | 0.14px | Tab/pill label |\n| Playstation Compact Caption | Playstation SST | 12.8px / 0.80rem | 400 | 1.10 | \u2014 | Smallest UI caption |\n| Micro Caption | SST | 12px / 0.75rem | 500 | 1.50 | \u2014 | Footer microcopy, legal text |\n| Compact Caption Bold | SST | 12.06px / 0.75rem | 700 | 1.50 | \u2014 | Emphasized micro text |\n\n### Principles\n- **Weight 300 at large sizes is the voice.** PlayStation is the only major console brand that uses a light-weight display for its hero headlines. Resist the urge to \"upgrade\" display type to 500 or 700 \u2014 the quietness is the personality.\n- **Weight jumps at the UI layer.** Below 18px the system shifts to 500\u2013700 for legibility. The weight gradient from 300 (display) \u2192 400 (body) \u2192 500 (captions) \u2192 700 (buttons) is the hierarchy.\n- **Letter-spacing is barely-there.** Most values are 0.1\u20130.45px, either positive or slightly negative. The `-0.1px` on the 54px hero tightens the display type just enough to read as \"designed\" without becoming a typographic statement.\n- **Two SST casings.** \"SST\" and \"Playstation SST\" are functionally the same family with slightly different metric sets (Playstation SST is tighter at small sizes). Treat them as interchangeable for purposes outside Sony's internal licensing.\n- **No all-caps.** Unlike The Verge or Wired, PlayStation rarely uses UPPERCASE labels. Kickers and tags stay in title case or sentence case \u2014 another \"quiet authority\" move.\n- **No serif anywhere.** The entire system is sans. There is no print-voice counterpoint.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary \u2014 PlayStation Blue Pill**\n- Background: `#0070cc` (PlayStation Blue)\n- Text: `#ffffff`, SST 18px / 500 / 0.4px tracking\n- Border: none at rest\n- Border radius: `999px` \u2014 full pill\n- Padding: ~`12px 24px` (variable based on size class)\n- Outline: `rgb(255, 255, 255) none 0px` at rest\n- **Hover (signature move)**:\n  - Background fills to `#1eaedb` (PlayStation Cyan)\n  - Text stays `#ffffff`\n  - 2px `#ffffff` border appears\n  - 2px `#0070cc` outer ring shadow blooms (`0 0 0 2px #0070cc`)\n  - `transform: scale(1.2)` \u2014 the button actually grows 20%\n- Active: `opacity: 0.6` \u2014 a quick dim to signal press\n- Focus: Same as hover, but the ring turns into `rgb(0, 114, 206) 0px 0px 0px 2px` focus shadow\n- Transition: ~180ms ease on background, transform, and shadow\n\n**Secondary \u2014 White Outline on Dark**\n- Background: `#ffffff`\n- Text: `#0172ce` (PlayStation Blue variant)\n- Border: `2px outset #000000` \u2014 a genuine `outset` border, which is extremely rare in modern CSS\n- Radius: varies (often `999px` or `36px`)\n- Padding: `16px 20px`\n- Hover: same signature cyan fill + scale(1.2) + ring treatment\n- Focus: same ring treatment\n\n**Commerce Orange**\n- Background: `#d53b00` (Commerce Orange)\n- Text: `#ffffff`, SST 18px / 700 / 0.45px tracking\n- Border radius: `999px` \u2014 pill\n- Used only on PS Store / Buy / Subscribe Plus CTAs\n- Active: background darkens to `#aa2f00`\n- Hover: follows the cyan-invert rule like all other buttons (NOT an orange-specific hover)\n\n**Transparent Ghost**\n- Background: transparent\n- Text: `#1f1f1f` (Deep Charcoal)\n- Border: `1px solid #dedede`\n- Padding: `0 10px` (tight, nav-optimized)\n- Hover: cyan fill, white text, 2px white border, scale(1.2)\n- Active: text shifts to `#0072ce`, opacity 0.6\n\n**Icon Circle**\n- Background: `rgba(0, 0, 0, 0.2)` on photography; `#ffffff` on light surfaces\n- Border radius: `100%` \u2014 perfect circle\n- Used for carousel prev/next arrows and share buttons\n- Hover: lightens to `var(--color-role-backgrounds-primary-link-hover)` (roughly `#e5e5e5` on light)\n\n**Mini CTA (In-card)**\n- SST 14px / 700 / 0.324px tracking\n- Padding ~8px 16px\n- Radius: `999px`\n- Used inside game cards for \"Buy Now\" / \"Add to Cart\" mini CTAs\n\n### Cards & Containers\n\n**Hero Card (Game Feature)**\n- Background: photography/render \u2014 usually black-anchored\n- Border radius: `24px` or `19px` for feature cards\n- Padding: 32\u201348px interior\n- Shadow: `rgba(0, 0, 0, 0.8) 0px 5px 9px 0px` \u2014 a dramatic drop-shadow only used when a card overlaps the hero photography\n- Hover: subtle scale transform, cyan outline appears on primary CTA\n\n**Game Cover Tile**\n- Background: game cover art, unpadded\n- Border radius: `12px` or `13px` (images) / `19px` (card frame)\n- Shadow: `rgba(0, 0, 0, 0.08) 0px 5px 9px 0px` \u2014 feather-weight elevation\n- Hover: the card's primary CTA lights up cyan, the card itself may scale 1.02\u00D7\n- Transition: 200ms ease on transform\n\n**Content Panel (White)**\n- Background: `#ffffff` or the light section gradient `#ffffff \u2192 #f5f7fa`\n- Border: typically none; separated from neighbors by spacing and subtle shadows\n- Radius: `12px`\u2013`24px` depending on panel hierarchy\n- Shadow: `rgba(0, 0, 0, 0.06) 0px 5px 9px 0px` \u2014 the lightest in the system\n\n**Dark Card on Dark**\n- Background: `rgba(0, 0, 0, 0.2)` over photography\n- Border radius: `6px` (compact) or `24px` (feature)\n- Used for \"press kit\" or \"stat block\" inlays over hero video\n\n### Inputs & Forms\n- **Default**: `#ffffff` background, `1px solid #cccccc` border, `3px` border radius (tighter than the rest of the system \u2014 inputs are the one place where PlayStation gets genuinely compact), SST 16px text in `#1f1f1f`, placeholder `rgba(0, 0, 0, 0.6)`.\n- **Focus**: 2px `#0070cc` focus ring via `box-shadow: 0 0 0 2px #0070cc`. No border-color change \u2014 the ring does the work.\n- **Error**: border and text shift to `#c81b3a` (Warning Red), inline error text below in the same red.\n- **Transition**: ~180ms ease on border and shadow.\n\n### Navigation\n\n- **Top nav**: black (`#000000`) full-bleed strip with the PlayStation logo (white) left-aligned, category links centered in SST 14\u201316px / 500, and a small \"Sign In\" CTA right-aligned.\n- **Hover on nav link**: color transitions from `#ffffff` to `#1883fd` (Link Hover Blue), no underline.\n- **Active section**: marked by a subtle 2px underline in `#0070cc`.\n- **Mobile**: nav collapses to a hamburger drawer. Inside the drawer, links stack vertically with 16px gaps and 20px horizontal padding.\n- **Sticky behavior**: the nav stays pinned at the top on scroll; when it enters a light-surface zone it **does not invert** \u2014 it stays black-backed throughout.\n\n### Image Treatment\n\n- **Aspect ratios**: 16:9 hero video/photography, 1:1 console renders, 3:4 game cover art, 4:3 lifestyle imagery.\n- **Corners**: rounded to `12px`, `13px`, or `24px` depending on card context. Game covers get `6\u201312px`, hero images get `24px`.\n- **Full-bleed**: only in the masthead hero and footer promotional banners. Everything else sits inside a padded content column.\n- **Shadow**: dramatic `rgba(0, 0, 0, 0.8) 0 5px 9px 0` drop on heroes, feather `rgba(0, 0, 0, 0.06) 0 5px 9px 0` on grid tiles.\n- **Hover**: image stays static, the card frame and primary CTA respond.\n- **Lazy loading**: `loading=\"lazy\"` on everything below the fold, `eager` on the masthead hero.\n\n### Game Store Pill (Distinctive)\n- Background: `#ffffff`\n- Text: `#000000`, SST 14px / 500\n- Padding: `14px 18px`\n- Radius: `9999px` \u2014 full pill\n- A neutral pill tag that sits next to game covers to label platform (\"PS5\", \"PS4\", \"PSVR2\"). White-on-dark contrast.\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px.\n- **Scale**: 1, 2, 3, 4.5, 5, 8, 9, 10, 12, 14, 15, 16, 18, 20, 21px.\n- **Section padding**: 48\u201396px vertical between major panels. Hero-to-content transitions use the larger end.\n- **Card padding**: 20\u201332px interior. Feature hero cards can expand to 48px.\n- **Inline spacing**: 8\u201312px between headline and deck, 12\u201316px between deck and CTA.\n- **Micro-scale**: The 1/2/3/4.5/5/9/10/12 values are used for pill padding, caption spacing, and border offsets \u2014 not for editorial rhythm.\n\n### Grid & Container\n- **Max width**: ~1920px (dembrandt detected breakpoints up to 2120px). Container caps typically around `1280\u20131920px` depending on panel.\n- **Column patterns**: 12-column responsive grid that resolves into 3/4/6-column game tile rows depending on hierarchy. Hero zones often span 12 columns; featured tiles sit in 6+3+3 or 4+4+4 configurations.\n- **Outer padding**: 16px mobile \u2192 48px tablet \u2192 64\u201396px desktop.\n- **Gutters**: 16\u201324px between columns, tighter (8\u201312px) inside tile clusters.\n\n### Whitespace Philosophy\nPlayStation treats whitespace like a luxury brand treats store lighting \u2014 as a premium signal. There is noticeably more vertical breathing room between modules than on any other major retail site, and the white editorial panels often hold only one headline + one image + one CTA at hero-scale padding. The effect is a \"gallery pace\" where each product gets its own room rather than competing in a grid of thumbnails.\n\n### Border Radius Scale\n- **2px** \u2014 cookie banner buttons and small admin UI\n- **3px** \u2014 form inputs, tab panels (tighter than everything else \u2014 a deliberate \"functional UI\" cue)\n- **6px** \u2014 compact buttons and inline images\n- **12px** \u2014 standard game cover images and content images\n- **13px** \u2014 certain figure wrappers (a 1px offset from 12px for nesting)\n- **19px** \u2014 feature cards\n- **20px** \u2014 inline tag spans\n- **24px** \u2014 hero cards, primary feature frames\n- **36px** \u2014 full-pill nav and secondary button variants\n- **48px** \u2014 large feature buttons\n- **999px / 100%** \u2014 full pill primary buttons and circular icon buttons\n\nEleven discrete radius values \u2014 one of the richest radius systems of any site in this catalog. The range exists because PlayStation deliberately uses different radii for different *hierarchies*: 3px for utility, 12px for media, 24px for features, 999px for CTAs.\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|---|---|---|\n| 0 | No shadow | Default content on `#ffffff` |\n| 1 | `rgba(0, 0, 0, 0.06) 0 5px 9px 0` | Feather-light editorial panel lift |\n| 2 | `rgba(0, 0, 0, 0.08) 0 5px 9px 0` | Standard grid tile elevation |\n| 3 | `rgba(0, 0, 0, 0.16) 0 5px 9px 0` | Emphasized card (hover or active) |\n| 4 | `rgba(0, 0, 0, 0.8) 0 5px 9px 0` | Hero overlay shadow \u2014 dramatic drop used over photography |\n| 5 | `0 0 0 2px #0070cc` (focus ring) | Primary button focus state |\n| 6 | `0 0 0 2px #000000` (hover ring) | Secondary button hover ring |\n| 7 | Section gradient `#121314 \u2192 #000000` | Atmospheric depth on dark hero panels |\n\nPlayStation's depth philosophy is **layered but restrained**. The shadow scale runs from 0.06 to 0.16 for normal states, then jumps to 0.8 for hero drops \u2014 there is no 0.2, 0.3, 0.4 middle ground. The effect is that most of the page sits almost flat, but when a hero card needs to float over photography, it genuinely *floats*. Elevation is either whispered or shouted, never muttered.\n\n### Decorative Depth\n- **Section gradients** (dark and light, both described above) \u2014 used only as section backgrounds\n- **Focus/hover rings** at 2px, always blue or cyan depending on state\n- **No glows, blurs, or atmospheric effects** beyond the two section gradients\n- **No gradient buttons or text** \u2014 the visual system is solid color blocks everywhere except section transitions\n\n## 7. Do's and Don'ts\n\n### Do\n- **Do** use PlayStation Blue (`#0070cc`) as the primary CTA fill and the footer anchor. It is the brand's anchor color.\n- **Do** use SST weight 300 for every display headline 22px and above. The quiet-weight headline is the voice.\n- **Do** apply the full hover signature to every primary button: cyan fill + 2px white border + 2px blue outer ring + `scale(1.2)`.\n- **Do** use full-pill radius (`999px`) on primary and commerce buttons.\n- **Do** reserve PlayStation Cyan (`#1eaedb`) exclusively for hover, focus, and active states \u2014 never as a resting background.\n- **Do** use Commerce Orange (`#d53b00`) only on PlayStation Store / purchase CTAs and price callouts.\n- **Do** alternate dark hero panels with white content panels and anchor with a deep blue footer \u2014 the three-surface channel layout is the page rhythm.\n- **Do** use dramatic `rgba(0, 0, 0, 0.8)` hero drop shadows when a card overlaps product photography.\n- **Do** keep the top nav black on every scroll position \u2014 it does not invert to white over light panels.\n\n### Don't\n- **Don't** bold display headlines. Weight 300 at 22\u201354px is the PlayStation voice. Weight 700 display type reads as \"another game retailer\".\n- **Don't** use ALL-CAPS labels or kickers. PlayStation rarely uses uppercase \u2014 it is a quiet-authority brand, not a hazard-tape one.\n- **Don't** use gradient buttons, text, or backgrounds outside the two declared section gradients.\n- **Don't** introduce warm colors outside Commerce Orange. No red CTAs, no yellow highlights, no green success pills.\n- **Don't** use square corners on buttons or media. The system has eleven radii \u2014 pick one, but never `0`.\n- **Don't** skip the `scale(1.2)` hover move on primary buttons. The lift-scale is a brand interaction signature.\n- **Don't** use serif type. The system is 100% SST sans.\n- **Don't** let cyan `#1eaedb` appear as a text or background color at rest. It only exists in motion.\n- **Don't** design panels that fight for attention. PlayStation's whitespace rhythm gives each module its own \"gallery room\".\n\n## 8. Responsive Behavior\n\n### Breakpoints\n\n| Name | Width | Key Changes |\n|---|---|---|\n| Small Mobile | <400px | Single column, nav collapses to hamburger, SST hero scales to ~28px |\n| Mobile | 400\u2013599px | Single column, tiles stack full-width, padding opens to 16px |\n| Large Mobile | 600\u2013767px | Still single column but 2-column tile option in select modules |\n| Tablet Portrait | 768\u20131023px | 2-column game grid, nav still condensed |\n| Tablet Landscape | 1024\u20131279px | 3\u20134 column grid, full nav restored |\n| Desktop | 1280\u20131599px | Full editorial grid, max hero display scale (44\u201354px) |\n| Large Desktop | 1600\u20131919px | Container caps at 1600px, margins expand |\n| 4K / Big-Screen | \u22651920px | Container expands to 1920px max, hero content scales up to match TV viewing distance |\n| Ultra-Wide | \u22652120px | Extreme breakpoint \u2014 page stays anchored, outer margins absorb extra width |\n\nThe dembrandt sweep detected 30 breakpoints between 320px and 2120px \u2014 an unusually wide responsive range. PlayStation tunes specifically for **big-screen contexts** (1920\u20132120px) because PS5 owners frequently browse the site on TVs via the console's browser or via cast-to-TV from a phone. Most retail sites stop tuning at 1440px; PlayStation keeps tuning through 4K.\n\n### Touch Targets\n- Primary pill buttons are ~48\u201356px tall (SST 18px text + ~12\u201316px vertical padding) \u2014 comfortably WCAG AAA.\n- Nav links are smaller (~32\u201340px tall) at desktop; on mobile they pad out to 48px+ inside the drawer.\n- Icon circle buttons are 40\u201348px \u2014 touch-friendly.\n\n### Collapsing Strategy\n- **Nav**: full nav \u2192 condensed \u2192 hamburger drawer as viewport narrows. Logo stays pinned left; CTA stays pinned right.\n- **Grid**: 6-col \u2192 4-col \u2192 3-col \u2192 2-col \u2192 1-col. Game tile cards reflow without cropping cover art.\n- **Spacing**: section padding tightens from 96px \u2192 64px \u2192 48px \u2192 32px \u2192 24px as viewport narrows.\n- **Type**: SST hero scales from 54px \u2192 44px \u2192 35px \u2192 28px \u2192 22px. The light weight 300 is preserved at every size.\n- **Hero photography**: art-direction swap \u2014 desktop uses wide 16:9 crops, mobile uses 4:3 or 1:1 crops with the product centered.\n\n### Image Behavior\n- Responsive raster (`srcset` + `<picture>` with art-direction), aspect ratios preserved per breakpoint.\n- 4K-ready: the site serves high-density imagery at 1920px+ to avoid upscaling on TV browsing.\n- `loading=\"lazy\"` on everything below the fold; hero is `eager` with a preload hint.\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- **Primary CTA**: \"PlayStation Blue (`#0070cc`)\"\n- **Hover / Focus Accent**: \"PlayStation Cyan (`#1eaedb`)\"\n- **Background (White Surface)**: \"Paper White (`#ffffff`)\"\n- **Background (Dark Surface)**: \"Console Black (`#000000`)\"\n- **Heading Text on White**: \"Display Ink (`#000000`)\"\n- **Body Text on White**: \"Deep Charcoal (`#1f1f1f`)\"\n- **Body Text on Black**: \"Inverse White (`#ffffff`)\"\n- **Commerce / Buy Accent**: \"Commerce Orange (`#d53b00`)\"\n- **Footer Anchor**: \"PlayStation Blue (`#0070cc`)\"\n\n### Example Component Prompts\n1. *\"Create a primary CTA button with a `#0070cc` PlayStation Blue fill, white text in SST 18px / 500 / 0.4px tracking, 999px border radius, 12px \u00D7 24px padding. On hover, the background transitions to `#1eaedb` PlayStation Cyan, a 2px `#ffffff` border appears, a 2px `#0070cc` outer ring blooms via box-shadow, and the entire button scales 1.2\u00D7 \u2014 all in a 180ms ease transition.\"*\n2. *\"Design a hero panel on a `#000000` Console Black canvas with a 54px SST weight 300 headline in `#ffffff` with -0.1px letter-spacing and 1.25 line-height. Place a single primary CTA below with the standard PlayStation hover treatment. No ALL-CAPS labels anywhere.\"*\n3. *\"Build a game cover tile: 3:4 aspect ratio image with 12px border radius, feather-weight `rgba(0, 0, 0, 0.08) 0 5px 9px 0` drop shadow, a 14px SST 700 title below, a 12px SST 500 platform tag, and a mini 14px / 700 / 0.324px tracking primary CTA in PlayStation Blue.\"*\n4. *\"Create a commerce pill button for a PlayStation Store purchase: `#d53b00` Commerce Orange fill, `#ffffff` text in SST 18px / 700 / 0.45px tracking, 999px radius, 12px \u00D7 28px padding. Active state darkens to `#aa2f00`. Hover follows the standard cyan-invert with 1.2\u00D7 scale.\"*\n5. *\"Design a white content panel between dark hero sections: `#ffffff` background with the subtle `#ffffff \u2192 #f5f7fa` light section gradient, 24px border radius, 48px interior padding, feather-weight `rgba(0, 0, 0, 0.06) 0 5px 9px 0` elevation, a 35px SST 300 headline, a 18px body paragraph, and a single primary CTA.\"*\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. **Audit display weight.** Every headline 22px and above should be SST weight 300. If you see weight 500 or 700 at hero scale, you've lost the PlayStation voice.\n2. **Audit the hover treatment.** Every primary button must scale 1.2\u00D7 on hover with the cyan-fill + white-border + blue-ring combination. Miss any of those four and the interaction signature breaks.\n3. **Audit corners.** Every container and button should land on 2, 3, 6, 12, 13, 19, 20, 24, 36, 48, or 999px / 100%. Square corners break the voice.\n4. **Audit color sprawl.** Only PlayStation Blue (`#0070cc`), Cyan (`#1eaedb`), Commerce Orange (`#d53b00`), and the declared grays/blacks/whites should appear in chrome. If you see any other hue, correct it.\n5. **Audit surface alternation.** The page should alternate dark hero \u2192 white content \u2192 dark hero \u2192 white content \u2192 blue footer. If two same-surface panels are adjacent, insert a transition.\n6. **Audit casing.** Sentence case and title case only. No ALL-CAPS labels, buttons, or kickers. If you see uppercase, convert it.\n7. **Audit shadow weight.** Shadow opacity should land on 0.06 / 0.08 / 0.16 / 0.8 \u2014 nothing in between. If you see 0.1, 0.2, 0.3, 0.5 drop shadows, correct to the nearest declared tier.\n8. **Audit whitespace.** If two modules feel \"competitive\" (fighting for attention), add 48\u201396px of vertical breathing room. PlayStation's gallery-pace rhythm is non-negotiable.\n";
+
+export { playstationBrief };