Skip to content

Colors

NameHexRGBUse
Jet#0A0A0C10/10/12Primary surface. Brand backgrounds, product casings, gear.
Graphite#1F222631/34/38Secondary dark. UI chrome, elevated surfaces in dark mode.
Steel#3A3F4558/63/69Tertiary dark. Dividers, borders, muted type on dark.
Signal#FF4A1C255/74/28The accent. Status lights, go-buttons, active states. Sparingly.
Cream#F2EFE8242/239/232Inverse surface. Type on dark. Light-mode backgrounds.
Fog#9CA0A6156/160/166Neutral grey. Metadata, captions, secondary type.
NameHexUse
Armed#3DB273Cue armed / track locked / system ready.
Warn#E6B54ASoft warning / pending state / stale deck.
Halt#C03A3APanic / error / destructive action.
Signal#FF4A1CActive brand accent. Only one per view.
NameHexUse
Paper#F6F5F1App background.
Ink#111318Primary type.
Slate#2B2F36Surface-2 on dark-mode app.
Cyan#6AD5D3Interactive accent, links, focus rings.
Ember#E66A3ESecondary accent / highlights.

On any brand surface:

  • 70% Jet + Cream foundation
  • 20% Graphite / Steel / Fog midtones
  • 10% Signal
  • Brand / marketing — Jet bg · Cream type · Signal accent
  • App UI / light — Paper bg · Ink type · Cyan interactive
  • App UI / dark — Slate bg · Cream type · Cyan interactive
  • Hero moments — Paper or Jet · Signal accent
  • All primary type/background pairings clear WCAG AA at 16px body (4.5:1) and AAA at 24px+ display (7:1).
  • Signal on Jet = AAA.
  • Fog on Paper = AA at 16px only. Never set body type in Fog on Cream.

Palette tokens are the machine-readable source. Edit helm-palette.json and re-export; never hand-edit the derivative files.