# OpenAI — Design Reference

> A white page that asks one question, then lets the pictures talk

**Theme:** light · **Measured from:** openai.com (English, 1440 px)

OpenAI looks like a quiet magazine with a chat box on the cover. The canvas is pure white, the text is pure black, and almost everything is set in a single medium weight (500) of OpenAI Sans. The hero has no headline in the marketing sense: just "What can I help with?" above a ChatGPT-style prompt box and a row of outlined pill chips. The only filled button is a black pill. There is no UI color at all; the brand's color comes entirely from square artwork tiles — soft blurred gradients in blue, purple, pink and orange, plus documentary photos — laid out in calm news grids with small black titles and gray metadata underneath.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Black | `#000000` | All text and headings; the primary pill — pure black on purpose |
| Gray 60 | `#666666` | Black at 60%: dates, read times, placeholders, the "More" chip |
| Hairline | `#e0e0e0` | Black at 12%: chip and prompt borders, image placeholders |
| White | `#ffffff` | Canvas, prompt box, text on the black pill |
| Blue | `#3a83f7` | Artwork gradients and tiny in-product accents only |
| Purple | `#8952ee` | Artwork gradients only |
| Pink | `#f077af` | Artwork gradients only |
| Orange | `#ee7c37` | Artwork gradients only |
| Yellow | `#f6c543` | Illustrations inside product demos only |

**Artwork, not UI:** the five hues are CSS primitives used inside soft, out-of-focus gradient images (blue-to-green, orange-to-pink, lilac-to-sky). Never use them for buttons, text or borders. Use alpha black (`rgba(0,0,0,.6)`, `rgba(0,0,0,.12)`) for every gray.

## Typography

**OpenAI Sans** is the only family (proprietary). Substitute: **Figtree** 400/500/600 from Google Fonts.

- Weight **500** for titles, navigation, buttons and metadata — the page has almost no bold.
- Weight **400** only for long body paragraphs; **600** only for the hero question.
- Slight negative tracking of **-0.01em** on titles and body (18px → -0.18px); the 48px display tightens to **-0.03em**.

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display | 48px | 500 | 1.16 | -1.44px |
| Hero question | 28px | 600 | 1.2 | 0.3px |
| Section title | 22px | 500 | 1.26 | -0.22px |
| Card title | 18px | 500 | 1.32 | -0.18px |
| Body | 17px | 400 | 1.65 | -0.17px |
| Button | 14px | 500 | 1 | 0 |
| Caption | 13px | 500 | 1.5 | 0 |

## Shape and spacing

- **Buttons and chips:** full pills (`9999px`; the primary uses 40px on a 36px height).
- **Prompt box:** 24px radius.
- **Artwork tiles and cards:** 6px radius — nearly square corners.
- **Base unit:** 4px. Scale: 4, 8, 12, 16, 20, 32, 64, 128.
- **Content width:** nearly full-bleed, 1376px with 32px side gutters; the prompt and text columns narrow to 768px.
- **Section gap:** about 128px.
- **Shadows:** none, except a very faint wide glow around the hero prompt box.

## Components

### Primary button
Black `#000000` fill, white text, 40px radius (pill), padding `0 20px`, 36px tall, OpenAI Sans 500 at 14px, trailing `↗` when it opens a new window. Label: "Try ChatGPT ↗".

### Secondary button
Light gray pill, black text, same height, with a small chevron: "Log in ⌄". Sits directly left of the primary in the nav.

### Suggestion chip
Transparent fill, 1px `rgba(0,0,0,.12)` border, full pill, padding `0 12px`, 40px tall, 14px/500 black text ("Talk with ChatGPT", "Research", "API Platform", "Stories"); the last one, "More", in 60% gray. Centered in a row under the prompt box, 8px apart.

### Navigation
White, no border. "OpenAI" wordmark left, then plain text links in black 14px/500 (Research, Products, Business, Developers, Company, Foundation). Right: "Log in ⌄" gray pill and the black "Try ChatGPT ↗" pill.

### Hero prompt box
White box about 768px wide, 24px radius, 1px hairline border and a faint wide glow. Gray placeholder ("Explain why popcorn pops") top-left at 16px; a round light-gray send button with an up arrow bottom-right.

### Article card
Square artwork tile (6px radius) on top; below it an 18px/500 black title (two lines max) and a 13px meta line: category in black ("Product", "Security"), then date and read time in 60% gray. Three per row in Stories, Research and Business grids.

### News list
Two columns of rows: a small square thumbnail (6px radius) on the left, an 18px/500 title and the same meta line on the right. Every section opens with a 22px/500 title left and a small "View all" / "View more" link right on the same baseline.

## Do

- Keep the page pure white with pure black text.
- Use weight 500 almost everywhere; let size create hierarchy.
- Make every button and chip a pill; make every image nearly square-cornered (6px).
- Put color only in artwork tiles and photos.
- Build grays from black at 60% and 12%.
- Give each section the same header: title left, "View all" right.

## Don't

- Don't use colored buttons, links or borders.
- Don't use bold (700) or light (300) weights.
- Don't round image cards more than 6px.
- Don't add card backgrounds, borders or shadows around article cards.
- Don't use a marketing headline in the hero; ask a question and show the prompt.
- Don't tint the canvas off-white or gray.

## Layout

Centered hero with lots of white: the 28px question, the prompt box, and the chip row, with nothing else above the fold. Below it, a featured carousel of product stories, then stacked editorial sections — "Recent news" (two-column list with thumbnails), "Stories" (three photo cards), "Latest research" (three gradient tiles), "OpenAI for business" (three customer tiles) — each with the same title-left, link-right header. The page ends with a light gray rounded band holding a centered 48px "Get started with ChatGPT" call to action.

## Agent prompt guide

- Text: `#000000` · Secondary text: `rgba(0,0,0,.6)` · Borders: `rgba(0,0,0,.12)`
- Canvas: `#ffffff` · No tinted surfaces
- Action: `#000000` pill with white text · Artwork hues: `#3a83f7`, `#8952ee`, `#f077af`, `#ee7c37`

Example prompts:

1. "Primary button: background #000000, white text, 40px radius, padding 0 20px, 36px tall, Figtree 500 14px, trailing ↗ icon, no shadow."
2. "Hero: white page, centered question 'What can I help with?' in Figtree 600 28px #000000; below it a white prompt box 768px wide, 24px radius, 1px rgba(0,0,0,.12) border, round gray send button bottom-right; then a centered row of outlined pill chips 40px tall with 14px/500 text."
3. "Article card: square image with 6px radius and no border; title below in Figtree 500 18px, letter-spacing -0.18px, #000000; meta line 13px/500 with the category in black and the date in rgba(0,0,0,.6)."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-black: #000000;
  --color-gray-60: #666666;
  --color-hairline: #e0e0e0;
  --color-white: #ffffff;
  --color-blue: #3a83f7;
  --color-purple: #8952ee;
  --color-pink: #f077af;
  --color-orange: #ee7c37;
  --color-yellow: #f6c543;

  /* Fonts */
  --font-sans: 'OpenAI Sans', 'Figtree', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 48px;
  --text-display--line-height: 1.16;
  --text-display--letter-spacing: -1.44px;
  --text-display--font-weight: 500;
  --text-hero-question: 28px;
  --text-hero-question--line-height: 1.2;
  --text-hero-question--letter-spacing: 0.3px;
  --text-hero-question--font-weight: 600;
  --text-section-title: 22px;
  --text-section-title--line-height: 1.26;
  --text-section-title--letter-spacing: -0.22px;
  --text-section-title--font-weight: 500;
  --text-card-title: 18px;
  --text-card-title--line-height: 1.32;
  --text-card-title--letter-spacing: -0.18px;
  --text-card-title--font-weight: 500;
  --text-body: 17px;
  --text-body--line-height: 1.65;
  --text-body--letter-spacing: -0.17px;
  --text-body--font-weight: 400;
  --text-button: 14px;
  --text-button--line-height: 1;
  --text-button--font-weight: 500;
  --text-caption: 13px;
  --text-caption--line-height: 1.5;
  --text-caption--font-weight: 500;

  /* Radius */
  --radius-buttons: 9999px;
  --radius-inputs: 24px;
  --radius-cards: 6px;
  --radius-tags: 9999px;

  /* Spacing */
  --spacing: 4px;

  /* Layout */
  --container-page: 1376px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-black: #000000;
  --color-gray-60: #666666;
  --color-hairline: #e0e0e0;
  --color-white: #ffffff;
  --color-blue: #3a83f7;
  --color-purple: #8952ee;
  --color-pink: #f077af;
  --color-orange: #ee7c37;
  --color-yellow: #f6c543;

  /* Fonts */
  --font-sans: 'OpenAI Sans', 'Figtree', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 48px;
  --text-display--line-height: 1.16;
  --text-display--letter-spacing: -1.44px;
  --text-display--font-weight: 500;
  --text-hero-question: 28px;
  --text-hero-question--line-height: 1.2;
  --text-hero-question--letter-spacing: 0.3px;
  --text-hero-question--font-weight: 600;
  --text-section-title: 22px;
  --text-section-title--line-height: 1.26;
  --text-section-title--letter-spacing: -0.22px;
  --text-section-title--font-weight: 500;
  --text-card-title: 18px;
  --text-card-title--line-height: 1.32;
  --text-card-title--letter-spacing: -0.18px;
  --text-card-title--font-weight: 500;
  --text-body: 17px;
  --text-body--line-height: 1.65;
  --text-body--letter-spacing: -0.17px;
  --text-body--font-weight: 400;
  --text-button: 14px;
  --text-button--line-height: 1;
  --text-button--font-weight: 500;
  --text-caption: 13px;
  --text-caption--line-height: 1.5;
  --text-caption--font-weight: 500;

  /* Radius */
  --radius-buttons: 9999px;
  --radius-inputs: 24px;
  --radius-cards: 6px;
  --radius-tags: 9999px;

  /* Spacing */
  --spacing: 4px;

  /* Layout */
  --container-page: 1376px;
}
```

---

*Measured from https://openai.com/ on 2026-10-28 by Faundr. Inspired by OpenAI; not its official design system and not affiliated with OpenAI.*