designlang
Brand guidelines #e1d7c2

June 25, 2026

posthog.com

A reading of the visual language at https://posthog.com. Every token, every rule, every component — captured from the live site.

Page intent
landing
System grade
B 87/100
Tokens
29 colours · 11 sizes
Generated
designlang
Chapter 00

Essence

posthog.com is a Caregiver brand — warm, modern, nurturing and reassuring — anchored on #e1d7c2 and IBM Plex Sans Variable, mixed motion.

Caregiver archetype · 75% fit · vs Lover

Adjectives

Personality axes

Cool Warm
Composed Kinetic
Understated Bold
Timeless Modern

Evidence

Chapter 01

About

Page intent
landing 31% confidence
Material language
material-you
Imagery style
mixed
Component library
shadcn/ui
Stack
gatsby · Tailwind
Voice tone
neutral
Chapter 03

Colour

1 primary · 1 secondary · 1 accent · 12 neutrals · 29 total

Primary #E1D7C2
RGB
225, 215, 194
HSL
41°, 34%, 82%
Secondary #EB9D2A
RGB
235, 157, 42
HSL
36°, 83%, 54%
Accent #EEEFE9
RGB
238, 239, 233
HSL
70°, 16%, 93%

Neutrals

#000000
#4D4F46
#374151
#23251D
#9EA096
#65675E
#BFC1B7
#FFFFFF
#B6B7AF
#131316
#D0D1C9
#73756B

Full palette

#000000
#4D4F46
#374151
#23251D
#111827
#9EA096
#F7A501
#2F80FA
#65675E
#30ABC6
#BFC1B7
#B62AD9
#FFFFFF
#36C46F
#6AA84F
#EEEFE9
#E1D7C2
#29DBBB
#B17816
#B6B7AF
#131316
#F54E00
#D0D1C9
#73756B
#EB9D2A
#E5E7E0
#CD8407
#6C47FF

WCAG 96% · 23 passing pairs · 1 failing. Full breakdown in §11.

Chapter 04

Typography

3 families · 11 sizes · 5 weights

Display
IBM Plex Sans Variable
Body
Open Runde
Weights
400, 500, 600, 700, 800

Specimen

The new way to build products
Install with AI in a single prompt

Scale

StepSizeSample
t00 36px The new way to build product
t01 24px The new way to build product
t02 21.4286px The new way to build product
t03 20px The new way to build product
t04 19.2857px The new way to build product
t05 18px The new way to build product
t06 16px The new way to build product
t07 15px The new way to build product
t08 14px The new way to build product
t09 13px The new way to build product
Chapter 05

Spacing

Base 4px · 8 steps captured

Rhythm

1px
20px
32px
48px
64px
120px
144px
220px
Chapter 06

Shape

4 radii · 2 elevation tiers

Border radii

2px
5px
8px
9999px

Elevation

xs
sm
Chapter 07

Iconography

unknown · 24 captured

Library
unknown
Confidence
0%
Stroke style
fillDominant
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
Chapter 08

Motion

Feel: mixed · 2 durations · 1 easings

Duration scale

150ms
300ms

Easings

Chapter 09

Components

shadcn/ui · 1 component patterns captured

Mocks

Card

Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

Detected patterns

button

Slots
label, icon, badge
Variants
primary, secondary
Sizes
md, medium, sm, xs
Chapter 10

Voice

neutral · — · —

Headlines from the site

CTA verbs

Chapter 11

Accessibility

96% WCAG 2.1 contrast
23 passing · 1 failing

Failing pairs

Aa 3.76:1
Foreground
#ffffff
Background
#2f80fa
Rule
AA-normal

Suggested replacements

Chapter 12

Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variablesvariables.css
:root {
  --color-primary: #e1d7c2;
  --font-display: "IBM Plex Sans Variable";
  --space-base: 4px;
  --radius-md: 5px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#e1d7c2' },
      fontFamily: { display: ['IBM Plex Sans Variable', 'serif'] },
      spacing: { base: '4px' },
      borderRadius: { md: '5px' },
    },
  },
};

Run npx designlang pack posthog.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

Usage

  1. Lead with the primary.

    It belongs on calls-to-action and one accent moment per screen. Not on body copy.

  2. Two type families, three weights.

    Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

  3. Snap to the spacing scale.

    Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

  4. Treat accessibility as a hard constraint.

    When a colour pair fails WCAG, fix the colour — not the contrast check.