calvyn-code 0.14.0

package/skills/creative/popular-web-designs/templates/pinterest.md

@@ -0,0 +1,243 @@
+# Design System: Pinterest
+
+
+> **Hermes Agent — Implementation Notes**
+>
+> The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:
+> - **Primary:** `DM Sans` | **Mono:** `system monospace stack`
+> - **Font stack (CSS):** `font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **Mono stack (CSS):** `font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
+> ```
+> Use `write_file` to create HTML, serve via `generative-widgets` skill (cloudflared tunnel).
+> Verify visual accuracy with `browser_vision` after generating.
+
+## 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 — 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 — 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.
+
+What 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.
+
+**Key Characteristics:**
+- Warm white canvas with olive/sand-toned neutrals — cozy, not clinical
+- Pinterest Red (`#e60023`) as singular bold accent — 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 — pins/images are the primary visual element
+- Dark near-purple text (`#211922`) — warm, with a hint of plum
+
+## 2. Color Palette & Roles
+
+### Primary Brand
+- **Pinterest Red** (`#e60023`): Primary CTA, brand accent — 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 — 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 — 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, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, 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–500 | 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–70px with a dramatic jump — most functional text is 12–16px, creating a dense, app-like information hierarchy.
+- **Warm weight distribution**: 600–700 for headings, 400–500 for body. No ultra-light weights — 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 — no secondary display or monospace font detected.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Red**
+- Background: `#e60023` (Pinterest Red)
+- Text: `#000000` (black — 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–20px)
+- 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–20px on images
+- Photography as primary content — 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 → 80px → 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 — 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 — 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`) — the warm olive/sand tone is the identity
+- Apply Pinterest Red (`#e60023`) only for primary CTAs — it's bold and singular
+- Use Pin Sans exclusively — one font for everything
+- Apply generous border-radius: 16px for buttons/inputs, 20px+ for cards
+- Keep the masonry grid dense — 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 — it's warmer than pure black
+
+### Don't
+- Don't use cool gray neutrals — always warm/olive-toned
+- Don't use pure black (`#000000`) as primary text — use plum black (`#211922`)
+- Don't use pill-shaped buttons — 16px radius is rounded but not pill
+- Don't add heavy shadows — Pinterest is flat by design, depth from content
+- Don't use small border-radius (<12px) on cards — the generous rounding is core
+- Don't introduce additional brand colors — red + warm neutrals is the complete palette
+- Don't use thin font weights — Pin Sans at 400 minimum
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <576px | Single column, compact layout |
+| Mobile Large | 576–768px | 2-column pin grid |
+| Tablet | 768–890px | Expanded grid |
+| Desktop Small | 890–1312px | Standard masonry grid |
+| Desktop | 1312–1440px | Full layout |
+| Large Desktop | 1440–1680px | Expanded grid columns |
+| Ultra-wide | >1680px | Maximum grid density |
+
+### Collapsing Strategy
+- Pin grid: 5+ columns → 3 → 2 → 1
+- Navigation: search bar + icons → simplified mobile nav
+- Feature sections: side-by-side → stacked
+- Hero: 70px → scales down proportionally
+- Footer: dark multi-column → 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 — olive/sand grays, never cool steel
+2. Pinterest Red for CTAs only — bold and singular
+3. 16px radius on buttons/inputs, 20px+ on cards — generous but not pill
+4. Pin Sans is the only font — compact at 12px for UI, 70px for display
+5. Photography carries the design — the UI stays warm and minimal
+6. Plum black (#211922) for text — warmer than pure black

package/skills/creative/popular-web-designs/templates/posthog.md

@@ -0,0 +1,269 @@
+# Design System: PostHog
+
+
+> **Hermes Agent — Implementation Notes**
+>
+> The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:
+> - **Primary:** `Inter` | **Mono:** `JetBrains Mono`
+> - **Font stack (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **Mono stack (CSS):** `font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> Use `write_file` to create HTML, serve via `generative-widgets` skill (cloudflared tunnel).
+> Verify visual accuracy with `browser_vision` after generating.
+
+## 1. Visual Theme & Atmosphere
+
+PostHog'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.
+
+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 — 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 — 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 — 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 — a delightful surprise
+- Hand-drawn hedgehog illustrations and playful imagery — 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 — 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 — a distinctive olive-gray that gives all text a warm, earthy tone
+- **Deep Olive** (`#23251d`): Link text and high-emphasis headings — near-black with green undertone
+- **PostHog Orange** (`#F54E00`): Hidden brand accent — appears only on hover states, a vibrant orange that surprises
+
+### Secondary & Accent
+- **Amber Gold** (`#F7A501`): Secondary hover accent on dark buttons — warm gold that pairs with the orange
+- **Gold Border** (`#b17816`): Special button borders — an amber-gold for featured CTAs
+- **Focus Blue** (`#3b82f6`): Focus ring color (Tailwind default) — the only blue in the system, reserved for accessibility
+
+### Surface & Background
+- **Warm Parchment** (`#fdfdf8`): Primary page background — warm near-white with yellow-green undertone
+- **Sage Cream** (`#eeefe9`): Input backgrounds, secondary surfaces — light sage tint
+- **Light Sage** (`#e5e7e0`): Button backgrounds, tertiary surfaces — muted sage-green
+- **Warm Tan** (`#d4c9b8`): Featured button backgrounds — 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 — warm sage-green
+- **Sage Border** (`#bfc1b7`): Primary border color — olive-tinted gray for all borders
+- **Light Border** (`#b6b7af`): Secondary border, toolbar borders — slightly darker sage
+
+### Semantic & Accent
+- **PostHog Orange** (`#F54E00`): Hover text accent — signals interactivity and brand personality
+- **Amber Gold** (`#F7A501`): Dark button hover accent — warmth signal
+- **Focus Blue** (`#3b82f6` at 50% opacity): Keyboard focus rings — accessibility-only color
+- **Dark Text** (`#111827`): High-contrast link text — near-black for important links
+
+### Gradient System
+- No gradients on the marketing site — 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` — 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`
+- **Monospace**: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New` — system monospace stack
+- **Code Display**: `Source Code Pro` — 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–700 | 1.43 | 0px | Small text, various weights |
+| Small Label | IBM Plex Sans Variable | 13px | 500–700 | 1.00–1.50 | 0px | Tags, badges, micro labels |
+| Micro | IBM Plex Sans Variable | 12px | 400–700 | 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–800 weight — PostHog's typography is confident and assertive, not whispery
+- **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
+- **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
+- **Uppercase as category signal**: Bold uppercase labels (18px–20px weight 700) are used for product category headings — a magazine-editorial convention
+- **Selective negative tracking**: Letter-spacing tightens on display text (-0.75px at 30px) but relaxes to 0px on body — 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 — 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 — the brand's signature interaction surprise
+
+### Cards & Containers
+- **Bordered Card**: Warm Parchment (`#fdfdf8`) or white background, 1px `#bfc1b7` border, 4px–6px radius — clean and minimal
+- **Sage Surface Card**: `#eeefe9` background for secondary content containers
+- **Shadow Card**: `0px 25px 50px -12px rgba(0, 0, 0, 0.25)` — a single deep shadow for elevated content (modals, dropdowns)
+- **Hover**: Orange text flash on interactive cards — 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 — darker than primary text for readability
+- **Border variations**: Multiple border patterns — 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 — "Get started - free"
+- **Mobile**: Collapses to hamburger with simplified menu
+
+### Image Treatment
+- **Hand-drawn illustrations**: Hedgehog mascot and quirky illustrations — the signature visual element
+- **Product screenshots**: UI screenshots embedded in device frames or clean containers
+- **Action figures**: Playful product photography of hedgehog figurines — anti-corporate
+- **Trust logos**: Enterprise logos (Airbus, GOV.UK) displayed in a muted trust bar
+- **Aspect ratios**: Mixed — illustrations are irregular, screenshots are 16:9 or widescreen
+
+### AI Chat Widget
+- Floating PostHog AI assistant with speech bubble — 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–48px vertical between sections (compact for a content-heavy site)
+- **Card padding**: 4px–12px internal (notably compact)
+- **Component gaps**: 4px–8px between related elements
+
+### Grid & Container
+- **Max width**: 1536px (largest breakpoint), with content containers likely 1200px–1280px
+- **Column patterns**: Varied — single column for text content, 2-3 column grids for feature cards, asymmetric layouts for product demos
+- **Breakpoints**: 13 defined — 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 — 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 — buttons, inputs, dropdowns, menu items (`button`, `div`, `combobox`)
+- **6px**: Secondary containers — larger buttons, list items, card variants (`button`, `div`, `li`)
+- **9999px**: Pill shape — 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 — 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 — 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 — the warm green undertone is essential to the brand
+- Flash PostHog Orange (#F54E00) on hover states — it's the hidden brand signature
+- Use IBM Plex Sans at bold weights (700/800) for headings — the font carries technical credibility
+- Keep body text at generous line-heights (1.50–1.71) — the content-heavy site demands readability
+- Maintain the warm parchment background (#fdfdf8) — not pure white, never cold
+- Use 4px border-radius for most UI elements — keep corners subtle and functional
+- Include playful, hand-drawn illustration elements — 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 — PostHog's palette is deliberately olive/sage
+- Add heavy shadows — the system uses one shadow for floating elements only; everything else uses borders
+- Make the design look "polished" or "premium" in a conventional sense — PostHog's charm is its irreverent, scrappy energy
+- Use tight line-heights on body text — the generous 1.50+ spacing is essential for the content-heavy layout
+- Apply large border-radius (12px+) on cards — PostHog uses 4px–6px, keeping things tight and functional
+- Remove the orange hover flash — it's a core interaction pattern, not decoration
+- Replace illustrations with stock photography — the hand-drawn hedgehog art is the brand
+- Use pure white (#ffffff) as page background — 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–640px | Slight layout adjustments, larger touch targets |
+| Tablet | 640px–768px | 2-column grids begin, nav partially visible |
+| Tablet Large | 768px–1024px | Multi-column layouts, expanded navigation |
+| Desktop | 1024px–1280px | Full layout, 3-column feature grids, expanded mega-menu |
+| Large Desktop | 1280px–1536px | Max-width container, generous margins |
+| Extra Large | >1536px | Centered container at max-width |
+
+### Touch Targets
+- Buttons: 4px–6px radius with `4px–12px` padding — 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 → hamburger menu on mobile
+- **Feature grids**: 3-column → 2-column → single column stacked
+- **Typography**: Display sizes reduce across breakpoints (30px → 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 — 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 — 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) — if hovering feels bland, you're missing this
+4. Confirm borders use sage-tinted gray (#bfc1b7) not neutral gray — warmth runs through every element
+5. The overall tone should feel like a fun, scrappy startup wiki — never corporate-polished or sterile