Color
Brand, chrome, status, and fill. Looks retune identity. The room stays system.
Kit markup uses the additive names from bindings.css. shadcn names stay wired as
aliases so a third-party block still themes. Do not mix the two in kit components.
A look retune fills --brand-*. It does not invent new class names.
Switch Washi and ICS in the sidebar. Brand and chip wash should move. Chrome lightness should not, unless you change paper.
Paper temperature (warm / cool / gray) lives on Tokens. Categorical hues (grid pills) live on Category colors.
Brand
bg-primary is the brand. bg-support is the second hue. Soft is the wash
(bg-secondary-subtle); emphasis is the outline (border-primary-subtle). Filled chips sit on
soft with text-fg. Outline chips use border-primary-subtle and text-primary.
bg-primarybg-supportbg-secondary-subtleborder-primary-subtle<div className="bg-primary text-primary-foreground" />
<div className="bg-support text-support-fg" />
<span className="bg-secondary-subtle text-fg">filled</span>
<span className="border-stroke border-primary-subtle text-primary">outline</span>Do not use bg-secondary or bg-accent. Those are shadcn aliases for bg-fill.
Do not reach for a primitive (bg-blue-500). If a color is not a role, add the role.
Chrome
One ladder. Page, room, well, card. Fill is a wash, not a rung.
bg-background
bg-surface
bg-surface-sunken
Well. Tabs track, avatar fallback.
bg-surface-raised
Ink on raised paper.
Muted helper.
Subtle meta.
bg-fillHover wash. Not a surface.
| Utility | Job |
|---|---|
bg-background | Page canvas |
bg-surface | Room paper |
bg-surface-sunken | Well (tabs track, avatar fallback) |
bg-surface-raised | Card, popover, dialog |
bg-fill / bg-fill-hover | Interactive wash |
text-fg / text-fg-muted / text-fg-subtle | Ink |
border-border | Line (border-subtle / border-strong for extra steps) |
Page and sunken share a lightness step. Sunken is the well you cut into surface,
not a fourth paper. Overlay scrims use bg-contrast/50, never raw black.
shadcn aliases
Same tokens. Different names. Kit markup uses the left column.
| Kit | Alias (compat only) |
|---|---|
bg-surface-sunken | bg-muted |
bg-surface-raised | bg-card, bg-popover |
bg-fill | bg-secondary, bg-accent |
text-fg | text-foreground |
text-fg-muted | text-muted-foreground |
bg-primary, bg-destructive, bg-background, and border-border are not
muddled. Those names are the kit names.
Status
Danger, success, warning, info. Solid for marks; muted for alert fills. A prefab may retune a status slot (Washi vermilion). A brand retune should not.
bg-destructivebg-successbg-warningbg-infobg-destructive-mutedbg-success-mutedbg-warning-mutedbg-info-mutedWiring, install, and retune live on Tokens.