Brand / Color System
Color System Guidelines

Color that
builds identity.

Our color system is the foundation of how Postman communicates visually. From our hero orange to supporting ranges across orange, purple, magenta, yellow, blue, and neutrals. Every value is intentional, built for consistency across digital, web, print, and beyond.

O: 00
O: 20 · Apricot
O: 40 · Carrot
Postman Orange
O: 70
O: 100
M: 60 · Core Pink
M: 80
P: 00
P: 40 · Soft Purple
Purple
P: 90 · Dark Purple
P: 110
Foundation

Core Colors

Postman Orange, Purple, White, and Black come together to create a bold, balanced palette that's full of energy and imagination. Together, these colors express our brand as modern, welcoming, and full of potential.

Hero Color
Postman Orange
#FF6C37
Our hero color, bringing warmth, creativity, and instant recognition to every touchpoint.
Purple
#7A24F0
Adds a sense of innovation and curiosity, pushing our brand and AI work forward.
White
#FFFFFF
Keeps everything clean and open. A fresh, versatile backdrop.
Black
#000000
Adds contrast and sophistication, grounding the palette.
Core Color Range

Orange Tints & Shades

Tints and shades of Postman Orange extend our hero color into a versatile range that reinforces brand recognition and creates visual cohesion across every touchpoint.

O: 00
O: 10
O: 20
O: 30
O: 40
O: 50
O: 60
O: 70
O: 80
O: 90
O: 100
O: 110
Tint ←O: 60→ Shade
O: 00 · Bright Orange
#FFFBF7
O: 10
#FFF2EB
O: 20 · Apricot
#FFD7C7
O: 30
#FFBCA3
O: 40 · Carrot
#FFA17F
O: 50
#FF875B
O: 60 · Postman Orange
#FF6C37
O: 70
#E0531F
O: 80
#B03C12
O: 90
#822A0D
O: 100
#4A1706
O: 110
#210702
AI Color Range

Purple Tints & Shades

Purple defines our AI visual identity: bold, innovative, and unmistakable. Its tints and shades bring depth, hierarchy, and emphasis to illustrations, creating visuals that are dynamic and aligned with brand standards.

P: 00
P: 10
P: 20
P: 30
P: 40
P: 50
P: 60
P: 70
P: 80
P: 90
P: 100
P: 110
Tint ←P: 60→ Shade
P: 00 · Bright Purple
#FAF7FF
P: 10
#F3EBFF
P: 20 · Blog Purple
#E3D2FA
P: 30
#CDAFF7
P: 40 · Soft Purple
#B387F5
P: 50
#9455F2
P: 60 · Purple
#7A24F0
P: 70
#5E1DC0
P: 80 · Space Purple
#491591
P: 90 · Dark Purple
#3A0F73
P: 100
#2A0852
P: 110
#18032E
Achromatic Range

Neutrals

Our achromatic neutrals span 13 values, providing a versatile and balanced base that works across all Postman brand initiatives.

N: 00
N: 05
N: 10
N: 20
N: 30
N: 40
N: 50
N: 60
N: 70
N: 80
N: 90
N: 100
Tint ←Silver · Smoke · Stone · Graphite→ Shade
N: 00 · Bright Gray
#F9F8F7
N: 05
#E6E6E6
N: 10
#CFCFCF
N: 20 · Silver
#CFCFCF
N: 30
#B8B8B8
N: 40 · Smoke
#A1A1A1
N: 50
#8A8A8A
N: 60 · Stone
#737373
N: 70
#5C5C5C
N: 80 · Graphite
#454545
N: 90
#2E2E2E
N: 100
#1F1F1F
N: 110
#121212
Color Range

Magenta Tints & Shades

Our magenta range offers five values: one core tone with two tints and two shades. Forming an analogous palette with orange and purple, it serves as a natural transition and effective accent color across brand applications.

M: 10
M: 30
M: 60
M: 80
M: 110
Tint ←M: 60→ Shade
M: 10
#FEF1FD
M: 30
#FFCCFC
M: 60 · Core Pink
#F37FFE
M: 80
#993A90
M: 110
#2B0121
Legacy & Accents

Accent Colors

Legacy colors from our previous palette help bridge the transition to our new color system, ensuring older assets remain visually connected and consistent. As accent colors, they add purposeful pops of color to assets, creating contrast and visual interest.

Content Secondary
#6B6B6B
Stroke Brown
#3A3836
Flora Green
#A4EEC4
Rusty Red
#FF8980
Blog BG Teal 20
#D0F9FD
Planet Purple
#D1DAFA
Sky Blue
#ADCDFB
Enterprise Purple
#6F2CBA
Color Range

Blue Tints & Shades

Values from our blue palette can be used in illustrations to introduce balance and visual contrast. Tints and shades should be applied purposefully to highlight supporting elements and enhance compositions.

B: 10
B: 20
B: 30
B: 40
B: 50
B: 60
B: 70
B: 80
B: 90
B: 100
Tint ←B: 40→ Shade
B: 10
#E5F4FF
B: 20 · Soft Blue
#CCE7FF
B: 30
#ABD6FF
B: 40 · Sky Blue
#80C1FF
B: 50
#42A4FF
B: 60 · Azure
#198CF7
B: 70
#026DD2
B: 80 · Cobalt
#0352A1
B: 90
#023B73
B: 100
#01274A
Color Range

Yellow Tints & Shades

Yellow tints and shades serve as dynamic extensions of our core orange, enriching its vibrancy and depth. Tints of yellow introduce lighter, sunlit variations that evoke warmth, optimism, and energy, enhancing brand friendliness and approachability.

Y: 10
Y: 20
Y: 30
Y: 40
Y: 50
Y: 60
Y: 70
Y: 80
Y: 90
Y: 100
Tint ←Y: 40→ Shade
Y: 10
#FFF9E0
Y: 20
#FFF0BD
Y: 30
#FFE396
Y: 40 · Elemental Yellow
#FFD875
Y: 50
#FFC642
Y: 60 · Gold
#FFA90A
Y: 70
#BF7600
Y: 80
#8C5600
Y: 90
#663C00
Y: 100
#4A2500
Application

Gradients

Smooth gradients are used sparingly to add depth and dimension. We keep transitions clean and harmonious, always avoiding muddy combinations to maintain clarity across our visuals.

Postman Gradient
#FFA90A → #FF6C37
Soft Gradient
#FFE396 → #FF875B
Warm Gradient
#F3EBFF → #CDAFF7
Light Gradient
#FFF2EB → #F3EBFF
Dawn Gradient
#F37FFE → #FF6C37
Core Gradient
#FF6C37 → #7A24F0
AI Gradient
#7A24F0 → #000000
Glow Gradient
#E0531F → #000000
Lilac Gradient
#F3EBFF → #CDAFF7
v12 Gradient
#E0531F → #3A0F73 → #000000
Application

Color in Use

Colors from our palette can be applied in different ways to transform the image and narrative. Accent or pops of color help draw focus to certain elements within the scene.

Drag to explore
Orange (Light)
Orange (Light)
Orange (Dark)
Magenta
Purple (Light)
Purple (Dark)
Playful
Interactive Tool

Gradient Builder

Test how brand palette colors work together as gradients. Select a stop, pick a color from the palette, adjust positions, and copy the CSS when you find a combination you like.

Direction
Color Stops
CSS Output
WCAG Compliance

Accessibility Checker

Pick a background and foreground color from the brand palette to instantly check their contrast ratio against WCAG AA and AAA standards. Applies to typographic usage only, not icons or illustrations.

Aa
The quick brown fox jumps over the lazy dog.
Background
#FF6C37 O: 60 · Postman Orange
Text Color
#000000 Black
AA requires 4.5:1 for normal text · 3:1 for large text (18pt+ or 14pt bold). AAA requires 7:1.
More Info

Explore the Color System

Full usage guidelines, component tokens, and design documentation live in Figma.

Open in Figma
Proprietary values redacted