PostHog

Light-first warm-paper canvas — #ffffff body paired with cream #fdfdf8 / #fffefe and warm tan #e1d7c2 section panels doing the surface work. Text descends through an olive-tinted ramp #1a1a1a → #4d4f46 → #65675e → #374151 rather than cold blue-grays, keeping the page hand-made rather than templated. A single signature orange-red #f54e00 owns every primary action; a deliberately loud secondary set — yellow #f7a501, blue #2f80fa, teal #30abc6, purple #b62ad9, green #36c46f — appears as small joyful punctuation, never as flat fills. Borders are warm gray #9ea096 / #bfc1b7 hairlines.

• Olive-tinted near-black #1a1a1a / #4d4f46 (warm gray primary, ~1101 measured surface occurrences) for body and headings — the dominant reading layer, never a cold blue-black
• Warm-paper background ramp #ffffff (body) → #fdfdf8 / #fffefe (cream cards) → #e1d7c2 (warm tan feature panels) for gentle section separation without shadow
• Olive gray descender #65675e / #374151 / #9ea096 for captions, metadata, de-emphasized labels — warm, never clinical
• Signature orange-red #f54e00 reserved for primary CTAs and key interactive accents (the --squeak-button-color / swiper-pagination brand token) — one dominant action color
• Loud secondary accents #f7a501 (yellow) / #2f80fa (blue) / #30abc6 (teal) / #b62ad9 (purple) / #36c46f (green) used as small punctuation — illustration highlights, tags, decorative marks — never as large flat fills, total accent surface kept well under ~10%
• Warm gray hairline borders #9ea096 / #bfc1b7 (1px solid) do the structural delimiting on the light canvas

linear-gradient(90deg, rgb(1, 67, 203), rgb(43, 111, 244) 24.04%, rgb(210, 52, 1) 46.63%, rgb(255, 101, 31) 65.87%, rgb(251, 160, 0) 83.17%, rgb(1, 67, 203))

• Display family: Squeak (PostHog's custom rounded display face, self-hosted + preloaded from /fonts/squeak-bold-webfont.woff2). Use a friendly rounded display fallback (e.g. a rounded grotesque) if Squeak is unavailable — the rounded character is the signature, not the specific file.
• Body / heading family: Open Runde (soft rounded geometric sans). UI labels lean on IBM Plex Sans Variable. The rounded letterforms carry the playful tone before any illustration does — never substitute a sharp grotesque.
• Monospace: Source Code Pro (self-hosted, display: swap) with ui-monospace fallback for code, kbd, and tabular numerics.
• Weight range is full and expressive: 400 (reading) / 500 (UI labels) / 600 (emphasis) / 700 (subheads) / 800 (hero display). Unlike a stepped-ladder system, PostHog uses the standard weight ramp end-to-end — heavy 800 display is part of the loud, confident voice.
• Body type: 15px / line-height 25.71px (Open Runde) and 16px / 24px (IBM Plex). Generous line-height (~1.5–1.7) keeps the warm, breathable feel — do not tighten body leading.
• Headings: heading-1 24px / line-height 32px / letter-spacing -0.6px (Open Runde 600); heading-2 21.43px / 30px / -0.5357px (Open Runde 700). Negative tracking only at heading sizes, in px; body stays at letter-spacing: normal.
• Small / caption sizes: 12 / 13 / 14px at line-heights 16–21px for metadata, labels, and dense UI. Paragraph measure ~50–65 ch at body 15–16px.

• 2px base unit. Scale: 2 / 4 / 6 / 8 / 10 / 12 / 14 / 17 / 20 / 24 / 32 / 34 px — note the 17px step (a measured optical value), not a clean 16. Pick from scale values; no magic numbers.
• Dominant rhythm sits on 4 / 8 / 17 px (the highest-frequency measured paddings); the 2px floor handles micro-corrections inside dense controls.
• Gutter values for flex/grid: 1 / 2 / 4 / 6 / 8 / 16 px — tight clusters at 2–6px, looser column gaps at 16px.
• Card padding: 12–24px on desktop, 8–17px on mobile. Feature panels lean to the 17 / 24 / 32 range for generous warm breathing room.
• Section vertical rhythm: 32–34px base steps scale up through generous multiples; the page breathes, it is not dense for density's sake.

• Primary delimitation is a 1px solid warm-gray hairline border (#9ea096 / #bfc1b7) — the highest-frequency border treatment (263 measured 1px occurrences). Reach for borders before shadows.
• Real (not invisible) drop shadows exist for genuinely floating elements: a soft large-blur lift `rgba(0,0,0,0.25) 0 25px 50px -12px` for modals/popovers, and a tighter `rgba(14,18,22,0.35) 0 10px 38px -10px` for menus. Unlike a flat dark-mode system, light-first PostHog uses honest elevation.
• Layering depth comes from background-shift across the warm-paper ramp (#ffffff → #fdfdf8 → #e1d7c2) plus border weight, with drop shadow reserved for true overlays.
• Focus and hover use border-color and background-color shifts on the 0.15s curve — keep it warm and gentle, not a hard ring.

• Radius scale is soft and small: 2 / 4 / 5 / 6 / 8 px. The 4px and 6px steps dominate (49 and 19 measured occurrences) — gentle rounding, never sharp corners, never large pill bubbles except for badges.
• Buttons default to 6px radius, inputs 4–6px, cards 6px, small chips 4px. Avoid `rounded-full` except for avatars, status dots, and indicator badges.
• Icons lean hand-drawn / friendly-stroke at ~1.5–2px weight to match the rounded type and mascot; no rigid geometric or duotone sets.
• Border widths: 1px hairline default, 2px for emphasis/focus, 4px reserved for rare heavy decorative frames. Style is solid (4392 measured) — dashed appears only 4 times, treat it as decorative-only.
• Tap targets minimum 40×40px on pointer, 44×44px on touch.

• button-primary

  backgroundColor

  #f54e00

  textColor

  #ffffff

  radius

  6px

  padding

  8px 17px

  border

  1px solid transparent

  boxShadow

  none

  fontFamily

  Open Runde

  fontWeight

  600

  fontSize

  15px

  lineHeight

  22.5px

  Tailwind

  Copy

  inline-flex min-h-[40px] items-center gap-2 rounded-[6px] bg-[#f54e00] px-[17px] py-2 text-[15px] font-semibold leading-[22.5px] text-white transition-colors duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:bg-[#d23401] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#f54e00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#fdfdf8]

• button-secondary

  backgroundColor

  #fdfdf8

  textColor

  #1a1a1a

  radius

  6px

  padding

  8px 17px

  border

  1px solid #bfc1b7

  boxShadow

  none

  fontFamily

  Open Runde

  fontWeight

  500

  fontSize

  15px

  Tailwind

  Copy

  inline-flex min-h-[40px] items-center gap-2 rounded-[6px] border border-[#bfc1b7] bg-[#fdfdf8] px-[17px] py-2 text-[15px] font-medium text-[#1a1a1a] transition-colors duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:border-[#9ea096] hover:bg-[#e1d7c2] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#f54e00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#ffffff]

• card-surface

  backgroundColor

  #fdfdf8

  textColor

  #4d4f46

  radius

  6px

  padding

  24px

  border

  1px solid #bfc1b7

  boxShadow

  none

  Tailwind

  Copy

  rounded-[6px] border border-[#bfc1b7] bg-[#fdfdf8] p-6 text-[#4d4f46] transition-[border-color,background-color] duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:border-[#9ea096]

• input-field

  backgroundColor

  #ffffff

  textColor

  #1a1a1a

  radius

  4px

  padding

  8px 12px

  border

  1px solid #9ea096

  boxShadow

  none

  fontFamily

  IBM Plex Sans Variable

  fontWeight

  400

  fontSize

  16px

  lineHeight

  24px

  Tailwind

  Copy

  w-full rounded-[4px] border border-[#9ea096] bg-white px-3 py-2 text-[16px] leading-6 text-[#1a1a1a] placeholder:text-[#65675e] transition-colors duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] focus-visible:border-[#f54e00] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#f54e00]/30

• badge-accent

  backgroundColor

  #e1d7c2

  textColor

  #b17816

  radius

  4px

  padding

  2px 8px

  border

  1px solid transparent

  fontFamily

  IBM Plex Sans Variable

  fontWeight

  600

  fontSize

  12px

  lineHeight

  16px

  Tailwind

  Copy

  inline-flex items-center gap-1 rounded-[4px] bg-[#e1d7c2] px-2 py-0.5 text-[12px] font-semibold leading-4 text-[#b17816]

• link-inline

  color

  #f54e00

  textDecoration

  underline

  textDecorationColor

  #f54e00

  textDecorationThickness

  1px

  textUnderlineOffset

  2px

  transition

  color 0.15s cubic-bezier(0.4, 0, 0.2, 1)

  Tailwind

  Copy

  font-medium text-[#f54e00] underline decoration-[#f54e00] decoration-1 underline-offset-2 transition-colors duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:text-[#d23401] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#f54e00]/40

• Primary interactive easing: cubic-bezier(0.4, 0, 0.2, 1) (Material standard ease) at 0.15s — carries virtually every hover/focus color and border transition.
• Secondary easing: cubic-bezier(0.16, 1, 0.3, 1) (ease-out-expo overshoot) for `slideIn` entrances only; ease-in-out for ambient floats; linear for loops and progress bars.
• Two motion tiers: fast interactive (0.15s, occasionally 0.3s) for affordance, and slow ambient (3–7.6s) for atmospheric floating life. Never animate affordance on the slow tier or float on the fast tier.
• Staggered float durations (4 / 4.9 / 5.8 / 6.7 / 7.6s) are intentional — synchronized floating reads as mechanical; the offset is the charm.
• useReducedMotion mandatory: interactive transitions collapse to instant/opacity, ambient floats disable entirely.
• Spring animations forbidden — deterministic cubic-bezier / ease-in-out / linear only.
• Loop animations restricted to explicit ambient illustration and progress indicators.

• Tabs / segmented controls for product-area and pricing switching — friendly rounded pills, not toggle switches.
• Accordion: single-open for FAQ; multi-open for deep documentation trees.
• Tooltips reveal on hover + focus; dismiss on blur. Keep copy short and human.
• Modals/popovers float with honest drop shadow (rgba(0,0,0,0.25) large-blur) and enter via slideIn (0.15s, cubic-bezier(0.16,1,0.3,1)).
• Form validation: inline below field on blur; warm error color, never red-only color signaling.
• Empty states lean into personality — a small mascot/illustration + one-line human copy + a primary #f54e00 action. Whimsy is allowed here.
• Loading states: skeleton shimmer for content; the orange-red progress accent for determinate bars. Avoid full-page spinners.

Desktop-first because the core audience is developers on wide displays evaluating an analytics product, but the page reflows fully to mobile without hiding controls. PostHog's measured breakpoints are non-standard — sm 425 / md 768 / lg 900 / xl 1160 / 2xl 1536 — reflecting a content-driven rather than framework-default ladder. The warm-paper, rounded, playful language stays identical at every width; only the column count and type scale change.

• Breakpoints (measured): sm 425 / md 768 / lg 900 / xl 1160 / 2xl 1536 px. These are content-driven, not the generic Tailwind ladder — honor the 900 and 1160 mid-tiers.
• Bounded content with generous warm margins; primary reading column stays comfortable rather than edge-to-edge.
• Hide-on-mobile is banned — every desktop control reaches mobile via reflow.
• Tap target minimum 44×44 on touch; 40×40 on pointer.
• Typography scales gently: hero display drops from 800-weight large sizes toward heading-1 24px, headings shed tracking as they shrink (less negative at smaller sizes). Body stays 15–16px across tiers.

• focus-visible: 2px #f54e00 ring with a 2px offset against the warm-paper background — mandatory on every interactive element, warm rather than a default blue ring.
• All interactive elements reachable via Tab in logical reading order; never rely on hover (or floating illustrations) to expose actions.
• Color contrast on light: #1a1a1a on #ffffff ≈ 17:1 (AAA); warm gray #4d4f46 on #ffffff ≈ 8.5:1 (AAA); #65675e on #ffffff ≈ 5.5:1 (AA). Verify the orange-red #f54e00 on #ffffff (~4.0:1) — pass it for large text / UI only, and pair with white text on the orange for buttons (#ffffff on #f54e00 ≈ 4.3:1, AA large/UI).
• Never signal state with the loud accent palette alone — pair color punctuation with text or icon; many accents (#f7a501, #36c46f) fail body-text contrast on white.
• ARIA labels on icon-only and mascot-decorative controls (decorative illustrations get alt="" / aria-hidden); aria-expanded on collapsibles; aria-live='polite' on toasts.
• Motion respects prefers-reduced-motion — interactive transitions go instant, ambient floats disable entirely.
• Tap targets minimum 44×44 on touch; 40×40 on pointer.
• Form errors announced via aria-describedby on the associated input; never color-only signaling on the warm palette.

No JS animation library was detected in the extract (libraries: []) — motion is CSS-keyframe-driven (scattered-float, slideIn, grow, hero-carousel-progress) plus 0.15s CSS transitions on cubic-bezier(0.4, 0, 0.2, 1). Custom fonts (Squeak preloaded; Open Runde, IBM Plex Sans Variable, Source Code Pro all display: swap) are self-hosted. Illustrations and the hedgehog mascot are the primary graphical payload.

• CSS @keyframes for ambient motion: `scattered-float` with per-element animation-duration of 4 / 4.9 / 5.8 / 6.7 / 7.6s and ease-in-out, `slideIn` 0.15s cubic-bezier(0.16,1,0.3,1) for entrances
• Plain CSS transitions for interactivity: `transition: color, background-color, border-color, text-decoration-color, fill, stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1)` — constants only
• useReducedMotion (or a prefers-reduced-motion media query) guards every keyframe and float — no exceptions
• Next/Image with `sizes` always set, `priority` only on the LCP hero illustration; decorative mascots lazy-load
• Self-host fonts: preload the bold display face (Squeak) woff2; display: swap on body/UI/mono families. No WebGL, no Lottie — illustration-and-keyframe, not engine-driven

• Lead with the warm-paper canvas (#ffffff / #fdfdf8 / #e1d7c2) and the olive-tinted text ramp — warmth is the first impression.
• Let one dominant action color (#f54e00) do the structural work; ration the loud secondary accents (#f7a501 / #2f80fa / #30abc6 / #b62ad9 / #36c46f) to small joyful punctuation.
• Round everything — display (Squeak-style), body (Open Runde-style), corners (4–6px), icons (hand-drawn stroke). The rounding is the personality.
• Default to the primary cubic-bezier(0.4, 0, 0.2, 1) 0.15s curve for interactive transitions; reserve the slow 3–7.6s ambient floats for background life only.
• Reach for 1px warm-gray hairline borders before drop shadow; use honest soft shadows only for genuinely floating overlays.
• Stagger ambient float durations (4 / 4.9 / 5.8 / 6.7 / 7.6s) so motion reads organic, not mechanical.
• Pass every page through useReducedMotion before shipping — floats off, transitions instant.

• Never go dark-first — PostHog's contrarian identity is the bright warm-paper canvas; flipping to near-black erases the brand thesis.
• Never let the loud accents become large flat fills — yellow/blue/teal/purple/green are punctuation, not surface color. Spread them across whole sections and the page reads as a clown car.
• Never swap the rounded families for a sharp grotesque — the soft letterforms carry the personality before any illustration does.
• Never use cold blue-grays for text — the warm olive ramp (#1a1a1a / #4d4f46 / #65675e) is what keeps the page hand-made; clinical grays make it generic.
• Never animate affordance on the slow tier or float UI on the fast tier — the two motion tiers (0.15s interactive vs 3–7.6s ambient) must not cross.
• Never introduce a spring or a sixth easing beyond {cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.16, 1, 0.3, 1), ease-in-out, linear}.
• Never coarsen the spacing scale by dropping the measured 17px step to a clean 16 — the 17 is part of the observed optical rhythm.

• Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS.
• Light-first: #ffffff body, #fdfdf8 / #fffefe cream, #e1d7c2 warm tan panels; olive text ramp #1a1a1a / #4d4f46 / #65675e / #374151.
• Brand color #f54e00 owns primary actions; secondary accent set {#f7a501, #2f80fa, #30abc6, #b62ad9, #36c46f} rationed as punctuation.
• Spacing base 2px, scale 2/4/6/8/10/12/14/17/20/24/32/34 (keep the 17 step).
• Radius scale: 2 / 4 / 5 / 6 / 8 px. Border widths 1 / 2 / 4 px, style solid.
• Fonts: Squeak (display) + Open Runde (body/heading) + IBM Plex Sans Variable (UI) + Source Code Pro (mono); weights 400–800.
• Motion: durations {0.15, 0.3, 3, 4, 4.9, 5.8, 6.7, 7.6}s, easings {cubic-bezier(0.4, 0, 0.2, 1) primary, cubic-bezier(0.16, 1, 0.3, 1), ease-in-out, linear}. No springs.
• Breakpoints (measured, non-standard): sm 425 / md 768 / lg 900 / xl 1160 / 2xl 1536 px.

• Background audit: page surfaces draw from {#ffffff, #fdfdf8, #fffefe, #e1d7c2} — light-first, warm; no near-black canvas.
• Text color grep: body/heading colors come from the olive ramp {#1a1a1a, #4d4f46, #65675e, #374151} — no cold blue-gray (#374151 is the coolest allowed).
• Action color audit: every primary CTA uses #f54e00; secondary accents appear only as small punctuation (total accent surface well under ~10%).
• Spacing grep: no values outside the 2/4/6/8/10/12/14/17/20/24/32/34 ladder — the 17px step is present.
• Radius grep: corner radii draw from {2, 4, 5, 6, 8}px — no sharp 0 corners, no large pills except badges/avatars.
• Font grep: display is Squeak-style rounded, body is Open Runde-style rounded, mono is Source Code Pro; weights within 400–800.
• Transition grep: interactive `transition-timing-function` is cubic-bezier(0.4, 0, 0.2, 1) at 0.15s; ambient keyframes use ease-in-out at 4–7.6s.
• Border audit: 1px solid warm-gray hairlines (#9ea096 / #bfc1b7) do the delimiting; drop shadows reserved for floating overlays only.
• Motion-tier audit: no affordance on the 3–7.6s tier, no UI floating on the 0.15s tier; ambient float durations are staggered.
• Contrast audit: body text on white ≥ 4.5:1 (AA); white text on #f54e00 buttons treated as large/UI (≈4.3:1); accents never used as the sole state signal.
• Reduced-motion audit: prefers-reduced-motion disables floats and collapses transitions.