Design foundations

Colors

Neutral surfaces, one action green, and three status colors that always come with a label or an icon shape, so meaning never depends on hue alone. Plus five function colors.

Source: web/shared/theme/tokens.css. "In code" is how many times the token appears in the classes of web/packages/crm/src and web/shared/components (counted 2026-10-05).

Neutrals

The base of every screen. Borders carry the structure, not shadows.

Action green

One color for buttons, links and the active tab.

Status

Three tones: text on its own light tint. They mark the Deal Health bands (70 and above, 40 to 69, below 40), the deadline flag on the Morning Meeting Board and the Stalled badge. Each tone has its own icon shape.

On track On track

Deal Health 70 to 100. The "On track" deadline. A done action, a form's success message.

At risk At risk

Deal Health 40 to 69. The "Due this week" and "No next action" deadlines. The "Oldest outstanding" mark.

Stalled or overdue Stalled

Deal Health below 40. The "Overdue" deadline, the Stalled badge, an overdue action, a field or form error, the destructive button.

The good-mark, warn-mark and crit-mark tokens are declared in tokens.css, but no class in the app uses them yet.

Function owners

A chip shows which function owns a stage or an action. The user's avatar takes the same colors, by role. MD and the admin use the Legal slate.

Back Office

Land

Partnerships

Construction

Legal

Source: VALERE_FUNCTION_CLASSES in web/shared/components/Chip/Chip.styles.ts; the avatar is web/packages/crm/src/components/UserAvatar.tsx.

Contrast

Text and background pairs that occur in the app. The browser computes each ratio from the current token values; the threshold is 4.5 : 1 for normal text.

Sample	Where	Tokens	Contrast	Result

How it is written in code

The tokens are declared in a Tailwind v4 @theme block, so each color becomes a utility of the same name.

Sample	Classes	Component
	`border-primary-600 bg-primary-600 text-white`	`Button`, the `primary` variant
Fee Discussion	`bg-primary-100 text-primary-700`	`Chip kind="stage"`
Land & Build	`border-gray-200 bg-gray-100 text-gray-700`, a dot	`Chip kind="dealType"`
On track	`bg-good-tint text-good-text`	`StatusPill status="good"`
Land	`bg-fn-land-tint text-fn-land`	`Chip kind="function" fn="LAND"`

Compared with the design board

The "Colors" board of the Design Foundations canvas.

The names match, the values don't. Since 2026-10-08 the neutrals and the primary scale follow the green palette (ADR-0044, after the blue of ADR-0042): the action green is #25574e (the board's was #1f4e8c), the neutrals carry a faint green cast in place of the board's blue-gray, and the status colors are Tailwind's green, amber and red, unchanged. Each status text still passes 4.5:1 on its tint.
Function colors. These still have the board's values: the concept shows too few of them to set new ones.
gray-600, gray-400 and primary-900. Not on the board. The tokens set them so no shade falls back to Tailwind's own gray, and so the sign-in panel's gradient has a far end.
primary-300. The board calls it the "selected border"; the code uses it once, as the focus ring of a text field. The app's tables have no "selected row" state.
Mark colors. good-mark, warn-mark and crit-mark are on the board and in the tokens, but no component uses them.