Primitives
The component system is a small kit of thin wrappers over one headless UI library. Pages compose the kit and never import the raw library.
Imported system. Adopted from the app's design system. The rules apply as written; the inventory below is the contract; which library backs it on this site, and which pieces this site actually needs, are still to be configured.
Kit rules
- One choke point. Vendor styling that breaks the system (a drop shadow, a default outline) is stripped once, at the kit boundary, never per page.
- Conventions are defaults. The cursor, the press scale, the focus ring, and the border color are baked into the wrapper.
- Small on purpose. A primitive is added only once it is needed twice. Until then, pages build with the existing pieces.
Inventory
| Primitive | Contract |
|---|---|
| Button | Variants primary / secondary / ghost / accent / danger; sizes sm / md / lg; iconOnly for square icon buttons. cursor-pointer and the active press-scale are baked in. |
| Input / Textarea | Line border, accent focus ring. Multi-line fields auto-grow with their content instead of scrolling inside themselves. |
| Field / Label | Label plus control wrapper with an optional hint line. |
| Checkbox | Brand-accented; renders its own label from children. |
| Card | Bordered surface, standard padding, no shadow. Subparts: Header, Title, Description, Content, Footer. |
| Chip | Small inline tag, defaulting to the soft brand-tinted look. |
| Link | In-text links and link-styled actions. |
| Spinner | Busy indicator; inherits the current text color inside buttons. |
| ProgressBar | Value 0 to 100; color switches to danger for failing states. |
| RadioCards | Card-style single select; a render function hands the selected state to the caller, who owns the card visuals. |
| DateRangeField | Start and end dates as one field. |
| Container | The global gutter (see Layout). |
| Toaster | One toast queue, fired through a single shim. |