Six confirmed brand colors anchored on Graphite, with cool neutrals doing most of the work and two accents — High Voltage and Prussian — used sparingly. The system reads industrial, calm, and Nordic.
01 · The palette
Six core colors
Graphite leads, neutrals carry the system, blue carries data and links, accents carry emphasis. Don't add a seventh.
01
Graphite
Primary brand. Ink, surfaces, marks.
#262A2E
02
Baltic
#5F7998
03
Steel
#A7ADB3
04
Mist
#DDDDDD
05
Paper
#EDEDED
06
White
#FFFFFF
02 · Accents
Two accents, used sparingly
Accents earn their place. High Voltage for emphasis, action, and warmth. Prussian for highlights and decorative data. If a page has both, something is wrong.
Accent · Warm
High Voltage
#F09260 · --accent-terra
Use for emphasis, primary calls-to-action on dark, decorative rules, the active-state dot. Never for body copy.
Accent · Cool
Prussian
#A6CAF9 · --accent-sky
Use for chart highlights, secondary tags, and decorative passages on dark. Never structural.
03 · Tonal scales
Ten steps, six families
Each core color has a 10-step ramp from 10 (lightest) to 100 (deepest). Use scales for state, hierarchy, and data — not the brand swatches.
Graphite
Primary · Cool gray
CORE · 80
--deep-*
10EEF0F2
20D6DADE
30B3B9C0
408A9099
50646B74
60474D54
70262A2E
80262A2ECORE
90181B1E
1000B0D0F
Baltic
Secondary · Cool blue
CORE · 60
--baltic-*
10EEF2F7
20D4DDE8
30B3C1D3
4092A3BB
507689A6
605F7998CORE
704D637E
803A4D63
90283648
10015202C
Steel
Neutrals · Cool gray
CORE · 40
--steel-*
10F5F6F7
20EDEDEDPAPER
30DDDDDDMIST
40A7ADB3CORE
50888E95
606B7177
7050555A
80383C40
90262A2E
1000B0D0F
High Voltage
Accent · Warm
CORE · 50
--terra-*
10FDEEE4
20FBD6BF
30F7BB98
40F3A67C
50F09260CORE
60CB754A
70A25B39
8076422A
904A291A
10020120B
Prussian
Accent · Cool
CORE · 40
--sky-*
10F3F8FE
20DCEAF9
30C5DBF6
40A6CAF9CORE
508AB1E3
606E95CB
7054799F
803C5A78
90253A52
10011202F
04 · Roles
Semantic bindings
Use the semantic tokens, not the raw brand names. Surfaces, ink, rules, and accents each have a job.
--bg · Default ground
#FFFFFF
Page background. White, always.
--bg-paper · Cards, callouts
#EDEDED
Surface inside grids. The "off-white".
--bg-deep · Dark surface
#262A2E
Hero stages, dark mode ground.
--ink · Body
#262A2E
All body text on light. Never pure black.
--ink-muted · Secondary
#6B7177
Captions, deck, metadata.
--ink-faint · Tertiary
#888E95
Eyebrows, mono labels, scaffolding.
--rule · Divider
rgba(38,42,46,0.14)
All 1px lines. Never a shadow.
--accent · Emphasis
#F09260
Active dot, hover, in-text emphasis.
05 · Pairings
Approved combinations
The five pairings that ship. Anything else is off-system and needs sign-off.
01 · Default dark
White on Graphite
The default for hero stages, dark mode, decks, datasheet covers.
Graphite #262A2E · White #FFFRatio 14.5 : 1
02 · Default light
Graphite on Paper
The default for body text, documentation, marketing pages.
Paper #EDEDED · Graphite #262A2ERatio 12.3 : 1
03 · Emphasis on dark
High Voltage on Graphite
The brand-moment pairing. Reserved for accents on hero surfaces.
Graphite #262A2E · High Voltage #F09260Ratio 6.2 : 1
04 · Data & links
White on Baltic
Charts, data callouts, link surfaces, secondary CTAs.
Baltic #5F7998 · White #FFFRatio 4.49 : 1
05 · Quiet panel
Graphite on Mist
Sidebars, callouts, footnotes — when Paper is too soft and White too bright.
Mist #DDDDDD · Graphite #262A2ERatio 10.6 : 1
06 · Accessibility
Contrast matrix
Body copy targets WCAG AA (4.5:1). Large display targets AA Large (3.0:1). Never put body in any combination scoring below 4.5. For colored text on light grounds use the darker text steps — --accent-terra-text (terra-70) and baltic-70 — the core hues are surface and accent colors, not inks.
Foreground · ink
on White
on Paper
on Mist
on Graphite
Graphite · #262A2E
14.5 ✓ AAA
12.3 ✓ AAA
10.6 ✓ AAA
— body
Baltic · #5F7998
4.49 — AA Large¹
3.8 — AA Large
3.3 — AA Large
3.2 — display only
Baltic-70 · #4D637E
6.2 ✓ AA
5.3 ✓ AA
4.6 ✓ AA
2.3 ✗
Steel · #A7ADB3
2.3 ✗
1.9 ✗
1.7 ✗
6.4 ✓ AA
High Voltage · #F09260
2.3 ✗ body
2.0 ✗ body
1.7 ✗ body
6.2 ✓ AA
Terra-70 · #A25B39
5.1 ✓ AA
4.4 — AA Large
3.8 — AA Large
2.8 ✗
White · #FFFFFF
— ground
1.2 ✗
1.4 ✗
14.5 ✓ AAA
¹ Baltic misses body AA on white by a hair (4.49 vs 4.50). Treat core Baltic as a surface, accent, and large-text color; for Baltic-toned running text use baltic-70. Ratios computed per WCAG 2.1 relative luminance.
07 · Don't
Off-system color
If your design needs one of these, the design is wrong.
Aa
× Brand gradientsThe system uses flat color and 1px rules. No gradients on brand surfaces. One functional exception: legibility scrims over photo and video, spec’d in Photography.
Aa
× Off-palette accentsReach for High Voltage or Prussian. New accents require sign-off.
Aa
× High Voltage body copyFails AA on every light surface. Reserve for emphasis on dark only.
Aa
× Baltic on Graphite as textDrops below 3.3:1. Use white or High Voltage on dark.
Aa
× Steel as inkSteel is a surface and divider color, not a typographic ink. Use ink-muted instead.
Aa
× Two accents in one compositionIf you need both, you're decorating. Pick one.