@hex-core/themes 0.1.0 → 0.2.0

package/dist/presets/_briefs/posthog.js

@@ -0,0 +1,262 @@
+// src/presets/_briefs/posthog.ts
+var posthogBrief = `# Design System Inspired by PostHog
+
+## 1. Visual Theme & Atmosphere
+
+PostHog's website feels like a startup's internal wiki that escaped into the wild \u2014 warm, irreverent, and deliberately anti-corporate. The background isn't the expected crisp white or dark void of developer tools; it's a warm, sage-tinted cream (\`#fdfdf8\`) that gives every surface a handmade, paper-like quality. Colors lean into earthy olive greens and muted sage rather than the conventional blues and purples of the SaaS world. It's as if someone designed a developer analytics platform inside a cozy garden shed.
+
+The personality is the star: hand-drawn hedgehog illustrations, quirky action figures, and playful imagery replace the stock photography and abstract gradients typical of B2B SaaS. IBM Plex Sans Variable serves as the typographic foundation \u2014 a font with genuine technical credibility (created by IBM, widely used in developer contexts) deployed here with bold weights (700, 800) on headings and generous line-heights on body text. The typography says "we're serious engineers" while everything around it says "but we don't take ourselves too seriously."
+
+The interaction design carries the same spirit: hover states flash PostHog Orange (\`#F54E00\`) text \u2014 a hidden brand color that doesn't appear at rest but surprises on interaction. Dark near-black buttons (\`#1e1f23\`) use opacity reduction on hover rather than color shifts, and active states scale slightly. The border system uses sage-tinted grays (\`#bfc1b7\`) that harmonize with the olive text palette. Built on Tailwind CSS with Radix UI and shadcn/ui primitives, the technical foundation is modern and component-driven, but the visual output is stubbornly unique.
+
+**Key Characteristics:**
+- Warm sage/olive color palette instead of conventional blues \u2014 earthy and approachable
+- IBM Plex Sans Variable font at bold weights (700/800) for headings with generous 1.50+ line-heights
+- Hidden brand orange (\`#F54E00\`) that only appears on hover interactions \u2014 a delightful surprise
+- Hand-drawn hedgehog illustrations and playful imagery \u2014 deliberately anti-corporate
+- Sage-tinted borders (\`#bfc1b7\`) and backgrounds (\`#eeefe9\`) creating a unified warm-green system
+- Dark near-black CTAs (\`#1e1f23\`) with opacity-based hover states
+- Content-heavy editorial layout \u2014 the site reads like a magazine, not a typical landing page
+- Tailwind CSS + Radix UI + shadcn/ui component architecture
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Olive Ink** (\`#4d4f46\`): Primary text color \u2014 a distinctive olive-gray that gives all text a warm, earthy tone
+- **Deep Olive** (\`#23251d\`): Link text and high-emphasis headings \u2014 near-black with green undertone
+- **PostHog Orange** (\`#F54E00\`): Hidden brand accent \u2014 appears only on hover states, a vibrant orange that surprises
+
+### Secondary & Accent
+- **Amber Gold** (\`#F7A501\`): Secondary hover accent on dark buttons \u2014 warm gold that pairs with the orange
+- **Gold Border** (\`#b17816\`): Special button borders \u2014 an amber-gold for featured CTAs
+- **Focus Blue** (\`#3b82f6\`): Focus ring color (Tailwind default) \u2014 the only blue in the system, reserved for accessibility
+
+### Surface & Background
+- **Warm Parchment** (\`#fdfdf8\`): Primary page background \u2014 warm near-white with yellow-green undertone
+- **Sage Cream** (\`#eeefe9\`): Input backgrounds, secondary surfaces \u2014 light sage tint
+- **Light Sage** (\`#e5e7e0\`): Button backgrounds, tertiary surfaces \u2014 muted sage-green
+- **Warm Tan** (\`#d4c9b8\`): Featured button backgrounds \u2014 warm tan/khaki for emphasis
+- **Hover White** (\`#f4f4f4\`): Universal hover background state
+
+### Neutrals & Text
+- **Olive Ink** (\`#4d4f46\`): Primary body and UI text
+- **Muted Olive** (\`#65675e\`): Secondary text, button labels on light backgrounds
+- **Sage Placeholder** (\`#9ea096\`): Placeholder text, disabled states \u2014 warm sage-green
+- **Sage Border** (\`#bfc1b7\`): Primary border color \u2014 olive-tinted gray for all borders
+- **Light Border** (\`#b6b7af\`): Secondary border, toolbar borders \u2014 slightly darker sage
+
+### Semantic & Accent
+- **PostHog Orange** (\`#F54E00\`): Hover text accent \u2014 signals interactivity and brand personality
+- **Amber Gold** (\`#F7A501\`): Dark button hover accent \u2014 warmth signal
+- **Focus Blue** (\`#3b82f6\` at 50% opacity): Keyboard focus rings \u2014 accessibility-only color
+- **Dark Text** (\`#111827\`): High-contrast link text \u2014 near-black for important links
+
+### Gradient System
+- No gradients on the marketing site \u2014 PostHog's visual language is deliberately flat and warm
+- Depth is achieved through layered surfaces and border containment, not color transitions
+
+## 3. Typography Rules
+
+### Font Family
+- **Display & Body**: \`IBM Plex Sans Variable\` \u2014 variable font (100\u2013700+ weight range). Fallbacks: \`IBM Plex Sans, -apple-system, system-ui, Avenir Next, Avenir, Segoe UI, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Arial\`
+- **Monospace**: \`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New\` \u2014 system monospace stack
+- **Code Display**: \`Source Code Pro\` \u2014 with fallbacks: \`Menlo, Consolas, Monaco\`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | IBM Plex Sans Variable | 30px | 800 | 1.20 | -0.75px | Extra-bold, tight, maximum impact |
+| Section Heading | IBM Plex Sans Variable | 36px | 700 | 1.50 | 0px | Large but generous line-height |
+| Feature Heading | IBM Plex Sans Variable | 24px | 700 | 1.33 | 0px | Feature section titles |
+| Card Heading | IBM Plex Sans Variable | 21.4px | 700 | 1.40 | -0.54px | Slightly unusual size (scaled) |
+| Sub-heading | IBM Plex Sans Variable | 20px | 700 | 1.40 | -0.5px | Content sub-sections |
+| Sub-heading Uppercase | IBM Plex Sans Variable | 20px | 700 | 1.40 | 0px | Uppercase transform for labels |
+| Body Emphasis | IBM Plex Sans Variable | 19.3px | 600 | 1.56 | -0.48px | Semi-bold callout text |
+| Label Uppercase | IBM Plex Sans Variable | 18px | 700 | 1.50 | 0px | Uppercase category labels |
+| Body Semi | IBM Plex Sans Variable | 18px | 600 | 1.56 | 0px | Semi-bold body text |
+| Body | IBM Plex Sans Variable | 16px | 400 | 1.50 | 0px | Standard reading text |
+| Body Medium | IBM Plex Sans Variable | 16px | 500 | 1.50 | 0px | Medium-weight body |
+| Body Relaxed | IBM Plex Sans Variable | 15px | 400 | 1.71 | 0px | Relaxed line-height for long reads |
+| Nav / UI | IBM Plex Sans Variable | 15px | 600 | 1.50 | 0px | Navigation and UI labels |
+| Caption | IBM Plex Sans Variable | 14px | 400\u2013700 | 1.43 | 0px | Small text, various weights |
+| Small Label | IBM Plex Sans Variable | 13px | 500\u2013700 | 1.00\u20131.50 | 0px | Tags, badges, micro labels |
+| Micro | IBM Plex Sans Variable | 12px | 400\u2013700 | 1.33 | 0px | Smallest text, some uppercase |
+| Code | Source Code Pro | 14px | 500 | 1.43 | 0px | Code snippets and terminal |
+
+### Principles
+- **Bold heading dominance**: Headings use 700\u2013800 weight \u2014 PostHog's typography is confident and assertive, not whispery
+- **Generous body line-heights**: Body text at 1.50\u20131.71 line-height creates extremely comfortable reading \u2014 the site is content-heavy and optimized for long sessions
+- **Fractional sizes**: Several sizes (21.4px, 19.3px, 13.7px) suggest a fluid/scaled type system rather than fixed stops \u2014 likely computed from Tailwind's rem scale at non-standard base
+- **Uppercase as category signal**: Bold uppercase labels (18px\u201320px weight 700) are used for product category headings \u2014 a magazine-editorial convention
+- **Selective negative tracking**: Letter-spacing tightens on display text (-0.75px at 30px) but relaxes to 0px on body \u2014 headlines compress, body breathes
+
+## 4. Component Stylings
+
+### Buttons
+- **Dark Primary**: \`#1e1f23\` background, white text, 6px radius, \`10px 12px\` padding. Hover: opacity 0.7 with Amber Gold text. Active: opacity 0.8 with slight scale transform. The main CTA \u2014 dark and confident
+- **Sage Light**: \`#e5e7e0\` background, Olive Ink (\`#4d4f46\`) text, 4px radius, \`4px\` padding. Hover: \`#f4f4f4\` bg with PostHog Orange text. Compact utility button
+- **Warm Tan Featured**: \`#d4c9b8\` background, black text, no visible radius. Hover: same orange text flash. Featured/premium actions
+- **Input-style**: \`#eeefe9\` background, Sage Placeholder (\`#9ea096\`) text, 4px radius, 1px \`#b6b7af\` border. Looks like a search/filter control
+- **Near-white Ghost**: \`#fdfdf8\` background, Olive Ink text, 4px radius, transparent 1px border. Minimal presence
+- **Hover pattern**: All buttons flash PostHog Orange (\`#F54E00\`) or Amber Gold (\`#F7A501\`) text on hover \u2014 the brand's signature interaction surprise
+
+### Cards & Containers
+- **Bordered Card**: Warm Parchment (\`#fdfdf8\`) or white background, 1px \`#bfc1b7\` border, 4px\u20136px radius \u2014 clean and minimal
+- **Sage Surface Card**: \`#eeefe9\` background for secondary content containers
+- **Shadow Card**: \`0px 25px 50px -12px rgba(0, 0, 0, 0.25)\` \u2014 a single deep shadow for elevated content (modals, dropdowns)
+- **Hover**: Orange text flash on interactive cards \u2014 consistent with button behavior
+
+### Inputs & Forms
+- **Default**: \`#eeefe9\` background, \`#9ea096\` placeholder text, 1px \`#b6b7af\` border, 4px radius, \`2px 0px 2px 8px\` padding
+- **Focus**: \`#3b82f6\` ring at 50% opacity (Tailwind blue focus ring)
+- **Text color**: \`#374151\` for input values \u2014 darker than primary text for readability
+- **Border variations**: Multiple border patterns \u2014 some inputs use compound borders (top, left, bottom-only)
+
+### Navigation
+- **Top nav**: Warm background, IBM Plex Sans at 15px weight 600
+- **Dropdown menus**: Rich mega-menu structure with product categories
+- **Link color**: Deep Olive (\`#23251d\`) for nav links, underline on hover
+- **CTA**: Dark Primary button (#1e1f23) in the nav \u2014 "Get started - free"
+- **Mobile**: Collapses to hamburger with simplified menu
+
+### Image Treatment
+- **Hand-drawn illustrations**: Hedgehog mascot and quirky illustrations \u2014 the signature visual element
+- **Product screenshots**: UI screenshots embedded in device frames or clean containers
+- **Action figures**: Playful product photography of hedgehog figurines \u2014 anti-corporate
+- **Trust logos**: Enterprise logos (Airbus, GOV.UK) displayed in a muted trust bar
+- **Aspect ratios**: Mixed \u2014 illustrations are irregular, screenshots are 16:9 or widescreen
+
+### AI Chat Widget
+- Floating PostHog AI assistant with speech bubble \u2014 an interactive product demo embedded in the marketing site
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 2px, 4px, 6px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 34px
+- **Section padding**: 32px\u201348px vertical between sections (compact for a content-heavy site)
+- **Card padding**: 4px\u201312px internal (notably compact)
+- **Component gaps**: 4px\u20138px between related elements
+
+### Grid & Container
+- **Max width**: 1536px (largest breakpoint), with content containers likely 1200px\u20131280px
+- **Column patterns**: Varied \u2014 single column for text content, 2-3 column grids for feature cards, asymmetric layouts for product demos
+- **Breakpoints**: 13 defined \u2014 1px, 425px, 482px, 640px, 768px, 767px, 800px, 900px, 1024px, 1076px, 1160px, 1280px, 1536px
+
+### Whitespace Philosophy
+- **Content-dense by design**: PostHog's site is information-rich \u2014 whitespace is measured, not lavish
+- **Editorial pacing**: Content sections flow like a magazine with varied layouts keeping the eye moving
+- **Illustrations as breathing room**: Hand-drawn hedgehog art breaks up dense content sections naturally
+
+### Border Radius Scale
+- **2px**: Small inline elements, tags (\`span\`)
+- **4px**: Primary UI components \u2014 buttons, inputs, dropdowns, menu items (\`button\`, \`div\`, \`combobox\`)
+- **6px**: Secondary containers \u2014 larger buttons, list items, card variants (\`button\`, \`div\`, \`li\`)
+- **9999px**: Pill shape \u2014 badges, status indicators, rounded tags (\`span\`, \`div\`)
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Flat) | No shadow, warm parchment background | Page canvas, most surfaces |
+| Level 1 (Border) | \`1px solid #bfc1b7\` (Sage Border) | Card containment, input borders, section dividers |
+| Level 2 (Compound Border) | Multiple 1px borders on different sides | Input groupings, toolbar elements |
+| Level 3 (Deep Shadow) | \`0px 25px 50px -12px rgba(0, 0, 0, 0.25)\` | Modals, floating elements, mega-menu dropdowns |
+
+### Shadow Philosophy
+PostHog's elevation system is remarkably minimal \u2014 only one shadow definition exists in the entire system. Depth is communicated through:
+- **Border containment**: Sage-tinted borders (\`#bfc1b7\`) at 1px create gentle warm separation
+- **Surface color shifts**: Moving from \`#fdfdf8\` to \`#eeefe9\` to \`#e5e7e0\` creates layered depth without shadows
+- **The single shadow**: The one defined shadow (\`0 25px 50px -12px\`) is reserved for floating elements \u2014 modals, dropdowns, popovers. It's a deep, dramatic shadow that creates clear separation when needed
+
+### Decorative Depth
+- **Illustration layering**: Hand-drawn hedgehog art creates visual depth naturally
+- **No gradients or glow**: The flat, warm surface system relies entirely on border and surface-color differentiation
+- **No glassmorphism**: Fully opaque surfaces throughout
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the olive/sage color family (#4d4f46, #23251d, #bfc1b7) for text and borders \u2014 the warm green undertone is essential to the brand
+- Flash PostHog Orange (#F54E00) on hover states \u2014 it's the hidden brand signature
+- Use IBM Plex Sans at bold weights (700/800) for headings \u2014 the font carries technical credibility
+- Keep body text at generous line-heights (1.50\u20131.71) \u2014 the content-heavy site demands readability
+- Maintain the warm parchment background (#fdfdf8) \u2014 not pure white, never cold
+- Use 4px border-radius for most UI elements \u2014 keep corners subtle and functional
+- Include playful, hand-drawn illustration elements \u2014 the personality is the differentiator
+- Apply opacity-based hover states (0.7 opacity) on dark buttons rather than color shifts
+
+### Don't
+- Use blue, purple, or typical tech-SaaS colors \u2014 PostHog's palette is deliberately olive/sage
+- Add heavy shadows \u2014 the system uses one shadow for floating elements only; everything else uses borders
+- Make the design look "polished" or "premium" in a conventional sense \u2014 PostHog's charm is its irreverent, scrappy energy
+- Use tight line-heights on body text \u2014 the generous 1.50+ spacing is essential for the content-heavy layout
+- Apply large border-radius (12px+) on cards \u2014 PostHog uses 4px\u20136px, keeping things tight and functional
+- Remove the orange hover flash \u2014 it's a core interaction pattern, not decoration
+- Replace illustrations with stock photography \u2014 the hand-drawn hedgehog art is the brand
+- Use pure white (#ffffff) as page background \u2014 the warm sage-cream (#fdfdf8) tint is foundational
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <425px | Single column, compact padding, stacked cards |
+| Mobile | 425px\u2013640px | Slight layout adjustments, larger touch targets |
+| Tablet | 640px\u2013768px | 2-column grids begin, nav partially visible |
+| Tablet Large | 768px\u20131024px | Multi-column layouts, expanded navigation |
+| Desktop | 1024px\u20131280px | Full layout, 3-column feature grids, expanded mega-menu |
+| Large Desktop | 1280px\u20131536px | Max-width container, generous margins |
+| Extra Large | >1536px | Centered container at max-width |
+
+### Touch Targets
+- Buttons: 4px\u20136px radius with \`4px\u201312px\` padding \u2014 compact but usable
+- Nav links: 15px text at weight 600 with adequate padding
+- Mobile: Hamburger menu with simplified navigation
+- Inputs: Generous vertical padding for thumb-friendly forms
+
+### Collapsing Strategy
+- **Navigation**: Full mega-menu with dropdowns \u2192 hamburger menu on mobile
+- **Feature grids**: 3-column \u2192 2-column \u2192 single column stacked
+- **Typography**: Display sizes reduce across breakpoints (30px \u2192 smaller)
+- **Illustrations**: Scale within containers, some may hide on mobile for space
+- **Section spacing**: Reduces proportionally while maintaining readability
+
+### Image Behavior
+- Illustrations scale responsively within containers
+- Product screenshots maintain aspect ratios
+- Trust logos reflow into multi-row grids on mobile
+- AI chat widget may reposition or simplify on small screens
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Text: Olive Ink (\`#4d4f46\`)
+- Dark Text: Deep Olive (\`#23251d\`)
+- Hover Accent: PostHog Orange (\`#F54E00\`)
+- Dark CTA: Near-Black (\`#1e1f23\`)
+- Button Surface: Light Sage (\`#e5e7e0\`)
+- Page Background: Warm Parchment (\`#fdfdf8\`)
+- Border: Sage Border (\`#bfc1b7\`)
+- Placeholder: Sage Placeholder (\`#9ea096\`)
+
+### Example Component Prompts
+- "Create a hero section on warm parchment background (#fdfdf8) with 30px IBM Plex Sans heading at weight 800, line-height 1.20, letter-spacing -0.75px, olive ink text (#4d4f46), and a dark CTA button (#1e1f23, 6px radius, white text, opacity 0.7 on hover)"
+- "Design a feature card with #fdfdf8 background, 1px #bfc1b7 border, 4px radius, IBM Plex Sans heading at 20px weight 700, and 16px body text at weight 400 with 1.50 line-height in olive ink (#4d4f46)"
+- "Build a navigation bar with warm background, IBM Plex Sans links at 15px weight 600 in deep olive (#23251d), underline on hover, and a dark CTA button (#1e1f23) at the right"
+- "Create a button group: primary dark (#1e1f23, white text, 6px radius), secondary sage (#e5e7e0, #4d4f46 text, 4px radius), and ghost/text button \u2014 all flash #F54E00 orange text on hover"
+- "Design an input field with #eeefe9 background, 1px #b6b7af border, 4px radius, #9ea096 placeholder text, focus ring in #3b82f6 at 50% opacity"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Verify the background is warm parchment (#fdfdf8) not pure white \u2014 the sage-cream warmth is essential
+2. Check that all text uses the olive family (#4d4f46, #23251d) not pure black or neutral gray
+3. Ensure hover states flash PostHog Orange (#F54E00) \u2014 if hovering feels bland, you're missing this
+4. Confirm borders use sage-tinted gray (#bfc1b7) not neutral gray \u2014 warmth runs through every element
+5. The overall tone should feel like a fun, scrappy startup wiki \u2014 never corporate-polished or sterile
+`;
+export {
+  posthogBrief
+};
+//# sourceMappingURL=posthog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/presets/_briefs/posthog.ts"],"sourcesContent":["// AUTO-GENERATED — do not hand-edit. Source: https://github.com/voltagent/awesome-design-md\nexport const posthogBrief = `# Design System Inspired by PostHog\n\n## 1. Visual Theme & Atmosphere\n\nPostHog's website feels like a startup's internal wiki that escaped into the wild — warm, irreverent, and deliberately anti-corporate. The background isn't the expected crisp white or dark void of developer tools; it's a warm, sage-tinted cream (\\`#fdfdf8\\`) that gives every surface a handmade, paper-like quality. Colors lean into earthy olive greens and muted sage rather than the conventional blues and purples of the SaaS world. It's as if someone designed a developer analytics platform inside a cozy garden shed.\n\nThe personality is the star: hand-drawn hedgehog illustrations, quirky action figures, and playful imagery replace the stock photography and abstract gradients typical of B2B SaaS. IBM Plex Sans Variable serves as the typographic foundation — a font with genuine technical credibility (created by IBM, widely used in developer contexts) deployed here with bold weights (700, 800) on headings and generous line-heights on body text. The typography says \"we're serious engineers\" while everything around it says \"but we don't take ourselves too seriously.\"\n\nThe interaction design carries the same spirit: hover states flash PostHog Orange (\\`#F54E00\\`) text — a hidden brand color that doesn't appear at rest but surprises on interaction. Dark near-black buttons (\\`#1e1f23\\`) use opacity reduction on hover rather than color shifts, and active states scale slightly. The border system uses sage-tinted grays (\\`#bfc1b7\\`) that harmonize with the olive text palette. Built on Tailwind CSS with Radix UI and shadcn/ui primitives, the technical foundation is modern and component-driven, but the visual output is stubbornly unique.\n\n**Key Characteristics:**\n- Warm sage/olive color palette instead of conventional blues — earthy and approachable\n- IBM Plex Sans Variable font at bold weights (700/800) for headings with generous 1.50+ line-heights\n- Hidden brand orange (\\`#F54E00\\`) that only appears on hover interactions — a delightful surprise\n- Hand-drawn hedgehog illustrations and playful imagery — deliberately anti-corporate\n- Sage-tinted borders (\\`#bfc1b7\\`) and backgrounds (\\`#eeefe9\\`) creating a unified warm-green system\n- Dark near-black CTAs (\\`#1e1f23\\`) with opacity-based hover states\n- Content-heavy editorial layout — the site reads like a magazine, not a typical landing page\n- Tailwind CSS + Radix UI + shadcn/ui component architecture\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Olive Ink** (\\`#4d4f46\\`): Primary text color — a distinctive olive-gray that gives all text a warm, earthy tone\n- **Deep Olive** (\\`#23251d\\`): Link text and high-emphasis headings — near-black with green undertone\n- **PostHog Orange** (\\`#F54E00\\`): Hidden brand accent — appears only on hover states, a vibrant orange that surprises\n\n### Secondary & Accent\n- **Amber Gold** (\\`#F7A501\\`): Secondary hover accent on dark buttons — warm gold that pairs with the orange\n- **Gold Border** (\\`#b17816\\`): Special button borders — an amber-gold for featured CTAs\n- **Focus Blue** (\\`#3b82f6\\`): Focus ring color (Tailwind default) — the only blue in the system, reserved for accessibility\n\n### Surface & Background\n- **Warm Parchment** (\\`#fdfdf8\\`): Primary page background — warm near-white with yellow-green undertone\n- **Sage Cream** (\\`#eeefe9\\`): Input backgrounds, secondary surfaces — light sage tint\n- **Light Sage** (\\`#e5e7e0\\`): Button backgrounds, tertiary surfaces — muted sage-green\n- **Warm Tan** (\\`#d4c9b8\\`): Featured button backgrounds — warm tan/khaki for emphasis\n- **Hover White** (\\`#f4f4f4\\`): Universal hover background state\n\n### Neutrals & Text\n- **Olive Ink** (\\`#4d4f46\\`): Primary body and UI text\n- **Muted Olive** (\\`#65675e\\`): Secondary text, button labels on light backgrounds\n- **Sage Placeholder** (\\`#9ea096\\`): Placeholder text, disabled states — warm sage-green\n- **Sage Border** (\\`#bfc1b7\\`): Primary border color — olive-tinted gray for all borders\n- **Light Border** (\\`#b6b7af\\`): Secondary border, toolbar borders — slightly darker sage\n\n### Semantic & Accent\n- **PostHog Orange** (\\`#F54E00\\`): Hover text accent — signals interactivity and brand personality\n- **Amber Gold** (\\`#F7A501\\`): Dark button hover accent — warmth signal\n- **Focus Blue** (\\`#3b82f6\\` at 50% opacity): Keyboard focus rings — accessibility-only color\n- **Dark Text** (\\`#111827\\`): High-contrast link text — near-black for important links\n\n### Gradient System\n- No gradients on the marketing site — PostHog's visual language is deliberately flat and warm\n- Depth is achieved through layered surfaces and border containment, not color transitions\n\n## 3. Typography Rules\n\n### Font Family\n- **Display & Body**: \\`IBM Plex Sans Variable\\` — variable font (100–700+ weight range). Fallbacks: \\`IBM Plex Sans, -apple-system, system-ui, Avenir Next, Avenir, Segoe UI, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Arial\\`\n- **Monospace**: \\`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New\\` — system monospace stack\n- **Code Display**: \\`Source Code Pro\\` — with fallbacks: \\`Menlo, Consolas, Monaco\\`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | IBM Plex Sans Variable | 30px | 800 | 1.20 | -0.75px | Extra-bold, tight, maximum impact |\n| Section Heading | IBM Plex Sans Variable | 36px | 700 | 1.50 | 0px | Large but generous line-height |\n| Feature Heading | IBM Plex Sans Variable | 24px | 700 | 1.33 | 0px | Feature section titles |\n| Card Heading | IBM Plex Sans Variable | 21.4px | 700 | 1.40 | -0.54px | Slightly unusual size (scaled) |\n| Sub-heading | IBM Plex Sans Variable | 20px | 700 | 1.40 | -0.5px | Content sub-sections |\n| Sub-heading Uppercase | IBM Plex Sans Variable | 20px | 700 | 1.40 | 0px | Uppercase transform for labels |\n| Body Emphasis | IBM Plex Sans Variable | 19.3px | 600 | 1.56 | -0.48px | Semi-bold callout text |\n| Label Uppercase | IBM Plex Sans Variable | 18px | 700 | 1.50 | 0px | Uppercase category labels |\n| Body Semi | IBM Plex Sans Variable | 18px | 600 | 1.56 | 0px | Semi-bold body text |\n| Body | IBM Plex Sans Variable | 16px | 400 | 1.50 | 0px | Standard reading text |\n| Body Medium | IBM Plex Sans Variable | 16px | 500 | 1.50 | 0px | Medium-weight body |\n| Body Relaxed | IBM Plex Sans Variable | 15px | 400 | 1.71 | 0px | Relaxed line-height for long reads |\n| Nav / UI | IBM Plex Sans Variable | 15px | 600 | 1.50 | 0px | Navigation and UI labels |\n| Caption | IBM Plex Sans Variable | 14px | 400–700 | 1.43 | 0px | Small text, various weights |\n| Small Label | IBM Plex Sans Variable | 13px | 500–700 | 1.00–1.50 | 0px | Tags, badges, micro labels |\n| Micro | IBM Plex Sans Variable | 12px | 400–700 | 1.33 | 0px | Smallest text, some uppercase |\n| Code | Source Code Pro | 14px | 500 | 1.43 | 0px | Code snippets and terminal |\n\n### Principles\n- **Bold heading dominance**: Headings use 700–800 weight — PostHog's typography is confident and assertive, not whispery\n- **Generous body line-heights**: Body text at 1.50–1.71 line-height creates extremely comfortable reading — the site is content-heavy and optimized for long sessions\n- **Fractional sizes**: Several sizes (21.4px, 19.3px, 13.7px) suggest a fluid/scaled type system rather than fixed stops — likely computed from Tailwind's rem scale at non-standard base\n- **Uppercase as category signal**: Bold uppercase labels (18px–20px weight 700) are used for product category headings — a magazine-editorial convention\n- **Selective negative tracking**: Letter-spacing tightens on display text (-0.75px at 30px) but relaxes to 0px on body — headlines compress, body breathes\n\n## 4. Component Stylings\n\n### Buttons\n- **Dark Primary**: \\`#1e1f23\\` background, white text, 6px radius, \\`10px 12px\\` padding. Hover: opacity 0.7 with Amber Gold text. Active: opacity 0.8 with slight scale transform. The main CTA — dark and confident\n- **Sage Light**: \\`#e5e7e0\\` background, Olive Ink (\\`#4d4f46\\`) text, 4px radius, \\`4px\\` padding. Hover: \\`#f4f4f4\\` bg with PostHog Orange text. Compact utility button\n- **Warm Tan Featured**: \\`#d4c9b8\\` background, black text, no visible radius. Hover: same orange text flash. Featured/premium actions\n- **Input-style**: \\`#eeefe9\\` background, Sage Placeholder (\\`#9ea096\\`) text, 4px radius, 1px \\`#b6b7af\\` border. Looks like a search/filter control\n- **Near-white Ghost**: \\`#fdfdf8\\` background, Olive Ink text, 4px radius, transparent 1px border. Minimal presence\n- **Hover pattern**: All buttons flash PostHog Orange (\\`#F54E00\\`) or Amber Gold (\\`#F7A501\\`) text on hover — the brand's signature interaction surprise\n\n### Cards & Containers\n- **Bordered Card**: Warm Parchment (\\`#fdfdf8\\`) or white background, 1px \\`#bfc1b7\\` border, 4px–6px radius — clean and minimal\n- **Sage Surface Card**: \\`#eeefe9\\` background for secondary content containers\n- **Shadow Card**: \\`0px 25px 50px -12px rgba(0, 0, 0, 0.25)\\` — a single deep shadow for elevated content (modals, dropdowns)\n- **Hover**: Orange text flash on interactive cards — consistent with button behavior\n\n### Inputs & Forms\n- **Default**: \\`#eeefe9\\` background, \\`#9ea096\\` placeholder text, 1px \\`#b6b7af\\` border, 4px radius, \\`2px 0px 2px 8px\\` padding\n- **Focus**: \\`#3b82f6\\` ring at 50% opacity (Tailwind blue focus ring)\n- **Text color**: \\`#374151\\` for input values — darker than primary text for readability\n- **Border variations**: Multiple border patterns — some inputs use compound borders (top, left, bottom-only)\n\n### Navigation\n- **Top nav**: Warm background, IBM Plex Sans at 15px weight 600\n- **Dropdown menus**: Rich mega-menu structure with product categories\n- **Link color**: Deep Olive (\\`#23251d\\`) for nav links, underline on hover\n- **CTA**: Dark Primary button (#1e1f23) in the nav — \"Get started - free\"\n- **Mobile**: Collapses to hamburger with simplified menu\n\n### Image Treatment\n- **Hand-drawn illustrations**: Hedgehog mascot and quirky illustrations — the signature visual element\n- **Product screenshots**: UI screenshots embedded in device frames or clean containers\n- **Action figures**: Playful product photography of hedgehog figurines — anti-corporate\n- **Trust logos**: Enterprise logos (Airbus, GOV.UK) displayed in a muted trust bar\n- **Aspect ratios**: Mixed — illustrations are irregular, screenshots are 16:9 or widescreen\n\n### AI Chat Widget\n- Floating PostHog AI assistant with speech bubble — an interactive product demo embedded in the marketing site\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 2px, 4px, 6px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 34px\n- **Section padding**: 32px–48px vertical between sections (compact for a content-heavy site)\n- **Card padding**: 4px–12px internal (notably compact)\n- **Component gaps**: 4px–8px between related elements\n\n### Grid & Container\n- **Max width**: 1536px (largest breakpoint), with content containers likely 1200px–1280px\n- **Column patterns**: Varied — single column for text content, 2-3 column grids for feature cards, asymmetric layouts for product demos\n- **Breakpoints**: 13 defined — 1px, 425px, 482px, 640px, 768px, 767px, 800px, 900px, 1024px, 1076px, 1160px, 1280px, 1536px\n\n### Whitespace Philosophy\n- **Content-dense by design**: PostHog's site is information-rich — whitespace is measured, not lavish\n- **Editorial pacing**: Content sections flow like a magazine with varied layouts keeping the eye moving\n- **Illustrations as breathing room**: Hand-drawn hedgehog art breaks up dense content sections naturally\n\n### Border Radius Scale\n- **2px**: Small inline elements, tags (\\`span\\`)\n- **4px**: Primary UI components — buttons, inputs, dropdowns, menu items (\\`button\\`, \\`div\\`, \\`combobox\\`)\n- **6px**: Secondary containers — larger buttons, list items, card variants (\\`button\\`, \\`div\\`, \\`li\\`)\n- **9999px**: Pill shape — badges, status indicators, rounded tags (\\`span\\`, \\`div\\`)\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow, warm parchment background | Page canvas, most surfaces |\n| Level 1 (Border) | \\`1px solid #bfc1b7\\` (Sage Border) | Card containment, input borders, section dividers |\n| Level 2 (Compound Border) | Multiple 1px borders on different sides | Input groupings, toolbar elements |\n| Level 3 (Deep Shadow) | \\`0px 25px 50px -12px rgba(0, 0, 0, 0.25)\\` | Modals, floating elements, mega-menu dropdowns |\n\n### Shadow Philosophy\nPostHog's elevation system is remarkably minimal — only one shadow definition exists in the entire system. Depth is communicated through:\n- **Border containment**: Sage-tinted borders (\\`#bfc1b7\\`) at 1px create gentle warm separation\n- **Surface color shifts**: Moving from \\`#fdfdf8\\` to \\`#eeefe9\\` to \\`#e5e7e0\\` creates layered depth without shadows\n- **The single shadow**: The one defined shadow (\\`0 25px 50px -12px\\`) is reserved for floating elements — modals, dropdowns, popovers. It's a deep, dramatic shadow that creates clear separation when needed\n\n### Decorative Depth\n- **Illustration layering**: Hand-drawn hedgehog art creates visual depth naturally\n- **No gradients or glow**: The flat, warm surface system relies entirely on border and surface-color differentiation\n- **No glassmorphism**: Fully opaque surfaces throughout\n\n## 7. Do's and Don'ts\n\n### Do\n- Use the olive/sage color family (#4d4f46, #23251d, #bfc1b7) for text and borders — the warm green undertone is essential to the brand\n- Flash PostHog Orange (#F54E00) on hover states — it's the hidden brand signature\n- Use IBM Plex Sans at bold weights (700/800) for headings — the font carries technical credibility\n- Keep body text at generous line-heights (1.50–1.71) — the content-heavy site demands readability\n- Maintain the warm parchment background (#fdfdf8) — not pure white, never cold\n- Use 4px border-radius for most UI elements — keep corners subtle and functional\n- Include playful, hand-drawn illustration elements — the personality is the differentiator\n- Apply opacity-based hover states (0.7 opacity) on dark buttons rather than color shifts\n\n### Don't\n- Use blue, purple, or typical tech-SaaS colors — PostHog's palette is deliberately olive/sage\n- Add heavy shadows — the system uses one shadow for floating elements only; everything else uses borders\n- Make the design look \"polished\" or \"premium\" in a conventional sense — PostHog's charm is its irreverent, scrappy energy\n- Use tight line-heights on body text — the generous 1.50+ spacing is essential for the content-heavy layout\n- Apply large border-radius (12px+) on cards — PostHog uses 4px–6px, keeping things tight and functional\n- Remove the orange hover flash — it's a core interaction pattern, not decoration\n- Replace illustrations with stock photography — the hand-drawn hedgehog art is the brand\n- Use pure white (#ffffff) as page background — the warm sage-cream (#fdfdf8) tint is foundational\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <425px | Single column, compact padding, stacked cards |\n| Mobile | 425px–640px | Slight layout adjustments, larger touch targets |\n| Tablet | 640px–768px | 2-column grids begin, nav partially visible |\n| Tablet Large | 768px–1024px | Multi-column layouts, expanded navigation |\n| Desktop | 1024px–1280px | Full layout, 3-column feature grids, expanded mega-menu |\n| Large Desktop | 1280px–1536px | Max-width container, generous margins |\n| Extra Large | >1536px | Centered container at max-width |\n\n### Touch Targets\n- Buttons: 4px–6px radius with \\`4px–12px\\` padding — compact but usable\n- Nav links: 15px text at weight 600 with adequate padding\n- Mobile: Hamburger menu with simplified navigation\n- Inputs: Generous vertical padding for thumb-friendly forms\n\n### Collapsing Strategy\n- **Navigation**: Full mega-menu with dropdowns → hamburger menu on mobile\n- **Feature grids**: 3-column → 2-column → single column stacked\n- **Typography**: Display sizes reduce across breakpoints (30px → smaller)\n- **Illustrations**: Scale within containers, some may hide on mobile for space\n- **Section spacing**: Reduces proportionally while maintaining readability\n\n### Image Behavior\n- Illustrations scale responsively within containers\n- Product screenshots maintain aspect ratios\n- Trust logos reflow into multi-row grids on mobile\n- AI chat widget may reposition or simplify on small screens\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text: Olive Ink (\\`#4d4f46\\`)\n- Dark Text: Deep Olive (\\`#23251d\\`)\n- Hover Accent: PostHog Orange (\\`#F54E00\\`)\n- Dark CTA: Near-Black (\\`#1e1f23\\`)\n- Button Surface: Light Sage (\\`#e5e7e0\\`)\n- Page Background: Warm Parchment (\\`#fdfdf8\\`)\n- Border: Sage Border (\\`#bfc1b7\\`)\n- Placeholder: Sage Placeholder (\\`#9ea096\\`)\n\n### Example Component Prompts\n- \"Create a hero section on warm parchment background (#fdfdf8) with 30px IBM Plex Sans heading at weight 800, line-height 1.20, letter-spacing -0.75px, olive ink text (#4d4f46), and a dark CTA button (#1e1f23, 6px radius, white text, opacity 0.7 on hover)\"\n- \"Design a feature card with #fdfdf8 background, 1px #bfc1b7 border, 4px radius, IBM Plex Sans heading at 20px weight 700, and 16px body text at weight 400 with 1.50 line-height in olive ink (#4d4f46)\"\n- \"Build a navigation bar with warm background, IBM Plex Sans links at 15px weight 600 in deep olive (#23251d), underline on hover, and a dark CTA button (#1e1f23) at the right\"\n- \"Create a button group: primary dark (#1e1f23, white text, 6px radius), secondary sage (#e5e7e0, #4d4f46 text, 4px radius), and ghost/text button — all flash #F54E00 orange text on hover\"\n- \"Design an input field with #eeefe9 background, 1px #b6b7af border, 4px radius, #9ea096 placeholder text, focus ring in #3b82f6 at 50% opacity\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Verify the background is warm parchment (#fdfdf8) not pure white — the sage-cream warmth is essential\n2. Check that all text uses the olive family (#4d4f46, #23251d) not pure black or neutral gray\n3. Ensure hover states flash PostHog Orange (#F54E00) — if hovering feels bland, you're missing this\n4. Confirm borders use sage-tinted gray (#bfc1b7) not neutral gray — warmth runs through every element\n5. The overall tone should feel like a fun, scrappy startup wiki — never corporate-polished or sterile\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;","names":[]}

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

@@ -0,0 +1,3 @@
+declare const raycastBrief = "# Design System Inspired by Raycast\n\n## 1. Visual Theme & Atmosphere\n\nRaycast's marketing site feels like the dark interior of a precision instrument \u2014 a Swiss watch case carved from obsidian. The background isn't just dark, it's an almost-black blue-tint (`#07080a`) that creates a sense of being inside a macOS native application rather than a website. Every surface, every border, every shadow is calibrated to evoke the feeling of a high-performance desktop utility: fast, minimal, trustworthy.\n\nThe signature move is the layered shadow system borrowed from macOS window chrome: multi-layer box-shadows with inset highlights that simulate physical depth, as if cards and buttons are actual pressed or raised glass elements on a dark desk. Combined with Raycast Red (`#FF6363`) \u2014 deployed almost exclusively in the hero's iconic diagonal stripe pattern \u2014 the palette creates a brand that reads as \"powerful tool with personality.\" The red doesn't dominate; it punctuates.\n\nInter is used everywhere \u2014 headings, body, buttons, captions \u2014 with extensive OpenType features (`calt`, `kern`, `liga`, `ss03`) creating a consistent, readable typographic voice. The positive letter-spacing (0.2px\u20130.4px on body text) is unusual for a dark UI and gives the text an airy, breathable quality that counterbalances the dense, dark surfaces. GeistMono appears for code elements, reinforcing the developer-tool identity.\n\n**Key Characteristics:**\n- Near-black blue-tinted background (`#07080a`) \u2014 not pure black, subtly blue-shifted\n- macOS-native shadow system with multi-layer inset highlights simulating physical depth\n- Raycast Red (`#FF6363`) as a punctuation color \u2014 hero stripes, not pervasive\n- Inter with positive letter-spacing (0.2px) for an airy, readable dark-mode experience\n- Radix UI component primitives powering the interaction layer\n- Subtle rgba white borders (0.06\u20130.1 opacity) for containment on dark surfaces\n- Keyboard shortcut styling with gradient key caps and heavy shadows\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Near-Black Blue** (`#07080a`): Primary page background \u2014 the foundational void with a subtle blue-cold undertone\n- **Pure White** (`#ffffff`): Primary heading text, high-emphasis elements\n- **Raycast Red** (`#FF6363` / `hsl(0, 100%, 69%)`): Brand accent \u2014 hero stripes, danger states, critical highlights\n\n### Secondary & Accent\n- **Raycast Blue** (`hsl(202, 100%, 67%)` / ~`#55b3ff`): Interactive accent \u2014 links, focus states, selected items\n- **Raycast Green** (`hsl(151, 59%, 59%)` / ~`#5fc992`): Success states, positive indicators\n- **Raycast Yellow** (`hsl(43, 100%, 60%)` / ~`#ffbc33`): Warning accents, highlights\n- **Blue Transparent** (`hsla(202, 100%, 67%, 0.15)`): Blue tint overlay for interactive surfaces\n- **Red Transparent** (`hsla(0, 100%, 69%, 0.15)`): Red tint overlay for danger/error surfaces\n\n### Surface & Background\n- **Deep Background** (`#07080a`): Page canvas, the darkest surface\n- **Surface 100** (`#101111`): Elevated surface, card backgrounds\n- **Key Start** (`#121212`): Keyboard key gradient start\n- **Key End** (`#0d0d0d`): Keyboard key gradient end\n- **Card Surface** (`#1b1c1e`): Badge backgrounds, tag fills, elevated containers\n- **Button Foreground** (`#18191a`): Dark surface for button text on light backgrounds\n\n### Neutrals & Text\n- **Near White** (`#f9f9f9` / `hsl(240, 11%, 96%)`): Primary body text, high-emphasis content\n- **Light Gray** (`#cecece` / `#cdcdce`): Secondary body text, descriptions\n- **Silver** (`#c0c0c0`): Tertiary text, subdued labels\n- **Medium Gray** (`#9c9c9d`): Link default color, secondary navigation\n- **Dim Gray** (`#6a6b6c`): Disabled text, low-emphasis labels\n- **Dark Gray** (`#434345`): Muted borders, inactive navigation links\n- **Border** (`hsl(195, 5%, 15%)` / ~`#252829`): Standard border color for cards and dividers\n- **Dark Border** (`#2f3031`): Separator lines, table borders\n\n### Semantic & Accent\n- **Error Red** (`hsl(0, 100%, 69%)`): Error states, destructive actions\n- **Success Green** (`hsl(151, 59%, 59%)`): Success confirmations, positive states\n- **Warning Yellow** (`hsl(43, 100%, 60%)`): Warnings, attention-needed states\n- **Info Blue** (`hsl(202, 100%, 67%)`): Informational highlights, links\n\n### Gradient System\n- **Keyboard Key Gradient**: Linear gradient from `#121212` (top) to `#0d0d0d` (bottom) \u2014 simulates physical key depth\n- **Warm Glow**: `rgba(215, 201, 175, 0.05)` radial spread \u2014 subtle warm ambient glow behind featured elements\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `Inter` \u2014 humanist sans-serif, used everywhere. Fallbacks: `Inter Fallback`, system sans-serif\n- **System**: `SF Pro Text` \u2014 Apple system font for select macOS-native UI elements. Fallbacks: `SF Pro Icons`, `Inter`, `Inter Fallback`\n- **Monospace**: `GeistMono` \u2014 Vercel's monospace font for code elements. Fallbacks: `ui-monospace`, `SFMono-Regular`, `Roboto Mono`, `Menlo`, `Monaco`\n- **OpenType features**: `calt`, `kern`, `liga`, `ss03` enabled globally; `ss02`, `ss08` on display text; `liga` disabled (`\"liga\" 0`) on hero headings\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Display Hero | 64px | 600 | 1.10 | 0px | OpenType: liga 0, ss02, ss08 |\n| Section Display | 56px | 400 | 1.17 | 0.2px | OpenType: calt, kern, liga, ss03 |\n| Section Heading | 24px | 500 | normal | 0.2px | OpenType: calt, kern, liga, ss03 |\n| Card Heading | 22px | 400 | 1.15 | 0px | OpenType: calt, kern, liga, ss03 |\n| Sub-heading | 20px | 500 | 1.60 | 0.2px | Relaxed line-height for readability |\n| Body Large | 18px | 400 | 1.15 | 0.2px | OpenType: calt, kern, liga, ss03 |\n| Body | 16px | 500 | 1.60 | 0.2px | Primary body text, relaxed rhythm |\n| Body Tight | 16px | 400 | 1.15 | 0.1px | UI labels, compact contexts |\n| Button | 16px | 600 | 1.15 | 0.3px | Semibold, slightly wider tracking |\n| Nav Link | 16px | 500 | 1.40 | 0.3px | Links in navigation |\n| Caption | 14px | 500 | 1.14 | 0.2px | Small labels, metadata |\n| Caption Bold | 14px | 600 | 1.40 | 0px | Emphasized captions |\n| Small | 12px | 600 | 1.33 | 0px | Badges, tags, micro-labels |\n| Small Link | 12px | 400 | 1.50 | 0.4px | Footer links, fine print |\n| Code | 14px (GeistMono) | 500 | 1.60 | 0.3px | Code blocks, technical content |\n| Code Small | 12px (GeistMono) | 400 | 1.60 | 0.2px | Inline code, terminal output |\n\n### Principles\n- **Positive tracking on dark**: Unlike most dark UIs that use tight or neutral letter-spacing, Raycast applies +0.2px to +0.4px \u2014 creating an airy, readable feel that compensates for the dark background\n- **Weight 500 as baseline**: Most body text uses medium weight (500), not regular (400) \u2014 subtle extra heft improves legibility on dark surfaces\n- **Display restraint**: Hero text at 64px/600 is confident but not oversized \u2014 Raycast avoids typographic spectacle in favor of functional elegance\n- **OpenType everywhere**: `ss03` (stylistic set 3) is enabled globally across Inter, giving the typeface a slightly more geometric, tool-like quality\n\n## 4. Component Stylings\n\n### Buttons\n- **Primary Pill**: Transparent background, white text, pill shape (86px radius), multi-layer inset shadow (`rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset`). Hover: opacity 0.6\n- **Secondary Button**: Transparent background, white text, 6px radius, `1px solid rgba(255, 255, 255, 0.1)` border, subtle drop shadow (`rgba(0, 0, 0, 0.03) 0px 7px 3px`). Hover: opacity 0.6\n- **Ghost Button**: No background or border, gray text (`#6a6b6c`), 86px radius, same inset shadow. Hover: opacity 0.6, text brightens to white\n- **CTA (Download)**: Semi-transparent white background (`hsla(0, 0%, 100%, 0.815)`), dark text (`#18191a`), pill shape. Hover: full white background (`hsl(0, 0%, 100%)`)\n- **Transition**: All buttons use opacity transition for hover rather than background-color change \u2014 a signature Raycast interaction pattern\n\n### Cards & Containers\n- **Standard Card**: `#101111` surface, `1px solid rgba(255, 255, 255, 0.06)` border, 12px\u201316px border-radius\n- **Elevated Card**: Ring shadow `rgb(27, 28, 30) 0px 0px 0px 1px` outer + `rgb(7, 8, 10) 0px 0px 0px 1px inset` inner \u2014 creates a double-ring containment\n- **Feature Card**: 16px\u201320px border-radius, subtle warm glow (`rgba(215, 201, 175, 0.05) 0px 0px 20px 5px`) behind hero elements\n- **Hover**: Cards brighten slightly via border opacity increase or subtle shadow enhancement\n\n### Inputs & Forms\n- Dark input fields with `#07080a` background, `1px solid rgba(255, 255, 255, 0.08)` border, 8px border-radius\n- Focus state: Border brightens, blue glow (`hsla(202, 100%, 67%, 0.15)`) ring appears\n- Text: `#f9f9f9` input color, `#6a6b6c` placeholder\n- Labels: `#9c9c9d` at 14px weight 500\n\n### Navigation\n- **Top nav**: Dark background blending with page, white text links at 16px weight 500\n- **Nav links**: Gray text (`#9c9c9d`) \u2192 white on hover, underline decoration on hover\n- **CTA button**: Semi-transparent white pill at nav end\n- **Mobile**: Collapses to hamburger, maintains dark theme\n- **Sticky**: Nav fixed at top with subtle border separator\n\n### Image Treatment\n- **Product screenshots**: macOS window chrome style \u2014 rounded corners (12px), deep shadows simulating floating windows\n- **Full-bleed sections**: Dark screenshots blend seamlessly into the dark background\n- **Hero illustration**: Diagonal stripe pattern in Raycast Red \u2014 abstract, geometric, brand-defining\n- **App UI embeds**: Showing actual Raycast command palette and extensions \u2014 product as content\n\n### Keyboard Shortcut Keys\n- **Key cap styling**: Gradient background (`#121212` \u2192 `#0d0d0d`), heavy multi-layer shadow (`rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px` + inset shadows), creating realistic physical key appearance\n- Border-radius: 4px\u20136px for individual keys\n\n### Badges & Tags\n- **Neutral badge**: `#1b1c1e` background, white text, 6px radius, 14px font at weight 500, `0px 6px` padding\n- Compact, pill-like treatment for categorization\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 1px, 2px, 3px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px\n- **Section padding**: 80px\u2013120px vertical between major sections\n- **Card padding**: 16px\u201332px internal spacing\n- **Component gaps**: 8px\u201316px between related elements\n\n### Grid & Container\n- **Max width**: ~1200px container (breakpoint at 1204px), centered\n- **Column patterns**: Single-column hero, 2\u20133 column feature grids, full-width showcase sections\n- **App showcase**: Product UI presented in centered window frames\n\n### Whitespace Philosophy\n- **Dramatic negative space**: Sections float in vast dark void, creating cinematic pacing between features\n- **Dense product, sparse marketing**: The product UI screenshots are information-dense, but the surrounding marketing copy uses minimal text with generous spacing\n- **Vertical rhythm**: Consistent 24px\u201332px gaps between elements within sections\n\n### Border Radius Scale\n- **2px\u20133px**: Micro-elements, code spans, tiny indicators\n- **4px\u20135px**: Keyboard keys, small interactive elements\n- **6px**: Buttons, badges, tags \u2014 the workhorse radius\n- **8px**: Input fields, inline components\n- **9px\u201311px**: Images, medium containers\n- **12px**: Standard cards, product screenshots\n- **16px**: Large cards, feature sections\n- **20px**: Hero cards, prominent containers\n- **86px+**: Pill buttons, nav CTAs \u2014 full pill shape\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Void) | No shadow, `#07080a` surface | Page background |\n| Level 1 (Subtle) | `rgba(0, 0, 0, 0.28) 0px 1.189px 2.377px` | Minimal lift, inline elements |\n| Level 2 (Ring) | `rgb(27, 28, 30) 0px 0px 0px 1px` outer + `rgb(7, 8, 10) 0px 0px 0px 1px inset` inner | Card containment, double-ring technique |\n| Level 3 (Button) | `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset` + `rgba(255, 255, 255, 0.25) 0px 0px 0px 1px` + `rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset` | macOS-native button press \u2014 white highlight top, dark inset bottom |\n| Level 4 (Key) | 5-layer shadow stack with inset press effects | Keyboard shortcut key caps \u2014 physical 3D appearance |\n| Level 5 (Floating) | `rgba(0, 0, 0, 0.5) 0px 0px 0px 2px` + `rgba(255, 255, 255, 0.19) 0px 0px 14px` + insets | Command palette, floating panels \u2014 heavy depth with glow |\n\n### Shadow Philosophy\nRaycast's shadow system is the most macOS-native on the web. Multi-layer shadows combine:\n- **Outer rings** for containment (replacing traditional borders)\n- **Inset top highlights** (`rgba(255, 255, 255, 0.05\u20130.25)`) simulating light source from above\n- **Inset bottom darks** (`rgba(0, 0, 0, 0.2)`) simulating shadow underneath\n- The effect is physical: elements feel like glass or brushed metal, not flat rectangles\n\n### Decorative Depth\n- **Warm glow**: `rgba(215, 201, 175, 0.05) 0px 0px 20px 5px` behind featured elements \u2014 a subtle warm aura on the cold dark canvas\n- **Blue info glow**: `rgba(0, 153, 255, 0.15)` for interactive state emphasis\n- **Red danger glow**: `rgba(255, 99, 99, 0.15)` for error/destructive state emphasis\n\n## 7. Do's and Don'ts\n\n### Do\n- Use `#07080a` (not pure black) as the background \u2014 the blue-cold tint is essential to the Raycast feel\n- Apply positive letter-spacing (+0.2px) on body text \u2014 this is deliberately different from most dark UIs\n- Use multi-layer shadows with inset highlights for interactive elements \u2014 the macOS-native depth is signature\n- Keep Raycast Red (`#FF6363`) as punctuation, not pervasive \u2014 reserve it for hero moments and error states\n- Use `rgba(255, 255, 255, 0.06)` borders for card containment \u2014 barely visible, structurally essential\n- Apply weight 500 as the body text baseline \u2014 medium weight improves dark-mode legibility\n- Use pill shapes (86px+ radius) for primary CTAs, rectangular shapes (6px\u20138px) for secondary actions\n- Enable OpenType features `calt`, `kern`, `liga`, `ss03` on all Inter text\n- Use opacity transitions (hover: opacity 0.6) for button interactions, not color changes\n\n### Don't\n- Use pure black (`#000000`) as the background \u2014 the blue tint differentiates Raycast from generic dark themes\n- Apply negative letter-spacing on body text \u2014 Raycast deliberately uses positive spacing for readability\n- Use Raycast Blue as the primary accent for everything \u2014 blue is for interactive/info, red is the brand color\n- Create single-layer flat shadows \u2014 the multi-layer inset system is core to the macOS-native aesthetic\n- Use regular weight (400) for body text when 500 is available \u2014 the extra weight prevents dark-mode text from feeling thin\n- Mix warm and cool borders \u2014 stick to the cool gray (`hsl(195, 5%, 15%)`) border palette\n- Apply heavy drop shadows without inset companions \u2014 shadows always come in pairs (outer + inset)\n- Use decorative elements, gradients, or colorful backgrounds \u2014 the dark void is the stage, content is the performer\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <600px | Single column, stacked cards, hamburger nav, hero text reduces to ~40px |\n| Small Tablet | 600px\u2013768px | 2-column grid begins, nav partially visible |\n| Tablet | 768px\u20131024px | 2\u20133 column features, nav expanding, screenshots scale |\n| Desktop | 1024px\u20131200px | Full layout, all nav links visible, 64px hero display |\n| Large Desktop | >1200px | Max-width container centered, generous side margins |\n\n### Touch Targets\n- Pill buttons: 86px radius with 20px padding \u2014 well above 44px minimum\n- Secondary buttons: 8px padding minimum, but border provides visual target expansion\n- Nav links: 16px text with surrounding padding for accessible touch targets\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav \u2192 hamburger at mobile with slide-out menu\n- **Hero**: 64px display \u2192 48px \u2192 36px across breakpoints\n- **Feature grids**: 3-column \u2192 2-column \u2192 single-column stack\n- **Product screenshots**: Scale within containers, maintaining macOS window chrome proportions\n- **Keyboard shortcut displays**: Simplify or hide on mobile where keyboard shortcuts are irrelevant\n\n### Image Behavior\n- Product screenshots scale responsively within fixed-ratio containers\n- Hero diagonal stripe pattern scales proportionally\n- macOS window chrome rounded corners maintained at all sizes\n- No lazy-loading artifacts \u2014 images are critical to the product narrative\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Background: Near-Black Blue (`#07080a`)\n- Primary Text: Near White (`#f9f9f9`)\n- Brand Accent: Raycast Red (`#FF6363`)\n- Interactive Blue: Raycast Blue (`hsl(202, 100%, 67%)` / ~`#55b3ff`)\n- Secondary Text: Medium Gray (`#9c9c9d`)\n- Card Surface: Surface 100 (`#101111`)\n- Border: Dark Border (`hsl(195, 5%, 15%)` / ~`#252829`)\n\n### Example Component Prompts\n- \"Create a hero section on #07080a background with 64px Inter heading (weight 600, line-height 1.1), near-white text (#f9f9f9), and a semi-transparent white pill CTA button (hsla(0,0%,100%,0.815), 86px radius, dark text #18191a)\"\n- \"Design a feature card with #101111 background, 1px solid rgba(255,255,255,0.06) border, 16px border-radius, double-ring shadow (rgb(27,28,30) 0px 0px 0px 1px outer), 22px Inter heading, and #9c9c9d body text\"\n- \"Build a navigation bar on dark background (#07080a), Inter links at 16px weight 500 in #9c9c9d, hover to white, and a translucent white pill button at the right end\"\n- \"Create a keyboard shortcut display with key caps using gradient background (#121212\u2192#0d0d0d), 5-layer shadow for physical depth, 4px radius, Inter 12px weight 600 text\"\n- \"Design an alert card with #101111 surface, Raycast Red (#FF6363) left border accent, translucent red glow (hsla(0,100%,69%,0.15)), white heading, and #cecece description text\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Check the background is `#07080a` not pure black \u2014 the blue tint is critical\n2. Verify letter-spacing is positive (+0.2px) on body text \u2014 negative spacing breaks the Raycast aesthetic\n3. Ensure shadows have both outer and inset layers \u2014 single-layer shadows look flat and wrong\n4. Confirm Inter has OpenType features `calt`, `kern`, `liga`, `ss03` enabled\n5. Test that hover states use opacity transitions (0.6) not color swaps \u2014 this is a core interaction pattern\n";
+
+export { raycastBrief };

package/dist/presets/_briefs/raycast.js

@@ -0,0 +1,274 @@
+// src/presets/_briefs/raycast.ts
+var raycastBrief = `# Design System Inspired by Raycast
+
+## 1. Visual Theme & Atmosphere
+
+Raycast's marketing site feels like the dark interior of a precision instrument \u2014 a Swiss watch case carved from obsidian. The background isn't just dark, it's an almost-black blue-tint (\`#07080a\`) that creates a sense of being inside a macOS native application rather than a website. Every surface, every border, every shadow is calibrated to evoke the feeling of a high-performance desktop utility: fast, minimal, trustworthy.
+
+The signature move is the layered shadow system borrowed from macOS window chrome: multi-layer box-shadows with inset highlights that simulate physical depth, as if cards and buttons are actual pressed or raised glass elements on a dark desk. Combined with Raycast Red (\`#FF6363\`) \u2014 deployed almost exclusively in the hero's iconic diagonal stripe pattern \u2014 the palette creates a brand that reads as "powerful tool with personality." The red doesn't dominate; it punctuates.
+
+Inter is used everywhere \u2014 headings, body, buttons, captions \u2014 with extensive OpenType features (\`calt\`, \`kern\`, \`liga\`, \`ss03\`) creating a consistent, readable typographic voice. The positive letter-spacing (0.2px\u20130.4px on body text) is unusual for a dark UI and gives the text an airy, breathable quality that counterbalances the dense, dark surfaces. GeistMono appears for code elements, reinforcing the developer-tool identity.
+
+**Key Characteristics:**
+- Near-black blue-tinted background (\`#07080a\`) \u2014 not pure black, subtly blue-shifted
+- macOS-native shadow system with multi-layer inset highlights simulating physical depth
+- Raycast Red (\`#FF6363\`) as a punctuation color \u2014 hero stripes, not pervasive
+- Inter with positive letter-spacing (0.2px) for an airy, readable dark-mode experience
+- Radix UI component primitives powering the interaction layer
+- Subtle rgba white borders (0.06\u20130.1 opacity) for containment on dark surfaces
+- Keyboard shortcut styling with gradient key caps and heavy shadows
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Near-Black Blue** (\`#07080a\`): Primary page background \u2014 the foundational void with a subtle blue-cold undertone
+- **Pure White** (\`#ffffff\`): Primary heading text, high-emphasis elements
+- **Raycast Red** (\`#FF6363\` / \`hsl(0, 100%, 69%)\`): Brand accent \u2014 hero stripes, danger states, critical highlights
+
+### Secondary & Accent
+- **Raycast Blue** (\`hsl(202, 100%, 67%)\` / ~\`#55b3ff\`): Interactive accent \u2014 links, focus states, selected items
+- **Raycast Green** (\`hsl(151, 59%, 59%)\` / ~\`#5fc992\`): Success states, positive indicators
+- **Raycast Yellow** (\`hsl(43, 100%, 60%)\` / ~\`#ffbc33\`): Warning accents, highlights
+- **Blue Transparent** (\`hsla(202, 100%, 67%, 0.15)\`): Blue tint overlay for interactive surfaces
+- **Red Transparent** (\`hsla(0, 100%, 69%, 0.15)\`): Red tint overlay for danger/error surfaces
+
+### Surface & Background
+- **Deep Background** (\`#07080a\`): Page canvas, the darkest surface
+- **Surface 100** (\`#101111\`): Elevated surface, card backgrounds
+- **Key Start** (\`#121212\`): Keyboard key gradient start
+- **Key End** (\`#0d0d0d\`): Keyboard key gradient end
+- **Card Surface** (\`#1b1c1e\`): Badge backgrounds, tag fills, elevated containers
+- **Button Foreground** (\`#18191a\`): Dark surface for button text on light backgrounds
+
+### Neutrals & Text
+- **Near White** (\`#f9f9f9\` / \`hsl(240, 11%, 96%)\`): Primary body text, high-emphasis content
+- **Light Gray** (\`#cecece\` / \`#cdcdce\`): Secondary body text, descriptions
+- **Silver** (\`#c0c0c0\`): Tertiary text, subdued labels
+- **Medium Gray** (\`#9c9c9d\`): Link default color, secondary navigation
+- **Dim Gray** (\`#6a6b6c\`): Disabled text, low-emphasis labels
+- **Dark Gray** (\`#434345\`): Muted borders, inactive navigation links
+- **Border** (\`hsl(195, 5%, 15%)\` / ~\`#252829\`): Standard border color for cards and dividers
+- **Dark Border** (\`#2f3031\`): Separator lines, table borders
+
+### Semantic & Accent
+- **Error Red** (\`hsl(0, 100%, 69%)\`): Error states, destructive actions
+- **Success Green** (\`hsl(151, 59%, 59%)\`): Success confirmations, positive states
+- **Warning Yellow** (\`hsl(43, 100%, 60%)\`): Warnings, attention-needed states
+- **Info Blue** (\`hsl(202, 100%, 67%)\`): Informational highlights, links
+
+### Gradient System
+- **Keyboard Key Gradient**: Linear gradient from \`#121212\` (top) to \`#0d0d0d\` (bottom) \u2014 simulates physical key depth
+- **Warm Glow**: \`rgba(215, 201, 175, 0.05)\` radial spread \u2014 subtle warm ambient glow behind featured elements
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: \`Inter\` \u2014 humanist sans-serif, used everywhere. Fallbacks: \`Inter Fallback\`, system sans-serif
+- **System**: \`SF Pro Text\` \u2014 Apple system font for select macOS-native UI elements. Fallbacks: \`SF Pro Icons\`, \`Inter\`, \`Inter Fallback\`
+- **Monospace**: \`GeistMono\` \u2014 Vercel's monospace font for code elements. Fallbacks: \`ui-monospace\`, \`SFMono-Regular\`, \`Roboto Mono\`, \`Menlo\`, \`Monaco\`
+- **OpenType features**: \`calt\`, \`kern\`, \`liga\`, \`ss03\` enabled globally; \`ss02\`, \`ss08\` on display text; \`liga\` disabled (\`"liga" 0\`) on hero headings
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Display Hero | 64px | 600 | 1.10 | 0px | OpenType: liga 0, ss02, ss08 |
+| Section Display | 56px | 400 | 1.17 | 0.2px | OpenType: calt, kern, liga, ss03 |
+| Section Heading | 24px | 500 | normal | 0.2px | OpenType: calt, kern, liga, ss03 |
+| Card Heading | 22px | 400 | 1.15 | 0px | OpenType: calt, kern, liga, ss03 |
+| Sub-heading | 20px | 500 | 1.60 | 0.2px | Relaxed line-height for readability |
+| Body Large | 18px | 400 | 1.15 | 0.2px | OpenType: calt, kern, liga, ss03 |
+| Body | 16px | 500 | 1.60 | 0.2px | Primary body text, relaxed rhythm |
+| Body Tight | 16px | 400 | 1.15 | 0.1px | UI labels, compact contexts |
+| Button | 16px | 600 | 1.15 | 0.3px | Semibold, slightly wider tracking |
+| Nav Link | 16px | 500 | 1.40 | 0.3px | Links in navigation |
+| Caption | 14px | 500 | 1.14 | 0.2px | Small labels, metadata |
+| Caption Bold | 14px | 600 | 1.40 | 0px | Emphasized captions |
+| Small | 12px | 600 | 1.33 | 0px | Badges, tags, micro-labels |
+| Small Link | 12px | 400 | 1.50 | 0.4px | Footer links, fine print |
+| Code | 14px (GeistMono) | 500 | 1.60 | 0.3px | Code blocks, technical content |
+| Code Small | 12px (GeistMono) | 400 | 1.60 | 0.2px | Inline code, terminal output |
+
+### Principles
+- **Positive tracking on dark**: Unlike most dark UIs that use tight or neutral letter-spacing, Raycast applies +0.2px to +0.4px \u2014 creating an airy, readable feel that compensates for the dark background
+- **Weight 500 as baseline**: Most body text uses medium weight (500), not regular (400) \u2014 subtle extra heft improves legibility on dark surfaces
+- **Display restraint**: Hero text at 64px/600 is confident but not oversized \u2014 Raycast avoids typographic spectacle in favor of functional elegance
+- **OpenType everywhere**: \`ss03\` (stylistic set 3) is enabled globally across Inter, giving the typeface a slightly more geometric, tool-like quality
+
+## 4. Component Stylings
+
+### Buttons
+- **Primary Pill**: Transparent background, white text, pill shape (86px radius), multi-layer inset shadow (\`rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset\`). Hover: opacity 0.6
+- **Secondary Button**: Transparent background, white text, 6px radius, \`1px solid rgba(255, 255, 255, 0.1)\` border, subtle drop shadow (\`rgba(0, 0, 0, 0.03) 0px 7px 3px\`). Hover: opacity 0.6
+- **Ghost Button**: No background or border, gray text (\`#6a6b6c\`), 86px radius, same inset shadow. Hover: opacity 0.6, text brightens to white
+- **CTA (Download)**: Semi-transparent white background (\`hsla(0, 0%, 100%, 0.815)\`), dark text (\`#18191a\`), pill shape. Hover: full white background (\`hsl(0, 0%, 100%)\`)
+- **Transition**: All buttons use opacity transition for hover rather than background-color change \u2014 a signature Raycast interaction pattern
+
+### Cards & Containers
+- **Standard Card**: \`#101111\` surface, \`1px solid rgba(255, 255, 255, 0.06)\` border, 12px\u201316px border-radius
+- **Elevated Card**: Ring shadow \`rgb(27, 28, 30) 0px 0px 0px 1px\` outer + \`rgb(7, 8, 10) 0px 0px 0px 1px inset\` inner \u2014 creates a double-ring containment
+- **Feature Card**: 16px\u201320px border-radius, subtle warm glow (\`rgba(215, 201, 175, 0.05) 0px 0px 20px 5px\`) behind hero elements
+- **Hover**: Cards brighten slightly via border opacity increase or subtle shadow enhancement
+
+### Inputs & Forms
+- Dark input fields with \`#07080a\` background, \`1px solid rgba(255, 255, 255, 0.08)\` border, 8px border-radius
+- Focus state: Border brightens, blue glow (\`hsla(202, 100%, 67%, 0.15)\`) ring appears
+- Text: \`#f9f9f9\` input color, \`#6a6b6c\` placeholder
+- Labels: \`#9c9c9d\` at 14px weight 500
+
+### Navigation
+- **Top nav**: Dark background blending with page, white text links at 16px weight 500
+- **Nav links**: Gray text (\`#9c9c9d\`) \u2192 white on hover, underline decoration on hover
+- **CTA button**: Semi-transparent white pill at nav end
+- **Mobile**: Collapses to hamburger, maintains dark theme
+- **Sticky**: Nav fixed at top with subtle border separator
+
+### Image Treatment
+- **Product screenshots**: macOS window chrome style \u2014 rounded corners (12px), deep shadows simulating floating windows
+- **Full-bleed sections**: Dark screenshots blend seamlessly into the dark background
+- **Hero illustration**: Diagonal stripe pattern in Raycast Red \u2014 abstract, geometric, brand-defining
+- **App UI embeds**: Showing actual Raycast command palette and extensions \u2014 product as content
+
+### Keyboard Shortcut Keys
+- **Key cap styling**: Gradient background (\`#121212\` \u2192 \`#0d0d0d\`), heavy multi-layer shadow (\`rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px\` + inset shadows), creating realistic physical key appearance
+- Border-radius: 4px\u20136px for individual keys
+
+### Badges & Tags
+- **Neutral badge**: \`#1b1c1e\` background, white text, 6px radius, 14px font at weight 500, \`0px 6px\` padding
+- Compact, pill-like treatment for categorization
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 1px, 2px, 3px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px
+- **Section padding**: 80px\u2013120px vertical between major sections
+- **Card padding**: 16px\u201332px internal spacing
+- **Component gaps**: 8px\u201316px between related elements
+
+### Grid & Container
+- **Max width**: ~1200px container (breakpoint at 1204px), centered
+- **Column patterns**: Single-column hero, 2\u20133 column feature grids, full-width showcase sections
+- **App showcase**: Product UI presented in centered window frames
+
+### Whitespace Philosophy
+- **Dramatic negative space**: Sections float in vast dark void, creating cinematic pacing between features
+- **Dense product, sparse marketing**: The product UI screenshots are information-dense, but the surrounding marketing copy uses minimal text with generous spacing
+- **Vertical rhythm**: Consistent 24px\u201332px gaps between elements within sections
+
+### Border Radius Scale
+- **2px\u20133px**: Micro-elements, code spans, tiny indicators
+- **4px\u20135px**: Keyboard keys, small interactive elements
+- **6px**: Buttons, badges, tags \u2014 the workhorse radius
+- **8px**: Input fields, inline components
+- **9px\u201311px**: Images, medium containers
+- **12px**: Standard cards, product screenshots
+- **16px**: Large cards, feature sections
+- **20px**: Hero cards, prominent containers
+- **86px+**: Pill buttons, nav CTAs \u2014 full pill shape
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Void) | No shadow, \`#07080a\` surface | Page background |
+| Level 1 (Subtle) | \`rgba(0, 0, 0, 0.28) 0px 1.189px 2.377px\` | Minimal lift, inline elements |
+| Level 2 (Ring) | \`rgb(27, 28, 30) 0px 0px 0px 1px\` outer + \`rgb(7, 8, 10) 0px 0px 0px 1px inset\` inner | Card containment, double-ring technique |
+| Level 3 (Button) | \`rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset\` + \`rgba(255, 255, 255, 0.25) 0px 0px 0px 1px\` + \`rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset\` | macOS-native button press \u2014 white highlight top, dark inset bottom |
+| Level 4 (Key) | 5-layer shadow stack with inset press effects | Keyboard shortcut key caps \u2014 physical 3D appearance |
+| Level 5 (Floating) | \`rgba(0, 0, 0, 0.5) 0px 0px 0px 2px\` + \`rgba(255, 255, 255, 0.19) 0px 0px 14px\` + insets | Command palette, floating panels \u2014 heavy depth with glow |
+
+### Shadow Philosophy
+Raycast's shadow system is the most macOS-native on the web. Multi-layer shadows combine:
+- **Outer rings** for containment (replacing traditional borders)
+- **Inset top highlights** (\`rgba(255, 255, 255, 0.05\u20130.25)\`) simulating light source from above
+- **Inset bottom darks** (\`rgba(0, 0, 0, 0.2)\`) simulating shadow underneath
+- The effect is physical: elements feel like glass or brushed metal, not flat rectangles
+
+### Decorative Depth
+- **Warm glow**: \`rgba(215, 201, 175, 0.05) 0px 0px 20px 5px\` behind featured elements \u2014 a subtle warm aura on the cold dark canvas
+- **Blue info glow**: \`rgba(0, 153, 255, 0.15)\` for interactive state emphasis
+- **Red danger glow**: \`rgba(255, 99, 99, 0.15)\` for error/destructive state emphasis
+
+## 7. Do's and Don'ts
+
+### Do
+- Use \`#07080a\` (not pure black) as the background \u2014 the blue-cold tint is essential to the Raycast feel
+- Apply positive letter-spacing (+0.2px) on body text \u2014 this is deliberately different from most dark UIs
+- Use multi-layer shadows with inset highlights for interactive elements \u2014 the macOS-native depth is signature
+- Keep Raycast Red (\`#FF6363\`) as punctuation, not pervasive \u2014 reserve it for hero moments and error states
+- Use \`rgba(255, 255, 255, 0.06)\` borders for card containment \u2014 barely visible, structurally essential
+- Apply weight 500 as the body text baseline \u2014 medium weight improves dark-mode legibility
+- Use pill shapes (86px+ radius) for primary CTAs, rectangular shapes (6px\u20138px) for secondary actions
+- Enable OpenType features \`calt\`, \`kern\`, \`liga\`, \`ss03\` on all Inter text
+- Use opacity transitions (hover: opacity 0.6) for button interactions, not color changes
+
+### Don't
+- Use pure black (\`#000000\`) as the background \u2014 the blue tint differentiates Raycast from generic dark themes
+- Apply negative letter-spacing on body text \u2014 Raycast deliberately uses positive spacing for readability
+- Use Raycast Blue as the primary accent for everything \u2014 blue is for interactive/info, red is the brand color
+- Create single-layer flat shadows \u2014 the multi-layer inset system is core to the macOS-native aesthetic
+- Use regular weight (400) for body text when 500 is available \u2014 the extra weight prevents dark-mode text from feeling thin
+- Mix warm and cool borders \u2014 stick to the cool gray (\`hsl(195, 5%, 15%)\`) border palette
+- Apply heavy drop shadows without inset companions \u2014 shadows always come in pairs (outer + inset)
+- Use decorative elements, gradients, or colorful backgrounds \u2014 the dark void is the stage, content is the performer
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <600px | Single column, stacked cards, hamburger nav, hero text reduces to ~40px |
+| Small Tablet | 600px\u2013768px | 2-column grid begins, nav partially visible |
+| Tablet | 768px\u20131024px | 2\u20133 column features, nav expanding, screenshots scale |
+| Desktop | 1024px\u20131200px | Full layout, all nav links visible, 64px hero display |
+| Large Desktop | >1200px | Max-width container centered, generous side margins |
+
+### Touch Targets
+- Pill buttons: 86px radius with 20px padding \u2014 well above 44px minimum
+- Secondary buttons: 8px padding minimum, but border provides visual target expansion
+- Nav links: 16px text with surrounding padding for accessible touch targets
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav \u2192 hamburger at mobile with slide-out menu
+- **Hero**: 64px display \u2192 48px \u2192 36px across breakpoints
+- **Feature grids**: 3-column \u2192 2-column \u2192 single-column stack
+- **Product screenshots**: Scale within containers, maintaining macOS window chrome proportions
+- **Keyboard shortcut displays**: Simplify or hide on mobile where keyboard shortcuts are irrelevant
+
+### Image Behavior
+- Product screenshots scale responsively within fixed-ratio containers
+- Hero diagonal stripe pattern scales proportionally
+- macOS window chrome rounded corners maintained at all sizes
+- No lazy-loading artifacts \u2014 images are critical to the product narrative
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Background: Near-Black Blue (\`#07080a\`)
+- Primary Text: Near White (\`#f9f9f9\`)
+- Brand Accent: Raycast Red (\`#FF6363\`)
+- Interactive Blue: Raycast Blue (\`hsl(202, 100%, 67%)\` / ~\`#55b3ff\`)
+- Secondary Text: Medium Gray (\`#9c9c9d\`)
+- Card Surface: Surface 100 (\`#101111\`)
+- Border: Dark Border (\`hsl(195, 5%, 15%)\` / ~\`#252829\`)
+
+### Example Component Prompts
+- "Create a hero section on #07080a background with 64px Inter heading (weight 600, line-height 1.1), near-white text (#f9f9f9), and a semi-transparent white pill CTA button (hsla(0,0%,100%,0.815), 86px radius, dark text #18191a)"
+- "Design a feature card with #101111 background, 1px solid rgba(255,255,255,0.06) border, 16px border-radius, double-ring shadow (rgb(27,28,30) 0px 0px 0px 1px outer), 22px Inter heading, and #9c9c9d body text"
+- "Build a navigation bar on dark background (#07080a), Inter links at 16px weight 500 in #9c9c9d, hover to white, and a translucent white pill button at the right end"
+- "Create a keyboard shortcut display with key caps using gradient background (#121212\u2192#0d0d0d), 5-layer shadow for physical depth, 4px radius, Inter 12px weight 600 text"
+- "Design an alert card with #101111 surface, Raycast Red (#FF6363) left border accent, translucent red glow (hsla(0,100%,69%,0.15)), white heading, and #cecece description text"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Check the background is \`#07080a\` not pure black \u2014 the blue tint is critical
+2. Verify letter-spacing is positive (+0.2px) on body text \u2014 negative spacing breaks the Raycast aesthetic
+3. Ensure shadows have both outer and inset layers \u2014 single-layer shadows look flat and wrong
+4. Confirm Inter has OpenType features \`calt\`, \`kern\`, \`liga\`, \`ss03\` enabled
+5. Test that hover states use opacity transitions (0.6) not color swaps \u2014 this is a core interaction pattern
+`;
+export {
+  raycastBrief
+};
+//# sourceMappingURL=raycast.js.map