Brio
A small CSS library built around native web-platform features.
Brio is a small, opinionated CSS library for sites and applications. Vanilla CSS, no framework, no utility avalanche. Layout comes from a handful of named composition primitives; components add theming and behavior on top; the platform does the rest.
From "con brio" -- the musical direction for "with spirit, with vigour." Embrace the native web with vigour: lean on modern CSS and native APIs, build with what's already there.
How brio is meant to be used. The mental model and the anti-patterns. Start here.
Tokens →Colors, space, type, radius, shadows. The vocabulary every component consumes.
Composition →Named layout primitives -- like flow and stack -- one per recurring layout problem.
Utilities →Single-purpose classes for the cases that don't earn their own token or component override.
Components →Themed, slot-bearing UI -- like alerts, dialogs, and cards. The building blocks of a typical app.
Extras →Opt-in components from a separate bundle -- things like avatars, pagination, and timelines.
Patterns →Worked examples of components composed into common application shapes -- forms, layouts, empty states.
Regression Test →The visual regression test suite page. This page is used by the playwright test suite to ensure visual consistency.