Skip to content
Distira Distira

Anatomy

LAW — locked, CI-gated

Anatomy

Section titled “Anatomy”

principle. small surfaces first. a surface shows only what the current state calls for, and its primary actions sit nearest the user’s point of entry, with passive information farthest from it.

rule — anatomy (law, from the popover record). the header is one line: the primary noun, its state, an overflow doorway. the hero (the depiction of the thing itself) sits on the panel material, not inside a card; cards and shadows are reserved for state. construction flows complete in place — inline forms replace the row they edit; enter commits, escape cancels; a delete confirms inline by turning the item into its own confirm for a few seconds, naming the object. section labels plus spacing tiers group content before any box is drawn: group with spacing and background shifts first, borders last, shadows second-to-last, and no shadows on glass (shadow on acrylic is mud).

rule — flyout manners (law).

  • a flyout grows from its anchor: it is its summoning object unfolded, one material across the join, opening at 180ms grow-from-anchor plus fade.
  • dismissal is triple-redundant: click away, escape, or toggle the anchor. escape closes the innermost layer first, always.
  • height fits content; travel is costed from the anchor; the panel’s height is its travel budget, not a default to fill.
  • state strips (drift, messages, suggestions) appear only when their state exists, as slim strips — icon, one line, actions — never as permanent cards. caps are small and stated per surface.
  • a cheatsheet mode is the on-demand home for the full keyboard legend: summoned, complete, dismissed. teaching lives there. it doesn’t get a permanent row in the panel.

rule: glass (law). glass is a material with a layer law: three layers, always (backdrop treatment, tint, shine). leave one out and the surface isn’t glass. glass belongs to transient and control surfaces (popovers, prompts, strips) and is forbidden in content regions; glass is never stacked on glass. glass strength is a named user setting with stops (acrylic / flat / solid); the operating system’s reduced-transparency setting forces the solid stop.

patterns. patterns graduate into law by a second surface witnessing them, or by verdict; until then they are candidates and live in docs/patterns/. candidates are citable as direction, never as law; a surface built on a candidate says so.

demonstrated

Section titled “demonstrated”

The components below are live specimens, not pictures of them: each renders from the token source, so what you see is a value the token file holds, or nothing.

the chip, measured

Section titled “the chip, measured”
height evening focus active tint — accent at 0.14 ring — 1px, accent at 0.45 text — 13px, semibold when active resting tint — accent at 0.1 border — the border token, white at 0.09 radius — full: height / 2, at any height active resting
the chip, measured. tint, ring, and type are read from the token source at build time.

the chip itself, in its token states.

evening evening evening

the popover, measured

Section titled “the popover, measured”
the tray evening at rest focus collapsed cinema collapsed drift — main is at 144 hz; the scene says 240 esc closes · ? for the cheatsheet panel — 440px wide (the chapter's measure) radius — panel, 12px cards derive inside it material — glass, black at 0.92 border — panel, white at 0.14 grows from its anchor — 180ms, the ease-out token scene name 15px semibold body 13px · hints 11px hero on the panel material, not in a card; strips exist only while their state does
the popover, measured. radius, glass, border, duration, and type are read from the token source at build time; the 440px panel width is the desktop chapter's measure.

a scene card, both ways

Section titled “a scene card, both ways”

collapsed: one line, state at the far edge. expanded: the detail opens in place.

evening at rest
evening open
displays
main at 144 hz
brightness
stops at 80
sound
desk speakers

a stepped select

Section titled “a stepped select”

density, the token core’s worked example: three stops, no free values.

comfortable

density: one of 3 designed stops. there is no in-between to type.

Canonical text: §4, surfaces and anatomy, in the design language document.