Spectro Design System

HeroUI components · design-handoff tokens

Phone connected

The middle ground. Interactive components come from HeroUI v3 (accessible, react-aria based, community maintained). Their semantic tokens are re-skinned with the design handoff's dark OKLCH palette, and the signature scientific pieces (logo, spectrum bar, connection badge, readouts) are ported as token-styled primitives. One coherent dark, low-emission look — an experimental requirement, since stray screen light contaminates the measurement.

Palette

design tokens → HeroUI semantic tokens

desk

panel

panel-2

raised

line

accent

warn

danger

Buttons

HeroUI <Button>, themed

Status chips

design primitive

neutralλmax 578 nm Excellent fit 4% saturatedlow R²R² 0.9991

Connection badge

cross-device pairing states

Phone not linked

Waiting for phone…

Phone connected

Reconnecting…

Connection lost

Science readouts

big mono values

Slope0.477nm/px

Intercept392.0nm

R²0.946good fit

λmax578nm

A @ λmax1.316standard 5

Conc.4.8mg/L

Saturated0.0%

Standards5≥ 2 required