Postman design system

What font does Postman use?

Postman’s website uses gt Standard for headings and Inter for body text. gt Standard is not on Google Fonts; the closest free match is Figtree; Inter is free on Google Fonts.

Postman colour palette

Postman’s home page is dark (#100218 background, #FFF0DE text). Its palette: #0E0704, #141312, #100218, #0C0B0A, #FF6C37, #FFF0DE.

• #0E0704
  40.1% · backgrounds
• #141312
  27.5% · backgrounds
• #100218
  8.4% · backgrounds
• #0C0B0A
  7.4% · backgrounds
• #FF6C37
  4.1% · backgrounds
• #FFF0DE
  3.5% · text, drawings
• #0B0603
  1.8% · backgrounds
• #CDBFAD
  1.6% · text
• #060402
  1.2% · backgrounds
• #BAB9B9
  0.8% · text

Type scale

Each size the page sets text in, with its weight and line height. Postman’s largest type is 63.36px at weight 500.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 48px, 52px.

Corner radii: 2.5px, 4px, 4.5px, 5px, 6px, 8px, pill. 10 shadow levels measured.

What makes Postman look like Postman

Almost entirely neutral: 95% of the page is painted in #0E0704 and #141312; #FF6C37 (4.1%) fills whole sections.

#FFE0C4 is an accent: 0.6% of the page, used for text and lines only. Don't fill large areas with it.

#FFDEBE is an accent: 0.2% of the page, used for lines only. Don't fill large areas with it.

The largest type (63.36px gtStandard) is medium weight, not bold (500), tracked to -0.02em.

Postman DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Postman’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Postman’s product, so use your own name, words and images.

Download Postman DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Postman’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=inter:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=ibm+Plex+Mono:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@500&display=swap");

:root {
  --color-background: #100218; /* Background */
  --color-surface: #212121; /* Surface */
  --color-text: #FFF0DE; /* Text */
  --color-text-muted: #CDBFAD; /* Text muted */
  --color-border: #212121; /* Border */
  --color-action: #191817; /* Action */
  --color-on-action: #FFF0DE; /* On action */
  --color-positive: #63C174; /* Positive */
  --color-negative: #FF8980; /* Negative */
  --color-warning: #FF8E64; /* Warning */
  --color-0e0704: #0E0704; /* 40.1% of the page, as fills */
  --color-141312: #141312; /* 27.5% of the page, as fills */
  --color-0c0b0a: #0C0B0A; /* 7.4% of the page, as fills */
  --color-ff6c37: #FF6C37; /* 4.1% of the page, as fills */
  --color-0b0603: #0B0603; /* 1.8% of the page, as fills */
  --color-060402: #060402; /* 1.2% of the page, as fills */
  --font-body: "Inter", sans-serif; /* Inter */
  --font-interface: inter, sans-serif; /* inter */
  --font-code: "ibmPlexMono", "ibm Plex Mono", monospace; /* ibmPlexMono on the site; ibm Plex Mono renders */
  --font-display: "gtStandard", "Figtree", sans-serif; /* gtStandard on the site; Figtree renders */
  --type-display-large: 63.36px; /* Display Large, weight 500 */
  --type-display-large-leading: 64.6272px;
  --type-display-large-tracking: -0.02em;
  --type-display-small: 36px; /* Display Small, weight 500 */
  --type-display-small-leading: 43.88px;
  --type-display-small-tracking: -0.02em;
  --type-headline: 27px; /* Headline, weight 500 */
  --type-headline-leading: 34.24px;
  --type-headline-tracking: -0.01em;
  --type-title-large: 20px; /* Title Large, weight 500 */
  --type-title-large-leading: 24px;
  --type-title-large-tracking: -0.01em;
  --type-title-medium: 19px; /* Title Medium, weight 400 */
  --type-title-medium-leading: 30.4px;
  --type-title-medium-tracking: -0.008em;
  --type-title-small: 18px; /* Title Small, weight 600 */
  --type-title-small-leading: 18px;
  --type-body-large: 16px; /* Body Large, weight 400 */
  --type-body-large-leading: 24px;
  --type-body-large-tracking: -0.01em;
  --type-body-medium: 15px; /* Body Medium, weight 400 */
  --type-body-medium-leading: 23.25px;
  --type-body-medium-tracking: -0.011em;
  --type-body-small: 14px; /* Body Small, weight 400 */
  --type-body-small-leading: 23.8px;
  --type-body-small-tracking: -0.011em;
  --type-label-large: 13px; /* Label Large, weight 600 */
  --type-label-large-leading: 16px;
  --type-label-medium: 12px; /* Label Medium, weight 400 */
  --type-label-medium-leading: 16px;
  --type-label-small: 11px; /* Label Small, weight 400 */
  --type-label-small-leading: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;

How this was measured

PikSpec’s scanner read the postman.com home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Postman is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Postman.

Similar dark designs: Aesop · Bolt · Descript · DigitalOcean · Discord · Framer

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.