Teal anchors. Navy carries authority. Neutrals carry the rest.
The DTTT palette is built from one anchor (teal #00857C) and one authority colour (navy #0F2044). Every other colour is either a tint of those two or a semantic role drawn from a fixed neutral scale. The system does not invite new hues.
Two colours do most of the work.
Teal is the movement colour: accents, highlights, active states, calls to action, links, the headline numbers in a statistic. Navy is the authority colour: dashboard ground, document headers, footers, document covers. Together they carry roughly 70% of the visual weight of any DTTT output.
What each colour is for.
Roles are bound to tokens, not to specific hex values. When the visual register switches from light to dark, the same role token resolves to a different hex. Author components against roles, never against raw colour.
--bg — Page ground (light: #F7F8FA · dark: #0B1C2E)The colour behind everything else. Holds layout breathing room.--surface — Card and panel surface (light: #FFFFFF · dark: #0F2044)Where content lives. Components default to this.--surface-alt — Section heads, table heads, navy washesUsed to distinguish a region without a hard rule.--ink — Primary text (light: #0F2044 · dark: #FFFFFF)Headings, body emphasis, table values.--ink-soft — Secondary textBody prose, descriptions, meta values.--accent — Brand accentActive borders, dots, focus rings, decorative ticks.--accent-ink — Link & eyebrow textWhere teal needs to read as type, not as a chip.If you find yourself reaching for a teal text colour, use --accent-ink,
not --accent. The brand teal hits 4.5:1 contrast on white only at
this darker stop. Components that drift to the bright teal for type fail accessibility.
The eight model colours, imported as-is.
The AI Transparency Framework's eight models each carry a colour. Those colours are imported into this system as the canonical categorical palette for data visualisation, charts, model badges, and any time work needs to be tagged by which framework area it sits within.
Tokens follow the pattern --atf-{model}, e.g. --atf-environmental.
When a chart represents framework data, draw categorical series in this exact order
(Transparency first); when it represents non-framework data, use the categorical
palette but treat the order as arbitrary.
Two scales, no third.
For any continuous data, use one of these. The system deliberately offers only two scales — sequential teal (for magnitude on a single dimension) and diverging navy↔amber (for movement above or below a baseline). If neither fits, the data probably wants categorical treatment.
Green, amber, red — and the R/B/T pattern.
State colours are reserved for state. They do not decorate. The Rose / Bud / Thorn pattern that recurs across DTTT advisory work uses these same three hues, with stable role assignments that never shift between engagements.
| Token | Role | Hex | Soft | R/B/T mapping |
|---|---|---|---|---|
--green | Done · Working · Positive | #1A7A4A | #E6F4ED | Rose — what is working |
--amber | Pending · Becoming · Caution | #925A00 | #FEF3E2 | Bud — what could become |
--red | Blocked · Risk · Negative | #B0322B | #FBE9E7 | Thorn — what is blocking |
--info | Informational · Note | #1F6FBA | #E8F0FA | — |
Contrast minimums, enforced.
| Pairing | Ratio | WCAG | Use |
|---|---|---|---|
| Navy on White | 15.2:1 | AAA | All headings and body on light surfaces. |
| Teal Deep (#006B63) on White | 5.4:1 | AA | All teal text. Use this stop for type. |
| Teal (#00857C) on White | 3.6:1 | AA Large only | Large display only (≥18pt bold or ≥24pt regular). Never body. |
| White on Navy | 15.2:1 | AAA | Dark register body text. |
| Teal on Navy Deep | 4.8:1 | AA | Dark register accents. |
Components that fail these minimums are bugs in the system. Report them with a changelog entry, not by overriding the token.
Use teal as an accent on a navy or white surface. Use navy as ground only when the output is a dashboard or document cover.
Pair the soft tints with their full-weight equivalents (e.g. teal soft background + teal deep text).
Don't use bright teal #00857C for body text on white — it fails accessibility. Use teal deep #006B63 instead.
Don't introduce new hues. The categorical palette is the AI Transparency Framework colours; if a chart needs more series, redesign the chart.