W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Postman
Postman is the API platform — request builder, collection runner, workspace collaboration, and API governance. The brand voice is developer-direct, warm, and tooling-confident: a saturated orange (#FF6C37) anchors the identity, a clean light canvas carries the marketing surface, and a deep "Postman Plum" inverts the product chrome for hero modules. Typography on the marketing site is the proprietary "degular" display sans paired with IBM Plex Mono for code; the brand is light-first.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/postman/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/postman/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Postman
Postman is the API platform — request builder, collection runner, workspace collaboration, and API governance. The brand voice is developer-direct, warm, and tooling-confident: a saturated orange (#FF6C37) anchors the identity, a clean light canvas carries the marketing surface, and a deep "Postman Plum" inverts the product chrome for hero modules. Typography on the marketing site is the proprietary "degular" display sans paired with IBM Plex Mono for code; the brand is light-first.
Tags: postman, api, developer-tools, orange, light-first
Atoms
Palette
Postman · [email protected] · Proprietary — All Rights Reserved
Postman's brand palette, captured from the live postman.com stylesheet where the design system exposes a fully named token set on :root (--demo-brand, --demo-content-, --demo-bg-, --demo-border-*). The brand reads as a single saturated orange primary (#FF6C37) against a clean light canvas, with secondary surface tints (a near-white #F9F9F9 and a step warmer #F2F2F2) and a dark "Postman Plum" #140B1E used as the product chrome inversion. Postman's brand is light-first on the marketing surface, dark-first on the product canvas.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Plus Jakarta Sans ([email protected]) |
OFL-1.1 | sans-serif |
body |
Plus Jakarta Sans ([email protected]) |
OFL-1.1 | sans-serif |
mono |
IBM Plex Mono ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
postman-orange |
Postman Orange | #FF6C37 |
postman-orange-pressed |
Postman Orange Pressed | #E0531F |
postman-orange-deep |
Postman Orange Deep | #D23F0E |
postman-orange-tint |
Postman Orange Tint | #FFF1EB |
postman-canvas |
Postman Canvas | #FFFFFF |
postman-surface |
Postman Surface | #F9F9F9 |
postman-surface-elevated |
Postman Surface Elevated | #F2F2F2 |
postman-border-subdued |
Postman Border Subdued | #F2F2F2 |
postman-border |
Postman Border | #EDEDED |
postman-border-strong |
Postman Border Strong | #E6E6E6 |
postman-ink |
Postman Ink | #212121 |
postman-ink-secondary |
Postman Ink Secondary | #6B6B6B |
postman-ink-tertiary |
Postman Ink Tertiary | #A6A6A6 |
postman-plum |
Postman Plum | #140B1E |
postman-success |
Postman Success | #007F31 |
postman-success-active |
Postman Success Active | #0CBB52 |
postman-warning |
Postman Warning | #AD7A03 |
postman-error |
Postman Error | #8E1A10 |
postman-purple |
Postman Purple | #4C207D |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
postman-canvas |
#FFFFFF |
surface |
postman-surface |
#F9F9F9 |
surface-elevated |
postman-surface-elevated |
#F2F2F2 |
text-primary |
postman-ink |
#212121 |
text-secondary |
postman-ink-secondary |
#6B6B6B |
text-tertiary |
postman-ink-tertiary |
#A6A6A6 |
primary |
postman-orange |
#FF6C37 |
primary-hover |
postman-orange-pressed |
#E0531F |
accent |
postman-orange |
#FF6C37 |
accent-hover |
postman-orange-pressed |
#E0531F |
success |
postman-success |
#007F31 |
warning |
postman-warning |
#AD7A03 |
error |
postman-error |
#8E1A10 |
border |
postman-border |
#EDEDED |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
postman-plum |
#140B1E |
surface |
postman-ink |
#212121 |
surface-elevated |
postman-ink-secondary |
#6B6B6B |
text-primary |
postman-canvas |
#FFFFFF |
text-secondary |
postman-surface-elevated |
#F2F2F2 |
text-tertiary |
postman-ink-tertiary |
#A6A6A6 |
primary |
postman-orange |
#FF6C37 |
primary-hover |
postman-orange-pressed |
#E0531F |
accent |
postman-orange |
#FF6C37 |
accent-hover |
postman-orange-pressed |
#E0531F |
success |
postman-success-active |
#0CBB52 |
warning |
postman-warning |
#AD7A03 |
error |
postman-error |
#8E1A10 |
border |
postman-ink-secondary |
#6B6B6B |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
postman-orange |
#FF6C37 |
on-identity |
postman-canvas |
#FFFFFF |
primary |
postman-orange |
#FF6C37 |
primary-hover |
postman-orange-pressed |
#E0531F |
accent |
postman-orange |
#FF6C37 |
accent-hover |
postman-orange-pressed |
#E0531F |
mark |
postman-orange |
#FF6C37 |
success |
postman-success |
#007F31 |
warning |
postman-warning |
#AD7A03 |
error |
postman-error |
#8E1A10 |
text-primary-light |
postman-ink |
#212121 |
text-primary-dark |
postman-canvas |
#FFFFFF |
background-light |
postman-canvas |
#FFFFFF |
background-dark |
postman-plum |
#140B1E |
surface-light |
postman-surface |
#F9F9F9 |
surface-dark |
postman-ink |
#212121 |
text-secondary-light |
postman-ink-secondary |
#6B6B6B |
text-tertiary-light |
postman-ink-tertiary |
#A6A6A6 |
border-light |
postman-border |
#EDEDED |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → roles.colors.primary
- allowed: postman-orange, postman-orange-pressed, postman-orange-deep
- forbidden: postman-purple, postman-success, postman-error, postman-ink
Postman Orange (#FF6C37) is the brand's single signature primary — exposed on the live site as --demo-brand and reinforced through every CTA, mark fill, and brand surface. The purple is a category accent; the greens / reds are state semantics; the ink is text. None of those may stand in for the brand primary.
colorChoice → roles.colors.mark
- allowed: postman-orange, postman-ink, postman-canvas
- forbidden: postman-orange-pressed, postman-purple, postman-success, postman-error
The Postman wordmark and the satellite-mark render in the signature Postman Orange on light surfaces, in Postman Ink monochrome on light surfaces, or in Postman Canvas (white) monochrome on dark surfaces. Pressed orange is a state, not a mark fill.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo
Postman's mark is a calibrated wordmark + satellite glyph. Stretching, rotating, gradient-filling, or recoloring breaks the developer-direct, tooling-confident voice the live brand surface establishes.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Postman Ink (#212121) on Postman Canvas (#FFFFFF) reads at ~16:1 — well above WCAG AA. The brand's documentation-heavy surface depends on holding that floor cleanly.
contextRestriction → roles.colors.warning
- forbiddenContexts: error-state, destructive-action, call-to-action
- allowedContexts: caution, rate-limit-warning, draft-state
Postman Warning (#AD7A03) is the amber caution tone — it must not stand in for the error red or the brand orange primary. Reusing the warning amber for destructive actions conflicts with the established state semantics on the live product UI.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Postman's canvas / ink combination starts well above AA; consumers must hold that floor when adapting the palette.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700
The live postman.com surface renders display headings at the 400–700 weight band on the proprietary degular face. The substitute Plus Jakarta Sans family carries the same range; heavier weights are not part of the published display set.
💡 recommendation (2)
compositionConstraint → roles.colors.primary
- pairsWith: postman-canvas, postman-ink, postman-plum, postman-orange-tint
- doesNotPairWith: postman-error, postman-warning, postman-purple
Postman Orange reads cleanest on the bright canvas, against deep ink text, on the plum dark canvas, or against its own pale tint. Pairing it adjacent to the warning amber, error red, or category purple introduces a chromatic conflict that breaks the calibrated one-accent voice of the brand.
fontPairing → typography.code
- requires:
prose - minSizeRatio:
0.875
Postman pairs degular display with IBM Plex Mono on the live marketing site (--demo-font + --demo-font-code). The mono reads cleanest at ~0.875× of the body size, preserving the developer-direct rhythm of inline-code-in-prose blocks.
Provenance
- Source: https://www.postman.com/
- License:
Proprietary — All Rights Reserved - Attribution: Postman and the Postman mark are trademarks of Postman, Inc. Visual identity captured from the deployed stylesheet on postman.com (--demo-brand, --demo-content-, --demo-bg-, --demo-font, --demo-font-code token families).
- Imported:
2026-05-19 - Notes: Derived from live site CSS at https://www.postman.com/ on 2026-05-19; no public brand guide located. The brand-guidelines URL at postman.com/company/brand-guidelines returned HTTP 404, so the live site is the authoritative source. The proprietary "degular" display sans is declared via @font-face on postman.com but is not publicly distributed; Plus Jakarta Sans is the closest open-source rendering substitute. IBM Plex Mono is the code face declared on the live site and is open-source.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Postman
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Postman
A clear hierarchy in Postman's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Postman
[email protected]font · heading
Plus Jakarta Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Plus Jakarta Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
IBM Plex Mono
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ postman-orange #FF6C37 accent-hover
→ postman-orange-pressed #E0531F background-dark
→ postman-plum #140B1E background-light
→ postman-canvas #FFFFFF border-light
→ postman-border #EDEDED error
→ postman-error #8E1A10 identity
→ postman-orange #FF6C37 mark
→ postman-orange #FF6C37 on-identity
→ postman-canvas #FFFFFF primary
→ postman-orange #FF6C37 primary-hover
→ postman-orange-pressed #E0531F success
→ postman-success #007F31 surface-dark
→ postman-ink #212121 surface-light
→ postman-surface #F9F9F9 text-primary-dark
→ postman-canvas #FFFFFF text-primary-light
→ postman-ink #212121 text-secondary-light
→ postman-ink-secondary #6B6B6B text-tertiary-light
→ postman-ink-tertiary #A6A6A6 warning
→ postman-warning #AD7A03 Typography
code
→ mono IBM Plex Mono display
→ heading Plus Jakarta Sans prose
→ body Plus Jakarta Sans Palette mode mappings (from postman)
Light mode (14 roles)
accent
→ postman-orange accent-hover
→ postman-orange-pressed background
→ postman-canvas border
→ postman-border error
→ postman-error primary
→ postman-orange primary-hover
→ postman-orange-pressed success
→ postman-success surface
→ postman-surface surface-elevated
→ postman-surface-elevated text-primary
→ postman-ink text-secondary
→ postman-ink-secondary text-tertiary
→ postman-ink-tertiary warning
→ postman-warning Dark mode (14 roles)
accent
→ postman-orange accent-hover
→ postman-orange-pressed background
→ postman-plum border
→ postman-ink-secondary error
→ postman-error primary
→ postman-orange primary-hover
→ postman-orange-pressed success
→ postman-success-active surface
→ postman-ink surface-elevated
→ postman-ink-secondary text-primary
→ postman-canvas text-secondary
→ postman-surface-elevated text-tertiary
→ postman-ink-tertiary warning
→ postman-warning Rules (9 typed constraints)
error · 6 rules
colorChoice roles.colors.primary allowed postman-orange, postman-orange-pressed, postman-orange-deep forbidden postman-purple, postman-success, postman-error, postman-ink Postman Orange (#FF6C37) is the brand's single signature primary — exposed on the live site as --demo-brand and reinforced through every CTA, mark fill, and brand surface. The purple is a category accent; the greens / reds are state semantics; the ink is text. None of those may stand in for the brand primary.
colorChoice roles.colors.mark allowed postman-orange, postman-ink, postman-canvas forbidden postman-orange-pressed, postman-purple, postman-success, postman-error The Postman wordmark and the satellite-mark render in the signature Postman Orange on light surfaces, in Postman Ink monochrome on light surfaces, or in Postman Canvas (white) monochrome on dark surfaces. Pressed orange is a state, not a mark fill.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo Postman's mark is a calibrated wordmark + satellite glyph. Stretching, rotating, gradient-filling, or recoloring breaks the developer-direct, tooling-confident voice the live brand surface establishes.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Postman Ink (#212121) on Postman Canvas (#FFFFFF) reads at ~16:1 — well above WCAG AA. The brand's documentation-heavy surface depends on holding that floor cleanly.
contextRestriction roles.colors.warning forbiddenContexts error-state, destructive-action, call-to-action allowedContexts caution, rate-limit-warning, draft-state Postman Warning (#AD7A03) is the amber caution tone — it must not stand in for the error red or the brand orange primary. Reusing the warning amber for destructive actions conflicts with the established state semantics on the live product UI.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Postman's canvas / ink combination starts well above AA; consumers must hold that floor when adapting the palette.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700 The live postman.com surface renders display headings at the 400–700 weight band on the proprietary degular face. The substitute Plus Jakarta Sans family carries the same range; heavier weights are not part of the published display set.
recommendation · 2 rules
compositionConstraint roles.colors.primary pairsWith postman-canvas, postman-ink, postman-plum, postman-orange-tint doesNotPairWith postman-error, postman-warning, postman-purple Postman Orange reads cleanest on the bright canvas, against deep ink text, on the plum dark canvas, or against its own pale tint. Pairing it adjacent to the warning amber, error red, or category purple introduces a chromatic conflict that breaks the calibrated one-accent voice of the brand.
fontPairing typography.code requires prose minSizeRatio 0.875 Postman pairs degular display with IBM Plex Mono on the live marketing site (--demo-font + --demo-font-code). The mono reads cleanest at ~0.875× of the body size, preserving the developer-direct rhythm of inline-code-in-prose blocks.
Provenance
- Source
- https://www.postman.com/
- License
Proprietary — All Rights Reserved- Attribution
- Postman and the Postman mark are trademarks of Postman, Inc. Visual identity captured from the deployed stylesheet on postman.com (--demo-brand, --demo-content-*, --demo-bg-*, --demo-font, --demo-font-code token families).
- Imported
2026-05-19- Notes
- Derived from live site CSS at https://www.postman.com/ on 2026-05-19; no public brand guide located. The brand-guidelines URL at postman.com/company/brand-guidelines returned HTTP 404, so the live site is the authoritative source. The proprietary "degular" display sans is declared via @font-face on postman.com but is not publicly distributed; Plus Jakarta Sans is the closest open-source rendering substitute. IBM Plex Mono is the code face declared on the live site and is open-source.