One coded design language for every HealthMetrics product.
The HealthMetrics Design System gives our engineers a shared, branded, accessible component library — so teams across the group build faster and stay consistent, from the corporate portal to the tools behind it.
Code-first
Components ship as raw source and consume straight from the workspace — no bundle step, works in Next.js and Vite.
Accessible by default
Every colour pairing is tuned to WCAG 2.2 AA in both light and dark themes.
36 components, 176 icons
Buttons, forms, overlays, data display and charts, plus a typed Material Symbols icon set.
One brand, one contract
The HMS brand mapped onto the shadcn token contract, so every product looks and behaves consistently.
Who is this for?
Engineers building HealthMetrics web products. Install the package, load the tokens once, and import components. Designers can reference the same tokens and components in the Figma library. New to it? Start with Get started.