Color tokens

Every color in the product comes from a token. Most of the screen is white paper and graphite ink; cyan marks where you are and what you can click, and three state hues say approved, in flight and failed.

Semantic tokens

Write the role, not the color. Tailwind utilities resolve to the CSS variables in src/styles/global.css, and the shadcn components read the same names. Tailwind’s own palette is cleared, so a raw hue has no class. The four depth tokens are new with the elevation model.

Token	Value	Use
`bg-background`	#FFFFFF	The page ground: rails, nav, ruled lists and tables
`text-foreground`	#0E1116	Ink: headings, body copy, icons, control labels
`text-muted-foreground`	#5C6370	Graphite: ledes, secondary text, labels, unselected nav
`text-pencil`	#8A919C	Pencil: meta you can skip, 12px and up, never body copy
`border-border`	#E3E6EB	Hairlines: rules between rows, card borders, the rail edge
`border-input`	#CDD2DA	Card hover edge. Fields now use border-strong
`bg-muted`	#F5F7FA	Vellum: secondary buttons, segmented track, row hover
`bg-primary`	#0E1116	The one primary action per view, such as Send from Revit
`ring`	#1F4ED8	Focus: 2px outline, or a 3px ring at 25% around fields
`bg-raised`New	#FFFFFF	Touchable surfaces: cards, selected segment, menus
`border-edge`New	rgb(14 17 22 / 0.15)	The edge on raised controls: buttons, chips, the selected segment
`border-border-strong`New	#8A919C	Field borders: inputs, selects, checkboxes (3:1)
`bg-primary-hover`New	#262B33	Primary button hover and pressed. One step lighter than ink, not grey

Status tokens

Hue is reserved for state a reader must not misread. Each state has a strong color for text and dots and a -muted wash for fills. Most rows stay neutral, which is why the hue means something when it appears.

successApproved

text-success#2F7A4F

bg-success-muted#E8F4EC

Approved details, a published release, an accepted invite Text on the wash is 4.6:1.

warningIn flight

text-warning#8A5A00

bg-warning-muted#FBF1DC

In review, a prerelease build, a family behind its source Text on the wash is 5.2:1.

dangerFailed

text-danger#B42318

bg-danger-muted#FDECEA

A failed download, an invalid field, a destructive action Text on the wash is 5.7:1.

Accent

One cyanotype line. Cyan does three jobs and nothing else: it marks links, shows where you are, and draws the focus ring. The wash sits behind the current row so the bar has something to stand on.

Job	Specimen	Tokens
Links	Read the 2.3.1 release notes	.text-link · text-cyan, 600, underline on hover
Current location	Details	.nav-rail__link.is-active · border-cyan, bg-cyan-wash
Focus		outline-ring 2px, offset 2px · fields: border-ring + ring 3px at 25%

Do & don't

Color carries meaning here, so spend it carefully. If a screen needs more color to read, it usually needs better hierarchy instead.

Beam to column connection

S-600 · 3" = 1'-0"

Open detail

DoKeep titles ink and let cyan mark the one thing you can follow.

Beam to column connectionS-600 · 3" = 1'-0"Download

Don'tPaint titles, meta or buttons cyan for emphasis. Then nothing reads as a link.

Shear tab, single plateApproved
Moment connection, flange plateIn review

DoSay the state in words, with a dot and a wash. It survives grayscale and color blindness.

Shear tab, single plate
Moment connection, flange plate

Don'tTint whole rows or cards by state, or use a state hue as decoration.

<p className="text-muted-foreground">
  Imported from Snowdon Towers
</p>

DoName the role. When a value changes in global.css, every screen follows.

<p className="text-[#6b7280]">
  Imported from Snowdon Towers
</p>

Don'tHard-code hex values or borrow a near-miss grey from another palette. The cleared palette makes most of these fail to build anyway.