W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
OpenAI
OpenAI is an AI research and deployment company — creator of the GPT model family, ChatGPT, the OpenAI API, and the Codex code- generation surface. The brand voice is research-grounded and understated: it lets demos and capability speak. Visually, OpenAI is monochrome-first — pure white or pure black canvases, a five- stop neutral ramp for quiet emphasis, and a small set of "hue" accents (red, lime, magenta, blue, yellow) reserved for diagrams and data visualization. Typography is OpenAI Sans, the company's proprietary brand face.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/openai/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/openai/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
OpenAI
OpenAI is an AI research and deployment company — creator of the GPT model family, ChatGPT, the OpenAI API, and the Codex code- generation surface. The brand voice is research-grounded and understated: it lets demos and capability speak. Visually, OpenAI is monochrome-first — pure white or pure black canvases, a five- stop neutral ramp for quiet emphasis, and a small set of "hue" accents (red, lime, magenta, blue, yellow) reserved for diagrams and data visualization. Typography is OpenAI Sans, the company's proprietary brand face.
Tags: openai, ai, research, brand, minimal, monochrome
Atoms
Palette
OpenAI · [email protected] · Proprietary — All Rights Reserved
OpenAI's brand palette as observed on the live marketing site (openai.com). The brand is monochrome-first: a pure-white canvas with pure-black foreground in light mode, inverted in dark, and a calibrated five-stop neutral ramp ("primary" / "secondary" / "tertiary") for surfaces and quiet emphasis. OpenAI's research and documentation surfaces additionally publish a "hue" scale (red, blue, green, yellow, magenta, lime) used in diagrams, code-syntax highlighting, and data visualization. These are preserved here as a documented secondary scale.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
openai-black |
OpenAI Black | #000000 |
openai-white |
OpenAI White | #FFFFFF |
primary-solid-4 |
Primary Solid 4 | #1F1F1F |
primary-solid-12 |
Primary Solid 12 | #333333 |
primary-solid-44 |
Primary Solid 44 | #707070 |
primary-solid-60 |
Primary Solid 60 | #999999 |
primary-solid-80 |
Primary Solid 80 | #CCCCCC |
secondary-solid-4 |
Secondary Solid 4 | #F5F5F5 |
secondary-solid-12 |
Secondary Solid 12 | #E0E0E0 |
secondary-solid-44 |
Secondary Solid 44 | #8F8F8F |
secondary-solid-60 |
Secondary Solid 60 | #666666 |
secondary-solid-80 |
Secondary Solid 80 | #333333 |
tertiary-solid-60 |
Tertiary Solid 60 | #888888 |
tertiary-solid-80 |
Tertiary Solid 80 | #5C5C5C |
tertiary-solid-100 |
Tertiary Solid 100 | #1F1F1F |
openai-hue-red |
OpenAI Hue Red | #ED6079 |
openai-hue-lime |
OpenAI Hue Lime | #8FAC39 |
openai-hue-magenta |
OpenAI Hue Magenta | #C759AB |
openai-hue-blue |
OpenAI Hue Blue | #36A6D7 |
openai-hue-yellow |
OpenAI Hue Yellow | #E2A727 |
openai-accent-blue |
OpenAI Accent Blue | #4DA3FF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
openai-white |
#FFFFFF |
surface |
secondary-solid-4 |
#F5F5F5 |
surface-elevated |
openai-white |
#FFFFFF |
text-primary |
openai-black |
#000000 |
text-secondary |
secondary-solid-60 |
#666666 |
text-tertiary |
secondary-solid-44 |
#8F8F8F |
primary |
openai-black |
#000000 |
primary-hover |
secondary-solid-80 |
#333333 |
accent |
openai-accent-blue |
#4DA3FF |
accent-hover |
openai-hue-blue |
#36A6D7 |
warning |
openai-hue-yellow |
#E2A727 |
warning-hover |
openai-hue-yellow |
#E2A727 |
error |
openai-hue-red |
#ED6079 |
success |
openai-hue-lime |
#8FAC39 |
border |
secondary-solid-12 |
#E0E0E0 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
openai-black |
#000000 |
surface |
primary-solid-4 |
#1F1F1F |
surface-elevated |
primary-solid-12 |
#333333 |
text-primary |
openai-white |
#FFFFFF |
text-secondary |
primary-solid-80 |
#CCCCCC |
text-tertiary |
primary-solid-60 |
#999999 |
primary |
openai-white |
#FFFFFF |
primary-hover |
primary-solid-80 |
#CCCCCC |
accent |
openai-accent-blue |
#4DA3FF |
accent-hover |
openai-hue-blue |
#36A6D7 |
warning |
openai-hue-yellow |
#E2A727 |
warning-hover |
openai-hue-yellow |
#E2A727 |
error |
openai-hue-red |
#ED6079 |
success |
openai-hue-lime |
#8FAC39 |
border |
primary-solid-12 |
#333333 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
openai-black |
#000000 |
on-identity |
openai-white |
#FFFFFF |
primary |
openai-black |
#000000 |
primary-hover |
secondary-solid-80 |
#333333 |
accent |
openai-accent-blue |
#4DA3FF |
accent-hover |
openai-hue-blue |
#36A6D7 |
success |
openai-hue-lime |
#8FAC39 |
warning |
openai-hue-yellow |
#E2A727 |
error |
openai-hue-red |
#ED6079 |
text-primary-light |
openai-black |
#000000 |
text-primary-dark |
openai-white |
#FFFFFF |
background-light |
openai-white |
#FFFFFF |
background-dark |
openai-black |
#000000 |
surface-light |
secondary-solid-4 |
#F5F5F5 |
surface-dark |
primary-solid-4 |
#1F1F1F |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Pure black on pure white (and vice versa) is the maximum possible contrast (21:1). The brand's monochrome posture clears AAA by construction; this rule guards against consumers swapping in mid-neutrals that would defeat the property.
colorChoice → roles.colors.primary
- allowed: openai-black, openai-white
- forbidden: openai-hue-red, openai-hue-blue, openai-hue-lime, openai-hue-magenta, openai-hue-yellow
OpenAI's primary brand color is monochrome — black on white, white on black. The "hue" tokens are reserved for data visualization, syntax highlighting, and illustration and must not be used as the brand interactive primary.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo
OpenAI's blossom mark is monochrome by design. Recolored, skewed, or gradient variants conflict with the brand's minimal posture.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.5
OpenAI Sans is the only display face on openai.com; the visual hierarchy is established entirely by size and weight. A 1.5× minimum heading-to-body ratio preserves the hierarchy without introducing a second family.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The brand's monochrome posture clears AA effortlessly; consumers must preserve the property when composing neutral ramps.
compositionConstraint → roles.colors.identity
- pairsWith: openai-white
- doesNotPairWith: openai-hue-red, openai-hue-blue, openai-hue-magenta
The identity block is black-on-white or white-on-black. Placing the brand identity directly against a hue background breaks the documented monochrome treatment.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700
OpenAI Sans is distributed in a constrained weight range on openai.com. The marketing site uses Regular (400) for body, Medium (500) and SemiBold (600) for emphasis, and Bold (700) for hero headings. Display weights outside this band are reserved for special editorial contexts.
contextRestriction → roles.colors.accent
- forbiddenContexts: background, large-fill
- allowedContexts: link, data-viz-primary, focus-ring
OpenAI's documented accent blue (#4DA3FF) and the hue ramps appear at small sizes — links, data points, syntax tokens — not as large background fills. Large hue fills conflict with the brand's monochrome canvas.
Provenance
- Source: https://openai.com/
- License:
Proprietary — All Rights Reserved - Attribution: OpenAI, OpCo. — visual identity captured from the deployed stylesheet on openai.com (--color-primary-, --color-secondary-, --color-hue-, --color-supply-accent- token families). OpenAI marks and logos are property of OpenAI.
- Imported:
2026-05-17 - Notes: OpenAI Sans is the proprietary brand typeface declared on openai.com (font-family: "OpenAI Sans", sans-serif). It is not publicly distributed. This atom references Inter@1 as the open- source rendering substitute and notes the proprietary primary in this provenance block.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by OpenAI
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
OpenAI
A clear hierarchy in OpenAI's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ openai-accent-blue #4DA3FF accent-hover
→ openai-hue-blue #36A6D7 background-dark
→ openai-black #000000 background-light
→ openai-white #FFFFFF error
→ openai-hue-red #ED6079 identity
→ openai-black #000000 on-identity
→ openai-white #FFFFFF primary
→ openai-black #000000 primary-hover
→ secondary-solid-80 #333333 success
→ openai-hue-lime #8FAC39 surface-dark
→ primary-solid-4 #1F1F1F surface-light
→ secondary-solid-4 #F5F5F5 text-primary-dark
→ openai-white #FFFFFF text-primary-light
→ openai-black #000000 warning
→ openai-hue-yellow #E2A727 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from openai)
Light mode (15 roles)
accent
→ openai-accent-blue accent-hover
→ openai-hue-blue background
→ openai-white border
→ secondary-solid-12 error
→ openai-hue-red primary
→ openai-black primary-hover
→ secondary-solid-80 success
→ openai-hue-lime surface
→ secondary-solid-4 surface-elevated
→ openai-white text-primary
→ openai-black text-secondary
→ secondary-solid-60 text-tertiary
→ secondary-solid-44 warning
→ openai-hue-yellow warning-hover
→ openai-hue-yellow Dark mode (15 roles)
accent
→ openai-accent-blue accent-hover
→ openai-hue-blue background
→ openai-black border
→ primary-solid-12 error
→ openai-hue-red primary
→ openai-white primary-hover
→ primary-solid-80 success
→ openai-hue-lime surface
→ primary-solid-4 surface-elevated
→ primary-solid-12 text-primary
→ openai-white text-secondary
→ primary-solid-80 text-tertiary
→ primary-solid-60 warning
→ openai-hue-yellow warning-hover
→ openai-hue-yellow Rules (8 typed constraints)
error · 6 rules
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Pure black on pure white (and vice versa) is the maximum possible contrast (21:1). The brand's monochrome posture clears AAA by construction; this rule guards against consumers swapping in mid-neutrals that would defeat the property.
colorChoice roles.colors.primary allowed openai-black, openai-white forbidden openai-hue-red, openai-hue-blue, openai-hue-lime, openai-hue-magenta, openai-hue-yellow OpenAI's primary brand color is monochrome — black on white, white on black. The "hue" tokens are reserved for data visualization, syntax highlighting, and illustration and must not be used as the brand interactive primary.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo OpenAI's blossom mark is monochrome by design. Recolored, skewed, or gradient variants conflict with the brand's minimal posture.
fontPairing typography.heading requires body minSizeRatio 1.5 OpenAI Sans is the only display face on openai.com; the visual hierarchy is established entirely by size and weight. A 1.5× minimum heading-to-body ratio preserves the hierarchy without introducing a second family.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The brand's monochrome posture clears AA effortlessly; consumers must preserve the property when composing neutral ramps.
compositionConstraint roles.colors.identity pairsWith openai-white doesNotPairWith openai-hue-red, openai-hue-blue, openai-hue-magenta The identity block is black-on-white or white-on-black. Placing the brand identity directly against a hue background breaks the documented monochrome treatment.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700 OpenAI Sans is distributed in a constrained weight range on openai.com. The marketing site uses Regular (400) for body, Medium (500) and SemiBold (600) for emphasis, and Bold (700) for hero headings. Display weights outside this band are reserved for special editorial contexts.
contextRestriction roles.colors.accent forbiddenContexts background, large-fill allowedContexts link, data-viz-primary, focus-ring OpenAI's documented accent blue (#4DA3FF) and the hue ramps appear at small sizes — links, data points, syntax tokens — not as large background fills. Large hue fills conflict with the brand's monochrome canvas.
Provenance
- Source
- https://openai.com/
- License
Proprietary — All Rights Reserved- Attribution
- OpenAI, OpCo. — visual identity captured from the deployed stylesheet on openai.com (--color-primary-*, --color-secondary-*, --color-hue-*, --color-supply-accent-* token families). OpenAI marks and logos are property of OpenAI.
- Imported
2026-05-17- Notes
- OpenAI Sans is the proprietary brand typeface declared on openai.com (font-family: "OpenAI Sans", sans-serif). It is not publicly distributed. This atom references Inter@1 as the open- source rendering substitute and notes the proprietary primary in this provenance block.