OpenAI design system

---
version: alpha
name: OpenAI
description: "Light interface measured from openai.com: OpenAI Sans type, pink accents, flat surfaces and pill-shaped controls."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#000000"
  on-background: "#000000"
  on-surface-variant: "#666666"
  overlay: "#0000000A"
  outline: "#0000001F"
  primary: "#AB4F7A"
  on-primary: "#FFFFFF"
  secondary: "#6BC67F"
  tertiary: "#653218"
typography:
  headline-display:
    fontFamily: OpenAI Sans
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.26
    letterSpacing: -0.01em
  body-md:
    fontFamily: OpenAI Sans
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.32
    letterSpacing: -0.01em
  label-lg:
    fontFamily: OpenAI Sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: -0.01em
  label-md:
    fontFamily: OpenAI Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
  label-sm:
    fontFamily: OpenAI Sans
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.51
  headline-display-mobile:
    fontFamily: OpenAI Sans
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.01em
rounded:
  sm: 4px
  md: 6.08px
  lg: 24px
  xl: 40px
  full: 9999px
spacing:
  xs: 3.9px
  sm: 8px
  md: 12px
  lg: 32px
  xl: 64px
  gutter: 8px
components:
  button-primary:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.xl}"
    padding: 0px 20px
    height: 36px
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    rounded: 0px
    padding: 0px
  input-field:
    textColor: "{colors.on-surface}"
    rounded: 0px
    padding: 0px
  link:
    textColor: "{colors.on-surface}"
---

# OpenAI Design System

## Overview

OpenAI describes itself as: “We believe our research will eventually lead to artificial general intelligence, a system that can solve human-level problems.” The interface is light, built on **White (#FFFFFF)** with **Near Black (#000000)** text, and **Pink (#AB4F7A)** as the main accent.

Type is set in **OpenAI Sans**. Headlines run large with tight negative tracking; body text is 18px. Depth comes from soft drop shadows. Controls are pill-shaped.

Measured from [openai.com](https://openai.com/) on November 4, 2026 at 1440×900 and 390×844 from 329 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 9 roles.

- **White (#FFFFFF):** Page background, seen 2 times. Token `background`, CSS `--color-primitive-gray-0`.
- **Near Black (#000000):** Primary text and headings, seen 97 times. Token `on-surface`, CSS `--color-syntax-copy`.
- **Slate (#666666):** Secondary text, seen 14 times. Token `on-surface-variant`.
- **Near Black 4% (#0000000A):** Translucent fill for cards and controls, seen 4 times. Token `overlay`.
- **Near Black 12% (#0000001F):** Borders and dividers, seen 5 times. Token `outline`.
- **Pink (#AB4F7A):** Brand accent (CSS variable). Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Green (#6BC67F):** Accent (CSS variable). Token `secondary`.
- **Dark Orange (#653218):** Accent (CSS variable). Token `tertiary`.

## Typography

**OpenAI Sans** carries the whole interface. Fallback stack: `OpenAI Sans, OpenAI Sans Variable Scripts, sans-serif`.

- **headline-display:** OpenAI Sans 22px at weight 500, line height 1.26, tracking -0.01em (20px on mobile). Page title (h1).
- **body-md:** OpenAI Sans 18px at weight 500, line height 1.32, tracking -0.01em. Body text.
- **label-lg:** OpenAI Sans 17px at weight 400, line height 1.65, tracking -0.01em. Large buttons and tabs.
- **label-md:** OpenAI Sans 14px at weight 500, line height 1.4. Buttons, navigation and labels.
- **label-sm:** OpenAI Sans 13px at weight 500, line height 1.51. Small labels and badges.

## Layout

Spacing is mostly on a 4px grid (85% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.

- **Scale:** xs 3.9px, sm 8px, md 12px, lg 32px, xl 64px.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Breakpoints:** 640px, 767px, 768px, 800px, 1024px, 1200px, 1201px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 0px 2px 0px`
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 3px 6px 0px, rgba(0, 0, 0, 0.04) 0px 4px 80px 8px, rgba(0, 0, 0, 0.62) 0px 0px 1px 0px`

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **full (9999px):** 28 elements.
- **sm (4px):** 16 elements.
- **xl (40px):** 12 elements.
- **md (6.08px):** 4 elements.
- **lg (24px):** 4 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Try ChatGPT (opens in a new wind”):** #000000 fill, #FFFFFF text, 14px/500, 40px radius, padding 0px 20px.
- **button-ghost (“Products”):** transparent fill, #000000 text, 17px/400, padding 0px.
- **input-field:** transparent fill, #000000 text, 16px/400, padding 0px.
- **link:** transparent fill, #000000 text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page.
- Do keep text in 2 levels: #000000, #666666.
- Do use #AB4F7A as the brand accent: header, logo and key highlights.
- Do set headlines in OpenAI Sans with tight tracking (-0.01em).
- Do reuse the measured spacing steps (8px, 12px, 32px).
- Do make buttons and chips fully rounded (9999px); most other elements use 4px corners.
- Don't introduce new font families beyond OpenAI Sans.
- Don't use #AB4F7A for large backgrounds or body text.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.25s, 0.3s, 0.1s, 0.2s.

- **Easing:** `ease`, `cubic-bezier(0, 0, 1, 1)`, `cubic-bezier(0.6, 0, 0.4, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/openai.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).