States

Every interactive element is in one of these states at any given moment – at rest, hovered, focused, pressed, selected, disabled, read-only, or loading. Consistency across the system matters more than novelty in any one place. A button that signals focus the same way as a list row, an input, and a tab is a button you can use without thinking.

The focus ring

One ring across the system. Teal-600 stroke at 2 px, sitting outside a 2 px paper-coloured halo so it stays legible on cream, navy, or a photograph. It is set globally on a, button, input, select, textarea, [tabindex] via :focus-visible – it lights up for keyboard users and stays out of the way when a mouse clicks.

The ring is brand-locked teal because focus is a single, system-wide signal. A second focus colour anywhere in the product would force users to learn two visual languages for the same idea.

Tab through this row – the ring appears. Click any of them with a mouse and it will not. That is :focus-visible doing its job.

The token is a composed box-shadow so it works on any element without changing layout.

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--es-focus-ring);
}

--es-focus-ring:
  0 0 0 var(--es-focus-ring-offset) var(--es-color-paper),
  0 0 0 calc(var(--es-focus-ring-offset) + var(--es-focus-ring-width)) var(--es-focus-ring-color);

Hover

Hover is a tonal shift, never a hue swap. On light surfaces, overlay --es-state-hover-on-light – ink at 6%. On dark surfaces, overlay --es-state-hover-on-dark – white at 10%. The colour identity of the element stays exactly where it was.

Pressed

Pressed deepens the hover tint and pulls the element 1 px down. --es-state-pressed-on-light is ink at 12%; --es-state-pressed-on-dark is white at 18%. The state lives only while the pointer or key is held – on release, the element returns to hover or rest.

Selected

Selected marks “this is the active item in a set” – the current row, the open tab, the chosen option. Three tokens carry it: --es-state-selected-bg (teal at 8%), --es-state-selected-border (teal-600), --es-state-selected-text (teal-900). Weight bumps to 600 so the row reads as anchored.

Selected is a state, not a press. A selected item stays selected when you move your cursor away. A pressed one snaps back the moment you let go.

Disabled

Disabled controls stay visible. The user needs to know the action exists – it just isn’t available right now. Hide it and they’ll wonder where it went; grey it to the point of illegibility and they’ll think the whole interface is broken.

--es-state-disabled-opacity (0.40) dims the whole element on brand-coloured surfaces. For form chrome, --es-state-disabled-bg, --es-state-disabled-text, and --es-state-disabled-border paint the parts directly.

Use the native disabled attribute on form controls – it takes the element out of the tab order and announces correctly to screen readers. For non-form elements that need to look disabled, use aria-disabled="true" so assistive tech still sees them, then guard the click handler. Never style something to look disabled while leaving it focusable and clickable.

Read-only

Read-only is not disabled. The value matters, the user just can’t edit it – an account number, a calculated total, a publication date. Show the content at full contrast on --es-state-readonly-bg (stone-50) so it reads as informational, not non-actionable.

Loading

Loading uses --es-state-loading-shimmer for skeleton placeholders that mirror the shape of the incoming content. Skeletons reserve the layout and stop the page from collapsing and re-expanding around the user. An inline spinner is fine for a single button mid-submit – never replace the whole UI on every fetch.

If a load takes longer than a second, show progress. Under 200 ms, no indicator at all – the eye doesn’t need one.

State combination matrix

How states stack across common controls. Empty cells are by design – the combination doesn’t trigger or doesn’t apply.

Usage rules

Tokens to ship