Tokens
Colour
Two axes that never meet on one element, read live from the stylesheet your browser is running.
Category says what kind of measurement this is: a heart rate, a blood sugar, a night’s sleep. It is low-chroma and it never means anything is wrong. Status says how urgent this is, on four levels, and it is high-chroma because somebody has to act on it. An element takes its colour from one of them, never both.
Every swatch below is a CSS custom property read from your browser, so it is the value in effect on this screen. Dark mode, Display-P3 and your accessibility settings are already applied.
Where the numbers are
- Contrast and APCA explains which measure is the floor here.
- Measured conformance covers every token pair in both themes, generated and dated.
- Contrast oracle checks any pair of your own.
- Theme generator runs a brand colour through the ramp and shows where it fails.
Status: how urgent it is
Four levels, from steady to urgent. Bright colours, so they still read on a cheap screen in a bright room. Colour is never the only clue: a status always comes with a word, and an icon if there is room for one.
- Steady · surface--opsin-status-steady-surfaceThe background of the thing carrying the verdict.
var(--opsin-status-steady-surface) - Steady · line--opsin-status-steady-lineBorders, indicators, chart marks, the dot in a pill.
var(--opsin-status-steady-line) - Steady · ink--opsin-status-steady-inkText and icons drawn on the matching surface.
var(--opsin-status-steady-ink) - Watch · surface--opsin-status-watch-surfaceThe background of the thing carrying the verdict.
var(--opsin-status-watch-surface) - Watch · line--opsin-status-watch-lineBorders, indicators, chart marks, the dot in a pill.
var(--opsin-status-watch-line) - Watch · ink--opsin-status-watch-inkText and icons drawn on the matching surface.
var(--opsin-status-watch-ink) - Needs attention · surface--opsin-status-attention-surfaceThe background of the thing carrying the verdict.
var(--opsin-status-attention-surface) - Needs attention · line--opsin-status-attention-lineBorders, indicators, chart marks, the dot in a pill.
var(--opsin-status-attention-line) - Needs attention · ink--opsin-status-attention-inkText and icons drawn on the matching surface.
var(--opsin-status-attention-ink) - Urgent · surface--opsin-status-urgent-surfaceThe background of the thing carrying the verdict.
var(--opsin-status-urgent-surface) - Urgent · line--opsin-status-urgent-lineBorders, indicators, chart marks, the dot in a pill.
var(--opsin-status-urgent-line) - Urgent · ink--opsin-status-urgent-inkText and icons drawn on the matching surface.
var(--opsin-status-urgent-ink)
Category: what is being measured
Heart, glucose, sleep, and the rest. These colours are dull on purpose. A category colour bright enough to look like an alert tells the reader something is wrong when nothing is, and that is the one mistake this colour system exists to stop.
- Sleep · accent--opsin-category-sleep-accentChart lines, glyphs, section identity. Never a verdict.
var(--opsin-category-sleep-accent) - Sleep · surface--opsin-category-sleep-surfaceA quiet tinted background for a section of one category.
var(--opsin-category-sleep-surface) - Sleep · ink--opsin-category-sleep-inkText drawn on the matching category surface.
var(--opsin-category-sleep-ink) - Heart · accent--opsin-category-heart-accentChart lines, glyphs, section identity. Never a verdict.
var(--opsin-category-heart-accent) - Heart · surface--opsin-category-heart-surfaceA quiet tinted background for a section of one category.
var(--opsin-category-heart-surface) - Heart · ink--opsin-category-heart-inkText drawn on the matching category surface.
var(--opsin-category-heart-ink) - Activity · accent--opsin-category-activity-accentChart lines, glyphs, section identity. Never a verdict.
var(--opsin-category-activity-accent) - Activity · surface--opsin-category-activity-surfaceA quiet tinted background for a section of one category.
var(--opsin-category-activity-surface) - Activity · ink--opsin-category-activity-inkText drawn on the matching category surface.
var(--opsin-category-activity-ink) - Nutrition · accent--opsin-category-nutrition-accentChart lines, glyphs, section identity. Never a verdict.
var(--opsin-category-nutrition-accent) - Nutrition · surface--opsin-category-nutrition-surfaceA quiet tinted background for a section of one category.
var(--opsin-category-nutrition-surface) - Nutrition · ink--opsin-category-nutrition-inkText drawn on the matching category surface.
var(--opsin-category-nutrition-ink) - Mind · accent--opsin-category-mind-accentChart lines, glyphs, section identity. Never a verdict.
var(--opsin-category-mind-accent) - Mind · surface--opsin-category-mind-surfaceA quiet tinted background for a section of one category.
var(--opsin-category-mind-surface) - Mind · ink--opsin-category-mind-inkText drawn on the matching category surface.
var(--opsin-category-mind-ink) - Labs · accent--opsin-category-labs-accentChart lines, glyphs, section identity. Never a verdict.
var(--opsin-category-labs-accent) - Labs · surface--opsin-category-labs-surfaceA quiet tinted background for a section of one category.
var(--opsin-category-labs-surface) - Labs · ink--opsin-category-labs-inkText drawn on the matching category surface.
var(--opsin-category-labs-ink)
Using these values
Copy the var() form wherever you can. It follows the theme, the gamut and the accessibility media queries. A hex value pasted into a component follows none of them, and that is the usual way a themed system stops being themed.
Every token here also has a Tailwind utility, such as bg-status-urgent-surface. Tailwind v4 and the order that silently breaks explains how they are wired.