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.

InstallWhy Alpenglow

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.

The sections

  • npm i alpenglow

    Developers

    The package in a Next.js or Vite app, its Tailwind theme, and the dark mode switch.

  • Foundations

    Colour, charts, elevation, type, space and icons — the tokens every component is built from.

  • Confirmed

    Components

    Every component the package ships, each with its states measured in both modes.