# openai.com Design System

> High-contrast monochrome utility meets expansive white space, anchored by a custom humanist sans-serif.

**Source:** https://openai.com | **Captured:** 2026-06-17 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
The OpenAI parent brand is a study in functional minimalism, utilizing a strict achromatic palette of pure black `#000000` and pure white `#ffffff`. The system relies on **OpenAI Sans**, a custom typeface that maintains a consistent weight of 500 for headings and 400 for body, often paired with tight negative letter-spacing at larger scales (-1.44px at 48px). Layouts are characterized by generous vertical rhythm (64px spacing blocks) and a total absence of decorative shadows or gradients in the core UI. Interactive elements are either stark black pills or subtle text links, ensuring the focus remains entirely on the content and research imagery.

## Signature DNA
1. **Achromatic Dominance** (The UI is strictly `#000000` and `#ffffff`, using color only for external imagery or syntax highlighting in technical blocks. Observed across all analyzed pages.)
2. **Humanist Geometry** (The use of **OpenAI Sans** at a specific 500 weight for display and 400 for body, replacing standard system fonts to create a proprietary but legible technical voice.)
3. **Negative Tracking** (Display type at 48px uses a significant -1.44px letter-spacing, creating a dense, "locked-in" headline appearance that contrasts with the open white space of the layout.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
| :--- | :--- | :--- | :--- | :--- |
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color-black` | `#000000` | Primary text, button backgrounds, borders | 201 | 1 | `css_variable` |
| `--color-white` | `#ffffff` | Page background, primary surface, button text | 2 | 1 | `css_variable` |
| `--color-primary-solid-80` | `#333333` | Secondary text, subtle emphasis | 1 | 1 | `declared_token` |
| `--color-primary-solid-12` | `#e0e0e0` | Dividers, light borders | 1 | 1 | `declared_token` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color-syntax-keyword` | `#1e60e4` | Code block highlighting (decorative_only) | 1 | 1 | `declared_token` |
| `--color-syntax-string` | `#027f41` | Code block highlighting (decorative_only) | 1 | 1 | `declared_token` |
| `--color-syntax-operator` | `#c93b00` | Code block highlighting (decorative_only) | 1 | 1 | `declared_token` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| OpenAI Sans | 400, 500, 600, 650 | Heading, Body, UI | Inter | Proprietary |
| Arial | 400 | Fallback body | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{text-h2}` | 48px | 55.68px | -1.44px | 500 | Hero Display | `div.mb-2xs.text-h2` |
| `{text-h4}` | 22px | 27.72px | -0.22px | 500 | Section Heading | `h2.text-h4` |
| `{text-h5}` | 18px | 23.76px | -0.18px | 500 | Small Heading | `div.mb-2xs.text-h5` |
| `{text-body}` | 17px | 27.99px | -0.17px | 400 | Primary Body | `article.flex` |
| `{text-body-md}` | 16px | 24px | -0.16px | 400 | Secondary Body | `div.truncate` |
| `{text-meta}` | 14px | 19.6px | normal | 500 | Captions/Metadata | `p.text-meta` |
| `{text-link}` | 14px | 14px | normal | 500 | Inline Links | `a.transition` |
| `{text-ui}` | 12px | normal | normal | 500 | Small UI Labels | `button` |

### Principles
1. **Tight Display Tracking:** As font size increases, letter-spacing decreases proportionally (e.g., -3% of font size for display).
2. **Achromatic Hierarchy:** Contrast is created through font weight and size rather than color shifts.
3. **OpenAI Sans Exclusivity:** All brand-facing copy must use the proprietary sans-serif; Arial is reserved for raw data or unstyled fallbacks.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{spacing-sm}` | 12px | 17 |
| `{spacing-md}` | 16px | 33 |
| `{spacing-lg}` | 32px | 19 |
| `{spacing-xl}` | 64px | 6 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius-none}` | 0px | Sharp containers, section dividers | `role: sharp` |
| `{radius-sm}` | 4px | Form inputs, small surfaces | `role: input` |
| `{radius-md}` | 6px | Cards, content blocks | `radius: 6.08px` |
| `{radius-pill}` | 9999px | CTA Buttons, search bars | `role: pill` |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow-none}` | none | Default state for most cards | `shadow: none` |
| `{shadow-subtle}` | 0px 4px 6px 0px rgba(0,0,0,0.02) | Hovered pills or search bars | `rgba(0, 0, 0, 0.02)` |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (e.g., "Try ChatGPT")
**Pages observed:** openai.com
**Spec:** Background `#000000` / Text `#ffffff` / Radius `9999px` / Typography `14px weight 500`
**States observed:** Default | Hover: captured | Focus: not captured

#### Search Input
**Role:** Main interaction point on homepage
**Pages observed:** openai.com
**Spec:** Background `#ffffff` / Border `1px solid #e0e0e0` / Radius `9999px` / Padding `12px 16px`
**States observed:** Default | Active: captured

### Tier 2: Patterns
#### Content Card
**Role:** News and story previews
**Pages observed:** openai.com
**Spec:** Background `transparent` / Border `0px` / Radius `6px` / Typography `17px`
**States observed:** Default | Hover: captured

#### Navigation Link
**Role:** Top-level site navigation
**Pages observed:** openai.com, openai.com/about
**Spec:** Background `transparent` / Text `#000000` / Typography `14px weight 500`
**States observed:** Default | Hover: captured

### Tier 3: Surface-specific
#### Code Block
**Role:** Technical documentation display
**Pages observed:** openai.com (Research pages)
**Spec:** Background `#f5f5f5` / Text `#000000` / Radius `4px` / Typography `Arial 16px`
**States observed:** Default | Active: not captured

#### Metadata Tag
**Role:** Categorization for articles
**Pages observed:** openai.com
**Spec:** Background `transparent` / Text `#707070` / Typography `14px weight 500`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max-width | 1200px |
| Section Padding | 64px |
| Column Gap | 32px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; text-h2 scales down. |
| Desktop | 1440px | 12-column grid active; 64px section spacing. |

## Imagery & decoration
OpenAI uses high-fidelity, often abstract or conceptual photography and 3D renders (e.g., the "GPT-5.5" floral motif). It avoids illustrative "SaaS-style" icons, preferring literal UI screenshots or high-concept art.

## Do's
- Use `#000000` for all primary actions.
- Apply `-1.44px` letter-spacing to any headline above 40px.
- Maintain a minimum of `64px` vertical padding between major sections.
- Ensure all body text uses `OpenAI Sans` at `17px`.
- Use `9999px` radius for all interactive pill elements.

## Don'ts
- **Wrong:** Using a sub-brand color (like `--color-yellow-40`) for a parent site button. **Right:** Use `#000000`. **Reason:** Parent brand must remain achromatic.
- **Wrong:** Applying a drop shadow to a standard content card. **Right:** Use a `1px` border or flat surface. **Reason:** The system is depth-minimal.
- **Wrong:** Using bold weights (700+) for headlines. **Right:** Stick to `500` weight. **Reason:** OpenAI Sans is designed to carry authority at medium weights.

## Similar brands
- Apple (Typography focus, white space)
- Stripe (Technical precision, layout grid)
- Anthropic (Minimalist AI aesthetic)

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #000000;
  --color-background: #ffffff;
  --font-main: 'OpenAI Sans', sans-serif;
  --radius-pill: 9999px;
  --spacing-section: 64px;
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-primary: #000000;
  --color-surface: #ffffff;
  --font-sans: 'OpenAI Sans';
  --spacing-xl: 64px;
  --radius-md: 6px;
}
```

## Agent prompt examples
- "Generate a hero section with a `#ffffff` background, a `#000000` pill button, and a headline in OpenAI Sans at 48px with -1.44px letter-spacing."
- "Create a 3-column grid of cards using a `6px` border radius and no box-shadow, following the openai.com news pattern."

## Known gaps
- Hover state transitions for secondary navigation were not fully captured in the computed style evidence.
- Specific mobile breakpoint pixel values for font-size scaling were inferred from the 390px viewport capture but not found in explicit tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://openai.com | 1440x900 | 2026-06-17 |
| Pricing | https://openai.com/pricing | 1440x900 | 2026-06-17 |
| About | https://openai.com/about | 1440x900 | 2026-06-17 |