Rook
Skip to sheet

F-202Color

Color

White paper, graphite ink, one cyanotype line. The palette stays neutral so the drawings carry the page; cyan marks where you are and what you can click.

Palette

Eight colors do all the work. Six neutrals set the page, the type and the lines; cyanotype and its wash mark the one thing that matters on a screen: where you are, and what you can act on.

Paper#FFFFFFrgb 255 255 255--backgroundThe ground. Pages, rails, cards and controls.
Ink#0E1116rgb 14 17 22--foregroundHeadings, body text, primary buttons.
Graphite#5C6370rgb 92 99 112--muted-foregroundSecondary text, ledes, icons.
Pencil#8A919Crgb 138 145 156--pencilMeta at 12px and up. Field outlines.
Rule#E3E6EBrgb 227 230 235--borderHairlines, table rules, card edges.
Vellum#F5F7FArgb 245 247 250--mutedRecessed fills: tracks, secondary buttons.
Cyanotype#1F4ED8rgb 31 78 216--cyanLinks, current location, focus rings.
Cyan wash#EBF0FDrgb 235 240 253--cyan-washBehind the current row or tab.

State hues

Three hues exist for state a reader must not misread: a detail approved for issue, an import still in flight, a send from Revit that failed. Each pairs a dark text color with a pale wash. They never decorate.

ApprovedApproved

#2F7A4F--success

#E8F4EC--success-muted

4.6:1 on wash · 5.2:1 on white

A detail approved for issue. A send from Revit that landed. A release that shipped.

In flightImporting

#8A5A00--warning

#FBF1DC--warning-muted

5.2:1 on wash · 5.9:1 on white

An import still processing. A build waiting to publish.

FailedSend failed

#B42318--danger

#FDECEA--danger-muted

5.7:1 on wash · 6.5:1 on white

A send that failed. A file that would not parse. A destructive action, before you confirm it.

NeutralIn review

#5C6370--muted-foreground

#F5F7FA--muted

5.6:1 on wash · 6.0:1 on white

Most rows sit here: in review, archived, not yet sent. That is why hue reads as news when it appears.

Usage ratio

A Rook screen is mostly paper. Ink carries the text, hairlines and vellum carry structure, and cyan is a few percent at most. If a screen looks blue, something has gone wrong.

Paper78%
The ground under everything.
Vellum10%
Tracks, code, specimens.
Rule4%
Hairlines and edges.
Ink + graphite6%
Type, icons, one primary button.
Cyanotype2%
Links, the current row, focus.

Do & don't

Color is a signal. Every hue on a screen should answer the question “what does this tell me?”

Beam to column connection

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

SteelApproved
Open

Do

  • Keep cyan for links, the current location and focus.
  • Mark structure with hairlines and vellum, not with hue.
  • Use a state hue only for state, with a dot and a word.
  • Let one ink button carry the primary action on a screen.

Beam to column connection

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

SteelNew
Open

Don't

  • Don't use cyan as decoration: headings, icon tiles, borders.
  • Don't introduce new hues for categories or emphasis.
  • Don't put state colors on non-state UI, such as a green discipline tag.
  • Don't fill secondary actions with cyan; it competes with links.