Postman design system
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.
Postman colors
The brand roles and neutrals postman.com renders, with how many elements use each one.
Brand colors
- Primary
#e0532025 uses - Secondary
#007bff5 uses - Accent
#ff6c371 uses
Neutrals
#212121737 uses#000000156 uses#707070139 uses#ffffff61 uses#5c5c5c42 uses#e6e6e615 uses#09070d10 uses#8a8a8a4 uses#cfcfcf4 uses
Backgrounds
#ffffff#f9f8f7#ff6c37#140b1e#09070d
Text colors
#00000021:1 on #ffffff#21212116.1:1 on #ffffff#0265d25.53:1 on #ffffff#6b6b6b5.33:1 on #ffffff#e053203.87:1 on #ffffff#5c5c5c6.69:1 on #ffffff#ffffff1:1 on #ffffff#7070704.95:1 on #ffffff
Contrast checks (WCAG 2.1)
Text and background pairs found together on the page; 0% of them pass.
| Text | Background | Ratio | Result |
|---|---|---|---|
#ffffff | #e0531f | 3.87:1 | Fails AA |
Postman fonts and type scale
Every font family and size in use, read from computed styles rather than the CSS source.
Font families
- inter: sans, most text (774 elements)
- ibmPlexMono: mono, body (21 elements)
- degular: sans, headings (3 elements)
Body text: 16px at weight 400, line height 18.4px.
Weights in use: 400, 600.
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 and radii
Spacing scale
Corner radii
- 3px
- 10px
- 15px
- 20px
- pill
Medium radii lead, with a few larger ones. 4 distinct box shadows.
Motion
The motion reads as mixed.
Durations
xs: 100mssm: 200msmd: 300ms
Easing
- custom (108 uses):
cubic-bezier(0.4, 0, 0.2, 1) - ease-in-out (10 uses):
ease
Design system audit
designlang scores how consistently a site uses its own values. How the audit works.
Overall
Components found: buttons (16), cards (8), links (155), navigation (59), footer (103), dropdowns (48).
By category
| 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 |
- 4 font families — consider limiting to 2 (heading + body)
- 1 WCAG contrast failures
- 443 !important rules — prefer specificity over overrides
- 54% of CSS is unused — consider purging
- 4955 duplicate CSS declarations
Download the tokens
The files designlang wrote for postman.com. Run it yourself for a fresh read: npx designlang postman.com.
The core values as CSS variables
: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;
}Read postman.com yourself
Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.
Quick answers
What font does Postman use?
What are Postman's brand colors?
How do I use the Postman design system in my own app?
Is this the official design system?
Measured from the public pages of postman.com on 25 June 2026. Postman is a trademark of its owner; designlang is not affiliated with it. More: the full Postman brand kit, the token extraction guide and the markdown version of this page.