Colour

The palette, why the hero inverts, and the two traps that keep recurring.

Part of the Konjo design language. The laws in the spine apply here unless this chapter contradicts them.

Tokens live in packages/design-tokens/tokens.ts and are consumed only through useTheme() / createThemedStyles. Light and dark are TS-enforced to the same shape. Light is the design surface — design in light, verify in dark, ship both.

Values are not written here. They live in the generated token tables, read out of the code on every run with every contrast ratio recomputed. This table is what each token is for — the part a generator cannot know.

Duplicating the hexes here is not a hypothetical risk: this table used to carry them, and it was still publishing border.control at its superseded value — the one that was 1.37:1 and failed the 3:1 law the token exists to satisfy — while the code had already fixed it.

Red is the action colour (Kata, 2026-09-29). A filled primary, a link, a selected segment or chip, a checked box and the active tab are red; nothing else is. The August "one red role per screen" law (L4) is retired — see the spine. Two consequences this chapter owns:

• Destructive is never red. It is an ink outline with a plain verb, so "this deletes" never looks like "tap here".
• Errors are not the action red. feedback.errorText is a different red, and an error always carries an icon and words, never colour alone.

The hero surface inverts by theme, and it has to

brand.ink #111111 on the dark page #0E0E10 computes to 1.021:1. Painting the hero with brand.ink makes the screen's one loud block invisible in dark mode — the formula would delete its own centrepiece. The retired band.lead token already knew this and flipped (#131313 light → #F5F5F5 dark); surface.hero inherits that behaviour.

The hero is not "the dark block". It is the maximally contrasting surface: near-black on a light page, near-white on a dark one. Both directions land at ~17:1 against their page.

Never put brand.red text on the hero — brand.red on surface.hero is 3.77:1 in light. accent.onHero exists precisely so nobody has to hardcode a hex to solve this.

And never put border.focus on the hero. border.focus on surface.hero is 1.14:1 light and 1.00:1 dark — in dark it is the same hex as the surface, so the ring is not dim, it is absent. border.focusOnHero is the ring for an ink-filled control; see accessibility.

surface.white still exists in the code and is not a synonym for surface.card: in dark it resolves to #0E0E10, which is the page colour (1.000:1 against the page). A screen root using surface.white gets the page; a card using it gets nothing. Migrate to surface.page / surface.card.

text.quaternary is not a text colour. It is legal for a disabled dot or an unfilled track and nothing else. The inactive tab tint moves to text.tertiary in both themes — named rather than spelled, because this chapter's own rule is that values are not written here.

text.tertiary on surface.card is 4.74:1, which is where body and secondary text live.

The card-only family

Three values are legal on a white card and illegal on the tinted page. They fail quietly, so they are listed together:

accent.red was #D62828, identical to brand.red, which computes to 4.476:1 as text on the page — a rounding-level AA failure in the token whose entire stated purpose is "red as text on a surface". It is now #C42020: 5.25:1 on the page, 5.87:1 on a card. brand.red #D62828 is unchanged and remains the fill colour, where white-on-red is 5.01:1.

The general rule this family teaches: the labels that organise a screen should be more legible than the metadata inside a card, not less.

Red on ink — the one colour trap

brand.red #D62828 on brand.ink #111111 computes to 3.77:1. That fails AA for normal text. It passes only for text ≥24px, or ≥18.5px bold.

This bites immediately: the hero block is an ink surface with a red eyebrow and a red CTA. The CTA is a red fill (fine). The eyebrow is red text (must be accent.onHero).

Gold is for achievement moments only. Never in chrome.