Colour families
Colour in Tostada isn't a wall of individual fields. It's a small set of families. A family bundles the colours that always travel together — a background, the text that sits on it, and a border — behind one name with one usage rule. Edit the family once and everything that uses it follows, in light and dark.
Two kinds
Surfaces — the regions your UI sits in:
app— the base canvas the whole app sits on.block— cards, panels, grouped content.block highlight— raised surfaces: popovers, menus, dialogs.success·warning·error·info— feedback surfaces.
Surfaces also carry two extra text colours: an accent (colourful) and a subtle (grey) foreground.
Components — the styles interactive elements wear:
primary·secondary·tertiary·ghost·destructive.
Editing a family
Open Library → Properties → Families and click any card. The modal shows a live preview, the family's usage rule, and each colour with a light/dark picker and a one-line note. Any slot can be set to “no colour” (Ghost has no fill or border, for example). Add your own families or add tokens to an existing one.
Applying a family to a component
On a component you can apply a family to restyle it in one click. Then click into any part — its fill, text, or border — and override just that part, either for this one instance or for every instance of the variant. The family itself never changes, and you can revert an override at any time. See applying families to components.
States come for free
You never author hover, focus, or disabled colours. Tostada derives them from a family's base colour (hover at 90% opacity, a focus ring at half strength, disabled at 50%). That keeps the family set small and consistent.
Under the hood
Each family slot still resolves down to a primitive and
emits the CSS variables your components already read (--primary, --card,
--border, …) plus family-scoped vars (--block-border, --ghost-foreground).
Because everything flows through CSS variables, a single edit retheme s every
component — no re-sync step.