At a glance
24tokens
10type steps
1radius steps
8pxspacing base
Postman, in one page
Postman's iOS app is a developer instrument, not a consumer app — and it looks like one. It opens on a neutral dark grey canvas (#1A1A1A) and the entire screen is organized around a single task: build an HTTP request, fire it, read the response. The visual atmosphere is "API console in your pocket": dense, monospaced, color-coded, with one warm orange brand mark that appears only on the verbs that matter (Send, Save, primary CTAs). Nothing is decorative; every pixel either holds request data or signals state.
The spine of the app is the request builder: a horizontal URL bar with a colored HTTP-method pill on the left, the request URL in the middle (monospace), and a bright orange Send button on the right. Below it sits a tab strip — Params, Headers, Body, Auth, Pre-request Script, Tests — each opening a key-value editor where keys and values are typed in monospace. Fire the request and the bottom half of the screen becomes the response viewer: a status line (200 OK in green, 404 in yellow, 500 in red), timing and size metadata, and a syntax-highlighted JSON body. This request-then-response rhythm is the entire product; Collections, History, and Environments are just ways to organize and replay it.
The signature of the design is its HTTP-method color system. Every method has a fixed hue that is consistent everywhere the method appears — in the URL-bar pill, in collection request rows, in history entries: GET is green, POST is yellow, PUT is blue, PATCH is purple, DELETE is red, OPTIONS/HEAD are grey. This is not decoration — it is the primary information channel. A developer scanning a collection reads color before text. On dark mode these hues are softened (pastel-ish) versus the saturated light-mode versions, but the hue identity never changes.
The color logic is therefore split in two: a single brand orange (#FF6C37, "Postman Orange," from the company's logo and brand) reserved strictly for action affordances (Send button, active-tab underline, primary buttons, links) — and the method/status palette that carries semantic meaning. The neutral greys do everything else: canvas #1A1A1A, surfaces #212121/#2A2A2A, dividers #3A3A3A, text #E8E8E8/#A6A6A6. There is deliberately no second brand accent — orange means "do the thing," method colors mean "what kind of thing."
Typography is a clean UI sans (Postman ships a system-leaning stack; Inter is the closest free analog) for all chrome — labels, headings, navigation — paired with a strong monospace (JetBrains Mono as the free analog) for every piece of machine data: URLs, headers, JSON keys/values, query params, status codes, timing. The sans/mono split mirrors Postman's product reality: humans label things, machines speak JSON.
Key Characteristics:
- Neutral dark grey canvas (
#1A1A1A) — a developer console, not a branded surface - Request builder as the home screen — method pill + monospace URL + orange Send button
- HTTP-method color system — GET green / POST yellow / PUT blue / PATCH purple / DELETE red, consistent everywhere
- Single brand orange (
#FF6C37) — reserved for Send / active tab / primary CTAs, never decorative - Response viewer — status code (color-coded) + timing/size meta + syntax-highlighted JSON
- Sans for chrome, Mono for data — Inter labels, JetBrains Mono URLs/headers/JSON
- Tab strip request editor — Params / Headers / Body / Auth / Scripts / Tests with key-value rows
- Status-code chips — 2xx green, 3xx blue, 4xx yellow, 5xx red — pills in monospace
- Collections / History / Environments — three ways to organize and replay the same request
- JSON syntax coloring — keys blue, strings green, numbers/booleans purple, punctuation dim
Do's and don'ts
Do
- Use the neutral grey canvas
#1A1A1A(dark) /#FFFFFF(light) — a console, not a branded surface - Make the request builder the home screen — method pill + monospace URL + orange Send
- Apply the HTTP-method color system consistently (GET green / POST yellow / PUT blue / PATCH purple / DELETE red) everywhere a method appears
- Reserve Postman Orange
#FF6C37strictly for actions (Send / active tab / primary CTAs) - Set every URL, header, param, JSON, status code, and timing in JetBrains Mono
- Color JSON by syntax role (key blue / string green / number purple / punctuation dim)
- Use status-code chips (2xx green / 3xx blue / 4xx yellow / 5xx red) as pills
- Put the response JSON on a darker
#161616surface so it reads as machine output - Show the active environment as a pill and render
{{variables}}in orange - Soften method hues on dark vs light but keep their hue identity
Don't
- Don't use orange decoratively — it means "do the thing," nothing else
- Don't introduce a second brand accent — method colors carry semantics, orange carries action
- Don't set URLs/headers/JSON in the proportional sans — machine data is always Mono
- Don't change a method's hue between screens — GET is always the same green everywhere
- Don't bold JSON for emphasis — syntax meaning is hue, not weight
- Don't use a pure-black or charcoal-blue canvas — Postman dark is neutral grey
#1A1A1A - Don't elevate the response code block — data sinks (darker), controls float (lighter)
- Don't uppercase body or data — only tiny section eyebrows
- Don't drop the timing/size meta after a send —
ms+ size is the developer's verdict - Don't animate aggressively — motion is functional (slide/cross-fade, 150–280ms)
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Postman design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- single brand orange: #ff6c37
- Postman Orange: #ff6c37
- Postman Orange Pressed: #e55a2b
- Postman Orange Dim: #3d2417
- Dark Canvas: #1a1a1a
- Surface 1: #212121
- Surface 2: #2a2a2a
- Surface 3: #333333
- Code Surface: #161616
- Divider: #3a3a3a
Type:
- families: Inter, JetBrains Mono, Fallback Sans Stack, Fallback Mono Stack
- scale: 10, 12, 13, 14, 15, 16, 18, 22, 26
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 8
Spacing: 8, 11, 12
Rules:
- Use the neutral grey canvas `#1A1A1A` (dark) / `#FFFFFF` (light) — a console, not a branded surface
- Make the request builder the home screen — method pill + monospace URL + orange Send
- Apply the HTTP-method color system consistently (GET green / POST yellow / PUT blue / PATCH purple / DELETE red) everywhere a method appears
- Reserve Postman Orange `#FF6C37` strictly for actions (Send / active tab / primary CTAs)
- Set every URL, header, param, JSON, status code, and timing in JetBrains Mono
- Color JSON by syntax role (key blue / string green / number purple / punctuation dim)
Avoid:
- Don't use orange decoratively — it means "do the thing," nothing else
- Don't introduce a second brand accent — method colors carry semantics, orange carries action
- Don't set URLs/headers/JSON in the proportional sans — machine data is always Mono
- Don't change a method's hue between screens — GET is always the same green everywhere
- Don't bold JSON for emphasis — syntax meaning is hue, not weight
- Don't use a pure-black or charcoal-blue canvas — Postman dark is neutral grey `#1A1A1A`
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive — the single brand accent)
- Postman Orange (
#FF6C37): The one brand color — Send button, active-tab underline, primary buttons, links, FAB. Never decorative. - Postman Orange Pressed (
#E55A2B): Pressed state of orange affordances. - Postman Orange Dim (
#3D2417): 12% orange wash behind selected orange contexts (rare).
Canvas & Surfaces (Dark — default)
- Dark Canvas (
#1A1A1A): Primary canvas — neutral grey, not pure black, not charcoal-blue. - Surface 1 (
#212121): Cards, URL bar, key-value cells, the first elevation step. - Surface 2 (
#2A2A2A): Hovered/pressed rows, secondary panels. - Surface 3 (
#333333): Inline code chips, tag fills. - Code Surface (
#161616): The response/JSON body background — slightly darker than canvas for contrast. - Divider (
#3A3A3A): Hairline separators between rows, under tab strips. - Border (
#444444): URL-bar border, input borders.
Canvas & Surfaces (Light)
- Canvas White (
#FFFFFF): Primary light canvas. - Surface Gray (
#F4F5F5): Cards, key-value cells. - Surface Gray 2 (
#EBECEC): Pressed rows. - Code Surface Light (
#FAFAFA): JSON body background. - Divider Light (
#E1E3E3): Hairline separators. - Border Light (
#D6D8D8): Input borders.
Text
- Text Primary Dark (
#E8E8E8): Primary text & headings on dark. - Text Secondary Dark (
#A6A6A6): Metadata, secondary labels. - Text Tertiary Dark (
#6E6E6E): Disabled, placeholders, JSON punctuation. - Text Primary Light (
#212121): Primary text on white. - Text Secondary Light (
#6B6B6B): Metadata on white.
HTTP Method Colors (the semantic core — Dark Mode)
These are consistent everywhere a method appears. Light-mode versions are more saturated; hue identity is preserved.
| Method | Dark Mode | Light Mode | Chip Fill (dark, ~12%) |
|---|---|---|---|
| GET | #6BDD9A | #0CBB52 | rgba(107,221,154,0.12) |
| POST | #FFE47A | #C9A227 (text on chip) | rgba(255,228,122,0.12) |
| PUT | #74AEF6 | #1A73E8 | rgba(116,174,246,0.12) |
| PATCH | #C0A8E1 | #7D4FC4 | rgba(192,168,225,0.12) |
| DELETE | #F79090 | #E5484D | rgba(247,144,144,0.12) |
| OPTIONS / HEAD | #A6A6A6 | #6B6B6B | rgba(166,166,166,0.12) |
Status Code Colors
| Class | Color (dark) | Use |
|---|---|---|
| 1xx / 2xx Success | #6BDD9A | 200 OK, 201 Created |
| 3xx Redirect | #74AEF6 | 301 Moved, 304 Not Modified |
| 4xx Client Error | #FFE47A | 400, 401, 404 |
| 5xx Server Error | #F79090 | 500, 502, 503 |
JSON Syntax Colors
- Key (
#74AEF6): Object keys. - String (
#6BDD9A): String values. - Number / Boolean / null (
#C0A8E1): Numeric, boolean, null literals. - Punctuation (
#6E6E6E): Braces, brackets, colons, commas.
Semantic
- Success (
#6BDD9A): 2xx responses, save success, passed tests. - Error (
#F79090): 5xx responses, failed tests, destructive actions. - Warning (
#FFE47A): 4xx responses, unsaved-change indicator. - Info (
#74AEF6): 3xx, informational toasts.
Type scaleRead the full spec
Font Family
- Sans (UI / chrome):
Inter(by Rasmus Andersson, SIL OFL) — the closest free analog to Postman's system-leaning UI face; neutral, legible at small sizes. - Mono (request data):
JetBrains Mono(by JetBrains, SIL OFL) — strong developer monospace for URLs, headers, JSON, params, status codes, timing. - Fallback Sans Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Fallback Mono Stack:
'SF Mono', ui-monospace, 'Menlo', 'Consolas', monospace - Not user-switchable: The sans/mono split is by content type (chrome vs machine data), not a setting.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Inter | 32pt | 800 | 1.1 | -0.5pt | Top-level screen title ("Collections") |
| Title | Inter | 26pt | 700 | 1.2 | -0.3pt | API / collection name |
| Section | Inter | 22pt | 700 | 1.2 | -0.2pt | "Request Builder" |
| Subsection | Inter | 18pt | 600 | 1.3 | -0.1pt | "Query Params", tab-content headings |
| Body | Inter | 16pt | 400 | 1.5 | 0pt | Descriptive prose, empty-state text |
| Label | Inter | 15pt | 500 | 1.3 | 0pt | Form labels, list-item titles |
| Method Pill | JetBrains Mono | 13pt | 700 | 1.0 | 0.3pt | GET / POST in URL bar & rows |
| URL / JSON | JetBrains Mono | 13pt | 400/500 | 1.4 | 0pt | Request URL, headers, key-value data |
| JSON Body | JetBrains Mono | 12pt | 400 | 1.6 | 0pt | Response body, pretty-printed |
| Status Code | JetBrains Mono | 12pt | 700 | 1.0 | 0.2pt | 200 OK, status chips |
| Meta | Inter | 14pt | 400 | 1.4 | 0pt | "182 ms · 1.2 KB · 2m ago" |
| Caption | Inter | 12pt | 500 | 1.3 | 0.5pt | "QUERY PARAMS" eyebrow (uppercase) |
| Tab Label | Inter | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
| Button | Inter | 14pt | 700 | 1.0 | 0pt | All buttons (Send is 700) |
Principles
- Sans for chrome, Mono for machine data: Any string that is part of an HTTP transaction — URL, header name/value, query param, JSON, status code, timing — is JetBrains Mono. Everything a human wrote — labels, headings, prose — is Inter. This split is the most legible part of the system.
- Method pills are always Mono + bold:
GET/POST/PUTrender in JetBrains Mono 13pt weight 700 with +0.3pt tracking and the method's fixed hue. - Weight concentrated at 400 / 500 / 600 / 700 / 800: Body 400, labels 500, subsections 600, headings/buttons 700, display 800. No thin.
- JSON is colored, not bolded: Syntax meaning is carried by hue (key blue / string green / number purple / punctuation dim), never by weight.
- Uppercase only for tiny eyebrows: Section eyebrows ("QUERY PARAMS") at 12pt +0.5pt tracking. Never uppercase body or data.
- Tabular Mono figures: timing/size columns and JSON numbers use JetBrains Mono's even-width digits so columns align.
Components and layoutRead the full spec
Buttons
Primary Button (Send / Save / Confirm)
- Shape: Rounded rectangle, 8pt corner radius
- Background:
#FF6C37(Postman Orange) — identical light & dark - Text:
#FFFFFF, Inter 14pt weight 700 - Padding: 12pt vertical, 22pt horizontal (Send in the URL bar is full-height of the bar)
- Pressed: background
#E55A2B+ scale 0.98 - Disabled: background
#3D2417, text#6E6E6E
Secondary / Ghost Button (Cancel / Reset)
- Background: transparent
- Text:
#E8E8E8dark /#212121light, Inter 14pt weight 500 - Border: 1pt
#444444dark /#D6D8D8light - Padding: 11pt vertical, 20pt horizontal
- Corner radius: 8pt
- Pressed: background
#2A2A2A
Outline Orange Button (Save Request / secondary action)
- Background: transparent
- Text & border:
#FF6C371pt - Padding: 11pt vertical, 20pt horizontal, 8pt radius
- Pressed: background
rgba(255,108,55,0.10)
Text Button (Add to Collection / link action)
- Background: none
- Text:
#FF6C37, Inter 14pt weight 600 - No underline by default; underline on press
Icon Button
- 20pt glyph in 44pt hit area
- Color:
#A6A6A6default →#E8E8E8active (orange if it's a primary action like Send)
Core Atoms
URL / Request Bar
- Container:
#212121, 1pt#444444border, 10pt corner radius, overflow hidden - Method pill: left segment, JetBrains Mono 13pt 700, method-colored text, 1pt right divider, 12pt horizontal padding — tappable to open the method picker
- URL field: JetBrains Mono 12–13pt
#E8E8E8, single-line, horizontal scroll - Send button: right segment, full-height,
#FF6C37fill, white Inter 13pt 700
HTTP Method Chip
- JetBrains Mono 13pt 700, method hue text, method-hue background at 12%, 6pt corner radius, 6×12pt padding
- Used in collection rows, history entries, request tabs
Status Code Chip
- JetBrains Mono 12pt 700, class-colored text + 1pt class-colored border at 40% + class fill at 8%, 999pt pill, 5×10pt padding
- 2xx green, 3xx blue, 4xx yellow, 5xx red
Key-Value Row (Params / Headers editor)
- Two cells side-by-side: key cell (flex ~38%, JetBrains Mono 12pt, key-blue
#74AEF6text) + value cell (flex, JetBrains Mono 12pt#E8E8E8) - Each cell:
#212121fill, 1pt#3A3A3Aborder, 6pt radius, 9×10pt padding - Leading checkbox (enable/disable row), trailing delete on swipe
Response Body Block
- Background
#161616, 1pt#3A3A3A, 8pt radius, 12pt padding - JetBrains Mono 12pt, syntax-colored JSON, line wrap or horizontal scroll toggle
- Header row: status chip + timing (Mono
#A6A6A6) + size + copy/raw/preview toggle
Navigation
Bottom Tab Bar
- Height: 52pt + safe area
- Background:
rgba(26,26,26,0.94)withbackdrop-filter: blur(20px), 0.5pt top border#3A3A3A - Tabs (4): Request, Collections, History, Environments
- Icon size: 21pt, 2pt stroke
- Active:
#FF6C37/ Inactive:#6E6E6E - Labels: Inter 10pt 500, always shown
Request Editor Tab Strip
- Horizontal scroll strip under the URL bar: Params / Headers / Body / Auth / Pre-request / Tests
- Inter 13pt; active 600
#E8E8E8with a 2pt#FF6C37underline; inactive 500#A6A6A6 - A dot badge on a tab indicates it has content (e.g. Headers has 4 keys)
Top Bar (Request)
- Height: 44pt + safe area
- Leading: Postman roundel (26pt) + request name (Inter 16pt 600)
- Trailing:
Savetext action (Inter 13pt 600#FF6C37, shows a dot when unsaved) + overflow⋯
Input Fields
Text Field
- Height: 40pt, background
#212121dark /#F4F5F5light, 1pt#444444border, 8pt radius - Text: JetBrains Mono 13pt for URL/header/value fields; Inter 15pt for name/label fields
- Placeholder:
#6E6E6E - Focus: border
#FF6C37+ 2ptrgba(255,108,55,0.35)ring - Error: border
#F79090, helper text#F7909012pt
Method Picker (sheet)
- Bottom sheet listing GET/POST/PUT/PATCH/DELETE/HEAD/OPTIONS
- Each row: method name in its hue (JetBrains Mono 15pt 700) + short description (Inter 12pt
#A6A6A6) - Selected row:
#2A2A2Abackground, leading orange check
Environment Variable Row
- Key (Mono 13pt
#74AEF6) + current value (Mono 13pt#E8E8E8), scope label (Inter 11pt#A6A6A6) {{variable}}tokens inside URL/body render in orange#FF6C37to show interpolation
Search Field
- Height: 38pt, leading magnifier 16pt
#6E6E6E,#212121, 1pt#3A3A3A, 8pt radius - Placeholder "Search collections"
#6E6E6E
Distinctive Components
Method-Colored URL Bar
- The atomic Postman element: a single pill+field+Send unit where the method's color is the first thing the eye reads.
Request → Response Split
- The screen is conceptually two halves: builder (top) and response (bottom). Sending animates the Send button into a spinner; the response slides up.
HTTP Method Color System
- The semantic core — see Color Palette. Consistent in URL bars, collection rows, history. Color is read before text.
Syntax-Highlighted JSON Viewer
- Pretty-printed, collapsible nodes (▸/▾), keys blue / strings green / numbers purple / punctuation dim. Copy + Raw + Preview toggle.
Collection Tree Row
- Folder/request hierarchy: leading method chip (for requests) or folder glyph, request name (Inter 15pt), trailing run/⋯. Nested rows indent 16pt per level.
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | URL truncates earlier; response pane shorter; key cell ~40% |
| iPhone 13/14/15 | 390pt | Standard single-column builder/response split |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in the compact top bar |
| iPhone 15/16 Pro Max | 430pt | More URL visible inline; taller response pane |
| iPad (portrait) | 768pt | Optional collection sidebar (~300pt) + detail |
| iPad (landscape) | 1024pt+ | 3-pane: collections, request builder, response side-by-side |
Dynamic Type
- Display, Title, Section, Body, Label, Meta: full scale
- Method pills, status chips, tab labels, JSON body, ≤12pt mono: FIXED (column-alignment-sensitive)
- URL/header Mono: scales up but stays monospace; columns stay aligned
Orientation
- All screens rotate
- iPhone landscape widens the URL bar and shows builder + response side-by-side
- iPad landscape adds the 3-pane console layout
Touch Targets
- Method pill: tappable, ≥40pt tall (full URL-bar height)
- Send button: ≥44pt tall
- Key-value cells: ≥40pt tall, full-cell tap to edit
- Tab strip items: ≥44pt hit, 13pt label
- Tab bar icons: 21pt glyph, 44pt hit
Safe Area Handling
- Top: compact top bar respects safe area + Dynamic Island
- Bottom: tab bar + home indicator respected; blurred bar floats over content
- Keyboard: the active key-value editor and URL field scroll above the keyboard; the response pane collapses to make room
- Sides: 14pt content inset on iPhone, paned layout on iPad
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-postman {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #161616;
--heading-color: #161616;
--link-color: #d23800;
--link-hover-color: #9f2a00;
--border-color: #d5d5d5;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(22,22,22,0.06);
--card-hover-shadow: 0 6px 18px rgba(22,22,22,0.12);
--header-bg: #161616;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #686868;
--button-bg: #ff6c37;
--button-text-color: #000000;
--button-hover-bg: #ff4704;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #161616;
--button-secondary-hover-bg: #e3e3e3;
--button-secondary-border: 1px solid #d5d5d5;
--prompt-bg: #f3f3f3;
--prompt-text-color: #161616;
--base-font: var(--font-inter);
--heading-font: var(--font-mono);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- resy 91.6%
- youtube music 87.1%
- chipotle 86.5%
- strong 85.9%
- marriott bonvoy 85.5%
Where this came from
- Source document
ios/design-md/misc/postman/DESIGN.md· 26.0 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.