Colour

The core is ink on paper with a government blue nobody uses. A country pack supplies the real primary, and the build checks every pair before it ships.

Official versus usable

A pack declares the exact national colours under official. One of them becomes the primary. If that colour fails 4.5:1 as text on paper or on the grey panel, the build darkens it in 1% steps, keeping the hue, until it passes. The flag stripe always keeps the exact official value.

Nigeria's green is 4.58:1 on white, which passes, and 4.13:1 on grey, which does not, so Nigerian buttons use a green a shade deeper than the flag. Senegal's is the same story. Kenya's and Ghana's pass as they are.

• --ag-color-primary
• --ag-color-primary-hover
• --ag-color-primary-tint
• --ag-color-accent

Swatches show the selected country pack. Change it in the bar at the top.

Text and surfaces

• --ag-color-ink
• --ag-color-ink-muted
• --ag-color-paper
• --ag-color-paper-alt
• --ag-color-border
• --ag-color-border-strong
• --ag-color-focus

Status

Each status colour passes as text on paper and on its own tint. Use them only with a word or an icon, never alone.

• --ag-color-success
• --ag-color-warning
• --ag-color-error
• --ag-color-info

Rules

• Never write a hex value in component CSS. The build test rejects literals outside the tokens layer.
• Links inside a tinted box use ink, not primary, because a primary is only guaranteed on paper and the grey panel.
• The accent colour is the country's second colour: Ghana's gold, Kenya's red. Never use it as text on the page. Use it as an edge on cards and key figures, or as an accent band, where the text is --ag-color-on-accent and the build checks the pair in every pack.
• The flag colours are used exactly as the country defines them, in the banner's flag and in the flag stripe. Nothing is ever written on them.
• Do not add a dark mode by inverting tokens. It has not been tested and the contrast gate does not cover it yet.