Charts

The data tier: a small, fixed vocabulary of chart primitives the product and the agent both render from. Restrained categorical colour on the cool --data-* ramp, a semantic health-status ramp for clinical state, tabular numerals, no chartjunk — and a hard rule that colour is never the only signal. Pure SVG on the tokens, so every chart re-themes Day↔Night and renders on any device.

Principles

• Cool data ramp. Categorical series draw from --data-1 … --data-6; warm Solar is reserved for the primary/highlighted series.
• Health-status, not decoration. Clinical state reads from the semantic ramp — in-range / borderline / out-of-range (aliases of success / warning / destructive) — paired always with a shape or a word, never hue alone (colour-blind-safe by construction, not by luck).
• Reference ranges are always visible. A health value without its range, unit, and direction is unreadable. The primitives carry all three.
• Tabular numerals. Values and axis labels set in Geist Mono so digits align and don't jitter.
• No chartjunk. No decorative gradients, no 3D, no gridlines that out-shout the data. Grid, axis, and track read from the neutral seams (--chart-grid / --chart-axis / --chart-track), never a hue.
• Calm. The data tier doesn't animate — motion budget is reserved for the ambient tier. A jittery biomarker reads as alarming.

Trend

Line/area over time with an optional reference band. The healthy zone is drawn behind the line in a whisper-quiet --chart-band; readings outside it get a ring marker (the shape cue) and the header says so in words. The latest reading is always dotted and called out.

import { Trend } from 'lumen/react';

<Trend
  label="Hemoglobin"
  unit="g/dL"
  data={[13.2, 12.8, 12.1, 11.6, 11.0, 10.6]}
  referenceRange={[11.0, 14.0]}
  area
/>;

Without a reference range it's a plain sparkline — for trends that have no clinical band (weight, steps):

Ring

A single value on the halo — the brand's ring, doing data work. Two reads from one primitive: a biomarker gauge (a marker on a reference band, coloured by clinical status) and a score ring (an arc filling toward a goal). Status shows as colour and a word.

import { Ring } from 'lumen/react';

// biomarker gauge — status derives from the reference range
<Ring label="Hemoglobin" unit="g/dL" value={10.6} min={8} max={16} referenceRange={[11.0, 14.0]} />;

// score ring — an arc toward a goal, on Solar or the cool ramp
<Ring label="Iron protocol adherence" unit="%" value={86} variant="primary" />;

Progress

The simplest data-viz: a single value against a max. Determinate, announced via role="progressbar", and coloured semantically, never decoratively — primary marks the focal goal, status hues say how it's going, data hues say which series it is. (A real package component — import { Progress } from 'lumen/react'.)

import { Progress } from 'lumen/react';

<Progress label="Iron protocol adherence" value={86} variant="success" />;