Colour
The palette is deliberately narrow: a neutral grey ramp carries the interface, and a single brand red carries the signal. Every colour in the system is a variable in the Color collection, named by role rather than by hue.
Global background
Five background steps. Steps 1–4 are a tight light ramp: step 1 is the page, step 2 a resting surface, step 4 a placeholder or disabled fill — only 26 points of lightness separate them.
Step 5 is not part of that ramp. At #0a0a0a it is near-black, used for dark surfaces such as the social card’s Follow button. Reading the set as a smooth progression will mislead you.
Each step has a Rest and a
Hover variant. Use the hover variant only on surfaces that
are themselves interactive.
Global foreground
Foreground is not black. Foreground/1 is #2e2e2e, which
keeps long-form text comfortable on white without losing authority.
Foreground/On brand is the only foreground permitted
on brand red or on foreground 1.
Brand
Brand/background/1/Rest is #a30000. It marks the primary
action, the active navigation indicator and nothing else by default.
Because it is a signal, its density matters more than its placement. One red element per view is the working rule.
Contrast and pairing
The permitted pairings below all meet WCAG AA for body text. Brand red on white reaches 8.6:1; white on brand red reaches the same, which is why both directions are allowed.
Foreground 3 at #616161 on white reaches 6.0:1, so it clears AA for body text as well as for captions and metadata. It is a de-emphasis colour by intent, not by necessity.