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

# OpenAI · Design System

> Quiet, precise layouts let ideas and imagery lead.

**Theme:** light · **Industry:** ai · **Source:** https://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._

OpenAI’s homepage pairs a restrained monochrome interface with a broad editorial feed of research, news, stories, and business work. Generous white space and compact typography keep the experience calm while image tiles add color and variety.

## North star

Keep the interface monochrome and spacious, letting editorial imagery supply color without disrupting the grid.

## Overview

The page uses a white canvas and black OpenAI Sans typography as its visual foundation. Black is reserved for headings, navigation, links, and the main ChatGPT action; muted gray supports secondary labels, while pale gray marks borders, card edges, and quiet controls. The interface stays deliberately color-sparse, so the vivid gradients, photographs, and product imagery in editorial tiles provide most of the color. A compact top navigation gives way to a centered ChatGPT prompt area, followed by wide editorial sections arranged in two- and three-column grids. Headings are left-aligned except for the centered get-started callout. Typography favors medium weights, tight heading tracking, and concise metadata. Rounded pill buttons and prompt controls soften the otherwise crisp modular layout. Sections remain on a white background, with spacing and imagery—not colored bands—establishing hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Pure Ink | `#000000` | `--color-pure-ink` | brand | Primary text for headings, navigation, links, and the black ChatGPT CTA. |
| Canvas White | `#ffffff` | `--color-canvas-white` | surface | Main page canvas and light control surfaces; maintains the open, low-noise layout. |
| Quiet Line | `#e0e0e0` | `--color-quiet-line` | semantic | Subtle borders around prompt and outlined pill controls, and edges of quiet cards. |
| Soft Graphite | `#666666` | `--color-soft-graphite` | neutral | Muted supporting copy and footer text, including editorial metadata. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#e0e0e0` (Quiet Line) · `--color-text` → `#000000` (Pure Ink) · `--color-text-muted` → `#666666` (Soft Graphite) · `--color-border` → `#e0e0e0` (Quiet Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e0e0e0` | 15.91:1 | AAA |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#666666` | `#e0e0e0` | 4.35:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| OpenAI Sans | `--font-body` | webfont | 500, 400, 600 | All page typography, from navigation and metadata to headings, body copy, and buttons. | Inter |

- **OpenAI Sans:** Use measured medium and semibold weights; headings are compact with slightly tight tracking, while labels and navigation stay sentence case.

### Type scale — Augmented Fourth (ratio ≈ 1.386, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 500 | 1.16 | -0.03em | — | OpenAI Sans | Primary page or feature headline, including the hero prompt heading. |
| h2 | 28px | 600 | 1.21 | 0.011em | — | OpenAI Sans | Section headings such as Recent news and Latest research. |
| h3 | 22px | 500 | 1.26 | -0.01em | — | OpenAI Sans | Editorial card and feature titles. |
| h4 | 18px | 500 | 1.32 | -0.01em | — | OpenAI Sans | Smaller supporting headings within content groups. |
| body | 13px | 500 | 1.51 | 0 | — | OpenAI Sans | Card descriptions, metadata, and supporting copy. |
| button | 14px | 500 | 1 | 0 | — | OpenAI Sans | Pill CTA labels and compact action text. |
| nav | 13px | 500 | 1.51 | 0 | — | OpenAI Sans | Primary navigation and footer category links. |
| link | 14px | 500 | 1 | 0 | — | OpenAI Sans | Editorial titles and standalone actions such as View all. |

OpenType features in use: `"calt", "liga"`.

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 8, 12, 16, 20, 24, 32, 40, 64, 120 px.
- Section rhythm 32px · element gap 8px · card padding 25px · max content width 736px.

A compact top navigation spans the page, followed by a centered prompt experience and a long editorial homepage. Content sections use two- or three-column grids, with the first feature area split between a large lead story and a narrower stack. Section headings and most content align to the left; the get-started CTA is centered. Keep the canvas white and let generous vertical gaps distinguish sections. The measured page max-width is 736px; preserve the observed broad editorial composition without introducing colored section bands.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · card `24px` · nav `50%` · link `4px` · xs `4px` · sm `6px` · pill `9999px`
- Shadow `sm` (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(0, 0, 0, 0.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 0px`
- Shadow `xl` (card): `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`
- Motion: standard transition `0.3s cubic-bezier(0.6, 0, 0.4, 1)` on interactive elements.

The overall treatment is flat, with white surfaces and fine pale-gray borders doing most of the separation. Prompt controls and outlined pills use quiet edges rather than strong fills. The measured data includes very subtle button shadowing and a stronger card shadow, but the screenshots emphasize clean editorial tiles over conspicuous floating layers.

## Imagery

Editorial imagery is the page’s main source of color: gradients, product visuals, brand tiles, and documentary-style photographs appear in feed cards. Use clean rectangular crops with consistent grid alignment and rounded card framing where shown. The prompt area also previews ChatGPT product experiences. Keep images vivid and largely unfiltered; the measured interface palette remains neutral rather than sampling these image colors as brand accents.

## Components

### Top navigation

Compact horizontal links in OpenAI Sans on white, with a light login pill and a black pill-shaped ChatGPT action.

### Prompt composer

Centered prompt heading above a broad white input with a subtle #e0e0e0 outline, rounded treatment, and a submit icon.

### Suggestion pills

Short outlined pill actions beneath the composer; labels use compact medium-weight typography and subdued borders.

### Editorial feature feed

Large lead story paired with a narrow stack of image-led cards; titles and metadata sit close to their imagery.

### News list

Compact two-column editorial rows combine small image thumbnails with title, category, and date information.

### Story and research grids

Three-column card rows with prominent image crops, short titles, and understated publication metadata.

### Footer link directory

Multi-column link groups on white, using compact navigation typography and small social and locale controls.

### Measured component styles

- **Primary button** (“Try ChatGPT (opens in a new window)”): background #000000 · text #ffffff · radius 40px · padding 0px 20px · 500 14px OpenAI Sans
- **Secondary button** (“Learn about ChatGPT Business”): transparent background · text #000000 · border 1px solid #e0e0e0 · radius 9999px · padding 0px 12px · 500 14px OpenAI Sans · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“GPT-6 and Intelligent UI for everyone Pr”): transparent background · text #000000 · radius 0px · padding 16px 0px 0px 0px · 400 17px OpenAI Sans
- **Input**: transparent background · text #000000 · radius 0px · padding 0px · 400 16px OpenAI Sans
- **Card** (“Message ChatGPT Quiz me on vocabulary Pl”): transparent background · text #000000 · radius 24px · padding 16px 52px 16px 16px · 400 17px OpenAI Sans · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Research Products Business Developers Co”): transparent background · text #000000 · radius 0px · padding 0px · 400 17px OpenAI Sans

## Do

- Use white as the uninterrupted page canvas.
- Use black for primary text and high-priority actions.
- Keep secondary metadata subdued in gray.
- Use fine pale-gray outlines for quiet controls.
- Let editorial images provide the strongest color.
- Keep section headings aligned consistently with their grids.

## Don't

- Do not add decorative color bands between sections.
- Do not turn image colors into interface brand accents.
- Do not use heavy shadows to separate every card.
- Do not make metadata compete with editorial titles.
- Do not crowd the prompt area with extra controls.
- Do not replace the modular grids with dense text walls.

## Agent prompt

Build a new OpenAI-style page with a white Canvas White (#ffffff) foundation and Pure Ink (#000000) text. Use OpenAI Sans or Inter, compact medium-weight navigation, carefully tracked headings, and muted supporting copy in Soft Graphite (#666666). Keep controls quiet: use fine Quiet Line (#e0e0e0) borders and rounded pill actions, reserving a black filled pill for the primary CTA. Organize content into clean editorial grids with clear left alignment, generous separation between sections, and a centered hero or action block only when appropriate. Let photography, gradients, or product visuals provide color inside content tiles; do not add decorative color to the interface itself. Favor flat surfaces and restrained shadows, and keep titles and metadata visually distinct.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered heading and prompt composer with a row of suggested action pills. | Prompt entry, Suggested actions, Submit control | White canvas, Outlined rounded composer, Compact pill buttons |
| 2 | content-feed | Large lead editorial feature beside a narrower vertical stack of image-led stories. | Featured story, Editorial links, Story metadata | Two-column composition, Image tiles, Compact labels |
| 3 | content-feed | Two-column list of news entries pairing small thumbnails with text. | Browse updates, Open news stories | Thumbnail rows, Category labels, Date metadata |
| 4 | gallery | Three image-led story cards in one row with titles and dates beneath. | Explore stories, Open feature | Three-column grid, Photographic crops, Short metadata |
| 5 | gallery | Three research cards with prominent imagery, titles, and publication metadata. | Browse research, View all | Three-column grid, Abstract imagery, Editorial captions |
| 6 | gallery | Three business case-study cards arranged in a horizontal grid. | Explore customer stories, View all | Three-column grid, Brand imagery, Short case-study titles |
| 7 | cta | Centered heading and download action inside a broad, quiet callout area. | Start with ChatGPT, Download | Centered composition, Neutral callout, Minimal action |
| 8 | footer | Multi-column directory of links followed by compact social, legal, and locale controls. | Navigate site, Choose locale, Access policies | Five link columns, Compact typography, Utility row |

## Source CSS custom properties (selected)

```css
--sci-background: #000;
--color-text: #ededed;
--color-text-emphasis: #fff;
--color-text-secondary: #b5b5b5;
--color-text-tertiary: #a3a3a3;
--color-primary-100: #000;
--color-primary-60: #0009;
--color-primary-44: #00000070;
--color-surface: #000;
--color-surface-secondary: #101010;
--color-surface-tertiary: #181818;
--color-border: #303030;
--color-border-strong: #454545;
--color-border-subtle: #202020;
--color-primitive-blue-25: #f6fafe;
--color-primitive-blue-50: #e8f3fe;
--color-primitive-blue-75: #d1e5fd;
--color-primitive-blue-100: #a4cdfb;
--color-primitive-blue-200: #63a8f8;
--color-primitive-blue-300: #539af8;
--color-primitive-blue-400: #3a83f7;
--color-primitive-blue-500: #2c67c5;
--color-primitive-blue-600: #1f4e94;
--color-primitive-blue-700: #173e76;
--color-primitive-blue-800: #133463;
--color-primitive-blue-900: #0c274a;
--color-primitive-blue-1000: #020d18;
--color-primitive-purple-25: #f8f5fd;
--color-primitive-purple-50: #ede5fc;
--color-primitive-purple-75: #ddcffa;
--color-primitive-purple-100: #c9b1f6;
--color-primitive-purple-200: #b897f4;
--color-primitive-purple-300: #a67df2;
--color-primitive-purple-400: #8952ee;
--color-primitive-purple-500: #7849d1;
--color-primitive-purple-600: #643cae;
--color-primitive-purple-700: #4e2f88;
--color-primitive-purple-800: #3b2366;
--color-primitive-purple-900: #291947;
--color-primitive-purple-1000: #0f0a18;
```

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