---
title: "OpenAI Developers design system"
variant: extended
source: https://developers.openai.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/developers-openai-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# OpenAI Developers · Design System

> A calm developer canvas punctuated by bold, playful moments.

**Theme:** light · **Industry:** devtools · **Source:** https://developers.openai.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

An OpenAI developer homepage that organizes platform entry points and model updates into a clean, compact card-based interface. A black DevDay feature banner and a vivid purple character add a focused burst of personality to the otherwise quiet monochrome page.

## North star

Keep the interface quiet and monochrome, then use one high-contrast feature block and sparse expressive artwork to direct attention.

## Overview

The page uses a white canvas as its dominant field, with near-black text and a restrained set of pale gray surfaces to keep navigation and developer resources easy to scan. A large black DevDay banner provides the primary visual anchor; its white headline and green-to-purple event lettering belong to the campaign artwork, while purple is a sparse accent rather than a broad interface color. OpenAI Sans carries the interface, combining substantial display lettering in the banner with compact navigation and readable card copy. The top navigation stays light and low-profile, while the centered content area groups model announcements in bordered cards and developer destinations in softly tinted tiles. Generous whitespace separates these modules without making their content feel disconnected. Rounded corners soften the otherwise geometric structure. Small icons and product artwork add variation, but the page relies on typography, contrast, and disciplined card alignment rather than photography or decorative effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, navigation background, and the light CTA surface inside the black feature banner. |
| Quiet Graphite | `#5d5d5d` | `--color-quiet-graphite` | neutral | Muted navigation and supporting copy, including descriptions within the model cards. |
| OpenAI Ink | `#181818` | `--color-openai-ink` | brand | Primary dark text and the dark floating Ask AI control. |
| Soft Charcoal | `#282828` | `--color-soft-charcoal` | neutral | Secondary dark text, including the selected Home navigation item. |
| Card Hairline | `#e6e6e6` | `--color-card-hairline` | neutral | Thin outlines around the model announcement cards. |
| Pale Divider | `#f3f3f3` | `--color-pale-divider` | neutral | Subtle pale detail in card and navigation treatments; secondary to the larger white and light-gray surfaces. |
| Mist Surface | `#f9f9f9` | `--color-mist-surface` | surface | Background for the API Platform, Codex, and Plugins destination tiles. |
| Event Black | `#000000` | `--color-event-black` | surface | DevDay campaign banner and its high-contrast card treatment; also used in some link and card text. |
| Home Gray | `#ededed` | `--color-home-gray` | surface | Selected Home navigation pill and pale button surface. |
| Muted Silver | `#cccccc` | `--color-muted-silver` | neutral | Minor text detail only; not a defining page surface or brand color. |
| Electric Violet | `#924ff7` | `--color-electric-violet` | accent | Sparse accent in DevDay campaign artwork, including its expressive purple character and event lettering. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9f9f9` (Mist Surface) · `--color-surface-2` → `#181818` (OpenAI Ink) · `--color-surface-3` → `#000000` (Event Black) · `--color-surface-4` → `#ededed` (Home Gray) · `--color-text` → `#181818` (OpenAI Ink) · `--color-text-muted` → `#5d5d5d` (Quiet Graphite) · `--color-text-subtle` → `#282828` (Soft Charcoal) · `--color-border` → `#e6e6e6` (Card Hairline) · `--color-accent` → `#924ff7` (Electric Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#181818` | `#ffffff` | 17.76:1 | AAA |
| `#181818` | `#f9f9f9` | 16.87:1 | AAA |
| `#181818` | `#000000` | 1.18:1 | fail |
| `#5d5d5d` | `#ffffff` | 6.58:1 | AA |
| `#5d5d5d` | `#f9f9f9` | 6.25:1 | AA |
| `#5d5d5d` | `#181818` | 2.7:1 | fail |
| `#5d5d5d` | `#000000` | 3.19:1 | AA-large |
| `#282828` | `#ffffff` | 14.74:1 | AAA |
| `#282828` | `#f9f9f9` | 14:1 | AAA |
| `#282828` | `#181818` | 1.2:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| OpenAI Sans | `--font-body` | webfont | 400, 600, 500 | Site-wide interface, headings, navigation, buttons, and card copy. | Inter |

- **OpenAI Sans:** Use a clean sans-serif with restrained negative tracking; medium display weight, semibold headings, and regular body text. Avoid all-caps styling.

### Type scale — Golden Ratio (ratio ≈ 1.647, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 71.5px | 500 | 1 | -0.002em | — | OpenAI Sans | Large event headline and campaign display lettering. |
| h1 | 30px | 600 | 1.4 | -0.02em | — | OpenAI Sans | Primary page heading and prominent section titles. |
| h2 | 20px | 600 | 1.3 | -0.008em | — | OpenAI Sans | Card and destination tile headings. |
| body | 16px | 400 | 1.5 | -0.01em | — | OpenAI Sans | Descriptions and supporting explanatory copy. |
| caption | 14px | 400 | 1.43 | -0.01em | — | OpenAI Sans | Compact secondary labels and small supporting text. |
| button | 14px | 400 | 1.43 | -0.01em | — | OpenAI Sans | Navigation pills and calls to action. |
| nav | 14px | 400 | 1.43 | -0.01em | — | OpenAI Sans | Top-level header links and menu labels. |
| link | 16px | 400 | 1.5 | -0.01em | — | OpenAI Sans | Inline links and card actions. |
| code | 16px | 400 | 1.5 | -0.01em | — | SF Mono | Code snippets or developer examples when present. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64 px.
- Section rhythm 64px · element gap 4px · card padding 20px · max content width —.

A slim, full-width header sits above a centered content column. Within that column, the wide black feature banner leads, followed by a two-column row of model announcement cards and a three-column row of developer destination tiles. The top viewport is content-rich, but large surrounding white areas preserve a calm rhythm. Keep alignments crisp and card interiors spacious; the measurements do not specify a maximum page width, so avoid assuming a fixed one.

## Shape & elevation

- Radius: button `8px` · card `8px` · nav `8px` · link `8px` · xs `8px` · sm `10px` · md `12px` · pill `9999px`
- Shadow `hairline` (other): `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.08) 0px 1px 2px -1px`
- Shadow `lg` (button): `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(15, 23, 42, 0.45) 0px 16px 48px -18px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface reads as mostly flat. Model announcements are defined by thin #e6e6e6 outlines rather than strong shadows, while destination tiles use soft #f9f9f9 fills. The black banner and dark floating Ask AI pill create contrast through color blocks, not layered elevation. Avoid pronounced shadows or stacked surfaces.

## Imagery

The page is not photography-led. Its most distinctive image is the DevDay banner artwork: an oversized purple circular character on a black field, accompanied by colorful event lettering. Small product icons sit in the model cards, and simple line icons mark the developer destination tiles. Keep artwork contained within its own module rather than spreading decorative imagery across the page.

## Components

### Top navigation

Light horizontal header with OpenAI Developers branding, compact menu links, a selected pale-gray Home pill, and a dark API Dashboard action.

### DevDay feature banner

Wide black rounded campaign block with large event artwork, subdued supporting text, a white Explore API updates pill, and a text link.

### Model announcement cards

Side-by-side white cards outlined in #e6e6e6, combining a small product icon, title, muted description, and compact text actions.

### Developer destination tiles

Three pale #f9f9f9 tiles for API Platform, Codex, and Plugins, each with a line icon, heading, and short description.

### Ask AI control

Floating dark pill near the lower-right viewport edge with a short white label.

### Measured component styles

- **Primary button** (“Home”): background #ededed · text #282828 · radius 8px · padding 4px 10px · 400 14px OpenAI Sans
- **Secondary button** (“Explore API updates”): background #ffffff · text #000000 · radius 999px · padding 12px 20px · 500 14px OpenAI Sans
- **Link** (“llms.txt”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px OpenAI Sans
- **Card** (“GPT-6.1 Sol Near-Astra performance for c”): transparent background · text #000000 · border 1px solid #e6e6e6 · radius 10px · padding 20px · 400 16px OpenAI Sans
- **Navigation item** (“API Dashboard”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px OpenAI Sans

## Do

- Use white as the dominant canvas.
- Reserve black blocks for high-priority campaign content.
- Use #e6e6e6 for restrained card outlines.
- Group developer destinations into aligned card grids.
- Keep body copy muted and comfortably readable.
- Use violet sparingly for expressive campaign artwork.

## Don't

- Do not turn the whole page into a dark theme.
- Do not use purple as a widespread interface color.
- Do not add heavy shadows to ordinary cards.
- Do not replace the clean sans-serif hierarchy with decorative type.
- Do not fill whitespace with unnecessary ornament.
- Do not let illustrations overpower navigation or card content.

## Agent prompt

Build a new OpenAI-style developer page with a white Gallery White (#ffffff) canvas, OpenAI Sans or a close sans-serif substitute, and a restrained monochrome interface. Use OpenAI Ink (#181818) for primary text and dark calls to action, Quiet Graphite (#5d5d5d) for supporting copy, Mist Surface (#f9f9f9) for grouped resource tiles, and Card Hairline (#e6e6e6) for subtle card borders. Organize content in a centered, responsive column beneath a compact horizontal navigation. Lead with one high-contrast black feature block, then present updates and developer destinations in clearly aligned rounded cards. Keep spacing generous, typography direct, and UI mostly flat. If artwork is appropriate, use Electric Violet (#924ff7) as a localized visual accent, not a site-wide color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | feature-grid | Compact header above a centered content area: black campaign feature, two model cards, then three resource tiles. | Primary campaign CTA, Model update links, Developer destination shortcuts | Monochrome navigation, Black feature banner, Outlined model cards, Pale resource tiles |

## Source CSS custom properties (selected)

```css
--font-heading-2xl-size: 30px;
--font-heading-xl-size: 26px;
--font-heading-xl-line-height: 39px;
--font-heading-xl-tracking: -.6px;
--font-heading-lg-size: 20px;
--font-heading-lg-line-height: 26px;
--font-heading-lg-tracking: -.16px;
--font-heading-md-size: 18px;
--font-heading-md-line-height: 24px;
--color-text-secondary: #5d5d5d;
--pill-success-bg: #8cdfad;
--pill-danger-bg: #ffa4a2;
--pill-warning-bg: #ffe8c4;
--pill-warning-text: #945e0c;
--code-snippet-bg: linear-gradient(45deg, #f9f9f9 0%, #f7f7f8 100%);
--inline-code-bg: #f9f9f9;
--inline-code-border: 1px solid #ededed;
--monospace: "SF Mono", "SFMono-Regular", ui-monospace, consolas, "Liberation Mono", menlo, monospace;
--card-shadow-hover: 0px 16px 24px -8px #00000012;
--sh-fg: 0, 0, 0;
--icon-shadow: drop-shadow(0 0 4px #00000040);
--pagefind-ui-text: #393939;
--pagefind-ui-primary: #393939;
--pagefind-ui-background: #fff;
--pagefind-ui-border: #eee;
--pagefind-ui-border-width: 2px;
--pagefind-ui-border-radius: 8px;
--pagefind-ui-image-border-radius: 8px;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/developers-openai-com