Brand and visual language

The brand ships in the repository. docs/design_handoff_top_table_shell/ carries the current direction: tokens.css holds every colour, radius, spacing step and type style, and reference-1a-plan-screen.html is the target to build against. They are design references, not production code to lift.

docs/style-guide.html is the older guide. It is still authoritative on voice, on severity semantics and on the mark. Its colour and type sections are superseded.

This page carries the decisions those files implement, and the reasons for them.

Lit canvas

The app is two zones and they never mix. Chrome — the top bar and the left rail — is dark. Canvas — everything to the right of the rail and below the bar — is light. A component belongs to exactly one zone and uses that zone's ink scale. Never a paper card inside chrome, never a chrome fill on the canvas.

The room is the only bright thing on screen. Depth comes from the value contrast between the two zones, which is what lets the ban on shadows stand without leaving everything on one plane. The previous guide banned shadows and gave nothing back, so there was no second plane anywhere.

Canvas    Paper   #F7F5F0    Ink        #1C1B18    Slate  #23303F
          Surface #FFFFFF    Ink muted  #6B6862    Hard   #B3261E
          Sunken  #EFECE4    Rule       #DDD8CE    Soft   #B26A00

Chrome    Chrome  #151D26    Ink        #FFFFFF
          Raised  #1E2833    Ink dim    #A9B6C4
          Active  #22303E    Ink faint  #6E7D8C

IBM Plex Sans for text, weights 400 and 500. IBM Plex Mono for every figure that can change — capacity, seat counts, table fills, the counts in the rail, timestamps. The capacity headline is 38px mono and is the largest thing on the screen, which is the answer to everything previously weighing the same.

Rules that are not preferences

Every changing number is monospace. If a value can differ between two renders it is mono. Static labels stay Plex Sans. This is what stops the columns jittering as a plan is edited, and it replaces asking for tabular figures on a proportional face.

Severity is shape first, colour second. A hard violation takes a solid left bar, a soft one the same bar in amber, a pinned guest a filled dot, a table in violation a dashed outline. Desaturate the whole screen and it must still read. This is the projector requirement, not an accessibility footnote.

There is no success state. No green, no ticks. A plan with nothing wrong says so in words.

No shadows, no gradients, no blur. Where two things are not separating, the answer is a border or a step in background value.

One primary action per view. Nothing else on screen is filled. On chrome the primary inverts; on the canvas it is slate with white text.

The floorplan is drawn from config, and tables carry material. Four states that read before any label does: empty, filling, full, in violation. Five tables and twenty-seven both render.

Sentence case, active voice, no exclamation marks. An action keeps its name through the whole flow, so the button that says Auto-allocate produces a state that says allocated.

Words

An empty screen is an invitation, not an apology. Errors say what happened, never sorry. Placeholders are a real example of valid input, never a repeat of the label.