Design Elements · Color
Color
Color is how Proper Sky reads as Proper Sky before anyone reads a word. Six colors do all the work — a trustworthy blue, a teal that earns attention, and a near-black navy that anchors everything. Used with restraint, they make our work look like ours. Used loosely, they make it look like everyone else's. This page is the source of truth: the values, where each color belongs, and the contrast rules that keep it accessible.
Core palette
These six are the whole brand. White is the paper, Navy is the ink, Trust Blue is the voice, and Teal is the spike. Click any value to copy it.
Trust Blue
--ps-primary-blue
Headlines on white, links, primary buttons, and brand fills. The workhorse.
- Hex
- #257CA8
- RGB
- 37, 124, 168
- CMYK
- 78, 26, 0, 34
- Pantone
- 2390 C
Innovation Teal
--ps-secondary-teal
The lift on a CTA, a highlight, the one bright moment per fold. Never the field.
- Hex
- #40CAC3
- RGB
- 64, 202, 195
- CMYK
- 68, 0, 3, 21
- Pantone
- 3252 C
Professional Navy
--ps-navy
Primary text and dark surfaces — hero and footer grounds. Never pure black.
- Hex
- #0C0E16
- RGB
- 12, 14, 22
- CMYK
- 45, 36, 0, 91
- Pantone
- Black 6 C
Tertiary Dark
--ps-tertiary-dark
Lifted cards on dark, depth under Navy, and the readable text color on Teal.
- Hex
- #1A1C30
- RGB
- 26, 28, 48
- CMYK
- 46, 41, 0, 81
- Pantone
- 4146 C
Cloud Gray
--ps-cloud-gray
Light section bands, subtle contrast areas, table stripes. The quiet rest.
- Hex
- #EDF4F8
- RGB
- 237, 244, 248
- CMYK
- 5, 2, 0, 3
- Pantone
- 656 C
Pure White
--ps-white
The default ground. Most of every page is white — that's the point.
- Hex
- #FFFFFF
- RGB
- 255, 255, 255
- CMYK
- 0, 0, 0, 0
- Pantone
- None · paper
About the Pantone matches. These are nearest-match equivalents from the Pantone Solid Coated library — useful for spot-color print, signage, and merch where a process build won't hold. Hex and CMYK remain the source of truth; treat Pantone as a printer's reference, not a recolor. For uncoated stock, swap the C suffix for U (e.g. 2390 U) and pull a fresh swatch — uncoated paper shifts every match.
Tints & shades
Derived steps for UI work — borders, hovers, fills, stripes. Use these instead of inventing a new color. Keep brand moments on the core six; reach for the scales when product UI needs in-between values.
Trust Blue scale
Light fills & hovers through deep pressed states.
Innovation Teal scale
Soft accent grounds and badges through a deeper teal for small UI.
Ink & neutrals
Paper, soft bands, lines, and the text ramp down to Navy.
Watching for drift
You can't always match the palette exactly — but when you're designing, be careful. Use the value on the left; avoid the one on the right.
Section bands
Fix: fill bands with the solid token. Keep gradient washes off full-width light sections.
Light blue tint
Fix: apply the tint as a solid fill rather than clipping it from a gradient.
Soft teal ground
Fix: set the ground to the flat token; don't let it fade into white.
Proportion & usage
The mix is itself a brand signal — and it comes in two recipes, not one. Marketing & hero surfaces run dark and cinematic: a dark hero, CTA, and footer bracketing white midsections, with photography doing about a quarter of the work. Content & articles flip to a white field for easy reading, with one dark CTA at the foot. Across both, Trust Blue is the voice and teal is a spike you can count on one hand. Pick the recipe that fits the surface.
- Dark grounds carry the brand. Navy and dark photography are a primary surface — heroes, CTA bands, footers. Use dark boldly for the big moments, not as a single rest stop per page.
- White supports; content leads with it. On marketing pages white is the calm band between dark sections. On articles and long-form it's the field. It skews subtly cool — not pure white.
- Photography is a core ingredient — about a fifth of the canvas. Real people and workplaces, warm and natural light. Most heroes and CTAs sit on a photo under a navy-teal wash. No generic stock.
- Trust Blue is the voice. Headlines, links, buttons, and the gradient washes. Present, never the field.
- Teal is the spike. Roughly 2% on every page. One accent per fold. If a layout looks like a lot of teal, it's wrong.
One accent, one job
From the design-principles research: the failure worth guarding against isn't an ugly hue — it's color with no job. When the accent color means “look here” in one place, decoration in another, and a category in a third, it stops pointing at anything.
A fixed palette removes the decision, and ratio matters more than which colors you picked. The working split: roughly 60% neutral ground, 30% dark carrying the text, 10% accent doing the pointing.
Watch for: the accent doing three unrelated jobs, teal used as text (it fails 2.0 : 1 on white — see the contrast matrix below), and new colors invented per artifact. If a number is worth memorizing: 60 / 30 / 10.
Accessibility & contrast
Every text-on-color pairing has to clear WCAG AA (4.5:1) for body copy. Most of our palette clears it comfortably — but Teal is a trap for text. Pair it with Tertiary Dark, never white.
Approved combinations
Four pairings cover almost everything. Pick a ground, pick a voice, and stay there for the whole view.
Contrast matrix
Text color (rows) over background (columns), with WCAG ratio. Body copy needs AA (4.5:1); Teal only works as a ground under Tertiary Dark.
| on White#FFFFFF | on Navy#0C0E16 | on Trust Blue#257CA8 | on Teal#40CAC3 | on Cloud Gray#EDF4F8 | |
|---|---|---|---|---|---|
| Navy text | Aa19:1 | Aa9.7:1 | Aa17:1 | ||
| White text | Aa19:1 | Aa4.6:1 | Aa2.0:1 | ||
| Trust Blue text | Aa4.6:1 | Aa4.1:1 | |||
| Tertiary Dark text | Aa16:1 | Aa8.3:1 | Aa14:1 |
Do & Don't
Do
- Default to Navy text on white — it's the workhorse for nearly all copy.
- Use Trust Blue for headlines, links, and primary buttons.
- Treat Teal as the spike — one accent per fold, two per page max.
- Alternate white → Cloud Gray → white for section rhythm.
- Pair Teal grounds with Tertiary Dark text (8:1, holds AAA).
Don't
- Don't put white text on Teal — it fails contrast (2:1).
- Don't reach for pure black; Navy #0C0E16 is the darkest ink.
- Don't let Teal become a field — it's an accent, not a content wash.
- Don't introduce off-palette colors; derive from the tint scales instead.
- Don't gradient body copy — gradient text is display-only.