Serre design system
The tokens, themes, layout primitives and components every Serre app is built from, each shown live in every variant and state, with its props, keyboard interactions and accessibility notes. Switch the theme at the top, or show every page in all three themes side by side.
Principles
One source of truth
Tokens are W3C design tokens in JSON, compiled to StyleX variables and a typed table; a test fails when the two drift.
Accessible by construction
Behaviour comes from React Aria. Contrast is tested from the tokens, high contrast included; focus, keyboard and reduced motion are part of every component.
The platform first
Container queries, the Popover API and anchor positioning, field-sizing, view transitions: CSS where it removes script.
No runtime CSS-in-JS
StyleX compiles every style to atomic classes at build time.
Contents
7 foundation pages, 77 component pages and the kitchen sink, which shows everything at once. Start with colour.