Dark Mode

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 on dark surfaces.

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 (light)
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

Inverted for dark surfaces — orange hover flash preserved.

#fdfdf8 / #23251d / 6px
#252621 / border / 4px
dark tan bg / tan text / 4px
dark surface / muted / 4px
transparent / secondary / 4px

Card Examples

Dark surface cards with olive-tinted borders.

Bordered Card

Dark surface with subtle olive border. Hover to see lift effect.

bg: #1c1d1a / border: 1px #3a3b36 / radius: 6px

Elevated Card

Slightly lighter surface for secondary content groupings.

bg: #252621 / border: 1px #3a3b36 / radius: 6px

Deep Shadow Card

Dramatic shadow for modals and floating elements on dark backgrounds.

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

Form Elements

Dark surface inputs with blue focus rings.

bg: #1c1d1a / border: #3a3b36 / radius: 4px
focus: blue ring rgba(59,130,246,0.3)
Validation error — PostHog Orange border
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, dark surface. Default canvas for most elements.

Level 1 — Border

1px solid olive-tinted border. Card containment and dividers.

Level 2 — Compound

Multiple borders on different sides. Toolbar and input groupings.

Level 3 — Deep Shadow

Dramatic shadow for modals, dropdowns, and floating elements.