How to build a UI in the PostHog style

:root {
  /* PostHog style — extracted from posthog.com by taste-skill */
  --canvas: #EEEFE9;
  --surface: #E5E7E0;
  --text: #23251D;
  --text-muted: #5A5E52;
  --accent: #EB9D2A;
  --border: #B17816;
  --font-heading: 'RoundHog / Matter', Inter, system-ui, -apple-system, sans-serif;
  --font-body: 'IBM Plex Sans', Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 36px;
  --h1-tracking: -0.025em;
  --h1-weight: 800;
  --radius-button: 6px;
  --radius-common: 2px;
  --shadow-common: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.7s;
}

// tailwind.config.js — PostHog style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#EEEFE9",
        surface: "#E5E7E0",
        ink: "#23251D",
        muted: "#5A5E52",
        accent: "#EB9D2A",
        line: "#B17816",
      },
      fontFamily: {
        heading: ["RoundHog / Matter", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["IBM Plex Sans", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["Source Code Pro", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["36px", { letterSpacing: "-0.025em", fontWeight: "800" }] },
      borderRadius: { button: "6px", card: "2px" },
      boxShadow: { brand: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.4, 0, 0.2, 1)" },
    },
  },
};

---
name: posthog-style
description: Build UI in the PostHog visual style (Tactile Retro-OS Brutalist & Warm Sand / Amber Craft). Use when the user asks for a PostHog-like look.
---

# PostHog Style — Quick Rules (source: posthog.com, extracted by taste-skill)

## Tokens
- canvasBg: #EEEFE9 — Primary PostHog page canvas
- surfaceElevated: #E5E7E0 — Primary elevated card & bento surface
- surfaceSecondary: #F3F4F6 — Secondary interactive container / hover fill
- borderPrimary: #B17816 — Primary structural divider (1px solid #B17816)
- borderSecondary: #B17816 — Secondary nested module or pill border
- textPrimary: #23251D — Hero H1, section H2 & high-contrast foreground
- textMuted: #5A5E52 — Lead paragraphs, descriptions & muted labels
- accentPrimary: #EB9D2A — Primary interactive CTA & brand highlight (6px (3D Bevel))
- accentSecondary: #EB9D2A — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: RoundHog / Matter; body: IBM Plex Sans; mono: Source Code Pro
- Hero H1: 36px | line-height 40px (leading-[1.11]) | letter-spacing -0.9px (tracking-[-0.025em]) | weight 800 (font-[800]) | color #111827 (text-[#111827]) | font RoundHog
- Section H2 (Primary): 30px | line-height 40px (leading-[1.33]) | letter-spacing -0.75px (tracking-[-0.025em]) | weight 700 (font-[700]) | color #111827 (text-[#111827]) | font RoundHog
- Card / Feature H3: 20.5px | line-height 25.7px (leading-[1.25]) | letter-spacing 0px (tracking-[0em]) | weight 700 (font-[700]) | color #111111 (text-[#111111]) | font RoundHog
- Body Copy (Paragraph): 17px | line-height 25.5px (leading-[1.5]) | letter-spacing 0px (tracking-[0em]) | weight 500 (font-[500]) | color #374151 (text-[#374151]) | font RoundHog

## Components
- Primary button: height 32px, padding 0px 0px, radius 6px, bg #CD8407, text #23251D, 16px / 400
- Card: bg #E5E7E0, border 1px solid #B17816

## Never
- NEVER substitute generic uncalibrated gray backgrounds for PostHog’s exact #EEEFE9 canvas and #E5E7E0 surface pairing.
- NEVER replace RoundHog / Matter display typography or ignore its signature scale (36px / -0.025em (w800)).
- NEVER use thick opaque borders that clash with #B17816 (1px solid #B17816).
- NEVER deviate from the signature button geometry (6px (3D Bevel)) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with Source Code Pro.

Full 120-line spec: https://taste-skill.pages.dev/taste/posthog/

npx taste-skill add posthog