Postman

---
name: postman-com-design-system
source: https://www.postman.com/
extracted: 2026-07-03
theme: light  # measured from neutral usage weight
colors:  # roles inferred from usage frequency + luminance; names verified against values
  canvas: "#ffffff"
  ink: "#000000"
  text-muted: "#a6a6a6"
  surface: "#f2f2f2"
  hairline: "#e6e6e6"
  accent: "#ff6c37"  # orange
  accent-2: "#ffde83"  # yellow
  accent-3: "#e0531f"  # orange
fonts:
  primary: "inter"  # low-confidence: usage counts are low and close
  mono: "ibmPlexMono"
---

# Postman: The World's Leading API Platform | Sign Up for Free — Design System

Extracted from **https://www.postman.com/** on 2026-07-03.

> Accelerate API development with Postman's all-in-one platform. Streamline collaboration and simplify the API lifecycle for faster, better results. Learn more.

Every value below is mined from the site's live CSS (120 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 423 light against 321 dark. The palette is chromatic: 12 saturated values against 10 neutrals, led by orange (`#ff6c37`). Font usage counts are low and close together (inter: 3, degular: 3, notoSansJp: 3) — the extractor can't confidently call a primary face from CSS alone. Geometry mixes sharp corners (2px) with full pills.

## Usage rules

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

- Chromatic color carries 37% of measured usage — this palette uses color structurally. Saturated values can hold large surfaces here; timidity would misrepresent the source.
- The theme is light (measured neutral weight 423:321). Don't flip individual sections to the opposite mode.
- `4px` is the workhorse radius (x51); treat the other radii as exceptions, not options.
- Shadows stay tight (max 4px blur) — keep elevation subtle if you extend the scale.
- Spacing sits on a 4px grid (10 of 12 values divisible by 4) — stay on it.
- `ibmPlexMono` is the monospace — keep it for code, data, and metadata roles.

## Colors

### Neutrals (light → dark)

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `neutral-50` | `#ffffff` | 216 | **canvas** — lightest neutral, matches the measured light-leaning theme |
| `neutral-100` | `#f2f2f2` | 79 | **surface** — neutral closest to canvas luminance |
| `neutral-200` | `#e6e6e6` | 109 | **hairline** — next neutral near canvas, hairline-border weight |
| `neutral-300` | `#cfcfcf` | 19 | — |
| `neutral-400` | `#a6a6a6` | 36 | **text-muted** — most-used mid-luminance neutral |
| `neutral-500` | `#969696` | 8 | — |
| `neutral-600` | `#6b6b6b` | 68 | — |
| `neutral-800` | `#3b3b3b` | 37 | — |
| `neutral-900` | `#212121` | 122 | — |
| `neutral-950` | `#000000` | 94 | **ink** — darkest neutral, highest contrast against canvas |

### Accents

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `orange` | `#ff6c37` | 205 | **accent** — most-used chromatic color |
| `yellow` | `#ffde83` | 41 | **accent-2** — supporting chromatic color |
| `orange-2` | `#e0531f` | 40 | **accent-3** — supporting chromatic color |
| `cyan` | `#0265d2` | 36 | — |
| `deep-indigo` | `#140b1e` | 28 | — |
| `indigo` | `#c0a8e1` | 24 | — |
| `pale-indigo` | `#e4d8f6` | 22 | — |
| `pale-orange` | `#ffd7c7` | 18 | — |
| `orange-3` | `#d23f0e` | 13 | — |
| `cyan-2` | `#3d99ff` | 11 | — |
| `yellow-2` | `#ffb400` | 11 | — |
| `indigo-2` | `#710eed` | 11 | — |

### Modern color values (kept verbatim)

- `lab(0% 0 0)`
- `lab(96.5005% 4.18508 1.52328)`
- `lab(76.5514% 36.422 15.5335)`
- `lab(55.4814% 75.0732 48.8528)`
- `lab(48.4493% 77.4328 61.5452)`
- `lab(40.4273% 67.2623 53.7441)`
- `lab(94.7127% 3.58394 14.3151)`
- `lab(64.272% 57.1788 90.3583)`
- `lab(57.1026% 64.2584 89.8886)`
- `lab(89.7033% -.480294 84.4917)`
- `lab(62.7799% 22.4197 86.1544)`
- `lab(47.8202% 25.2426 66.5015)`

## Typography

Usage counts here are low and close together, so no family can be confidently called primary from CSS declarations alone — sites that set fonts via shorthand or JS under-count. Verify visually. Full list by usage:

| Family | Usage |
| --- | --- |
| inter | 3 |
| degular | 3 |
| notoSansJp | 3 |
| ibmPlexMono | 2 |
| inter Fallback | 1 |
| degular Fallback | 1 |
| ibmPlexMono Fallback | 1 |
| notoSansJp Fallback | 1 |

**Size scale (px):** `9`, `10`, `11`, `12`, `13`, `14`, `15`, `16`, `20`, `25.6`, `32`, `36`

**Weights in use:** `400` (x14), `500` (x12), `600` (x78), `700` (x18)

**Line-heights (unitless):** `1`, `1.15`, `1.2`, `1.3`, `1.4`, `1.5`, `1.6`, `1.63`

**Letter-spacing values:** `-.36px`, `-.32px`, `-.16px`, `.48px`, `.5px`, `.6px`

## Spacing

Most-used values (px): `4`, `6`, `8`, `10`, `12`, `16`, `20`, `24`, `32`, `40`, `48`, `64`

10 of 12 values sit on a 4px grid.

## Border radius

| Token | Value | Usage |
| --- | --- | --- |
| `radius-sm` | `2px` | 7 |
| `radius-md` | `4px` | 51 |
| `radius-lg` | `6px` | 11 |
| `radius-xl` | `8px` | 15 |
| `radius-2xl` | `10px` | 35 |
| `radius-3xl` | `12px` | 16 |
| `radius-4xl` | `20px` | 4 |
| `radius-full` | `50%` | 10 |

## Shadows (ordered by blur radius)

- `shadow-sm` — `0 2px 8px #0003` (x2)
- `shadow-md` — `0 4px 15px #ff6c3773` (x2)
- `shadow-lg` — `0 4px 16px #ffde8333` (x2)
- `shadow-xl` — `0 8px 24px #ffde8366,0 4px 12px #ff6c3780` (x2)
- `shadow-2xl` — `0 0 #f2f2f2` (x1)
- `shadow-3xl` — `0 2px 8px 4px #cdaff780` (x3)

### Focus rings (spread-only box-shadows, kept out of the elevation scale)

- `0 0 0 1px #ff6c37` (x2)

## Breakpoints

`399px`, `400px`, `410px`, `480px`, `500px`, `565px`, `567px`, `572px`

## 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); /* #ff6c37 */
  color: var(--color-ink); /* #000000 — contrast 7.5:1 */
  border-radius: 9999px; /* pill — mined as 50% */
  font-weight: 500;
}

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

.input {
  background: var(--color-canvas); /* #ffffff */
  color: var(--color-ink); /* #000000 — contrast 21.0:1 */
  border: 1px solid var(--color-hairline); /* #e6e6e6 */
  border-radius: 2px;
  /* placeholder color: var(--color-text-muted) #a6a6a6 */
}

.nav {
  background: var(--color-canvas); /* #ffffff */
  border-bottom: 1px solid var(--color-hairline); /* #e6e6e6 */
  color: var(--color-ink); /* #000000 */
  /* inactive links: var(--color-text-muted) #a6a6a6 */
  /* active link: var(--color-accent) #ff6c37 — contrast vs canvas 2.8:1 */
}

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

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

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

## Observations

- 10 of 22 extracted colors are neutrals.
- 6 distinct shadows; the softest reaches 4px blur.
- 8 breakpoints, from 399px to 572px.
- The site ships a large native token system (120+ custom properties) — prefer those names when extending it.

## Native CSS custom properties

First 40 of 120:

```css
:root {
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-red-50: #fef2f2;
  --color-red-300: #ffa3a3;
  --color-red-500: #fb2c36;
  --color-red-600: #e40014;
  --color-red-700: #bf000f;
  --color-orange-100: #ffedd5;
  --color-orange-500: #fe6e00;
  --color-orange-600: #f05100;
  --color-yellow-300: #ffe02a;
  --color-yellow-600: #cd8900;
  --color-yellow-700: #a36100;
  --color-green-300: #7bf1a8;
  --color-green-600: #00a544;
  --color-green-700: #008138;
  --color-blue-300: #90c5ff;
  --color-blue-500: #3080ff;
  --color-blue-600: #155dfc;
  --color-blue-700: #1447e6;
  --color-blue-800: #193cb8;
  --color-blue-900: #1c398e;
  --color-purple-500: #ac4bff;
  --color-slate-100: #f1f5f9;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5dc;
  --color-gray-400: #99a1af;
  --color-gray-500: #6a7282;
  --color-gray-600: #4a5565;
  --color-gray-700: #364153;
  --color-gray-800: #1e2939;
  --color-gray-900: #101828;
  --color-black: #000;
  --color-white: #fff;
  --spacing: .25rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-2xl: 42rem;
}
```

## Files

- `tailwind.css` — Tailwind v4 `@theme` block; tokens become utilities (e.g. `bg-neutral-900`, `text-orange`).
- `variables.css` — framework-agnostic `:root` variables, same values.
- `tokens.json` — W3C Design Tokens format for Figma plugins, Style Dictionary, etc.