primary#ffffff
Main CTA fill on dark pages.
Design.md preview / extracted May 19, 2026
Dark editorial systems for building with frontier AI.
A brand-specific catalog for OpenAI’s public design language: black canvas, precise negative-tracked type, quiet pill actions, flat surfaces, and product modules that feel like ChatGPT, API docs, pricing, and research feeds.
What can I help with?
Research
API Platform
Stories
More
Model update
Business story
Developer docs
Message ChatGPT
01 / Colors
Monochrome first, color as signal.
OpenAI’s identity is built on black, white, gray, translucent white, and sparse functional accents.
canvas#000000
Marketing and pricing base.
docsCanvas#131313
Softer developer background.
surface#212121
Docs cards and search pills.
surfaceAlt#303030
Active technical nav surface.
body#dcdcdc
Readable long-form text.
muted#b9b9b9
Secondary copy and metadata.
link#8ad1fd
Rare saturated link accent.
success#10a37f
Functional confirmation only.
error#ef4444
Functional failure states.
02 / Typography
OpenAI Sans, approximated with Inter.
The typographic character comes from medium weights, tight tracking, and high-contrast placement on black.
Display intelligence
display — 59px / 500 / 1.01 / -0.03em / OpenAI Sans
Hero prompt surface
hero — 60px / 500 / 1.00 / -0.03em / OpenAI Sans
Frontier model platform
headline-lg — 46px / 500 / 1.16 / -0.029em / OpenAI Sans
OpenAI for developers
title-lg — 30px / 600 / 1.40 / -0.02em / OpenAI Sans
Recent news
title-md — 22px / 500 / 1.25 / -0.01em / OpenAI Sans
GPT Image 2 for image generation
title-sm — 18px / 600 / 1.35 / -0.01em / OpenAI Sans
Build more capable realtime voice agents, stream live speech translation, and transcribe with clear hierarchy.
body — 17px / 400 / 1.65 / -0.01em / OpenAI Sans
Limited access to models, uploads, memory, projects, and deep research.
body-sm — 14px / 400 / 1.64 / -0.01em / OpenAI Sans
03 / Buttons
Compact pills and ghost navigation.
Actions are small, flat, and direct. No heavy shadows, no decorative gradients.
04 / Cards & Surfaces
Image-led cards, docs panels, flat rows.
Marketing cards stay transparent. Developer cards use charcoal. Depth remains flat.
Product / 18 min read
Introducing GPT model updates
Square editorial art carries visual variety while the card itself remains unboxed.
Read moreStory
A seed farm in South Carolina
Human stories use photographic blocks and quiet metadata.
View storyResearch
Improving instruction hierarchy
Research cards use restraint, not badge-heavy styling.
Open paperDeveloper resource
Charcoal docs surfaces use 10px radius, faint borders, and compact type for scanning.
Open docsAPI use case
Translucent CTA cards create contrast without adding a new brand hue.
ExploreFlat comparison
Expanded contextYes
Admin controlsTeam
05 / Brand-Specific Product Patterns
Signals from ChatGPT, API docs, pricing, and editorial feeds.
These mini mockups are the identity test: remove the name and the category should still feel unmistakably OpenAI.
ChatGPT conversation surface
Draft a launch plan for a new realtime voice agent.
I’ll structure it into product narrative, developer milestones, launch assets, and evaluation criteria.
Message ChatGPT
API platform code card
const response = await client.responses.create({
model: "gpt-5.5",
input: "Summarize the research note"
});
model: "gpt-5.5",
input: "Summarize the research note"
});
Realtime, images, agents, and structured outputs
Pricing plan columns
FreeEveryday tasks
PlusAdvanced intelligence
ProMaximum usage
Developer resource hub
DocsGuides and concepts for the OpenAI API
API referenceEndpoints, parameters, and responses
CookbooksExample workflows and tasks
Recent news feed
Introducing image generation updates
Product / 7 min read
Helping ChatGPT recognize context
Safety / May 14
How frontier firms pull ahead
Company / May 6
Model showcase band
An all-in-one platform for agents, models, and AI experiences, presented as a full dark band with type and product signal rather than decoration.
ResponsesRealtimeImagesCodex
06 / Forms
Quiet inputs for technical workflows.
Forms use charcoal fills, faint borders, pill search, and functional error color only when needed.
Project key is required.
07 / Spacing
Compact components, wide editorial bands.
08 / Radius
Small media corners and pill actions.
sm / 6pxmedia cards
md / 8pxnav pills
lg / 10pxdocs cards
xl / 16pxcomposer shell
pill / 9999pxbuttons
09 / Elevation
Flat surfaces, no shadow theater.
Depth comes from color contrast, opacity, scale, and hairline rules. All observed shadow values are none.
Marketing card
box-shadow: none
Transparent on black, image-led.
Developer card
box-shadow: none
Surface contrast plus faint border.
Pricing row
box-shadow: none
Hierarchy from dividers and type.
10 / Extracted Component Tokens
CSS custom properties.
:root {
--brand-primary: #ffffff;
--brand-accent: #f9f9f9;
--brand-accent-hover: #ececec;
--brand-accent-pressed: #dcdcdc;
--brand-ink: #ffffff;
--brand-body: #dcdcdc;
--brand-muted: #b9b9b9;
--brand-canvas: #000000;
--brand-surface: #212121;
--brand-surface-alt: #303030;
--brand-border: #ffffff1f;
--brand-border-strong: #ffffff26;
--brand-link: #8ad1fd;
--brand-success: #10a37f;
--brand-warning: #f5a524;
--brand-error: #ef4444;
--brand-translucent-action: #ffffff1f;
--brand-docs-canvas: #131313;
--radius-sm: 6px;
--radius-lg: 10px;
--radius-pill: 9999px;
--space-section: 96px;
}