PREDICT uses a small set of colour tokens. Components never use raw colours; they use tokens like bg-primary or text-muted-foreground, which switch automatically between light and dark mode.

How colour works

• Tokens are CSS variables. Each token, such as --primary, is defined twice in packages/ui/src/styles/globals.css: once in :root for light mode and once in .dark for dark mode.
• Values are OKLCH. OKLCH keeps lightness even across hues, so the purple scale and the status colours step evenly. Hex values on this page are worked out from the OKLCH source for reference.
• Tailwind classes map to tokens. @theme inline turns --primary into bg-primary, text-primary, border-primary, fill-primary, and so on. Add an opacity with a slash, such as bg-primary/10.

Brand palette

Mostly black and white, with Predict Purple (#8504FE) as the one brand colour and lilac as its soft partner. Use purple for the main action and brand moments, not large areas. See Brand Guidelines for proportions and logo colours.

Tokens

Every token, in light and dark mode. Click a token name to copy it.

Pairs

Most surface tokens come with a -foreground partner for the text on top of it. Always use them together:

destructive has no foreground token. Use white text on it, or use it as text and borders on a light tint, such as bg-destructive/10 text-destructive.

Status colours

Five colours show how far a biomarker result is from healthy. They follow the Z-score (how many SDs from the healthy mean), and they are the same in light and dark mode.

These are the thresholds used by Reference Range and the Bio Clock severity scale. A low value on the harmless side of a directional range, such as a low hs-CRP, is not a concern and shows in neutral grey.

• Always pair colour with a word or icon. About one in twelve men has some colour blindness, and green and orange are easy to confuse. Show "High" or "Normal" next to the colour.
• Use the tint pattern for text. On white, the status colours are too light for body text (see the contrast table). Use a tinted badge, bg-status-mild/15 text-status-mild, or a solid fill with a label beside it.
• Keep them for results. Don't use status colours for decoration, brand, or general success and error messages. Use destructive for errors.

Chart colours

A sequential purple scale for charts, from chart-1 (lowest) to chart-5 (highest). In dark mode the scale gets darker so the light end doesn't glare.

• Use chart-5 for the main or only series, and lighter steps for comparisons and backgrounds.
• The scale shows amount, not category. For results by status, use the status colours.
• chart-1 is almost the page colour, so give it a border or use it only for backgrounds.

Contrast

WCAG asks for a contrast of 4.5:1 for body text and 3:1 for large text (24px, or 19px bold) and icons. Ratios below are worked out from the token values.

What this means in practice:

• foreground, muted-foreground, secondary-foreground, and accent-foreground pass for any text size, in both modes.
• White on primary passes for body text (6.1:1). primary as text on white also passes; on black it only passes for large text (3.5:1).
• destructive as text passes on white (4.8:1) but only for large text on black (4.4:1). In dark mode, pair it with an icon or use it as a fill.
• On white, no status colour passes for body text, and normal, mild, and severe are below 3:1 even for icons. Use them as fills and tints with a label, as above. On black, all five pass.

Using colours in code

Use token classes in components. Don't hard-code hex values or Tailwind palette colours like text-green-500, which won't follow the theme.

Adding a token

1. Add the variable to :root and .dark in globals.css, in OKLCH.
2. Map it in @theme inline, such as --color-warning: var(--warning);.
3. Use it as bg-warning, text-warning, and so on.
4. Check its contrast against the surfaces it will sit on, in both modes.