# Postman design system: colors, fonts and tokens

> Postman's website (postman.com) uses a light interface with #e05320 as its primary color and inter as the main typeface, with ibmPlexMono alongside it. designlang measured 8 font sizes from 10px to 55px, 11 spacing values, 5 corner radii.

Source: https://postman.com, captured 25 June 2026. Page: https://designlang.app/design-system/postman

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#e05320` | 25 |
| Secondary | `#007bff` | 5 |
| Accent | `#ff6c37` | 1 |

Neutrals: `#212121`, `#000000`, `#707070`, `#ffffff`, `#5c5c5c`, `#e6e6e6`, `#09070d`, `#8a8a8a`, `#cfcfcf`

Backgrounds: `#ffffff`, `#f9f8f7`, `#ff6c37`, `#140b1e`, `#09070d`

## Fonts

- inter (sans), 774 elements
- ibmPlexMono (mono), 21 elements
- degular (sans), 3 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 55px | 600 | 49.5px | 0.6px | h1, h2 |
| 36px | 600 | 42.0001px | 0.48px | h2 |
| 22px | 400 | 35.75px | -0.16px | p |
| 20px | 400 | 24px | -0.16px | p |
| 16px | 400 | 18.4px | -0.16px | body, div, a, nav |
| 14px | 600 | 21px | normal | button, span, div, svg |
| 12px | 400 | 19.5px | -0.16px | p |
| 10px | 400 | 11.5px | normal | html, head, meta, link |

## Spacing

1px, 20px, 24px, 40px, 50px, 60px, 64px, 80px, 120px, 224px, 252px

## Radii

3px, 10px, 15px, 20px, pill

## Motion

Feel: mixed. Durations: 100ms, 200ms, 300ms.

## Audit

Overall 69/100 (grade D).

- Color Discipline: 92/100
- Typography Consistency: 50/100
- Spacing System: 100/100
- Shadow Consistency: 100/100
- Border Radius Consistency: 90/100
- Accessibility: 0/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #e05320;
  --color-secondary: #007bff;
  --color-accent: #ff6c37;
  --color-background: #ffffff;
  --color-text: #000000;
  --color-neutral-1: #212121;
  --color-neutral-2: #000000;
  --color-neutral-3: #707070;
  --color-neutral-4: #ffffff;
  --font-primary: "inter", sans-serif;
  --font-secondary: "ibmPlexMono", monospace;
  --radius-sm: 3px;
  --radius-md: 10px;
  --radius-lg: 15px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/postman-com/postman-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/postman-com/postman-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/postman-com/postman-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/postman-com/postman-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/postman-com/postman-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/postman-com/postman-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/postman-com/postman-com-DESIGN.md)

Regenerate: `npx designlang postman.com`