Principles
Five craft rules. They are how Vision becomes decisions on a surface. If a choice competes with these, the choice is wrong.
There is no “the Ether dashboard.” Purpose decides composition. These principles hold across a monitoring wall, an analytics cockpit, an admin console, and a product ops board.
1. Signal over chrome
Operators scan. Chrome that competes with data is a defect. Surfaces stay quiet; the metric, the delta, and the alert are the subject.
Why: a dashboard is read in glances. Attention is the scarce resource. Spectacle — gradients that perform, chrome that glows, decorative motion — spends that resource on the frame instead of the reading.
In practice
- Hairline borders, not heavy frames. Quiet paper. One saturated accent (Signal).
- Status, delta, and incident outrank navigation, skins, and brand moments.
- If you can remove chrome and the reading is clearer, remove it.
2. Compose, don't template
No single canonical dashboard layout. Canvas, rails, panels, density scale. Purpose decides composition.
Why: templates create forks; primitives create range. The moment there is “the Ether dashboard,” every other job starts a private variant and the language dies.
In practice
- Compose from canvas, rail, panel, metric, spark, filter, range, command.
- Do not ship a starter layout that pretends to be every job.
- Card is a visual treatment, not a layout primitive. Panel is the bounded region with one job.
3. Density with breath
Three densities: compact, standard, roomy. Sparse looks designed and is useless; crushed looks powerful and is unreadable.
Why: density is a property of the job, not a brand pose. An on-call wall needs compact. A quarterly review needs roomy. The brand is the scale, not a single tightness.
In practice
- Compact / standard / roomy are named and tokenised. Do not invent “comfortable” or “tight.”
- Touch and click targets stay at least 44×44 even in compact.
- Never drop below 12px. Base is 16px. Line-height 1.5 or more.
4. Motion explains change
The event is that something changed. Motion points at the delta. Entrance stagger builds a scan path. If it doesn't change what the eye understands, it doesn't ship.
Why: animation is a functional craft. Decorative motion is chrome. Reduced motion is a first-class path: instant, or opacity only.
In practice
- Ease-out, short, on the thing that changed.
- Press: scale(0.97) in 120ms. Panel enter: opacity + 6px, 280ms. Stagger 40ms per item.
- Animate transform and opacity for hover-many, scroll, and loops. Blur is one-shot on a metric tick.
prefers-reduced-motion: reduce→ instant or opacity-only. No stagger. Never flash more than three times per second.
5. Accessible by construction
Contrast, focus, semantics, and reduced motion live in tokens. They are not a late pass.
Why: an instrument only some people can read is broken. WCAG 2.2 AA is the floor, not a phase, not a claim of guaranteed compliance.
In practice
- Text contrast ≥ 4.5:1; large text and UI ≥ 3:1.
- Visible 2px Signal focus ring, 2px offset, on every interactive element. Never
outline: nonewithout a replacement. - Color is never the only signal. A delta is icon + word + color.
- Landmarks, heading order, keyboard, live regions — see Accessibility.
Using the principles
When two principles pull, Signal over chrome and Honesty of state (from Vision) win. A dense, accessible, honest reading beats a prettier one.
Related
- Vision
- Assets — the visual and motion language these principles require
- Accessibility