Skip to content

Components

Core components

The instrument's controls. They import Foundations tokens. They do not invent hex, space, or easing. Canvas, Rail, and Panel — the composing patterns — come next.

Each page is a short Ether spec, a live demo, do/don't, motion, and accessibility notes. Demos are runnable. They are not screenshots.

Actions

One filled action

Primary ink-on-signal. Press scale 0.97.

Inline navigation

fg-signal, underline, never icon-only.

Contextual menu

Not Select. Click open. Esc closes.

Tabler outline 24

Reserved set. currentColor. Not a control.

Input

Visible label

Error + icon + describedby. Type stays 16.

Rows 3

Resize block-end. Same field states.

Native when few

Placeholder is an empty option, not the label.

Native 20 in 44

Mixed via aria-checked. Fieldset groups.

Always a group

Never a single radio. Arrows + space.

Immediate

On = signal fill. Not for exclusive or multi.

Ether Range

Locale first weekday. Time does not reverse in RTL.

Feedback

In-page status

Muted fill, reserved icon. Dismiss, never timeout.

Elevation 4

6s, max 3, pause on hover. Critical persists.

The extra

400ms open. Never the label.

After 300ms

Spinner when layout is unknown.

Determinate first

Indeterminate is a pulse, not a fake percent.

Known layout

Match size and radius. Compose, don't clone the page.

Blocking dialog

Focus trap. One primary in the footer.

Structure

One job revealed

Chevron 90°. Grid rows 0fr to 1fr.

One selected

Underline in a panel. Pill on canvas. Not page nav.

nav + ol

Current is text. Collapse the middle.

Named pages

Page 4, of 12. Compact is prev/next + status.

Visual treatment

Not a Panel. Tappable via the title link.

Insight strip

Snap, peek 24px. No autoplay.

People and orgs

Image, initials, icon. Groups overlap 8px.

Muted pill

Counts 9 / 99 / 99+. Never New!!

Sized always

Cover thumbs. Fallback inset + icon.

Native ul/ol/dl

space-2 gap. Item slot.

Hairline

hr or vertical. Decorative is aria-hidden.