designlang
Brand guidelines #141414

June 12, 2026

openai.com

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

Page intent
landing
System grade
B 84/100
Tokens
2 colours · 3 sizes
Generated
designlang
Chapter 01

About

Page intent
landing 45% confidence
Material language
flat
Imagery style
none
Component library
unknown
Stack
unknown
Voice tone
neutral
Chapter 03

Colour

2 neutrals · 2 total

Neutrals

#8E8EA0
#000000

Full palette

#8E8EA0
#000000

WCAG 100% · 0 passing pairs · 0 failing. Full breakdown in §11.

Chapter 04

Typography

2 families · 3 sizes · 2 weights

Display
Arial
Body
Times
Weights
400, 700

Specimen

Quick brown fox jumps over the lazy dog.
AaBbCc 0123456789 ?!&

Scale

StepSizeSample
t00 24px Quick brown fox jumps over t
t01 16px Quick brown fox jumps over t
t02 13.3333px Quick brown fox jumps over t
Chapter 05

Spacing

Base 8px · 2 steps captured

Rhythm

8px
32px
Chapter 06

Shape

1 radii · 0 elevation tiers

Border radii

5px
Chapter 07

Iconography

unknown · 1 captured

Library
unknown
Confidence
0%
Stroke style
—
icon
Chapter 08

Motion

Feel: mixed · 0 durations · 0 easings

Chapter 09

Components

unknown · 0 component patterns captured

Mocks

Card

Built from these tokens

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

Read more →
Chapter 10

Voice

neutral · — · —

Chapter 11

Accessibility

100% WCAG 2.1 contrast
0 passing · 0 failing

No failing contrast pairs detected.

Chapter 12

Tokens

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

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

Run npx designlang pack openai.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.