Colour

Seven colours. One clear system.

Exact sRGB values: three core colours, three accents and a warm canvas. These come straight from tokens/tokens.json.

Deep Ink#142C2ARGB 20, 44, 42Text · structure · depth

Maker Teal#006E63RGB 0, 110, 99Primary brand · actions

Workshop Orange#FF7447RGB 255, 116, 71Energy · emphasis

Citron#DFFF8FRGB 223, 255, 143Fresh fields · short tags

Sky Blue#B5CDFFRGB 181, 205, 255Supporting information

Warm Yellow#FFD447RGB 255, 212, 71Small highlights · ink text

Warm Cream#FFF4E8RGB 255, 244, 232Canvas · breathing room

Neutral first, accent second

Most of any layout is Warm Cream and Deep Ink. Teal carries actions, orange is the one moment of energy, and the pastels stay small.

• Maker Teal is the primary brand colour and the action colour.
• Workshop Orange is energy and emphasis: attention counters, low-stock tags, one bold moment per layout.
• Citron can fill whole sections. Warm Yellow is a small accent with Deep Ink text.

Readable by design

Use only tested text pairings, and add a word or an icon to every status.

Aa5.68:1Cream on teal

Aa13.60:1Ink on cream

Aa5.51:1Ink on orange

Aa10.37:1Ink on yellow

Aa13.23:1Ink on citron

Aa9.23:1Ink on sky

• Normal text needs ≥ 4.5:1; large text needs ≥ 3:1. Large means 24 px regular or 18.7 px bold.
• Avoid orange text on cream. It only reaches 2.47:1.
• Ratios follow WCAG 2.2 Contrast (Minimum) and Use of Color.

The full light and dark palettes the app uses, with every ratio computed, are in the token reference and the UI brand spec.