A second product, deliberately.

Roles, not hues.

Every color name describes a role, not a value. A component reaches for bg-surface or text-foreground; the values shift per tenant, the relationships don’t. The same vocabulary anchors shadcn, Radix Colors, and Material 3 — a small set of roles that define how surfaces stack and how text reads against them.

That’s how seven palettes ship without a readability audit on every screen. Components address the roles; the tokens guarantee contrast.

Background

The page paper. The bottom of the stack — everything else floats on it.

Surface

Cards, sheets, inputs, dialogs. One step elevated; usually lighter than the background to suggest lift.

Primary

The brand fill. High-emphasis surfaces, primary buttons, active states. Pairs with on-primary for legible foreground.

Accent

The call-to-action. Reserved for where the eye should go. Different hue family from primary by design.

Inverse

A dedicated contrast surface for editorial dark sections. Independent of the rest of the palette — a light tenant can paint a dark section without inverting global tokens.