posthog.com

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

Adjectives

• warm
• modern
• nurturing
• reassuring

Personality axes

Evidence

• #e1d7c2 at 41° reads warm → warm (warmth +0.66)
• sans display face, material-you material → modern (era +0.35)
• Axis fingerprint nearest the Caregiver archetype (75% fit, vs Lover).

Page intent

landing 31% confidence

Material language

material-you

Imagery style

mixed

Component library

shadcn/ui

Stack

gatsby · Tailwind

Voice tone

neutral

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

Neutrals

Full palette

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

3 families · 11 sizes · 5 weights

Display

IBM Plex Sans Variable

Body

Open Runde

Weights

400, 500, 600, 700, 800

Specimen

Scale

Base 4px · 8 steps captured

Rhythm

4 radii · 2 elevation tiers

Border radii

Elevation

unknown · 24 captured

Library

unknown

Confidence

0%

Stroke style

fillDominant

Feel: mixed · 2 durations · 1 easings

Duration scale

Easings

• custom

shadcn/ui · 1 component patterns captured

Mocks

Detected patterns

neutral · — · —

Headlines from the site

• The new way to build products
• Install with AI in a single prompt
• Understand what users are doing
• Who's using PostHog?

CTA verbs

• ×8
• ×2
• ×2
• ×2
• ×2
• ×1
• ×1
• ×1

Failing pairs

Suggested replacements

• #ffffff → (3.76:1)

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

:root {
  --color-primary: #e1d7c2;
  --font-display: "IBM Plex Sans Variable";
  --space-base: 4px;
  --radius-md: 5px;
}

// 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).

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.