Components with @layer Design Tokens

Three Lit components (button, card, grid), each with its own CSS module and layered tokens.

Primary Secondary Ghost
Tokens live inside an @layer block, so the rest of each component's styles win by default and stay easy to override. Learn more Each stylesheet is loaded with an import attribute with { type: 'css' } , handed straight to Lit as a real CSSStyleSheet . View source The grid auto-fills columns with minmax() , or you can pin the count with a cols attribute. Try it