---
version: alpha
name: OpenAI
description: Restrained clarity — OpenAI Sans with gentle negative tracking, pure-white canvas, achromatic ink, pill-shaped pill buttons with whisper-light borders, and extreme whitespace as the hero's main event.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#f9f9f9"        # slightly off-white for card/input surfaces
  surface-overlay: "#f1f1f1"  # was rgba(0,0,0,0.04) — flattened over white

  # Text hierarchy
  ink: "#000000"
  ink-secondary: "#666666"   # was rgba(0,0,0,0.6) — flattened, used for nav links default state
  ink-tertiary: "#999999"    # placeholder, disabled, subdued

  # On-color
  on-primary: "#ffffff"

  # Brand accent — achromatic; black is the sole CTA color
  primary: "#000000"

  # Interactive / states
  nav-link-default: "#666666"  # was rgba(0,0,0,0.6) — color-shift to #000000 on hover
  nav-link-hover: "#000000"
  focus-ring: "#005fcc"        # browser-native outline color captured in inputs

  # Borders
  border: "#e5e7eb"            # Tailwind gray-200 — nav, cards, dividers
  border-alpha: "#1f1f1f"      # was rgba(0,0,0,0.12) flattened over white — button borders

  # Shadow tints (opaque approximations)
  shadow-soft: "#f7f7f7"       # was rgba(0,0,0,0.02) — flattened over white
  shadow-medium: "#f0f0f0"     # was rgba(0,0,0,0.05) — flattened over white
  shadow-strong: "#3f3f3f"     # was rgba(0,0,0,0.62) — the 1px border shadow

typography:
  display-hero:
    fontFamily: "OpenAI Sans, Inter, system-ui, -apple-system, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.16
    letterSpacing: -1.44px
  heading-section:
    fontFamily: "OpenAI Sans, Inter, system-ui, -apple-system, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.21
    letterSpacing: 0.3px
  heading-card:
    fontFamily: "OpenAI Sans, Inter, system-ui, -apple-system, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.26
    letterSpacing: -0.22px
  body-lead:
    fontFamily: "OpenAI Sans, Inter, system-ui, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.32
    letterSpacing: -0.18px
  body:
    fontFamily: "OpenAI Sans, Inter, system-ui, -apple-system, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: -0.17px
  body-small:
    fontFamily: "OpenAI Sans, Inter, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: -0.16px
  button-ui:
    fontFamily: "OpenAI Sans, Inter, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0px
  caption:
    fontFamily: "OpenAI Sans, Inter, system-ui, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.51
    letterSpacing: 0px

spacing:
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 80px
  4xl: 112px
  5xl: 120px

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  card: 6px      # ~6.08px — dominant card radius
  lg: 24px       # search input and large inputs
  xl: 40px       # buttons — large pill
  pill: 9999px   # badges, nav pills, icon buttons

components:
  # Primary CTA — black pill
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 8px 20px
    border: "none"
  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 8px 20px

  # Ghost / outline pill button
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 6px 12px
    borderColor: "{colors.border-alpha}"
    shadow: "rgba(0,0,0,0.02) 0px 4px 6px 0px, rgba(0,0,0,0.05) 0px 0px 2px 0px"
  button-secondary-hover:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 6px 12px
    borderColor: "{colors.border-alpha}"

  # Ghost nav button (Log in style)
  button-ghost:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 8px 20px
    border: "none"
  button-ghost-hover:
    backgroundColor: "{colors.border}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 8px 20px

  # Standard content card
  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.card}"
    padding: 24px
    borderColor: "{colors.border}"
  card-hover:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.card}"
    padding: 24px
    borderColor: "{colors.border}"

  # Search / chat input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 16px 24px 16px 24px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.focus-ring}"
    rounded: "{rounded.lg}"

  # Navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.nav-link-default}"
    typography: "{typography.button-ui}"
    padding: 0px 16px
    borderColor: "{colors.border}"
  nav-bar-hover:
    textColor: "{colors.nav-link-hover}"

  # Pill badge / tag
  badge:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
---

# OpenAI Design System

## Overview

OpenAI's website is an exercise in radical restraint — a design system that operates by subtraction. The page is almost entirely white (`{colors.background}`), with pure-black (`{colors.ink}`) text and not a single brand color in sight. This is not minimalism as a stylistic choice; it is minimalism as a statement of confidence. OpenAI does not need color to signal importance. The product speaks. The design steps aside.

The proprietary OpenAI Sans typeface defines the personality entirely. Self-hosted in three weights (Regular 400, Medium 500, Semibold 600), it carries `"calt"` and `"liga"` OpenType features globally — subtle ligature refinements that give text a technical precision without techno-coldness. At 48px the display weight uses -1.44px letter-spacing for a compressed, authoritative headline. At body sizes the tracking relaxes to barely perceptible negative values (-0.17px at 17px), producing text that reads at once approachable and engineered. The typeface is genuinely a design differentiator: geometric sans-serif with optical corrections that read as slightly warmer than Inter or Geist.

The signature spatial element is extreme vertical whitespace. The hero section leaves hundreds of pixels empty above the headline — a decision that communicates patience and scale. The ChatGPT-embedded input widget at the center of the page, with its large 24px-radius container, transforms the homepage into a tool rather than a brochure. Navigation uses pill-shaped buttons with `{colors.border-alpha}` hairline borders and whisper-light box shadows, keeping chrome almost invisible. There are no gradients, no photography as decoration, no motion beyond functional micro-transitions. The visual grammar is: white, black, space, Sans.

**Key Characteristics:**
- OpenAI Sans self-hosted at three weights: 400/500/600 — no bold (700) anywhere on the site
- `"calt"` and `"liga"` OpenType features enabled globally across all text
- Pure-white canvas with achromatic ink — no brand colors in UI chrome; black IS the brand color
- Display headline at 48px with -1.44px letter-spacing — decisive compression at scale
- Body copy at 17px/1.65 line-height — exceptionally generous leading for reading comfort
- Pill-shaped buttons (`{rounded.xl}` at 40px) as the dominant interactive shape
- Secondary buttons use `{colors.border-alpha}` 1px border + whisper shadow, not fills
- Extreme vertical whitespace — hero section is mostly negative space, which IS the composition
- ChatGPT input embedded on homepage turns the marketing page into the product
- No gradients, no decorative photography, no dark sections — pure achromatic discipline
- `{colors.nav-link-default}` 60% black for nav links, full `{colors.ink}` on hover — one-dimensional interactive affordance
- Cards use `{rounded.card}` ~6px radius — subtle, not sharp, not pill-y

## Colors

### Primary
- **Pure White** (`{colors.background}`): The total canvas. Every surface begins here.
- **Pure Black** (`{colors.primary}` / `{colors.ink}`): Primary text, all headings, the primary CTA button. Black is the accent.

### Text Hierarchy
- **Ink** (`{colors.ink}`): All headlines, body text, active nav links.
- **Ink Secondary** (`{colors.ink-secondary}`): Default nav link state, subdued labels.
- **Ink Tertiary** (`{colors.ink-tertiary}`): Placeholder text, disabled states.

### Surfaces
- **Surface** (`{colors.surface}`): Card hover states, mild depth.
- **Surface Overlay** (`{colors.surface-overlay}`): Ghost button fills, subtle interactive background. Was `rgba(0,0,0,0.04)` — flattened to opaque hex.

### Borders
- **Border** (`{colors.border}`): Nav underlines, card outlines, dividers. Tailwind `gray-200` equivalent.
- **Border Alpha** (`{colors.border-alpha}`): Button hairline borders. Was `rgba(0,0,0,0.12)` — flattened over white.

### Interaction
- **Focus Ring** (`{colors.focus-ring}`): Accessibility focus outline; browser-standard blue.
- **Nav Link Default** (`{colors.nav-link-default}`): Was `rgba(0,0,0,0.6)` — flattened; shifts to full `{colors.ink}` on hover.

### Shadows
- **Shadow Soft** (`{colors.shadow-soft}`): Outermost shadow layer; nearly imperceptible.
- **Shadow Medium** (`{colors.shadow-medium}`): Close-distance shadow; creates mild lift on buttons.
- **Shadow Strong** (`{colors.shadow-strong}`): The 1px inset shadow-border on featured components.

## Typography

### Font Family
- **Primary**: `OpenAI Sans` (self-hosted: `OpenAISans-Regular.woff2`, `OpenAISans-Medium.woff2`, `OpenAISans-Semibold.woff2`). Closest Google Fonts equivalent: Inter.
- **Fallbacks**: `Inter, system-ui, -apple-system, sans-serif`
- **OpenType Features**: `"calt"` (contextual alternates) and `"liga"` (standard ligatures) enabled globally on all text.

### Hierarchy

The complete type scale is in the `typography:` token block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 48px — main homepage headline, section hero titles |
| `heading-section` | 28px — section headings, feature titles |
| `heading-card` | 22px — card titles, modal headings |
| `body-lead` | 18px — introductory copy, feature descriptions |
| `body` | 17px — standard reading text, article copy |
| `body-small` | 16px — secondary descriptions, list text |
| `button-ui` | 14px — all buttons, nav links, labels |
| `caption` | 13px — metadata, timestamps, breadcrumbs |

### Principles
- **Three weights, hard discipline**: 400 (reading), 500 (UI and interaction), 600 (section headings only). No 700 weight anywhere.
- **Negative tracking scales with size**: -1.44px at 48px, -0.22px at 22px, -0.17px at 17px, 0px at 14px and below.
- **Generous body leading**: 1.65 at 17px is unusually open — reflects OpenAI's research-communication roots, where reading comfort matters.
- **Ligatures as finish**: `"liga"` is structural quality polish, not decoration.
- **Semibold 600 for subheadings only**: The +0.3px positive tracking at 28px semibold is the lone positive letter-spacing in the system — creates optical space where compression elsewhere would crowd.

## Layout

### Spacing System
The complete scale is in the `spacing:` token block above. Base unit: 8px. The scale spans 8px to 120px, with the upper range (`{spacing.3xl}` through `{spacing.5xl}`) dominating section-level vertical rhythm.

### Grid & Container
- Max content width: approximately 1280px (Tailwind xl breakpoint)
- Hero: centered single-column, massive top padding
- Feature cards: 2–3 column grid
- Responsive: Tailwind CSS with arbitrary values; 5 breakpoints at 640/768/1024/1280/1536px

### Whitespace Philosophy
- **Space as content**: The hero section is predominantly empty — the whitespace is the composition, not filler.
- **Breathing room for reading**: `{spacing.3xl}` (80px) to `{spacing.5xl}` (120px) vertical padding between sections creates gallery-like pacing.
- **Tight UI, spacious layout**: UI components use compact padding (6-12px buttons), but section-level spacing is extravagant.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Text blocks, hero area |
| Hairline (Level 1) | `1px solid {colors.border-alpha}` + `rgba(0,0,0,0.02) 0px 4px 6px, rgba(0,0,0,0.05) 0px 0px 2px` | Secondary pill buttons |
| Card (Level 2) | `1px solid {colors.border}` | Content cards, dividers |
| Input (Level 2b) | `1px solid {colors.border}` + `rgba(0,0,0,0.62) 0px 0px 1px` (inner glow) | ChatGPT input widget |
| Focus | `3px solid {colors.focus-ring}` outline | Keyboard accessibility |

**Shadow Philosophy**: OpenAI's shadow system is the quietest in the AI design space — shadows exist only to suggest tangibility, not to create depth hierarchy. Button shadows are two layers of near-invisible softness (0.02 and 0.05 opacity). The ChatGPT input widget uses a 0.62-opacity 1px shadow-border to give it weight against the empty page. There is no dramatic elevation. Nothing floats; everything rests.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 4px | Small interactive elements, inline code |
| `sm` | 6px | Light radius contexts |
| `card` | 6px | Content cards — the dominant card radius |
| `lg` | 24px | Search/chat input box — the signature rounded input |
| `xl` | 40px | Primary and ghost buttons — the dominant pill CTA |
| `pill` | 9999px | Navigation pills, icon buttons, close/search buttons |

The shape system is binary at the macro level: cards use a subtle `{rounded.card}` (barely-there), and buttons use `{rounded.xl}` or `{rounded.pill}` (decisively rounded). No mid-range shapes on interactive elements. The chat input's `{rounded.lg}` 24px radius is its own signature shape — it recalls the ChatGPT product itself, embedding product language in the marketing page.

## Components

The full component spec lives in the `components:` token block above.

### Button Variants
- **`button-primary`** — Black fill, white text, 40px radius pill. The single primary CTA ("Try ChatGPT"). Padding 8px 20px.
- **`button-secondary`** — Transparent fill, black text, `{rounded.pill}` full pill, `{colors.border-alpha}` 1px border with whisper shadow. Navigation quick-links ("Learn about ChatGPT Business", "More").
- **`button-ghost`** — 4% black fill (`{colors.surface-overlay}`), black text, 40px radius. Log in style.

### Cards
- **`card`** — White, 6px radius, `{colors.border}` 1px outline. Feature content cards, research summaries.

### Inputs
- **`input`** — White, 24px radius, `{colors.border}` outline. The hero ChatGPT input is this component at full width. Focus state uses `{colors.focus-ring}` outline.

### Navigation
- **`nav-bar`** — Sticky white header, `{typography.button-ui}` links at 14px/500, `{colors.nav-link-default}` at rest, full `{colors.ink}` on hover. "Try ChatGPT" button in primary black pill. "Log in" in ghost style.

### Badges
- **`badge`** — Muted surface background, black text, full pill shape, 13px caption weight.

## Do's and Don'ts

### Do
- Use `{colors.background}` white as the total page canvas — no tinted hero sections, no dark alternating rows
- Keep to three weights: 400 (reading), 500 (interaction), 600 (section heads only)
- Use negative letter-spacing that scales with font size: -1.44px at 48px, proportionally less at smaller sizes
- Apply `{rounded.xl}` (40px) to all CTA buttons — the pill shape is the system's interactive signature
- Use `{colors.border-alpha}` 1px borders on secondary buttons with the layered whisper shadow
- Let whitespace carry the page — `{spacing.3xl}` to `{spacing.5xl}` between sections
- Enable `"calt"` and `"liga"` OpenType features on all OpenAI Sans text
- Treat `{colors.ink}` as both primary text AND brand accent — black fills the CTA role color usually plays

### Don't
- Don't introduce any hue as UI chrome — the color CSS variables (blues, pinks, greens) are for syntax highlighting and media content only
- Don't use font weight 700 — 600 is the maximum, and it appears only at heading-section scale
- Don't round cards heavily — `{rounded.card}` 6px is the ceiling for container shapes
- Don't add decorative shadows; every shadow must serve a structural purpose (separation, tangibility)
- Don't mix the ChatGPT input's `{rounded.lg}` 24px radius with button shapes — they serve distinct semantic roles
- Don't add background colors to sections or alternate light-gray/white bands — monotone white is the rule
- Don't use positive letter-spacing except at `heading-section` level (28px/600 is the one exception)
- Don't add gradients, overlays, or decorative photography — OpenAI's visual language is content-only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <640px | Single column, nav collapses to hamburger, hero copy scales down |
| Mobile | 640–768px | Stacked layout, reduced padding |
| Tablet | 768–1024px | 2-column card grids begin, nav still condensed |
| Desktop | 1024–1280px | Full layout, horizontal nav, primary hero centered |
| Large Desktop | >1280px | Centered max-width container, generous side margins |

### Touch Targets
- Primary pill buttons have 8px vertical padding on top of 14px text — 30px min height
- Secondary ghost pills: 6px vertical padding — 26px min height
- Navigation links use `padding: 0px 12px` with adequate spacing for tap targets
- Search icon button uses `{rounded.pill}` circular target

### Collapsing Strategy
- Hero: display headline scales from 48px down; massive vertical whitespace compresses but maintains breathing room
- Navigation: horizontal link bar → hamburger menu; primary CTA ("Try ChatGPT") remains visible at all sizes
- Feature cards: 3-column → 2-column → single column; padding proportionally reduced
- ChatGPT input: full-width at all breakpoints; border radius maintained
- Footer: multi-column link grid → stacked single column

### Image Behavior
- Research/product imagery maintains its border treatment at all sizes
- Card images use consistent `{rounded.card}` radius
- Media content (video thumbnails, product screenshots) treated as full-bleed within card containers

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — total white canvas
- Primary text: `{colors.ink}` — pure black
- Secondary text / nav default: `{colors.ink-secondary}` — 60% black
- CTA fill: `{colors.primary}` — pure black (same as ink)
- Border (cards): `{colors.border}`
- Border (buttons): `{colors.border-alpha}`
- Focus: `{colors.focus-ring}`

### Example Component Prompts

- "Create a hero section on white `{colors.background}`. Headline at 48px OpenAI Sans weight 500, line-height 1.16, letter-spacing -1.44px, color `{colors.ink}`. Below it, a full-width rounded input (24px radius, 1px `{colors.border}` outline, 16px 24px padding, placeholder in `{colors.ink-tertiary}`). Below the input, a row of outline pill buttons with 1px `{colors.border-alpha}` border, 6px 12px padding, 14px weight 500 text. Leave at least 120px above the headline empty."

- "Design a content card: white `{colors.background}`, 1px `{colors.border}` border, 6px border-radius, 24px internal padding. Card title at 22px OpenAI Sans weight 500, letter-spacing -0.22px. Body at 17px weight 400, line-height 1.65, color `{colors.ink}`. Hover state transitions background to `{colors.surface}` over 150ms."

- "Build a primary CTA button: `{colors.primary}` fill, `{colors.on-primary}` text, 40px border-radius, 8px 20px padding, 14px OpenAI Sans weight 500. Hover: darken fill to `{colors.ink-secondary}`. Transition 100ms background-color."

- "Create top navigation: white sticky header, 1px `{colors.border}` bottom border. Nav links at 14px weight 500, default color `{colors.nav-link-default}`, hover `{colors.ink}`, 0.25s ease transition. Right side: ghost 'Log in' button (4% black fill, 40px radius, 8px 20px padding) and primary 'Try ChatGPT' button (black fill, white text, 40px radius)."

- "Design a badge/tag: `{colors.surface-overlay}` background, `{colors.ink}` text, `{rounded.pill}` full radius, 4px 10px padding, 13px OpenAI Sans weight 500. No border, no shadow — entirely flat with only background tint for identity."

### Iteration Guide

1. Start with absolute white `{colors.background}` — any tint, any gradient, any alternating section undermines the system
2. Black is the accent: `{colors.primary}` / `{colors.ink}` fills every role color usually plays; resist adding any hue
3. Letter-spacing is functional: scale it negatively with size, neutralize at 14px and below
4. Whitespace is the composition: `{spacing.3xl}` to `{spacing.5xl}` between sections; resist compressing it
5. Shapes are binary: `{rounded.card}` 6px for containers, `{rounded.xl}` 40px for CTAs, `{rounded.pill}` for icon targets
6. Shadows must justify themselves: each layer solves tangibility, not decoration
7. The ChatGPT input is the signature element — when in doubt, make inputs larger and more rounded than feels comfortable

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by OpenAI. Brand names and trademarks belong to their respective owners.