ChatGPT

---
name: chatgpt-com-design-system
source: https://chatgpt.com/
extracted: 2026-07-21
theme: light  # measured from neutral usage weight
colors:  # roles inferred from usage frequency + luminance; names verified against values
  canvas: "#ffffff"
  ink: "#212121"
  text-muted: "#b4b4b4"
  surface: "#f3f3f3"
  hairline: "#dedede"
  accent: "#a8c7fa"  # blue
  accent-2: "#ff6961"  # red
  accent-3: "#8ab4f8"  # blue
fonts:
  primary: "-apple-system-body"  # medium-confidence: usage counts are close
---

# ChatGPT: Chat, Work, Create & Code with AI — Design System

Extracted from **https://chatgpt.com/** on 2026-07-21.

> Use ChatGPT to answer questions, write, create images, complete work, and code—all in one place. Get started for free or download the app.

Every value below is mined from the site's live CSS (44 native custom properties, ranked usage counts). Role assignments are inferred from usage and luminance and marked as such — treat them as a strong starting point, not gospel.

## Overview

The system reads as light: measured neutral usage weighs 230 light against 113 dark. The palette is chromatic: 12 saturated values against 11 neutrals, led by blue (`#a8c7fa`). **-apple-system-body** leads the font stack, though usage counts are close — verify against rendered pages before committing. Geometry mixes sharp corners (.25rem) with full pills.

## Usage rules

Derived from the measured usage below — each rule cites its evidence.

- Chromatic color is only 12% of measured color usage. Reserve `accent` (`#a8c7fa`) for primary actions, links, and emphasis — spreading it into body text or large surfaces breaks the ratio that defines this look.
- The theme is light (measured neutral weight 230:113). Don't flip individual sections to the opposite mode.
- `999px` is the workhorse radius (x72); treat the other radii as exceptions, not options.
- The only shadows are blur-less hairline offsets — this system barely uses elevation; don't add soft drop shadows.
- One family does the work — build hierarchy with size and weight (400/500/510/590/600/650), not by adding typefaces.

## Colors

### Neutrals (light → dark)

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `neutral-50` | `#ffffff` | 186 | **canvas** — lightest neutral, matches the measured light-leaning theme |
| `neutral-100` | `#f3f3f3` | 36 | **surface** — neutral closest to canvas luminance |
| `neutral-200` | `#dedede` | 3 | **hairline** — next neutral near canvas, hairline-border weight |
| `neutral-300` | `#cdcdcd` | 5 | — |
| `neutral-400` | `#b4b4b4` | 5 | **text-muted** — most-used mid-luminance neutral |
| `neutral-500` | `#a1a1aa` | 4 | — |
| `neutral-600` | `#8f8f8f` | 4 | — |
| `neutral-700` | `#5d5d5d` | 9 | — |
| `neutral-800` | `#48484a` | 5 | — |
| `neutral-900` | `#303030` | 29 | — |
| `neutral-950` | `#212121` | 20 | **ink** — darkest neutral, highest contrast against canvas |

### Accents

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `blue` | `#a8c7fa` | 5 | **accent** — most-used chromatic color |
| `red` | `#ff6961` | 5 | **accent-2** — supporting chromatic color |
| `blue-2` | `#8ab4f8` | 4 | **accent-3** — supporting chromatic color |
| `red-2` | `#f14d42` | 4 | — |
| `green` | `#30a633` | 4 | — |
| `cyan` | `#007aff` | 4 | — |
| `green-2` | `#198038` | 3 | — |
| `green-3` | `#58cd78` | 3 | — |
| `red-3` | `#be2d2d` | 3 | — |
| `teal` | `#10a37f` | 3 | — |
| `blue-3` | `#3b82f6` | 3 | — |
| `blue-4` | `#2563eb` | 2 | — |

### Dark mode

The source defines 1 dark-mode variant (via prefers-color-scheme). Both halves of the system, first 1:

| Token | Light | Dark |
| --- | --- | --- |
| `--lightningcss-dark` | — | `initial` |

`variables.css` ships these as a `prefers-color-scheme: dark` override block.

## Typography

**-apple-system-body** has the most `font-family` declarations, but the margin over the rest is thin — treat the primary-face call as provisional and verify on rendered pages. Full list by usage:

| Family | Usage |
| --- | --- |
| -apple-system-body | 4 |

**Size scale (px):** `9`, `12`, `13`, `14`, `15`, `16`, `17`, `18`, `20`, `24`, `28`, `32`

**Weights in use:** `400` (x24), `500` (x25), `510` (x1), `590` (x9), `600` (x58), `650` (x6)

**Line-heights (unitless):** `1`, `1.1`, `1.15`, `1.35`, `1.41`, `1.45`, `1.55`

**Letter-spacing values:** `-.04em`, `-.03em`, `-.025em`, `-.02rem`, `-.01em`, `-.005rem`

## Spacing

Most-used values (px): `2`, `4`, `6`, `8`, `10`, `11`, `12`, `14`, `16`, `18`, `20`, `24`

## Border radius

| Token | Value | Usage |
| --- | --- | --- |
| `radius-sm` | `.25rem` | 9 |
| `radius-md` | `.5rem` | 14 |
| `radius-lg` | `.75rem` | 16 |
| `radius-xl` | `1rem` | 18 |
| `radius-2xl` | `1.25rem` | 9 |
| `radius-3xl` | `1.5rem` | 8 |
| `radius-4xl` | `999px` | 72 |
| `radius-full` | `50%` | 5 |

## Shadows (ordered by blur radius)

- `shadow-sm` — `0 .5rem 1rem #00000052,inset 0 0 1px #fff3,0 0 1px #0000009e` (x4)
- `shadow-md` — `0 4px 16px #0000000d` (x2)
- `shadow-lg` — `0 .5rem 2rem #0000001f` (x2)
- `shadow-xl` — `0 .125rem .625rem #0000000d` (x2)
- `shadow-2xl` — `inset 0 1px #ffffff29,0 2px 8px #00000014` (x1)
- `shadow-3xl` — `inset 0 1px #ffffff94,0 2px 8px #00000024` (x1)

## Breakpoints

`640px`, `768px`, `1024px`

## Starter recipes

Tokens composed into components. The source site's real components were **not** inspected — these are starting points built from the extracted values, with contrast ratios computed rather than assumed.

```css
.button-primary {
  background: var(--color-accent); /* #a8c7fa */
  color: var(--color-ink); /* #212121 — contrast 9.4:1 */
  border-radius: 9999px; /* pill — mined as 50% */
  font-weight: 500;
}

.card {
  background: var(--color-surface); /* #f3f3f3 */
  border: 1px solid var(--color-hairline); /* #dedede */
  border-radius: 999px; /* most-used finite radius */
  box-shadow: var(--shadow-sm);
}

.input {
  background: var(--color-canvas); /* #ffffff */
  color: var(--color-ink); /* #212121 — contrast 16.1:1 */
  border: 1px solid var(--color-hairline); /* #dedede */
  border-radius: .25rem;
  /* placeholder color: var(--color-text-muted) #b4b4b4 */
}

.nav {
  background: var(--color-canvas); /* #ffffff */
  border-bottom: 1px solid var(--color-hairline); /* #dedede */
  color: var(--color-ink); /* #212121 */
  /* inactive links: var(--color-text-muted) #b4b4b4 */
  /* active link: var(--color-accent) #a8c7fa — contrast vs canvas 1.7:1 */
}

.modal {
  background: var(--color-surface); /* #f3f3f3 */
  border-radius: 999px;
  box-shadow: var(--shadow-3xl); /* largest mined shadow */
}

.modal-backdrop {
  background: color-mix(in srgb, var(--color-ink) 55%, transparent); /* scrim from #212121 */
}

.input-error {
  border-color: #ff6961; /* mined token: red */
  /* error text: #ff6961 on canvas — contrast 2.8:1, below AA; darken for message text */
}

.input-success {
  border-color: #30a633; /* mined token: green */
}
```

## Observations

- 11 of 23 extracted colors are neutrals.
- 6 distinct shadows; the softest reaches 0px blur.
- 3 breakpoints, from 640px to 1024px.

## Native CSS custom properties

First 40 of 44:

```css
:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  --bg-surface-main: var(--lightningcss-light,#fff)var(--lightningcss-dark,#000);
  --bg-surface-sidebar: var(--lightningcss-light,#fff)var(--lightningcss-dark,#0d0d0d);
  --bg-secondary: var(--lightningcss-light,#e8e8e8)var(--lightningcss-dark,#303030);
  --border-subtle: var(--lightningcss-light,#0d0d0d17)var(--lightningcss-dark,#ffffff1f);
  --composer-border: var(--lightningcss-light,#0d0d0d14)var(--lightningcss-dark,#ffffff1f);
  --composer-shadow: 0 1px 1px var(--lightningcss-light,#00000008)var(--lightningcss-dark,#00000061);
  --focus-ring: var(--lightningcss-light,#8ab4f8)var(--lightningcss-dark,#a8c7fa);
  --accent-blue: #007aff;
  --finance-negative: var(--lightningcss-light,#f14d42)var(--lightningcss-dark,#f14d42);
  --finance-positive: var(--lightningcss-light,#30a633)var(--lightningcss-dark,#30a633);
  --accent-primary: var(--lightningcss-light,#000)var(--lightningcss-dark,#fff);
  --label-primary: var(--lightningcss-light,#0d0d0d)var(--lightningcss-dark,#f4f4f5);
  --label-secondary: var(--lightningcss-light,#5d5d67)var(--lightningcss-dark,#a1a1aa);
  --label-tertiary: #8f8f8f;
  --icon-glass: var(--lightningcss-light,#5d5d5d)var(--lightningcss-dark,#cdcdcd);
  --glass-surface-regular: var(--lightningcss-light,#f3f3f3d1)var(--lightningcss-dark,#181818f0);
  --glass-surface-strong: var(--lightningcss-light,#f3f3f3e6)var(--lightningcss-dark,#181818fa);
  --glass-surface-hover: var(--lightningcss-light,#ecececf5)var(--lightningcss-dark,#202020fa);
  --glass-border: var(--lightningcss-light,#ffffffb8)var(--lightningcss-dark,#3b3b3b);
  --glass-highlight: var(--lightningcss-light,#ffffff94)var(--lightningcss-dark,#ffffff14);
  --glass-sheen: var(--lightningcss-light,#ffffff2e)var(--lightningcss-dark,#ffffff0a);
  --glass-shadow: 0 4px 24px var(--lightningcss-light,#0000001a)var(--lightningcss-dark,#00000026);
  --glass-shadow-large: 0 18px 48px var(--lightningcss-light,#0000001f)var(--lightningcss-dark,#00000038);
  --message-user-surface: var(--lightningcss-light,#f1f1f4)var(--lightningcss-dark,#303030);
  --sidebar-button-surface: var(--lightningcss-light,#fff)var(--lightningcss-dark,#303030);
  --sidebar-button-border: var(--lightningcss-light,#0d0d0d0f)var(--lightningcss-dark,#ffffff1a);
  --sidebar-button-shadow: 0 4px 18px var(--lightningcss-light,#0000001a)var(--lightningcss-dark,#0000002e);
  --sidebar-fade-stop: var(--lightningcss-light,#f5f5f6fa)var(--lightningcss-dark,#000000fa);
  --sidebar-rail-surface: var(--lightningcss-light,#fff)var(--lightningcss-dark,#161616);
  --sidebar-rail-border: var(--lightningcss-light,#0d0d0d14)var(--lightningcss-dark,#ffffff1f);
  --sidebar-rail-shadow: 0 18px 48px var(--lightningcss-light,#00000024)var(--lightningcss-dark,#0000003d);
  --surface-elevated: var(--lightningcss-light,#fff)var(--lightningcss-dark,#212121);
  --surface-muted: var(--lightningcss-light,#ececf1)var(--lightningcss-dark,#303030);
  --surface-rich-result: var(--lightningcss-light,#fff)var(--lightningcss-dark,#000);
  --surface-page: var(--bg-surface-main);
  --surface-sidebar: var(--bg-surface-sidebar);
  --wm-desktop-sidebar-width: 52px;
  --composer-text-color: #0d0d0d;
}
```

## Components

5 UI components were detected and rebuilt from the site's own CSS (see `components.html` for the rendered gallery):

- **Buttons** (3) — `Continue with Apple`, `log in`, `Search chats`
- **Inputs** (1) — `Email address`
- **Navigation** (1) — `3 links`

Each is a reconstruction: real component classes matched against the extracted stylesheet with custom properties resolved. Hover/focus states are not captured.

## Files

- `tailwind.css` — Tailwind v4 `@theme` block; tokens become utilities (e.g. `bg-neutral-900`, `text-blue`). Semantic roles alias the base palette; sizes carry line-heights; dark mode included.
- `preview.html` — a visual style-guide of this system: palette cards, type scale, spacing tables, and do/don't guidelines.
- `components.html` — a rendered gallery of the detected UI components, each with a copyable snippet.
- `variables.css` — framework-agnostic `:root` variables with semantic aliases and a `data-theme="dark"` block.
- `tokens.json` — W3C DTCG design tokens: semantic aliases, composite shadow and typography tokens, for Figma plugins, Style Dictionary, etc.