Styles

Status language

One shape for every state on every axis. The same pill, disc size and padding; only the label, glyph, colour and line differ. Once people learn one, they can read them all.

Anatomy

A glyph (12px) and a label, in a 24px pill. At rest there is no fill and a transparent stroke that still takes up its pixel. Lit, the pill gains a tint and a hairline stroke. Because the stroke always takes its space, lighting up and resting never shifts a single pixel of layout.

Shopify · Applied

Amazon · Outcome unknown

Lit Just changed, or needs the eye now.

Shopify · Applied

Amazon · Outcome unknown

At rest Known, and not asking for anything.

Line carries existence

Line	Means	Used for
Solid	Exists	Observed facts, applied changes, verified results
Dashed	Only intended	Proposed changes, pending verification, not started, unknown
Dotted	Inferred	A reading, not a record

Lit → rest

A status that just changed stays lit for a breath (1.1s), then its fill and stroke fade over 420ms with a strong ease-out. The label and glyph never move (MOT-06). Lighting up is immediate, so the change is seen; resting is slow, so it is not startling.

Every value

Do and don’t

Applied

Do Draw applied as applied: a square, no green.

Synced

Don’t Draw an execution result with the verification glyph and a completion word.

Outcome unknown

Do Keep an unknown outcome still (MOT-12).

Still trying…

Don’t Spin for something that is not in flight.

In code

import { statusMark } from '@lyotic/components';
statusMark({ axis: 'execution', value: 'outcome-unknown', label: 'Amazon · outcome unknown', lit: true });
// throws if the value is not a legal value of the axis

<ly-status axis="verification" value="verified">Verified · 4 of 5 checks</ly-status>