Skip to content

PUBLIC REFERENCE

OpenAI

Blank page before the first word — a design that treats white space as the most powerful element, reserving all color for user-generated and editorial content.

2026-04-11 Source style Original site
OpenAI captured reference
DESIGN.md tokens.json Tailwind v4 detail JSON

Colors

Void #000000

Primary text, nav labels, filled CTA button background, icon fills — the singular chromatic anchor of the entire system

Fog Border #e5e7eb

All dividing lines, card outlines, input borders, nav underlines — the lightest possible mark that still reads as a separator on white

Chalk #f1f1f1

Hover-state button backgrounds, subtle surface fills — one step off pure white without introducing warmth

Graphite #666666

Supporting body text, icon strokes, secondary labels — muted but still readable

Ash #8f8f8f

Tertiary labels, disabled states, fine-grain icon strokes

Canvas #ffffff

Page background, card surfaces, all primary surfaces — absolute white with no warm or cool tint

Do

  • Use #000000 as the only filled button background color — no colored CTAs
  • Apply 9999px border-radius to all pill buttons, ghost buttons, and the conversational input field
  • Use 6.08px border-radius on all image-containing card elements and thumbnail clips
  • Set display headlines (48px) with letter-spacing -0.03em; omit tracking overrides below 22px unless using caps labels
  • Use #e5e7eb as the only border/divider color — never darken it or tint it
  • Introduce color only through photography or editorial imagery — never through UI backgrounds or button fills
  • Maintain minimum 64px vertical gap between page sections

Don't

  • Do not use any colored accent (blue, green, orange) on interactive elements or backgrounds
  • Do not apply box-shadows to cards — separation comes from whitespace, not depth
  • Do not mix border-radius values between pill (9999px) and card (6.08px) contexts — the contrast is intentional and the values must be exact
  • Do not use weight below 400 or above 600 in OpenAI Sans — the 400/500/600 triad defines all typographic hierarchy
  • Do not use background colors on section blocks — the page stays #ffffff wall-to-wall
  • Do not add letter-spacing at body sizes (16-18px) — tracking is only for display (negative) and caps labels (positive +0.011em)
  • Do not use more than two typographic colors: #000000 for primary and #666666 for secondary — #8f8f8f is reserved for disabled/tertiary only