Design system openai.com

---
version: alpha
name: "openai.com"
description: "Design system extracted from https://openai.com/ on 2026-09-28"
colors:
  background: "#ffffff"
  surface: "#e0e0e0"
  surface-2: "#f1f1f1"
  foreground: "#000000"
  muted-foreground: "#666666"
  primary: "#000000"
  on-primary: "#ffffff"
  secondary: "#04b84c"
  border: "#e0e0e0"
typography:
  headline-display:
    fontFamily: "OpenAI Sans"
    fontSize: "48px"
    fontWeight: 500
    lineHeight: "1.16"
    letterSpacing: "-1.44px"
  headline-lg:
    fontFamily: "OpenAI Sans"
    fontSize: "22px"
    fontWeight: 500
    lineHeight: "1.26"
    letterSpacing: "-0.22px"
  headline-md:
    fontFamily: "OpenAI Sans"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: "1.4"
  body-md:
    fontFamily: "OpenAI Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: "1.65"
    letterSpacing: "-0.17px"
  label-md:
    fontFamily: "OpenAI Sans"
    fontSize: "13px"
    fontWeight: 500
    lineHeight: "1.4"
  button:
    fontFamily: "OpenAI Sans"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "1"
rounded:
  none: "0px"
  2xl: "40px"
  xl: "24px"
  md: "6px"
  sm: "4px"
  full: "9999px"
spacing:
  unit: "8px"
  1: "8px"
  2: "16px"
  3: "24px"
  4: "32px"
  5: "64px"
  6: "120px"
components:
  button-ghost:
    backgroundColor: "#ffffff"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "0px"
    height: "64px"
    padding: "0px 16px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "40px"
    height: "36px"
    padding: "0px 20px"
  button-secondary:
    backgroundColor: "#ffffff1f"
    textColor: "#ffffff"
    typography: "{typography.button}"
    rounded: "40px"
    height: "40px"
    padding: "0px 20px"
  input:
    backgroundColor: "transparent"
    rounded: "0px"
    height: "40px"
  card:
    backgroundColor: "#ffffff"
    rounded: "24px"
    padding: "16px"
---

# openai.com

## Overview

OpenAI | Research & Deployment: We believe our research will eventually lead to artificial general intelligence, a system that can solve human-level problems.

Soft, well-rounded controls, layered shadows for depth, confident display type at 48px / 500, a single neutral accent on neutrals. The site ships in light mode by default. Measured from 819 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/desktop-1440-dark.png`: Desktop 1440, dark mode
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| surface | `#e0e0e0` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#f1f1f1` | Secondary surface |
| foreground | `#000000` | Primary text |
| muted-foreground | `#666666` | Secondary text, captions |
| primary | `#000000` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#04b84c` | Secondary accent (green) |
| border | `#e0e0e0` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#ffffff`, `#e0e0e0`, `#060b17`, `#f1f1f1`, `#000000`.

The accent `#000000` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **OpenAI Sans** for h1, h2, body, button: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | OpenAI Sans | 48px | 500 | 1.16 | -1.44px |
| headline-lg | OpenAI Sans | 22px | 500 | 1.26 | -0.22px |
| headline-md | OpenAI Sans | 24px | 600 | 1.4 | normal |
| body-md | OpenAI Sans | 17px | 400 | 1.65 | -0.17px |
| label-md | OpenAI Sans | 13px | 500 | 1.4 | normal |
| button | OpenAI Sans | 14px | 500 | 1 | normal |

Type scale in use: 13px, 14px, 17px, 18px, 22px, 48px. Base body size 17px.

The H1 renders at 48px / 500, center aligned, up to 479px wide, tracking -1.44px. Sample: "OpenAI DevDay [2026]".

## Layout

- Spacing unit: 8px. Scale in use: 8, 16, 24, 32, 64, 120 (px).
- Flex and grid gaps: 8, 16, 24, 40 px.
- Content max width: 1376px, centred.
- Breakpoints: 700px, 767px, 768px, 800px, 1280px.
- Header: 0px tall, static, background `rgba(0, 0, 0, 0)`; 8 nav links at 13px / 500 (Skip to main content · Research · Business · Developers · Company · Foundation(opens in a new window) · Try ChatGPT(opens in a new window)).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(0, 0, 0, 0.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 0px 2px 0px`
- shadow-2: `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

- Buttons: 40px
- Inputs: 0px
- Cards and panels: 24px
- Images and media: 0px
- Radius scale: none 0px, 2xl 40px, xl 24px, md 6px, sm 4px, full 9999px

## Components

### Button, ghost

Background transparent (it sits on `#ffffff`, so place it on that colour), text `#000000`, border none, radius 0px, height 64px, padding 0px 16px, 17px / 400. Sample label: "Products".

### Button, primary

Background `#000000`, text `#ffffff`, border none, radius 40px, height 36px, padding 0px 20px, 14px / 500. Sample label: "Try ChatGPT(opens in a n".

### Button, secondary

Background `#ffffff1f`, text `#ffffff`, border none, radius 40px, height 40px, padding 0px 20px, 14px / 500. Sample label: "Close".

### Input

Height 40px, background `transparent`, border 0px solid #e5e7eb, radius 0px, 14px text, padding 10px 24px.

### Card

Background `#ffffff`, border none, radius 24px, padding 16px, shadow `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`. Typical size about 768×104px.

### Link

Colour `#000000`, no underline at rest, weight 400.

## Dark Mode

Both themes exist; the default render is light and the dark theme was reached via prefers-color-scheme. Token pairs, light → dark:

| Token | Light | Dark |
| --- | --- | --- |
| background | `#ffffff` | `#000000` |
| surface | `#e0e0e0` | `#060b17` |
| surface-2 | `#f1f1f1` | `#1f1f1f` |
| foreground | `#000000` | `#ffffff` |
| muted-foreground | `#666666` | `#999999` |
| primary | `#000000` | `#ffffff` |
| on-primary | `#ffffff` | `#111111` |
| secondary | `#04b84c` | `#04b84c` |
| border | `#e0e0e0` | `#333333` |

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 443px | 481px | 17px | 48px, 1 line, center | 0px, hamburger (Research menu), 2 CTA | media behind/overlapping text | 3→1 col; 6→6 col; 2→2 col | content-width |
| laptop 1024px | 960px | 303px | 17px | 41.8px, 1 line, center | 0px, hamburger (Research menu), 2 CTA | media behind/overlapping text | 3→1 col; 6→6 col; 2→2 col | content-width |
| tablet 768px | 704px | 193px | 17px | 37.9px, 1 line, center | 0px, hamburger (Open mobile navigation), 2 CTA | media behind/overlapping text | 3→3 col; 3→3 col; 3→3 col | 5 full-width |
| phone 390px | 342px | 48px | 17px | 32.2px, 2 lines, center | 0px, hamburger (Open mobile navigation) | media behind/overlapping text | 3→1 col; 6→1 col; 3→3 col | 6 full-width |

- H1 goes 48px → 32.2px (67%), 1 → 2 lines.
- Nav collapses to a hamburger by 390px (first seen at 1440px); header 0px → 0px.
- Card grids: 2 columns → 1 column on phones (gap 24px → 24px).
- Body text stays 17px at every width.
- Phone side gutter 48px.
- 6 buttons stretch full-width on phones.

## Interaction & Motion

242 elements carry transitions; typical 0.3s with cubic-bezier(0.4, 0, 0.2, 1), mostly on opacity, transform, translate. No running keyframe animations at rest.

- Hover on button-primary ("Log in"): no visible change; cursor pointer; transition color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events | 0.2s | cubic-bezier(0, 0, 1, 1).
- Hover on button-secondary ("Learn about ChatGPT Business"): no visible change; cursor pointer; transition color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events | 0.25s | cubic-bezier(0, 0, 1, 1).
- Hover on nav-link ("Research"): no visible change; cursor pointer; transition color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to | 0.1s | cubic-bezier(0, 0, 1, 1).
- Hover on input: no visible change; cursor text.
- Focus on button-primary: no visible focus style measured (may rely on :focus-visible with keyboard only).
- Focus on input: element did not take focus.
- No tooltips: nothing on the page carries tooltip attributes or roles and no tooltip styles exist. Do not add tooltips when rebuilding.
- Hover/click menus: below the trigger, 0px gap, right edges aligned; transparent, radius 0px, padding 0px 0px, shadow none; 2 items, 32px tall, 14px, padding 0px 16px; fades in (opacity 0.00 at 40ms → 1.00); hides within 400ms of leaving (transition or unmount).
- No scroll-reveal: content is visible without scrolling into view.
- Portal roots present: portal-root.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 8px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#000000` for actions and focus; never paint large areas with it.
- Do keep body text at 17px in OpenAI Sans.
- Do match corner radii per element class (buttons 40px, cards 24px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.