components

One file per component. Each page renders the thing on top and shows the snippet underneath. Open the source, copy what you need, paste into your project. No build, no framework, no install.

identity

components

how to read a page

Every component page follows the same shape:

render          ← what the component looks like, live
markup          ← <pre> you can copy verbatim
notes           ← when to use, when not to, what to swap

No abstractions. No framework wrappers. If a component needs CSS, the CSS sits next to the markup on the same page. If something here can't be expressed as plain HTML + tokens, it doesn't belong in the kit.

rules

Tokens first. Every value should reach for var(--*) before introducing a literal. If a value isn't in tokens.css, ask whether the design needs it or you do.

One mark per view. The yellow appears once. Status colors (--ok, --warn, --hot) are not marks — they're labels, used only when the data needs them.

No animation that costs a frame. Hover transitions are fine. Scroll-jacks, parallax, and entrance choreography are not.