Tone Shift — How One Number Defines Your Entire UI Color System

Design tokens are how teams formalize color decisions. text-primary: blue-900. border-subtle: blue-200. surface-hover: blue-100. Someone decided those values. Someone else disagreed. You shipped it and moved on.

Six months later, the palette is updated. Every token needs re-evaluation. The decisions that were made by eye need to be remade by eye.

There is a different approach.

What You Already Have

After measuring a palette, you have two numbers:

• N — the number of shades (e.g., 12)
• K — the contrast span — minimum steps for WCAG AA contrast (e.g., 5)

From K, every semantic role follows from arithmetic:

Role	Distance from surface	Why
Text	±K	Minimum distance for readable body text
Border	±⌊K/3⌋	Visible but not dominant — decorative contrast
Hover	±1	Perceptible change, one step away
Selected	±⌊2K/3⌋	Between border and text — clearly active

For K=6:

Role	Steps
Text	±6
Border	±2
Hover	±1
Selected	±4

No decisions. No opinions. The relationships are determined by the palette's own contrast structure.

The Tone Formula

A complete surface-role system follows this formula:

T = C_surface + S_zone × I_delta

• C_surface — the shade index of the background surface (e.g., shade 2 for a light background)
• S_zone — direction: +1 for light surfaces (go darker), −1 for dark surfaces (go lighter)
• I_delta — K, K/3, 1, or 2K/3 depending on the role

For a light surface at shade index 2, K=6:

Role	Index	Shade
Surface	2	blue-2
Text	2 + 6 = 8	blue-8
Border	2 + 2 = 4	blue-4
Hover	2 + 1 = 3	blue-3
Selected	2 + 4 = 6	blue-6

For a dark surface at shade index 10, K=6:

Role	Index	Shade
Surface	10	blue-10
Text	10 − 6 = 4	blue-4
Border	10 − 2 = 8	blue-8
Hover	10 − 1 = 9	blue-9
Selected	10 − 4 = 6	blue-6

Every surface in the palette — light or dark — gets a full set of roles. No manual assignments. The math determines what works.

What This Replaces

Most design systems define tokens by hand:

• Text on blue-50 background → blue-900
• Text on blue-900 background → blue-50
• Border on blue-50 → blue-200
• Border on blue-900 → blue-700

These are all approximations of K-derived roles — arrived at by eye and encoded as one-off decisions. When the palette changes, they all need updating.

With tone shift, the token system is derived. Change the palette, K is recomputed, all roles update automatically. Dark mode is not a separate system — it's the same formula with S_zone = −1.

The Tone Reference Grid

The Tone Reference grid in Chromametry shows this complete matrix:

• Rows: every surface (light region top, dark region bottom)
• Columns: surface, text, border, hover, selected
• Each cell: the derived shade for that role on that surface

Every cell is computed from K. The grid is a visualization of the entire derived token system — for every surface simultaneously.

→ Open the Generator and see the Tone Reference for your palette