zugzbot 1.0.21 → 1.0.22

package/.opencode/oh-my-design/web/references/posthog/DESIGN.md

@@ -1,480 +0,0 @@
----
-id: posthog
-name: PostHog
-country: US
-category: backend-devops
-homepage: "https://posthog.com"
-primary_color: "#1d4aff"
-logo:
-  type: simpleicons
-  slug: posthog
-verified: "2026-05-15"
-omd: "0.1"
-ds:
-  name: PostHog Brand Assets
-  url: "https://posthog.com/handbook/company/brand-assets"
-  type: brand
-  description: PostHog's public handbook brand, logo, and illustration guidelines.
-  og_image: "https://d36j3rcgc2qfsv.cloudfront.net/handbookcompanybrand-assets.jpeg"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  note: "primary = dark near-black CTA fill (#1e1f23); brand accent = hidden PostHog Orange (#F54E00) that only appears on hover"
-  colors:
-    primary: "#1e1f23"
-    brand: "#F54E00"
-    canvas: "#fdfdf8"
-    foreground: "#4d4f46"
-    heading: "#23251d"
-    muted: "#65675e"
-    surface: "#eeefe9"
-    surface-sage: "#e5e7e0"
-    surface-tan: "#d4c9b8"
-    hairline: "#bfc1b7"
-    border-light: "#b6b7af"
-    placeholder: "#9ea096"
-    accent-amber: "#F7A501"
-    accent-gold: "#b17816"
-    focus: "#3b82f6"
-    on-primary: "#ffffff"
-  typography:
-    family: { sans: "IBM Plex Sans Variable", mono: "Source Code Pro" }
-    display-hero:   { size: 30, weight: 800, lineHeight: 1.20, tracking: -0.75, use: "Hero headline — extra-bold, tight" }
-    section:        { size: 36, weight: 700, lineHeight: 1.50, use: "Section titles — large, generous line-height" }
-    feature:        { size: 24, weight: 700, lineHeight: 1.33, use: "Feature section titles" }
-    subheading:     { size: 20, weight: 700, lineHeight: 1.40, tracking: -0.5, use: "Content sub-sections" }
-    body-semi:      { size: 18, weight: 600, lineHeight: 1.56, use: "Semi-bold body / callout text" }
-    body:           { size: 16, weight: 400, lineHeight: 1.50, use: "Standard reading text" }
-    nav:            { size: 15, weight: 600, lineHeight: 1.50, use: "Navigation and UI labels" }
-    caption:        { size: 14, weight: 400, lineHeight: 1.43, use: "Small text, captions" }
-    micro:          { size: 12, weight: 500, lineHeight: 1.33, use: "Tags, badges, smallest labels" }
-    code:           { size: 14, weight: 500, lineHeight: 1.43, use: "Code snippets and terminal" }
-  spacing: { xs: 2, sm: 4, md: 8, base: 12, lg: 16, xl: 24, xxl: 32, section: 48 }
-  rounded: { sm: 2, md: 4, lg: 6, full: 9999 }
-  shadow:
-    deep: "0px 25px 50px -12px rgba(0,0,0,0.25)"
-  components_harvested: true
-  components:
-    button-primary: { type: button, bg: "#1e1f23", fg: "#ffffff", radius: "6px", padding: "10px 12px", font: "15px / 600", hover: "opacity 0.7, text #F7A501", active: "opacity 0.8, slight scale", use: "Main CTA — dark and confident" }
-    button-sage: { type: button, bg: "#e5e7e0", fg: "#4d4f46", radius: "4px", padding: "4px", font: "14px / 500", hover: "bg #f4f4f4, text #F54E00", use: "Compact utility button" }
-    button-tan: { type: button, bg: "#d4c9b8", fg: "#000000", radius: "0px", padding: "10px 12px", hover: "text #F54E00", use: "Featured/premium actions" }
-    button-ghost: { type: button, bg: "#fdfdf8", fg: "#4d4f46", border: "1px solid transparent", radius: "4px", padding: "8px 12px", hover: "text #F54E00", use: "Minimal-presence ghost button" }
-    input-default: { type: input, bg: "#eeefe9", fg: "#374151", border: "1px solid #b6b7af", radius: "4px", padding: "2px 0 2px 8px", focus: "#3b82f6 ring at 50% opacity", use: "Standard form input" }
-    input-search: { type: input, bg: "#eeefe9", fg: "#374151", border: "1px solid #b6b7af", radius: "4px", padding: "6px 8px", use: "Search/filter control" }
-    card-bordered: { type: card, bg: "#fdfdf8", border: "1px solid #bfc1b7", radius: "6px", padding: "16px", use: "Clean minimal default card" }
-    card-sage: { type: card, bg: "#eeefe9", border: "1px solid #bfc1b7", radius: "4px", padding: "16px", use: "Secondary content container" }
-    card-shadow: { type: card, bg: "#fdfdf8", radius: "6px", padding: "16px", shadow: "0px 25px 50px -12px rgba(0,0,0,0.25)", hover: "orange text flash", use: "Elevated content (modals, dropdowns)" }
-    badge-default: { type: badge, bg: "#e5e7e0", fg: "#4d4f46", radius: "4px", padding: "2px 8px", font: "12px / 500", use: "Default tag" }
-    badge-featured: { type: badge, bg: "#d4c9b8", fg: "#000000", radius: "4px", padding: "2px 8px", font: "12px / 600", use: "Warm tan featured tag" }
----
-
-# Design System Inspiration of PostHog
-
-## 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**
-- Background: `#1e1f23`
-- Text: `#ffffff`
-- Radius: 6px
-- Padding: 10px 12px
-- Font: 15px / 600 / IBM Plex Sans
-- Hover: opacity 0.7, text shifts to Amber Gold `#F7A501`
-- Active: opacity 0.8, slight scale transform
-- Use: Main CTA — dark and confident
-
-**Sage Light**
-- Background: `#e5e7e0`
-- Text: `#4d4f46` (Olive Ink)
-- Radius: 4px
-- Padding: 4px
-- Font: 14px / 500 / IBM Plex Sans
-- Hover: bg `#f4f4f4`, text shifts to PostHog Orange `#F54E00`
-- Use: Compact utility button
-
-**Warm Tan Featured**
-- Background: `#d4c9b8`
-- Text: `#000000`
-- Radius: 0px
-- Padding: 10px 12px
-- Hover: text flash to PostHog Orange `#F54E00`
-- Use: Featured/premium actions
-
-**Near-white Ghost**
-- Background: `#fdfdf8`
-- Text: `#4d4f46` (Olive Ink)
-- Border: 1px solid transparent
-- Radius: 4px
-- Padding: 8px 12px
-- Hover: text flash to PostHog Orange `#F54E00`
-- Use: Minimal-presence ghost button
-
-### Inputs
-
-**Default**
-- Background: `#eeefe9`
-- Text: `#374151`
-- Border: 1px solid `#b6b7af`
-- Radius: 4px
-- Padding: 2px 0px 2px 8px
-- Placeholder: `#9ea096` (Sage Placeholder)
-- Focus: `#3b82f6` ring at 50% opacity (Tailwind blue focus ring)
-- Use: Standard form input — multiple border patterns; some inputs use compound borders (top/left/bottom-only)
-
-**Search / Filter**
-- Background: `#eeefe9`
-- Text: `#374151`
-- Border: 1px solid `#b6b7af`
-- Radius: 4px
-- Padding: 6px 8px
-- Placeholder: `#9ea096`
-- Use: Search/filter control
-
-### Cards
-
-**Bordered Card**
-- Background: `#fdfdf8` (Warm Parchment) or `#ffffff`
-- Border: 1px solid `#bfc1b7`
-- Radius: 6px
-- Padding: 16px
-- Use: Clean and minimal default card
-
-**Sage Surface Card**
-- Background: `#eeefe9`
-- Border: 1px solid `#bfc1b7`
-- Radius: 4px
-- Padding: 16px
-- Use: Secondary content container
-
-**Shadow Card**
-- Background: `#fdfdf8`
-- Radius: 6px
-- Padding: 16px
-- Shadow: `0px 25px 50px -12px rgba(0, 0, 0, 0.25)`
-- Hover: Orange text flash on interactive cards
-- Use: Elevated content (modals, dropdowns)
-
-### Badges
-
-**Default**
-- Background: `#e5e7e0`
-- Text: `#4d4f46`
-- Radius: 4px
-- Padding: 2px 8px
-- Font: 12px / 500 / IBM Plex Sans
-- Use: Inferred from §1-§2 baseline (no explicit DS variant in source).
-
-**Featured**
-- Background: `#d4c9b8`
-- Text: `#000000`
-- Radius: 4px
-- Padding: 2px 8px
-- Font: 12px / 600 / IBM Plex Sans
-- Use: Inferred from §1-§2 baseline (no explicit DS variant in source) — warm tan featured tag.
-
-### 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
-
-## 10. Voice & Tone
-
-PostHog's voice is **scrappy-startup-wiki and engineer-honest.** "We make dev tools for product engineers" — terse, capability-driven, slightly irreverent. Sage-tinted gray (`#bfc1b7`) borders + warm canvas signal "small but serious team that ships." Famous for company handbook being entirely public (posthog.com/handbook).
-
-| Context | Tone |
-|---|---|
-| CTA | Verb. "Get started", "Sign up", "Talk to sales" |
-| Marketing | Capability-list with personality. "Product OS" framing |
-| Documentation | Wiki-style, deeply linked, occasional jokes |
-| Handbook | Radically transparent — even sensitive topics |
-
-**Voice samples**
-- Marketing tagline: *"We make dev tools for product engineers"* <!-- verified: posthog.com homepage 2026-05 -->
-
-**Forbidden phrases.** "Revolutionary product analytics". Aggressive Amplitude-comparison framing.
-
-## 11. Brand Narrative
-
-PostHog was founded **2020** by **James Hawkins (Co-CEO)** and **Tim Glaser (CTO/Co-CEO)** as an open-source alternative to Amplitude/Mixpanel ([PostHog — About](https://posthog.com/about), [Y Combinator — PostHog](https://www.ycombinator.com/companies/posthog)). The company **hatched in Y Combinator's W20 batch** and **launched on Hacker News with their MVP just 4 weeks after writing first code**. **Hawkins**: previously **VP Sales & Channels at Arachnys**; founded **c2o Media** before PostHog. **Glaser**: leads technical strategy, built PostHog on **ClickHouse + open-source frameworks**. Famous for **radical transparency** — **public handbook, public salaries, public roadmap, public board materials**. **From-pivot-hell-to-$1.4B-unicorn** YC library case study documents the journey ([YC Library — Pivot Hell to $1.4B Unicorn](https://www.ycombinator.com/library/NA-from-pivot-hell-to-1-4-billion-unicorn)). **Total funding ~$182M** from **Stripe, GV, Y Combinator** + angels including **Jason Warner (CTO GitHub)** and **Solomon Hykes (Founder Docker)** ([PostHog — Reflecting on YC 2 years on](https://posthog.com/blog/yc-2-years-on), [Tracxn — PostHog](https://tracxn.com/d/companies/posthog/__tWY33MozggoGzQ9VYs8-O9tG9o6ZXDONwy37RdpGE_0)). **Used by 190,254+ teams** including **65% of YC batch companies**. The brand voice tracks this culture: scrappy, honest, occasionally meme-aware. The "Product OS" pivot in 2024-2025 expanded PostHog from analytics to **feature flags, session replay, surveys, A/B tests** as a single integrated product platform.
-
-## 12. Principles
-
-1. **Open source is the default.** *UI implication:* self-hosting first-class option, never deprioritized.
-2. **Radical transparency.** *UI implication:* handbook + roadmap publicly linked.
-3. **Sage-tinted warm gray.** Borders `#bfc1b7`. *UI implication:* never neutral pure gray; warmth carries.
-4. **Hedgehog mascot.** *UI implication:* mascot appears in product (404 pages, empty states) as personality moments.
-5. **Wiki feel over corporate polish.** *UI implication:* documentation can be playful; chrome can have texture.
-
-## 13. Personas
-
-*Personas are fictional archetypes informed by PostHog user segments (product engineers, indie devs, growth teams), not individual people.*
-
-**Sarah Lin, 31, San Francisco.** Founding engineer at Series A. PostHog for analytics + feature flags + session replay in one stack.
-
-**Henrik Sondergaard, 38, Copenhagen.** Indie SaaS founder. Self-hosts PostHog to keep customer data on his infra.
-
-**Priya Krishnan, 27, Bengaluru.** Growth engineer at fintech. A/B tests + funnel analysis daily.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (no events)** | "Install PostHog SDK to start" code snippet |
-| **Empty (no insights)** | "Create your first insight" with template gallery |
-| **Loading (query)** | Per-step execution visible |
-| **Loading (replay loading)** | Session video loader with frame previews |
-| **Error (SDK not detected)** | Specific instructions + verify-installation button |
-| **Error (rate limit)** | Plain explanation + upgrade link |
-| **Success (event captured)** | Implicit; events appear in feed |
-| **Success (insight saved)** | Soft confirmation, no celebration |
-| **Skeleton (insight grid)** | Sage-tinted placeholders |
-| **Disabled (free plan)** | Upgrade link — never block existing OSS features |
-| **Loading (long replay)** | Persistent progress |
-
-## 15. Motion & Easing
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | Selection |
-| `motion-fast` | 150ms | Hover |
-| `motion-standard` | 250ms | Modal, panel |
-| `motion-hedgehog` | occasional | Mascot waves on certain success states |
-
-Standard cubic-bezier. Hedgehog mascot moments are personality, not chrome. `prefers-reduced-motion: reduce` makes mascot static.
-
----
-
-**Verified:** 2026-05-08 (omd:migrate run 46 — Apple-tier)
-**Tier 1 sources:** posthog.com home + /pricing (live DOM via playwright — **Primary `#cd8407` PostHog Amber-Gold** 6-8px / 32-46px / 15-16px·400 with **Sage-Black `#23251d`** text; **Light Amber `#eb9d2a`** Secondary; nav 4px / 13px·500; **Region badge** Amber-tint 4px / 14px·**700**; warm three-color (Amber/Sage/Cool Gray) canvas).
-**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
-**Tier 2 (Philosophy/founders/funding):** PostHog About + handbook + blog (YC 2-years-on), Y Combinator (PostHog W20 + Pivot Hell to $1.4B Library), Tracxn, GV.com.
-**Style ref:** `notion`. **Conflicts unresolved:** none. **Earlier mistake reverted (significant):** prior footer captured nav-only — canonical Primary is **`#cd8407` Amber-Gold** (the brand-defining color), missed entirely.

package/.opencode/oh-my-design/web/references/posthog/README.md

@@ -1,23 +0,0 @@
-# Posthog Inspired Design System
-
-[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/posthog/DESIGN.md) extracted from the public [PostHog](https://posthog.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
-
-## Files
-
-| File | Description |
-|------|-------------|
-| `DESIGN.md` | Complete design system documentation (9 sections) |
-| `preview.html` | Interactive design token catalog (light) |
-| `preview-dark.html` | Interactive design token catalog (dark) |
-
-Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/posthog/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Posthog design language.
-
-## Preview
-
-A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
-
-### Dark Mode
-![Posthog Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/posthog/preview-dark-screenshot.png)
-
-### Light Mode
-![Posthog Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/posthog/preview-screenshot.png)