16 · Practice · Principles

How to design inside the chassis.

16 / 22
01
Signal is meaning.

Red, blue, amber, green describe state. Never "accent," "flair," or "brand." If nothing is running, failed, pending, or complete — nothing is colored.

02
Ready needs no badge.

Default states are silent. Only non-normal states (Generating, Failed, Pending) wear a badge. A library of green dots is just noise.

03
Buttons are verbs.

"Create" not "Create new figment." Context supplies the noun. Every word in a label is one the user has to read before acting.

04
The grid is the ornament.

Don't decorate the chassis. The seam between panels is already the graphic. No drop shadows, no gradients, no rounded corners to soften structural honesty.

05
Cards are surfaces, not slides.

A card is clickable. No "Open" button inside. Hover raises 1px and the border sharpens — that's the affordance. Generating cards show Cancel. Failed cards show Delete.

06
Display type is rare.

Bricolage at 48px+ is an event. Section titles and key metrics only. Everywhere else the face carries enough weight at 16–22px without volume.

07
Chrome speaks in mono.

Labels, timestamps, metadata, IDs, coordinates — all Martian Mono, uppercase, 10px or below. The system talks about itself in a different voice from the content.

08
Motion is information.

Never decoration. Every animation should tell the user something static can't: something entered, something's running, something changed. Reduced motion kills all of it.