What is OpenAI's primary brand color?

OpenAI's marketing surface has no held-in-reserve brand color. The system runs on pure black ink and pure white canvas — black appears 563 times in the captured page (521 as text, 24 as background fill, 13 as shadow, 5 as border), with white as the dominant page floor. A light hairline gray carries 535 of the page's border occurrences. Every other color in the declared CSS (an extensive pink, green, blue, orange, magenta, lime palette wired to `--color-hue-*` variables) belongs to the product chat interface and never appears in marketing chrome. The brand voltage is the absence of voltage.

What typeface does OpenAI use, and what should I use as a substitute?

OpenAI runs a custom proprietary sans named OpenAI Sans across every tier of the marketing system — display, heading, body, button, nav, and metadata labels share the family. Display headlines sit at 48px in weight 500 with tight -1.44px letter-spacing; section h2 at 22px / 500; body at 14-16px / 500; nav links at 17px / 400; small labels at 13px / 500. The hero h1 'Get started with ChatGPT' at 48px / 500 is the loudest typographic moment. The closest open-source substitute is Inter at the same weights with a touch of negative tracking on the display tier; Geist transfers cleanly at the 48px display moment if you need tighter cap height.

Why is OpenAI's canvas pure white instead of a warm off-white?

The canvas is pure #ffffff, never cream or off-white. The choice tracks with the absence of any brand chromatic accent: when the page floor carries no warmth and the ink carries no softening, the only thing that brings color to the surface is the full-bleed product imagery in the screenshot grid. A cream canvas would force every screenshot card to compete with the page warmth; a pure-white floor recedes and lets the GPT-5.5 announcement card and the sample-output thumbnails own every chromatic moment on the page. The hairline gray for card outlines is the same logic — quiet enough to disappear under the imagery.

What is OpenAI's corner-radius philosophy?

The radius scale is a deliberate two-tier split. Cards use a tight 6.08px rounding (the dominant radius at 39 of the 60 captured occurrences) for the asymmetric product-screenshot grid, the news cards, and the announcement strip. Interactive elements use a fully-rounded pill (9999px) — the hero input field, the suggestion chips, and the 40px-radius primary CTA in the nav. The contrast is the system's only shape gesture: cards are quiet rectangles with barely-visible rounding, interactive surfaces are warm tappable pills. There is no 8 / 12 / 16px middle tier.

OpenAI Design System

OpenAI's marketing system is built around a single pure-black headline on white, a chat-style input pill in the hero, and an asymmetric grid of product-screenshot cards.

About OpenAI DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source openai.com

AI & LLM Platforms

OpenAI's marketing site does something almost no other AI-lab brand attempts: it deletes the marketing. The above-fold is a near-empty white canvas with a thin top-nav, a small "What can I help you with?" prompt, a fully-rounded chat-style input pill underneath, and a row of suggestion chips. There is no hero headline, no chest-pounding tagline, no gradient mesh, no product mockup overlay. The page IS the conversational onboarding affordance — type and you are already in product flow. Below the fold, an asymmetric grid of full-bleed product screenshots (GPT-5.5 announcement, sample outputs, customer stories) does every chromatic job the brand chrome refuses to do.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: a deliberately tiny color set — pure black ink with usage 563 (the dominant text and background voltage), pure white canvas, and a single light hairline gray with 535 border occurrences. Every other declared CSS variable in the source (an entire pink / blue / green / orange / yellow / lime / magenta palette mapped to `--color-hue-*` and `--color-syntax-*`) sits at usage 0 in the captured marketing surface; those tokens belong to the in-product chat interface, not the marketing chrome. Typography runs OpenAI Sans across nine tiers — 13px nav labels at weight 500, 17px nav links at weight 400, 48px display at weight 500 with tight -1.44px tracking. There is no second typeface, no serif tier, no monospace moment on the page.

Feed this file to Claude or Cursor and it reproduces OpenAI's specific moves: pure-white canvas instead of cream or off-white, ink-on-canvas with no held-in-reserve brand color, OpenAI Sans at weight 400-500 across every tier, fully-rounded pill for the single interactive hero element, and 6.08px small-step rounding on every card. The one thing worth borrowing only if your product is itself a conversational interface: the willingness to put a chat input where most brands put a CTA. Most teams need a headline.

What makes it distinct

Two-color structurepure black ink on pure white canvas, with a single hairline gray for card outlines; no brand color is held in reserve
Input-as-herothe only above-fold interactive element is a fully-rounded chat-style input pill, not a CTA button; the brand fronts the product UX, not a slogan
OpenAI Sans across every tier13px nav up to 48px display in weight 500, with a single weight-600 small-caps moment for the wordmark
Asymmetric screenshot grida large 16:9 product card sits beside two stacked square cards, then a 3-up image row below; the imagery is the marketing
Pill input plus 40px CTA radiusboth interactive surfaces are fully-rounded; cards use a tight 6px rounding instead of the warm rounding the product brand uses

Live at openai.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

openai.com

Explore OpenAI

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.