Bring structure to light
A design system that shows its working. Alpenglow is built for dense, data-heavy interfaces — scheduling grids, patient records, tables that stay legible at 11px. Light and dark, with every contrast ratio measured rather than assumed.
Body text on a card, measured as this page renders — 16.28AAA light, 16.83AAA dark.
Start here
Why Alpenglow
The name, the landscape the layers take, and the rule that splits them.
Accessibility
What is measured, what the suite asserts, and where the system stops short.
Decisions
The parts that look like mistakes, and the numbers that made them the right answer.
Developers
Install
The package, its stylesheet, and a first component in a Next.js or Vite app.
Tailwind
The tokens as a Tailwind v4 theme, pointing at the same variables.
Dark mode
One attribute on the root, a script that runs before the first paint, and what changes with the light.
Foundations
Colour
Ten families of eleven stops, one lightness per stop, and the semantic layer over them.
Elevation and states
Three surface levels in dark, shadows that stop working, and the wash that replaced the fill.
- AaInter
Typography
13 text styles in one family, from the page title down to 11px.
Space and shape
Spacing on an 8px base, ten radii, and the capsule that every button takes.
Icons
IBM Carbon, installed by the consumer, plus fifteen drawn for this system.
Components
- Leonor Viana
Avatar and Loader
Initials, a status dot, a group with overflow, and a spinner that keeps its tone.
- ConfirmedAwaiting
Badge
Seven tones, two sizes, with an icon or a dot.
Button
Three variants, five tones, three sizes, and a loading state that does not look disabled.
Input and Textarea
Text fields with a label, a description and an error, sharing one Field.
Checkbox, Radio, Switch
The controls whose border is the control, and the one border strong enough for them.
- Type digits only, as month, day, year. Separators are added for you.
Date picker
A masked field and a calendar, single date or range, that never intercepts a key.
Cancel this appointment?
Dialog
Four sizes, a form with initial focus, and no light dismiss on purpose.
- RescheduleSend reminderCancel appointment
Dropdown menu
A command list on a popover, placed with CSS anchors, with a border only in dark.
Select
The native select, styled. It holds a value where the menu runs a command.
Two clients Client Visits Lisa Roberts 14 Gary Martin 3 Table
Sorting and selection, two densities, and a list form below 40rem.