Surface anatomy

Same in both modes

Use · The deep-navy band that carries product mark, search, notifications, and avatar. The only navy chrome — identical in light and dark modes.

Avoid · Anywhere off the chrome — never on cards, forms, tables, or canvas.

Use · Brand mark text and top-bar primary text on the navy bar.

Use · Muted top-bar foreground: idle icon stroke, search placeholder, eyebrow labels.

Same in both modes

Use · Subtle cues on the navy bar only — notification unread dot, status pip.

Avoid · The light work surface. This blue exists because it pops sharper than the primary accent against navy.

Use · The rail surface. White in light mode; lifted dark navy in dark mode.

Avoid · Don't darken the rail in light mode. Don't apply the navy top-bar value here in dark mode — that's chrome only.

Use · The vertical border separating the rail from the canvas, and dividers inside the rail.

Use · The currently selected nav item, paired with the accent for text and icon.

Avoid · Anywhere outside the nav rail. This tint is the selected-row signal only.

Use · The selected nav row's label and icon. Same accent used for actions and links.

Use · The primary content surface inside the shell — the area children render in. Warm off-white in light, DSTA deep navy in dark.

Use · Hover states, secondary surfaces, table-header strips, hero washes — anywhere a calmer fill is needed.

Use · Every panel that floats on the canvas. Cards, form sections, table bodies, inspector panes.

Use · The hairline border around every floating surface and the row dividers inside tables.

Use · Primary buttons, inline links, active tab indicator, brand mark on the navy bar.

Use · The hovered or pressed state of anything that uses the accent. Same blue, one step different — not a tint.