Status colours

Lint findings, a failed build, the checks of a pull request and the counts of the summary line need colours people read at a glance. DTA Drafting Table has three status colours for them: success, warning and error. They add to what is already there, a marker shape and a word; they never replace it.

The tokens

Each status has three semantic tokens per theme (TICKET-120), built with dta build from site/tokens like every other token:

Token	For
status-<s>-text	The words and counts: “passed”, “2 warnings”, “failed”, “3 errors”. 7:1 on bg-canvas, bg-surface, bg-subtle and its own subtle tint.
status-<s>-marker	The marker shape and the outline of a status banner. Non-text: 3:1 on the same four grounds. Never for text.
status-<s>-subtle	The tint of a status chip or banner. Text on it is that status’s text.

The primitives behind them are sage (success, which was there before), ochre (warning) and crimson (error); see Colours. The values, with the lowest contrast each one reaches on its grounds, computed from the token files:

Light

• successpassed

  status-success-text

  #27512f → sage.700

  text, lowest 7.19:1 on bg-subtle

  status-success-marker

  #3c7646 → sage.600

  non-text, lowest 4.28:1 on bg-subtle

  status-success-subtle

  #e1eee2 → sage.100

• warning2 warnings

  status-warning-text

  #5e3f00 → ochre.700

  text, lowest 7.58:1 on bg-subtle

  status-warning-marker

  #7d5a00 → ochre.600

  non-text, lowest 4.97:1 on bg-subtle

  status-warning-subtle

  #faecc8 → ochre.100

• error3 errors

  status-error-text

  #8c151c → crimson.700

  text, lowest 7.40:1 on bg-subtle

  status-error-marker

  #c42b30 → crimson.600

  non-text, lowest 4.44:1 on bg-subtle

  status-error-subtle

  #fde4e1 → crimson.100

Graphite

• successpassed

  status-success-text

  #9ad3a2 → sage.300

  text, lowest 8.73:1 on status-success-subtle

  status-success-marker

  #7fb887 → sage.400

  non-text, lowest 6.51:1 on status-success-subtle

  status-success-subtle

  #1c2a1e → sage.950

• warning2 warnings

  status-warning-text

  #f2d08a → ochre.300

  text, lowest 9.06:1 on status-warning-subtle

  status-warning-marker

  #f0c64a → ochre.400

  non-text, lowest 8.24:1 on status-warning-subtle

  status-warning-subtle

  #3a2d10 → ochre.950

• error3 errors

  status-error-text

  #ffb3ad → crimson.300

  text, lowest 8.95:1 on bg-subtle

  status-error-marker

  #f0736b → crimson.400

  non-text, lowest 5.36:1 on bg-subtle

  status-error-subtle

  #3d1b19 → crimson.950

A test over the token files checks every pair in both themes: each status text at least 7:1, each marker at least 3:1, on the canvas, the surface, bg-subtle and its own subtle tint. The lowest text pair is Light success text on bg-subtle (7.19:1); the lowest marker pair Light success marker on bg-subtle (4.28:1). A browser test checks the rendered pages too (playground, landing page, every story).

When to use which

Status	Means	Marker	Examples
success	It ran and nothing is wrong.	dot	dta lint passed, 0 lint findings, a dta diff report that passes
warning	It ran, but something deserves a look; nothing is blocked.	open ring	lint warnings, “passed with warnings”, a structure role to review
error	Something is broken and stops the work until it is fixed.	filled square	lint errors, “build failed”, input that cannot be read, unexplained diff

And what is not a status:

• Changed is signal, never a status. The redline orange means “this changed” (a redline, a diff, “changes to review”). A change is not a problem, and a problem is never orange: signal is never used for errors or warnings, and an error is never shown as “changed”. “Changes to review” looks the same wherever it appears (below).
• Information is action. Notes, hints and the selection (the tint of a selected row or line) stay in the action colours. Selection and a status can meet: a selected finding is tinted action-subtle and keeps its marker and word in their status colours, so both show at once (below).
• Pending is the ink. Something that has not run yet has no status colour.
• Examples never use system colours. Example content (sample tokens, the example UI in stories, the fixtures shown in the playground and the docs, the example in a report) is blue or neutral grey, never signal, success, warning or error, nor a hue close to them (no orange, red, yellow or green). An orange example button next to the report’s “changed” marks reads as a change, a green one as a pass. The Badge that marks example data is a neutral ink outline for the same reason. A test scans the fixtures’ and examples’ colour values and fails on those hues (below).

Shape, word and colour

Colour is never the only carrier. Every status is a marker shape, a word and a colour, in that order of importance:

• Shapes: a filled square for an error, an open ring for a warning, a dot for success. The same shapes everywhere: Findings, Checks, Chips, the Summary line, the kicker of a finding in the Detail panel, the rows, chips and headers of the Graph canvas and the Graph list (a dangling or circular alias is an error), the Copy button’s “Copied” and “Not copied”, the verdict of the dta diff report.
• Words: the CLI’s words (“error”, “warn”, “passed”, “failed”, “3 errors”), coloured in status-*-text. The rest of a finding’s line stays in the ink, so a long list does not turn into a block of colour.
• Colour: the marker in status-*-marker, the word in status-*-text.

Light

• dta lintpassed · 0 violations
• dta lintpassed with warnings
• dta buildfailed · 2 errors
• dta diffchanges to review · 2 stories
• dta diffpending

Graphite

• dta lintpassed · 0 violations
• dta lintpassed with warnings
• dta buildfailed · 2 errors
• dta diffchanges to review · 2 stories
• dta diffpending

Light

brand · Aexplainedchanged · 4.2%pass3 errors2 warnings0 findings

Graphite

brand · Aexplainedchanged · 4.2%pass3 errors2 warnings0 findings

The status banner

What stops the work (input that cannot be read, a build with errors) is a status banner: the status’s subtle tint inside a complete 2 px outline (stroke-ink) in its marker colour and radius-md, every line in its status text. Borders are complete or straight (principle 3): the outline runs round every side, never a coloured bar on one side of a rounded box. It is Findings with banner, so the lines stay the CLI’s.

Light

Build

The build has errors: dta build writes no files until they are fixed.

• error [dangling-alias] Alias {Colors.Foundation.Sky.550} references non-existent token "Colors.Foundation.Sky.550". (Brand(Alias).BrandB.json) See the Lint rules reference.
• error [circular-alias] Circular alias chain: Brand(Alias).BrandA/Colors/Surface/Muted → Brand(Alias).BrandA/Colors/Text/Muted → Brand(Alias).BrandA/Colors/Surface/Muted. (Brand(Alias).BrandA.json) See the Lint rules reference.

Graphite

Build

The build has errors: dta build writes no files until they are fixed.

• error [dangling-alias] Alias {Colors.Foundation.Sky.550} references non-existent token "Colors.Foundation.Sky.550". (Brand(Alias).BrandB.json) See the Lint rules reference.
• error [circular-alias] Circular alias chain: Brand(Alias).BrandA/Colors/Surface/Muted → Brand(Alias).BrandA/Colors/Text/Muted → Brand(Alias).BrandA/Colors/Surface/Muted. (Brand(Alias).BrandA.json) See the Lint rules reference.

Not a banner: a lint view (findings to work through, not a stop), a hint, or anything that only changed.

Selection and status

A selected finding (the line whose details are open) shows both: the selection is the action-subtle tint with the line in action-text, the severity keeps its marker shape in status-*-marker and its word in status-*-text (TICKET-121). Selection never hides a status. On the tint, both themes:

On action-subtle	Light	Graphite	Needs
status-error-marker	4.67:1	4.93:1	3:1
status-warning-marker	5.23:1	8.62:1	3:1
status-error-text	7.78:1	8.24:1	7:1
status-warning-text	7.97:1	9.48:1	7:1
action-text (line, file)	8.09:1	9.42:1	7:1

The token test checks these pairs and the browser test the rendered markers; fg-subtle (6.68:1 and 5.96:1) is not used on the tint, so a selected line’s file turns action-text.

Light

A selected error

no-dangling-aliases1 error

• error Alias {Colors.Foundation.Sky.550} references non-existent token "Colors.Foundation.Sky.550"Brand(Alias).BrandB.json

A selected warning

naming-pattern4 warnings

• warn Token path segment "overlay" does not match pattern /^[A-Z][A-Za-z ]*$/ for collection "Brand(Alias)"Brand(Alias).BrandA.json
• warn Token path segment "shadow" does not match pattern /^[A-Z][A-Za-z ]*$/ for collection "Brand(Alias)"Brand(Alias).BrandA.json
• warn Token path segment "overlay" does not match pattern /^[A-Z][A-Za-z ]*$/ for collection "Brand(Alias)"Brand(Alias).BrandB.json
• warn Token path segment "shadow" does not match pattern /^[A-Z][A-Za-z ]*$/ for collection "Brand(Alias)"Brand(Alias).BrandB.json

Graphite

A selected error

no-dangling-aliases1 error

• error Alias {Colors.Foundation.Sky.550} references non-existent token "Colors.Foundation.Sky.550"Brand(Alias).BrandB.json

A selected warning

naming-pattern4 warnings

• warn Token path segment "overlay" does not match pattern /^[A-Z][A-Za-z ]*$/ for collection "Brand(Alias)"Brand(Alias).BrandA.json
• warn Token path segment "shadow" does not match pattern /^[A-Z][A-Za-z ]*$/ for collection "Brand(Alias)"Brand(Alias).BrandA.json
• warn Token path segment "overlay" does not match pattern /^[A-Z][A-Za-z ]*$/ for collection "Brand(Alias)"Brand(Alias).BrandB.json
• warn Token path segment "shadow" does not match pattern /^[A-Z][A-Za-z ]*$/ for collection "Brand(Alias)"Brand(Alias).BrandB.json

Changes to review

“Changes to review” means a diff a person looks at: not a pass, not a problem. It is signal everywhere (decision, TICKET-121): in Checks the dot in signal-bg and the words in signal-text on bg-surface; in the dta diff report the verdict (“Changes to review”) and a token group’s “to review” chip are the Chip’s changed look, the signal-subtle tint with the word and its 6 px dot in signal-text. The pull-request comment of the GitHub action already says 🟠. The action tint (action-subtle, action-text) stays for actions, links and selection; before TICKET-121 the report’s review verdict used it, which read as “information”, not “changed”.

On a tint the dot takes the word’s colour, because signal-bg reaches only 2.77:1 on signal-subtle in Light (3:1 needed); on a surface (Checks) signal-bg passes. Shape and word come with the colour as for every status:

Pair	Light	Graphite	Needs
signal-text (word, dot) on signal-subtle	7.54:1	10.06:1	7:1
signal-bg (Checks dot) on bg-surface	3.36:1	6.92:1	3:1
signal-bg on signal-subtle (not used)	2.77:1	5.91:1	3:1

The report shows signal for its redlines too (the token tags, the outlines, leaders and notes over the screenshots, each with a 1 px ink line; see the Diff card): the verdict and the “to review” chip stay apart from them by shape (a rounded chip with a dot and a word, not a filled label). The browser test checks the report’s chip dots at 3:1, its text at 7:1, and its outlines, leaders and notes at 3:1 against the screenshot around them, in both themes.

Colour vision

The three statuses and signal were checked with simulated protanopia and deuteranopia (2026-10-19). The first warning marker (#a86f00, Graphite #dfa93a) was almost the redline orange for these viewers (ΔE 7), so the warning markers moved to #7d5a00 and #f0c64a (ΔE at least 12 to signal, at least 9 to error). Even so, red and green, or orange and amber, are not told apart by everyone: the shapes and words carry the meaning, the colour helps those who see it.

Examples stay blue and grey

Rule (TICKET-122): example content uses blues and neutral greys only. The system colours are reserved for what the page says about the example: signal for “changed”, the status colours for results. The rule covers the brand-ab fixtures (the playground’s examples, the CLI output quoted in the docs), the landing page’s Orbit Burger, the stories’ example UI and the dta diff report’s example data. Not covered: the gravity well’s orange objects (decoration, the key visual) and the report’s pixel-diff overlay (report UI that marks the changed pixels, in redline orange so it stands apart from any example).

site/example-colours.test.ts reads every colour value of the fixtures (test/fixtures, apart from the third-party daisyUI export), the Orbit Burger token sets, the stories’ example literals and the report test data, and fails on a saturated hue in the orange, red, yellow or green range; the key visual’s well-object-orange* tokens are excluded by name.

Do and don’t

Do	Don’t
Pair every status colour with its marker shape and a word.	Tell a status by colour alone (a red number, a green row).
Use status-error-* for errors and failures.	Use signal for an error or a warning: orange means “changed”.
Make example content blue or grey (sample tokens, example UI, fixtures).	Give an example an orange, red, yellow or green: it reads as a change or a status.
Keep “changes to review” in signal (Checks and the report): a diff is a change, not a problem.	Turn a change into a warning because it needs a look, or show it in the action tint.
Put text in status-*-text; markers and outlines in status-*-marker.	Write text in a marker colour (it is only 3:1).
Draw a banner with a complete 2 px outline in the marker colour on the subtle tint.	Draw a coloured bar on one side of a rounded box, or a banner for a lint view.