Collection detail

Transit Authority

Check these colors together: contrast, harmony, color-blind view →Tap a color to copy its HEX

The palette of public transit: cerulean line colors, amber warnings, emergency red, and the cool grays of concrete and infrastructure. Designed for maximum legibility at distance and under varied lighting conditions.

Transit Authority draws from a century of public navigation design: the high saturation colors used by metro systems worldwide to ensure unambiguous line identification at a glance. These colors were not chosen for beauty but for maximum discrimination under fluorescent lighting, at distance, and in peripheral vision. As a design palette, they bring an authoritative, utility-forward energy to interface, wayfinding, and technical communication work.

NavigationSignageUI

Why this set works

High-contrast navigation colors drawn from the world's great metro systems — for signage, maps, and wayfinding design.

Wayfinding and signage design

Maps and navigation interfaces

Technical and utility-focused UI

Prompt words

transit map design in high-contrast metro line colorswayfinding system in municipal blue, amber, and redtechnical interface palette in high-saturation navigation colors

Export ready

1. Cerulean Core Vivid #20B7D5
2. Amber Core Vivid #D5B720
3. Ember Core Vivid #D55C20
4. Emerald Core Vivid #20D520
5. Cool Gray Core #737A82
6. Cool Gray Ink #222426

:root {
  --transit-authority-1: #20B7D5;
  --transit-authority-2: #D5B720;
  --transit-authority-3: #D55C20;
  --transit-authority-4: #20D520;
  --transit-authority-5: #737A82;
  --transit-authority-6: #222426;
}

Palette

Each swatch links back to its individual archive detail page.

Back to collections

Cerulean Core Vivid

#20B7D5

Blue · hsl(190, 74%, 48%)

Amber Core Vivid

#D5B720

Yellow · hsl(50, 74%, 48%)

Ember Core Vivid

#D55C20

Orange · hsl(20, 74%, 48%)

Emerald Core Vivid

#20D520

Green · hsl(120, 74%, 48%)

Cool Gray Core

#737A82

Blue · hsl(210, 6%, 48%)

Cool Gray Ink

#222426

Blue · hsl(210, 6%, 14%)

More collections like this

Browse collections →

Take this palette further

Ready-made tokens for Transit Authority

Copy the HEX, CSS and Tailwind on this page any time. The ZIP and dark-mode tokens count toward the free 3 exports a day (10 when signed in); Pro removes that cap on every export, including Figma tokens and Procreate swatches in the palette builder.

Upgrade to Pro Browse collections

Upgrade path

From collection to Pro

This collection proves the taste and color direction. Pro removes the daily export cap on every token format, so the palette can move from reference to implementation without rationing.

Layer	What you have here	What Pro adds
Scope	One curated palette of 6 colors.	The same palettes, with no daily export cap anywhere on the site.
Output	HEX, CSS and Tailwind to copy any time. The ZIP and dark-mode tokens count toward the site's free exports: 3 a day, 10 when signed in.	No daily limit on any export: this ZIP (CSS, Tailwind, JSON, SCSS), the dark-mode tokens, and Figma tokens and Procreate swatches in the palette builder.
Use case	Direction finding, inspiration, and public proof.	Real project handoff, implementation, and reusable production assets.

Transit Authority

NavigationSignageUI

Layer

What you have here

What Pro adds

Scope

One curated palette of 6 colors.

The same palettes, with no daily export cap anywhere on the site.

Output

HEX, CSS and Tailwind to copy any time. The ZIP and dark-mode tokens count toward the site's free exports: 3 a day, 10 when signed in.

No daily limit on any export: this ZIP (CSS, Tailwind, JSON, SCSS), the dark-mode tokens, and Figma tokens and Procreate swatches in the palette builder.

Use case

Direction finding, inspiration, and public proof.

Real project handoff, implementation, and reusable production assets.