Theme
Density
Width
Foundations

Colour

Neutral surfaces carry the interface. Colour marks exceptions only: a tint means something needs attention, and blue is kept for links, focus and the live timer. Switch the theme to see every token resolve for dark.

Surfaces

bg-appThe ground behind the sidebar and panels
bg-panelMain content panel and cards
bg-raisedInputs, secondary buttons, popovers
bg-sunkenTable headers, inset areas
bg-hoverRow and item hover
bg-selectedActive nav item and segment track

Text

Aatext-fgPrimary text and figures
Aatext-fg-mutedSecondary text and captions
Aatext-fg-subtleLabels, headers, meta
Aatext-accent-textLinks only

Tones

Background and text pairs, all at or above 4.5:1 in both themes.

NeutralCategories, stages, services
WatchNeeds attention soon
RiskAt risk, overdue, failing
GoodWon, paid, confirmed
InfoScheduled, informational

Primary action

The only gradient in the system. One per view.

New invoiceDark gradient in light theme, light gradient in dark theme.

Moments

The soft wash appears on the client cover and empty states only.