Composed, domain-specific sections — the recurring assemblies of the product, buildable.

Blocks are composed, domain-specific sections — the recurring assemblies of the product, built from components and shipped from the package like everything else: import { Timeline } from 'lumen/react'. You copy a whole block, not a hundred divs. Everything below renders live.

PageHeader & SectionHeader

The top of a page — eyebrow · title · description · trailing actions — and the titled sections inside it (with the quiet eyebrow variant the timeline screens use). Token-only ink.

Plan · Protocol

Iron protocol

Week 3 of 8 — re-grounded after Tuesday's reading.

Watch

See all

Up next

import { PageHeader, SectionHeader } from 'lumen/react';

<PageHeader eyebrow="Plan · Protocol" title="Iron protocol" actions={<Button>Log</Button>} />
<SectionHeader title="Watch" action={<Link to="/watch">See all</Link>} />

EntityCard

One card anatomy for the timeline's list surfaces — goals, needs, plans, spans, catalog items: eyebrow kind · title · sub · status pill · progress slot · provenance line · chevron when walkable. The anatomy is fixed so lists read as one family; a kind varies only in which slots it fills.

GoalHemoglobin back in range11.2 of 11.5 g/dL

On track

Need · ScreeningGlucose tolerance testDue before week 28

Due soon

Plan · ProtocolIron protocolWeek 3 of 8

↳ Responds to the 9.1 g/dL reading

Span · ConditionIron-deficiency anemiaOpen since March

Monitored

MetricCard

The vitals-grid tile — a Metric in its panel, with the setpoint line and an honest empty state (never a fake zero). Walks to the deep-dive when href is set.

Blood pressure118/76mmHgIn range

Setpoint 110/70

Hemoglobin9.1g/dLBorderline

Target ≥ 11.5

WeightNo readings yet

Weekly, Sunday morning

Timeline

The biograph rail — a connected run of dated facts. Tone dot + kind eyebrow + title + dated sub-line + status pill; the past is filled and solid, the future hollow and dashed, and the Now divider (a Solar ring) sits between them. Kind → accent follows one fixed map so the rail reads the same on every surface; dates live in the sub-line, never as group headers.

readingHemoglobin 11.2 g/dLQuest lab panel · Mon
In range
revisionIron protocol re-groundedDose day moved to Thursday · Mon
sessionPrenatal visit — Dr. Reyes32 min · 3 notes · Tue
Now
stepRepeat panelWeek 6 checkpoint · Thu
goalBack in rangeProjected · Week 8

import { Timeline } from 'lumen/react';

<Timeline nowIndex={3} items={[
  { kind: 'reading', title: 'Hemoglobin 11.2 g/dL', date: 'Mon', status: { tone: 'success', label: 'In range' } },
  { kind: 'step', title: 'Repeat panel', date: 'Thu', future: true },
]} />

Steps

The plan's step rail — completed (filled, checked) → active (the Solar ring-halo: "you are here") → scheduled (hollow). The connector runs solid through the lived past and turns dashed at the now-horizon; a moved step carries its provenance line, because a plan's dates follow the body.

Start iron supplementWeek 1 · done Mar 4
Tolerance check-inWeek 2 · done Mar 11
Mid-protocol panelWeek 3 · Thu · Now↳ Responds to the 9.1 g/dL reading
Dose adjustment windowWeek 5
Closing panelWeek 8

Still in the app, not yet promoted

The Agent/Ask surface (bubbles, seed chips, the living mark), the entity hero (motif + eyebrow + chips — the "shapes of time"), the Notice register (accent card · one icon · one sentence · quiet actions), and the source list remain app-side patterns; they promote here once their APIs settle. → The retired v0 mock shows the originals.

Blocks