Composition
How the materials go together — what earns a boundary, where emphasis comes from, and why the content outranks the chrome.
Object-ness
The first question about any element is whether it can be operated. That answer decides everything else about how it looks.
Controls have form
If it can be operated it takes a shape — a capsule, a button, a bordered chip — with a hover and a pressed state. Grey text beside a grey icon reads as copy, not as a control.
Metadata gets no chip
A lane, a status, a timestamp, a count: none of it is operable, so none of it gets a boundary. It collapses into one quiet line — technical voice, muted ink, · between the parts. A Badge earns its border by being a filter you can drop or a state you can act on.
Affordance inflates
Every chip added makes the real controls quieter. When everything wears a boundary, a boundary stops meaning anything — the fix for a control that reads as text is never to give the text around it a border too.
Hairlines, not boxes
Separate with a rule at --lexi-border-subtle, or with space. Reach for a bordered card when the content is genuinely a surface, not to fence off a paragraph. Depth is the 6% wash and a border — never a shadow stack.
Hierarchy
Emphasis is ranked. Reach for the top of this list first and the bottom of it last: space, then position, then size, then ink, then — once per surface — Signal.
No ad-hoc sizes
Every size comes from the three-voice ladder — display at the 20px floor, Inter below it, mono never under 14px. A size that isn’t on the ladder is a new voice nobody agreed to. Most surfaces need four rungs; if you’re reaching for a fifth, the layout is doing work the spacing should do.
Signal marks one thing
Beyond primary and ring, a surface may spend Signal on exactly one mark — the pivot, the live item, the step everything turns on. A second one cancels the first. Categories and lanes are never coloured; they take muted ink.
Ink is a ladder too
Secondary information steps down in ink before it steps down in size: fg → fg-muted → grey-500 for the near-silent. Strokes and dividers live at grey-600 and below, and text never follows them down there.
Space is the grouping
What belongs together sits closer, and the gap widens as the relationship loosens — an eyebrow binds tight to its title, the title looser to its body. Before adding a rule or a box, check whether the spacing simply lost the argument.
Content first
When a surface shows real artefacts — an email, a page, a card — the artefact is the interface. Everything else is chrome, and chrome whispers.
Label, then the thing
A technical eyebrow, one title line, then the artefact — bleeding off its frame rather than being boxed inside it. The words stay legible when the viewport runs out; the artefact is what gets cut, and a ground-coloured fade says there’s more.
The camera holds still
Never transform or transition a live embedded document — a scaled iframe re-rasters its text and drops tiles, so the polish reads as a flicker. Hover is a border shift. This is about embedded pages, not data: charts still ease, and LiveLine still drifts.
Don’t narrate the interface
A caption that describes what the reader can already see is clutter. If the artefact shows its own empty state, delete the line explaining that it’s empty.
Show the kind, don’t spell it
When items differ in kind, let form carry it — a line style, a frame, a glyph — with the word beside it on first encounter so the language teaches itself. A key the reader has to consult is just more text. Glyphs under ~16px carry one idea, not three; give the structure to whichever element has the room.
Last updated on 2026-09-13