Design System Inspired by PostHog

A visual catalog of design tokens extracted from PostHog's website — warm, earthy, and deliberately anti-corporate.

Color Palette

PostHog's warm olive/sage palette — no blues, no purples, just earthy warmth.

Primary

Olive Ink
#4d4f46
Primary text color
Deep Olive
#23251d
Links and headings
PostHog Orange
#F54E00
Hidden hover accent

Secondary & Accent

Amber Gold
#F7A501
Dark button hover accent
Gold Border
#b17816
Featured button borders
Focus Blue
#3b82f6
Focus ring (accessibility)

Surface & Background

Warm Parchment
#fdfdf8
Page background
Sage Cream
#eeefe9
Input & secondary surfaces
Light Sage
#e5e7e0
Button backgrounds
Warm Tan
#d4c9b8
Featured button background
Hover White
#f4f4f4
Hover background state

Neutrals & Text

Muted Olive
#65675e
Secondary text
Sage Placeholder
#9ea096
Placeholder text
Sage Border
#bfc1b7
Primary borders
Light Border
#b6b7af
Toolbar borders
Near-Black
#1e1f23
Dark CTA button

Typography Scale

IBM Plex Sans Variable with bold headings and generous body line-heights.

Display Hero
Display Hero — 30px / 800 / 1.20 / -0.75px
Section Heading
Section Heading — 36px / 700 / 1.50 / 0px
Feature Heading
Feature Heading — 24px / 700 / 1.33 / 0px
Sub-heading
Sub-heading — 20px / 700 / 1.40 / -0.5px
Sub-heading Uppercase
Sub-heading Uppercase — 20px / 700 / 1.40 / uppercase
Body Semi — Semi-bold body text for callouts and emphasis
Body Semi — 18px / 600 / 1.56 / 0px
Body — Standard reading text with comfortable line-height for content-heavy pages.
Body — 16px / 400 / 1.50 / 0px
Body Relaxed — Relaxed line-height for long-form reading passages and editorial content.
Body Relaxed — 15px / 400 / 1.71 / 0px
Nav / UI Label
Nav / UI — 15px / 600 / 1.50 / 0px
Caption Semi — Emphasized captions
Caption Semi — 14px / 600 / 1.43 / 0px
Small Label Bold
Small Label — 13px / 700 / 1.50 / 0px
Micro Uppercase
Micro Uppercase — 12px / 700 / 1.33 / uppercase
Code — Source Code Pro monospace
Code — 14px / 500 / 1.43 / Source Code Pro

Button Variants

All buttons flash PostHog Orange on hover — the brand's signature surprise.

#1e1f23 / white / 6px / opacity hover
#e5e7e0 / #4d4f46 / 4px / orange hover
#d4c9b8 / black / 4px / featured
#eeefe9 / #9ea096 / 4px / bordered
#fdfdf8 / #4d4f46 / 4px / minimal

Card Examples

Bordered, sage-surface, and deep-shadow card variants.

Bordered Card

White background with sage border. Hover to see lift. The standard container pattern.

bg: #fff / border: 1px #bfc1b7 / radius: 6px

Sage Surface Card

Sage cream background for secondary content areas and grouped information.

bg: #eeefe9 / border: 1px #bfc1b7 / radius: 6px

Deep Shadow Card

The single dramatic shadow — reserved for modals, dropdowns, and floating elements.

shadow: 0 25px 50px -12px rgba(0,0,0,0.25)

Form Elements

Sage-tinted inputs with blue focus rings.

bg: #eeefe9 / border: #b6b7af / radius: 4px
focus: blue ring rgba(59,130,246,0.3)
Validation error — border turns PostHog Orange
Same styles as input, resizable

Spacing Scale

8px base unit system.

2
4
6
8
10
12
16
18
24
32
34

Border Radius Scale

Tight and functional — 2px to pill (9999px).

2px Tags, inline
4px Buttons, inputs
6px Cards, containers
9999px Pill badges

Elevation & Depth

Minimal shadows — borders and surface colors do the heavy lifting.

Level 0 — Flat

No shadow, warm parchment background. The default for most surfaces.

Level 1 — Border

1px solid Sage Border (#bfc1b7). Card containment, input borders, section dividers.

Level 2 — Compound

Multiple 1px borders on different sides. Input groupings and toolbar elements.

Level 3 — Deep Shadow

0px 25px 50px -12px rgba(0,0,0,0.25). Reserved for modals, dropdowns, floating elements.