Color Palette
Extracted Colors — Fewest in this series (4 tokens)
Black (dominant)
#000000 · ×1180
Light Gray (border)
#E5E7EB · ×1016
:root Semantic Alpha Scale — Primary (black at opacity steps)
Primary 2%
--color-primary-2
Primary 4%
--color-primary-4
Primary 12%
--color-primary-12
Primary 44%
--color-primary-44
Primary 60%
--color-primary-60
Primary 80%
--color-primary-80
Primary 100%
--color-primary-100
:root Accent Hues — Lime, Magenta, Blue, Yellow
Magenta
--color-hue-magenta
:root Syntax Highlighting Colors — Code editor palette
copy
error
operator
variable
string
data
keyword
function
const
The :root layer defines a complete code editor theme for OpenAI's documentation and API playground. These are not surfaced as UI design tokens but as a dedicated syntax highlighting sub-system.
Typography
--font-family-base · OpenAI Sans (proprietary)
OpenAI Sans
Used at scale across openai.com, ChatGPT, and the API platform. Single font family for all UI — no secondary serif or display typeface.
Regular · 400
Medium · 500
Semibold · 600
Fluid type scale — clamp() from :root
Fluid sizing system
The :root layer defines --type-xl-size through --type-2xs-size as fluid clamp() expressions interpolating between 375px and 1440px viewports. Sub-pixel extracted sizes are rendered instances of this system.
xl: clamp(4rem → 7rem)
h1: clamp(2rem → 4rem)
h2: clamp(2rem → 3rem)
Introducing GPT-5
Display · 43.39px · Medium · line-height: 50.15px · letter-spacing: −1.209px (most negative in series)
Explore the API
Heading XL · 28px · Medium · line-height: 34px · letter-spacing: −0.214px
Powerful language models
Heading LG · 21.42px · Medium · line-height: 28px · letter-spacing: −0.174px
Build on the most capable AI models in the world. Start with our models, fine-tune them for your use case, or build your own.
Body · 17px · Regular · line-height: 26.65px · letter-spacing: −0.17px
Get started with the OpenAI API. Access GPT-4, DALL·E, Whisper, and more.
Body Default · 16px · Regular · line-height: 19.6px · letter-spacing: −0.16px
Last updated 2 minutes ago · Free tier · 100 requests/min
Body Small · 14px · Regular · line-height: 22.11px
PRODUCTS · RESEARCH · SAFETY · COMPANY
Nav/Label · 13px · Medium · letter-spacing: +0.3px (sole positive token)
Letter Spacing — 6 negative + 1 positive (−1.209px tightest in series)
Display hero
--letter-spacing-tight
−1.209px · 43px+ display · most negative in entire series
Heading text
--letter-spacing-normal
−0.214px · sub-pixel heading compression
Body default
--letter-spacing-widest
−0.16px · 16px body text
NAV LABELS
--letter-spacing-ls-7
+0.3px · sole positive · uppercase nav items
Spacing
Spacing Scale
22 steps — 3.9px → 392.805px · dense sub-pixel cluster at 3.9–4.797px then standard steps through to 392.8px (viewport-scale hero spacing)
Borders
Border Radii — 5 tokens (4px to 9999px pill)
md (dominant)
6.08px · ×42
The sub-pixel 6.08px radius is the computed value of a rem-based token — the dominant card radius. The 40px radius is applied to OpenAI's signature pill-style CTA buttons.
Border Widths
--border-width-hairline
1px · ×24 — single universal border width throughout the system
Shadows / Elevation
Shadow Tokens
2 tokens — 6-stop shadows with 4 transparent leading layers · ultra-subtle elevation
sm — Card default
×5
6-stop: 4 transparent layers + 2% 4px 6px + 5% ambient 2px — imperceptible elevation, definition from border
md — Raised card
×1
6-stop: 4 transparent layers + 6% 2px 5px + 1% 4px 4px — minimal lift for interactive elements
Z-Index
9 layers — clean 1→10→40→50→51→52→56→57→103. The 50–52 cluster handles OpenAI's navigation system (desktop nav, mobile nav, nav overlay). The gap from 57 to 103 suggests a deliberate jump for the highest priority overlay — likely the ChatGPT interface modal.
| Layer | Value | Usage |
|---|
| --z-1 (Base) | 1 | Base content stacking context |
| --z-2 (Navigation) | 10 | Sticky navigation, announcement bar |
| --z-3 (Overlay bg) | 40 | Overlay backgrounds, backdrop |
| --z-4 (Nav cluster 1) | 50 | Navigation layer — desktop nav start |
| --z-5 (Nav cluster 2) | 51 | Navigation layer — nav dropdown |
| --z-6 (Nav cluster 3) | 52 | Navigation layer — nav top rail |
| --z-7 (Priority 1) | 56 | Priority overlays, tooltips |
| --z-8 (Priority 2) | 57 | High-priority popovers, drawers |
| --z-9 (Absolute top) | 103 | Modals, critical overlays — ChatGPT interface panels |
Breakpoints
5 breakpoints — 640px → 1536px. Standard Tailwind CSS breakpoints: sm/md/lg/xl/2xl. The :root layer also encodes fluid clamp() type scales interpolating from 375px to 1440px for continuous responsive typography.
Opacity
— No opacity tokens detected —
OpenAI's design system encodes opacity as named CSS custom properties in the --color-primary-* and --color-secondary-* alpha scale rather than standalone opacity properties. For example, --color-primary-44: #00000070 represents 44% opacity black — opacity is baked into the color token itself.
Accessibility
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1. OpenAI's extracted palette is extreme — #000000 vs #FFFFFF at 21:1 (maximum possible). The #E5E7EB border color (×1016) creates complexity when used as background.
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| #000000 (Black) | #FFFFFF (White) | 21:1 | AAA |
| #000000 (Black) | #F1F1F1 (Lt Gray 2) | 18.1:1 | AAA |
| #000000 (Black) | #E5E7EB (Lt Gray) | 15.8:1 | AAA |
| #FFFFFF (White) | #000000 (Black) | 21:1 | AAA |
| #000000 (Black) | #8f8f8f (Solid-44) | 3.9:1 | AA Large |
| #000000 (Black) | #666 (Solid-60) | 5.74:1 | AA |
| #FFFFFF (White) | #333 (Solid-80) | 12.63:1 | AAA |
| #000000 (Black) | #f5f5f5 (Solid-4) | 19.5:1 | AAA |
| #9dca1c (Hue Lime) | #000000 (Black) | 7.1:1 | AAA |
| #9dca1c (Hue Lime) | #FFFFFF (White) | 2.95:1 | Fail |
| #29bdfd (Hue Blue) | #000000 (Black) | 9.1:1 | AAA |
| #29bdfd (Hue Blue) | #FFFFFF (White) | 2.3:1 | Fail |
| #ffaf00 (Hue Yellow) | #000000 (Black) | 9.8:1 | AAA |
| #ffaf00 (Hue Yellow) | #FFFFFF (White) | 2.14:1 | Fail |
| #eb56c5 (Hue Magenta) | #000000 (Black) | 4.5:1 | AA |
CSS Variables Reference
Black (dominant ×1180)--color-black#000000
Light Gray (border ×1016)--color-light-gray#E5E7EB
White (bg ×11)--color-white#FFFFFF
Light Gray 2 (bg ×3)--color-light-gray-2#F1F1F1
OpenAI Sans (proprietary)--font-family-baseOpenAI Sans
Regular / Medium / Semiboldweights400/500/600
Display (sub-pixel fluid)--font-size-4xl43.3878px
Heading XL--font-size-3xl28px
Body default--font-size-base16px
Display tight (most extreme)--letter-spacing-tight−1.209px
Nav labels (sole positive)--letter-spacing-ls-7+0.3px
Instant · ×142--duration-instant0.1s
Fast · ×13--duration-fast0.15s
Normal · ×443--duration-normal0.2s
Slow (dominant ×1472)--duration-slow0.25s
Slower · ×148--duration-slower0.3s
No easing tokens detectedeasing—
No opacity tokens detectedopacity—
md (dominant ×42)--radius-md6.08px
xl (CTA button ×7)--radius-xl40px
2xl (pill ×15)--radius-2xl9999px
Base--z-11
Navigation--z-210
Nav cluster (50/51/52)--z-4/5/650/51/52
Modal / Critical--z-9103
OpenAI Design System · Generated 17/04/2026 · 4 extracted colors (most minimal in series) · 1 font family (OpenAI Sans) · 3 font weights · 9 font sizes (sub-pixel fluid) · 10 line heights · 7 letter-spacing (6 negative, 1 positive at −1.209px extreme) · 22 spacing steps · 5 radius · 1 border width · 2 shadows (6-stop) · 9 durations · no easing tokens · no opacity tokens · 9 z-index layers · 5 breakpoints (Tailwind)