Tokens
The single source of truth
Every colour, radius, elevation and space in Canvas is a --cs-* custom property scoped under .canvas-studio. Do not add a hue — health is expressed by shape and pattern, never by a green/amber/red palette.
Surfaces
#F6F8FA
surface.canvas
--cs-surface-canvas
The Map / Build working surface. Cool near-white so blue and graphite both read as intentional.
#FFFFFF
surface.raised
--cs-surface-raised
Nodes, cards, panels, tables, sheets.
#EDF1F4
surface.sunken
--cs-surface-sunken
Wells, gallery background, inactive tab strips.
Application chrome
#1C1F22
chrome.base
--cs-chrome-base
Application shell: top bar, mode-switcher rail, command palette. Derived from Dark Gray.
#26292D
chrome.raised
--cs-chrome-raised
Chrome hover, popovers on chrome, mode-switcher track.
Borders
#E6E6E6
border.hairline
--cs-border-hairline
Brand Light Gray. Row separation, section rules.
#D5DBE0
border.default
--cs-border-default
Interactive edges: inputs, resting nodes, cards.
#333333
border.strong
--cs-border-strong
Node outlines at 1.5px, cluster rings, emphasis.
Text
#14171A
text.primary
--cs-text-primary
Headings, values, node labels. 15.9:1 on canvas.
#5A646D
text.secondary
--cs-text-secondary
Descriptions, metadata. 5.1:1 on white — AA at all sizes.
#8A939B
text.muted
--cs-text-muted
Placeholders and disabled only. Never for meaning.
#FFFFFF
text.inverse
--cs-text-inverse
On chrome, on blue fills, on graphite nodes.
Brand accent
#0BADD3
accent.brand
--cs-accent-brand
Selection, active relationship, Revvit intelligence, primary action fill.
#0894B5
accent.brand.press
--cs-accent-brand-press
Pressed state, and any blue used as text on white (4.5:1).
#E7F7FB
accent.brand.wash
--cs-accent-brand-wash
Selected row, suggestion card fill, active tab bed.
rgba(11,173,211,0.14)
accent.brand.field
--cs-accent-brand-field
Radial department / focus field on the Map. Center opacity only; fades to 0.
Danger
#FF0000
danger.base
--cs-danger-base
Blocker markers, exception fills, destructive button fill.
#C81212
danger.text
--cs-danger-text
Red text and icons on light surfaces. Pure red fails AA as text.
#FEF0F0
danger.wash
--cs-danger-wash
Blocked panel bed, failed-row background.
Focus
#0BADD3 + #FFF
focus.ring
--cs-focus-ring
2px white inner + 2px blue outer offset ring. Visible on every surface including chrome.
Elevation
e0 flat on the canvas; e1 resting cards; e2 toolbars and popovers; e3 lifted and selected objects.
e1
Resting nodes and cards.
e2
Toolbars, legends, popovers.
e3
Lifted / dragged objects, selected node.
Radii
4 chip · 8 control · 10 node · 14 panel · 999 pill.
chip4px
Chips, field tags, small badges.
control8px
Buttons, inputs, toolbars.
node10px
Capability nodes, cards.
panel14px
Panels, sheets, large containers.
pill999px
Pills, mode switcher, count badges.
Spacing
A 4-base scale. Compose padding and gaps from these steps only.