designlang
Brand guidelines #e05320

June 25, 2026

postman.com

A reading of the visual language at https://postman.com. Every token, every rule, every component — captured from the live site.

Page intent
auth
System grade
D 69/100
Tokens
15 colours · 8 sizes
Generated
designlang
Chapter 00

Essence

postman.com is a Jester brand — warm, kinetic, modern, bold and fun — anchored on #e05320 and inter, mixed motion.

Jester archetype · 84% fit · vs Creator

Adjectives

Personality axes

Cool Warm
Composed Kinetic
Understated Bold
Timeless Modern

Evidence

Chapter 01

About

Page intent
auth 32% confidence
Material language
material-you
Imagery style
flat-illustration
Component library
tailwindcss
Stack
next · Tailwind
Voice tone
neutral
Chapter 03

Colour

1 primary · 1 secondary · 1 accent · 9 neutrals · 15 total

Primary #E05320
RGB
224, 83, 32
HSL
16°, 76%, 50%
Secondary #007BFF
RGB
0, 123, 255
HSL
211°, 100%, 50%
Accent #FF6C37
RGB
255, 108, 55
HSL
16°, 100%, 61%

Neutrals

#212121
#000000
#707070
#FFFFFF
#5C5C5C
#E6E6E6
#09070D
#8A8A8A
#CFCFCF

Full palette

#212121
#000000
#707070
#FFFFFF
#0265D2
#5C5C5C
#E05320
#E6E6E6
#09070D
#140B1E
#007BFF
#8A8A8A
#CFCFCF
#FF6C37
#B387F5

WCAG 0% · 0 passing pairs · 1 failing. Full breakdown in §11.

Chapter 04

Typography

4 families · 8 sizes · 2 weights

Display
inter
Body
ibmPlexMono
Weights
400, 600

Specimen

The AI-native API Platform
Meet the AI Engineer

Scale

StepSizeSample
t00 55px The AI-native API Platform
t01 36px The AI-native API Platform
t02 22px The AI-native API Platform
t03 20px The AI-native API Platform
t04 16px The AI-native API Platform
t05 14px The AI-native API Platform
t06 12px The AI-native API Platform
t07 10px The AI-native API Platform
Chapter 05

Spacing

Base 2px · 11 steps captured

Rhythm

1px
20px
24px
40px
50px
60px
64px
80px
120px
224px
Chapter 06

Shape

5 radii · 4 elevation tiers

Border radii

3px
10px
15px
20px
9999px

Elevation

xs
sm
md
lg
Chapter 07

Iconography

unknown · 5 captured

Library
unknown
Confidence
0%
Stroke style
fillDominant
icon
icon
icon
icon
icon
Chapter 08

Motion

Feel: mixed · 3 durations · 2 easings

Duration scale

100ms
200ms
300ms

Easings

Chapter 09

Components

tailwindcss · 1 component patterns captured

Mocks

Card

Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

Detected patterns

button

Slots
label, icon, badge
Variants
outline
Sizes
xl, sm
Chapter 10

Voice

neutral · — · —

Headlines from the site

CTA verbs

Chapter 11

Accessibility

0% WCAG 2.1 contrast
0 passing · 1 failing

Failing pairs

Aa 3.87:1
Foreground
#ffffff
Background
#e0531f
Rule
AA-normal

Suggested replacements

Chapter 12

Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variablesvariables.css
:root {
  --color-primary: #e05320;
  --font-display: "inter";
  --space-base: 2px;
  --radius-md: 10px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#e05320' },
      fontFamily: { display: ['inter', 'serif'] },
      spacing: { base: '2px' },
      borderRadius: { md: '10px' },
    },
  },
};

Run npx designlang pack postman.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

Usage

  1. Lead with the primary.

    It belongs on calls-to-action and one accent moment per screen. Not on body copy.

  2. Two type families, three weights.

    Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

  3. Snap to the spacing scale.

    Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

  4. Treat accessibility as a hard constraint.

    When a colour pair fails WCAG, fix the colour — not the contrast check.