Fill tiers: which rung, and why

The EDS 2.0 colour ladder gives every family — accent, neutral, info, success, warning, danger — fifteen steps in stacking order: canvas, surface, three muted fills, three borders, three emphasis fills, two texts, two texts on emphasis (the public palette generator's PALETTE_OVERVIEW.md in equinor/design-system lists them; checked 2026-09-06). This skill answers one question about it: when an element needs a background, which rung is it? The answer turns on a single test.

The fill rungs are for things you can press. Static areas sit on the canvas and surface tiers.

This skill emits no values: the colours come from the palette; this is the rule for binding them.

1. Is it interactive?

Ask before emitting anything:

Can the user press this — is it a control — or is it an area that holds content?

The answer decides the tier family, not a shade within it. A button, a chip, a menu row, a tab, an icon button, a switch: interactive, so a fill tier. A banner strip, a card, a table body, a dialog body, a page region: static, so canvas (the page's floor) or surface (a tinted or raised area on it). This is the test that resolves the one collision the system had: a tinted static strip that looked like a muted fill made the ghost button sitting on it disappear, because both landed on the same step. The strip moved to surface and the whole interactive ladder read correctly above it by construction. A tone variant of a static area is bg-{tone}-surface, with a border-{tone}-subtle hairline where dark mode needs the separation.

2. Which fill tier

Three tiers, one per weight of call to action:

Each tier is a ladder of states: default, hover, active, and selected where the component has a selected state. Ghost's ladder starts at transparent and gains a step on hover (step 3) and active (step 4), which is what makes a row feel pressable without looking like a button at rest. selected is the tier's top step by design — the same step as active: 4 for ghost, 5 for muted, 11 for emphasis — and a selected element stays there on hover; there is nothing above it to move to. The accent ghost-selected rung is what a selected tab or menu item wears.

Token shape, per family and tier: bg-{tone}-fill-{emphasis|muted|ghost}-{default|hover|active|selected}, with the neutral family also unprefixed as bg-fill-*. Ink follows the tier: on an emphasis fill, text-{tone}-strong-on-emphasis and icon-{tone}-on-emphasis; on muted and ghost, the ordinary strong text and icon inks. Never pick a text colour by eye against a fill; the pair is predetermined by the tier. The rule applied once, the ghost icon button of request 1 in the neutral family:

/* ghost: transparent at rest, one step on hover, two on active; ink is the
   ordinary icon ink; disabled keeps transparent and takes the disabled ink */
.icon-button          { background: transparent;                    color: var(--eds-color-icon); }
.icon-button:hover    { background: var(--eds-color-bg-fill-ghost-hover); }
.icon-button:active   { background: var(--eds-color-bg-fill-ghost-active); }
.icon-button:disabled { background: transparent;                    color: var(--eds-color-text-disabled); }

3. Disabled, and what a state may change

Disabled is not a fourth tier. It is a set of inks and, for the emphasis tier only, a grey plate: bg-fill-emphasis-disabled with text-disabled, which is also the disabled icon's ink — there is no separate icon-disabled token, the disabled concepts are bg-, text- and border-disabled only. A muted fill has bg-fill-muted-disabled and keeps its structure with border-disabled; ghost stays transparent with disabled inks. States state what changes and nothing else — a hover that also changes the border, or a disabled that changes the size, is a second component wearing the first one's name.

4. Energy Red

Energy Red is the Equinor brand's signature colour, and in branding it reads as energetic. In an application interface a saturated red on an interactive element reads as danger — destructive, stop, something is wrong. The same pigment carries opposite messages in the two media, so Energy Red is never the primary action. The primary tone is accent; red exists in the system only as the danger tone, an explicit opt-in for destructive actions where "danger" is exactly the message. That is a refusal, not a loss: the brand fact is recorded, and deliberately not carried into this context.

5. Check the result

• Read the page with the fills hidden. Everything that still needs a background to make sense was static, and belongs on canvas or surface.
• Count the emphasis fills in view. More than one is a hierarchy problem, not a colour problem.
• Press everything that looks pressable. A ghost element must gain a step on hover; a static area must not.
• Contrast is measured, not assumed. The pairs above are the ones the palette guarantees; anything off the tier — a custom fill, an ink from another family — is outside the guarantee and needs checking with a contrast tool.
• The steps are still where this skill says they are. The tier-to-step mapping (3–5, 9–11, hover 3 / active 4 for ghost) is read off the palette generator's step table; re-read it when the palette is regenerated, and re-date the line in section 1.

Representative requests

Four acceptance criteria — a component's background at rest and in states, the static-versus-interactive call for a strip, the red primary button, and auditing a component's existing bindings — plus a routing check: references/representative-requests.md.

Positions this skill takes

Three, each with the collision or the confusion observed when it was not held: static areas never take fill rungs, ghost is the default interactive tier, and Energy Red is refused for primary actions: references/positions.md.

Related

• colour-palette (planned) — generates the fifteen-step ladder these rungs are chosen from.
• colour-contrast (planned) — measures the pairs; this skill only binds them.
• spacing-ladder — the other half of a control's recipe: the fill says what it looks like, the inset says how big it is.

Provenance

The tier semantics, the ghost ladder and the static-equals-surface rule come from the EDS token rework in equinor/ids-meetup-oslo-26 (Equinor-internal; eds-tokens-reworked/DECISIONS.md, the banner and fill-tier entries, and DESIGN.md's colour table), and the Energy Red rule from its eds-cli/principles/brand.md. The ladder itself is the public EDS palette generator in equinor/design-system.