Get started

Design tokens for status colors: define roles, map modes, and verify states

A status token names product meaning and permitted use. Its color is a mode-specific implementation detail. Define the policy first, then map channels and components without confusing product status with interaction, validation, focus, or chart roles.

Updated October 3, 2026

Freeze the status contract before choosing colors

Start with the decision the token must carry. Your product may need success, information, warning, danger, emergency, pending, or another local concept. No vendor taxonomy can decide which of those belongs in your product. Carbon and the NYS Design System document different, system-specific structures. Their catalogs are useful examples, not a universal vocabulary.

For each proposed status, record its governing source and version, plain-language meaning, permitted uses, exclusions, supported modes, required channels, named consumers, protected surfaces, owner, and evidence state. Exclusions matter. A danger role may describe a destructive product outcome while remaining excluded from ordinary hover styling, focus indicators, and chart series.

Representation is not policy

The captured Design Tokens Color Module describes color representation, but it identifies itself as a preview draft and says not to implement or cite it as authoritative guidance. It does not choose your status vocabulary, component behavior, or acceptance policy.

Route each candidate to the layer that owns it

Don't ask only whether a case uses color. Ask what decision would change it and which consumers should change with it. A case outside the status taxonomy does not automatically belong to a component. It may be another shared semantic role. The matrix is a routing method, not a mandatory naming scheme.

Decision classRouting outcomeReason
Raw green swatchReusable color valuePrimitiveIt has no product meaning and should sit beneath semantic or component contracts.
Order completedProduct statusShared status roleThe same meaning may appear in banners, badges, timelines, and icons.
Button hoverNamed interaction stateComponent tokenThis is a button state. It is component-scoped only if the button contract owns the behavior.
Pressed buttonNamed interaction stateComponent tokenThis control state belongs to the button contract rather than a success or danger role.
Selected navigation itemNamed selection stateComponent tokenThis navigation consumer communicates selection or location, not product status.
Disabled submit buttonNamed availability stateComponent tokenThis submit control communicates availability through its component contract.
Generic focus indicatorNon-status semantic candidateUnresolved ruleFocus may be a shared semantic role. Use a component token only when a named component contract has independent change authority.
Invalid email fieldValidation decisionUnresolved ruleThe project must decide whether validation maps to a shared danger role, a form semantic role, or an input-owned token.
Revenue chart series 2Data-series decisionUnresolved ruleA chart role may be shared across visualizations. Use component scope only when a named chart contract owns an independent decision.
Regulated emergency banner overrideBounded requirementApproved local exceptionRecord its approval, scope, owner, and review trigger.
New attention state with no agreed meaningUndefined product meaningUnresolved ruleDon't let an available color define a status the product has not defined.
Candidate-routing matrix. Unresolved cases need an ownership decision before implementation.

Carbon's observed catalog separates support colors from hover, active, selected, focus, and component responsibilities. The NYS guide documents shared semantic status and focus roles. Identity Forge's general semantic-color guide also separates state, form and focus, and reusable chart roles. Together, these references support keeping the concerns separate. The local product still decides ownership.

Semantic does not mean status

Status, focus, and chart roles can all be semantic because they name reusable intent. They remain separate families because they communicate different things.

Map modes and channels for one named consumer

Don't create foreground, surface, border, and icon aliases for every status by default. Start with one named consumer and add only the channels its contract needs. The example below is limited to an account-settings save-confirmation banner. It is a planning matrix, not an executed implementation.

Channel or stateLight mode mappingDark mode mappingRecord state
Default surfaceStatus surface<success-surface-light><success-surface-dark>Proposed; source identifiers, project aliases, and mode relationships are unresolved.
Message foregroundText on the status surface<success-foreground-light><success-foreground-dark>Proposed as a separate channel; no mapping has been recorded.
Success iconIcon channel<success-icon-light><success-icon-dark>Conditional and unresolved until the banner contract requires an icon channel.
BorderBoundary channel<success-border-light> or not applicable<success-border-dark> or not applicableConditional and unresolved until the component contract decides.
HoverInteraction stateNot applicableNot applicableThe banner container is not an interactive control.
ActiveInteraction stateNot applicableNot applicableNo pressed state exists for this consumer.
SelectedSelection stateNot applicableNot applicableThe banner does not represent selection.
DisabledAvailability stateNot applicableNot applicableThe displayed message is not an operable control.
FocusFocus stateNot applicable to the banner containerNot applicable to the banner containerAny dismiss control needs its own focus contract and evidence.
Observed resultRendered evidenceUnresolvedUnresolvedNo render, inspection, or accessibility evidence is claimed.
Proposed mode-and-state matrix for an account-settings save-confirmation banner. Angle-bracketed entries are unresolved placeholders, not recorded mappings.

The surface and foreground are proposed as separate channels, but neither is mapped yet. A mapped claim requires the source identifier, project alias, and light and dark relationship to be recorded. The banner carries a product status. A dismiss button inside it carries interaction and focus states under another contract.

Inspect an upstream semantic color system

Use a public kit to inspect roles, mode values, and delivery formats. Keep your project's vocabulary, mappings, consumers, and evidence in a separate record.

Treat Ambient Sage v1 as bounded upstream intake

Ambient Sage v1 is useful as a source record because its public page exposes a real semantic system rather than a hypothetical palette. The page lists 28 semantic tokens in light and dark modes. For this status-specific scope, the relevant public upstream roles are success, warning, and destructive.

Token specimen · real values

Ambient Sage

Live render

Ambient Sage's actual tokens — the same values its exports use.

Color tokensSemantic roles with HEX / HSL / CMYK

Color tokens

Ambient Sage
light · HEX · HSL · CMYK

Core

#F3F4EF

background

H 72 · C0, 0, 2, 4

#1A1C17

foreground

H 84 · C7, 0, 18, 89

#E5E6E0

card

H 70 · C0, 0, 3, 10

#ECEEE8

muted

H 80 · C1, 0, 3, 7

#D8D9D2

border

H 68.57 · C0, 0, 3, 15

Brand

#FEE951

primary

H 52.72 · C0, 8, 68, 0

#1A1C17

primary-fg

H 84 · C7, 0, 18, 89

#E5E6E0

secondary

H 70 · C0, 0, 3, 10

#F7E464

accent

H 52.24 · C0, 8, 60, 3

#FEE951

ring

H 52.72 · C0, 8, 68, 0

Semantic

#C0392B

destructive

H 5.64 · C0, 70, 78, 25

#FFFFFF

destructive-fg

H 0 · C0, 0, 0, 0

#2D7238

success

H 129.57 · C61, 0, 51, 55

#C97D12

warning

H 35.08 · C0, 38, 91, 21

#545651

muted-fg

H 84 · C2, 0, 6, 66

Charts

#FEE951

chart-1

H 52.72 · C0, 8, 68, 0

#4A8FD4

chart-2

H 210 · C65, 33, 0, 17

#6BBF8A

chart-3

H 142.14 · C44, 0, 28, 25

#E07498

chart-4

H 340 · C0, 48, 32, 12

#E8A24B

chart-5

H 33.25 · C0, 30, 68, 9

Ambient Sage v1 color tokens shown as upstream kit data. This specimen does not establish a consuming project's vocabulary, mappings, accessibility, or approval.
Intake categoryRecorded valueState
Governing source and versionSource identityAmbient Sage v1 public kit pageRequired and available upstream
Available status rolesUpstream role inventorySuccess, warning, destructiveRequired and available upstream
Supported modesMode coverageLight and darkRequired and available upstream
Delivery formatsArtifact inventoryCSS variables, DESIGN.md, shadcn registry, Tailwind, and DTCGAvailable upstream; delivery does not prove local adoption
Local status vocabularyProject policyUnresolvedProject-owned
Project mappingApplication mappingUnresolvedProject-owned
Named consumersAdoption scopeUnresolvedProject-owned
Protected surfacesUnaffected scopeUnresolvedProject-owned
ExclusionsOut-of-scope meanings or statesUnresolvedProject-owned
ExceptionsApproved deviationsUnresolvedProject-owned
Accessibility evidenceEvaluation recordUnresolvedProject-owned evaluation
Runtime observationsRendered evidenceUnresolvedProject-owned evidence
ApprovalAcceptance decisionUnresolvedProject-owned decision
Bounded intake record for Ambient Sage v1

The ownership boundary

Identity Forge supplies upstream semantic inputs and export artifacts. The consuming project owns its status policy, vocabulary, mappings, adoption, component contracts, exclusions, exceptions, accessibility evaluation, runtime evidence, and approval.

Trace one illustrative mapping without inventing a result

This fixture is deliberately unexecuted. It shows what the record needs without attributing placeholder values to Ambient Sage or claiming that anyone rendered, inspected, or tested a component.

Record categoryProposed recordEvidence state
Source roleUpstream semantic inputsuccessIllustrative; source selection not approved
Light source valueMode-specific source value<source-light-success>Unresolved placeholder
Dark source valueMode-specific source value<source-dark-success>Unresolved placeholder
Emitted artifactDelivered representation<artifact path, format, version, and emitted identifier>Unresolved; no artifact inspected
Project mappingLocal alias--app-status-success-surface -> <emitted identifier>Illustrative and unexecuted
Component contractChannel adoptionSaveConfirmationBanner proposes surface, foreground, and optional icon channelsIllustrative; contract not approved
Named consumerAcceptance scopeAccount settings: save-confirmation bannerScope selected; adoption unverified
Expected observationFalsifiable expectationIn light and dark modes, the banner uses the recorded success channels while protected warning and destructive consumers remain unchanged.Expectation only
Actual observationRendered resultPendingNo render or inspection performed
Exception statusException-register checkCheck the exception register before acceptanceUnresolved
OwnerCorrection authority<named person or accountable project role>Required and unresolved
Evidence stateAcceptance evidenceUnobservedCannot support acceptance
Illustrative and unexecuted success mapping for one named consumer

Make the expected observation falsifiable. "Looks correct" can't reveal whether the failure belongs to the status policy, mode value, project alias, component contract, or a local override.

Copy the acceptance record before testing

Write the record before you inspect the preferred render. Required means acceptance depends on the field. Conditional means the scoped consumer determines whether it applies. Unresolved marks a missing decision or observation. Not applicable needs a reason.

Record categoryWhat to recordInitial state
Governing source and versionAuthoritySource name, immutable or dated version, and authority boundaryRequired
Semantic meaningPolicyPlain-language product meaning and permitted useRequired
Supported modesScopeEvery mode covered by the acceptance scopeRequired
Required channelsComponent needsForeground, surface, border, and icon only where the named consumer needs themRequired or conditional
Named consumersAdoption scopeExact component, variant, and product surfaceRequired
Protected surfacesChange boundaryConsumers that must remain unchanged during the controlled checkRequired
ExclusionsPolicy boundaryInteraction, focus, validation, data-series, or other cases excluded from this status contractRequired
ExceptionsApproved deviationException identifier, scope, owner, reason, and review triggerConditional; unresolved until checked
OwnerAccountabilityNamed person or accountable project role for the decision and correctionRequired
ExpectationAcceptance criterionMode, channel, consumer, and protected-surface result that can be inspectedRequired
ObservationExecuted evidenceActual result plus environment, artifact version, and inspection contextUnresolved until executed
Evidence stateProof boundaryDefined, delivered, mapped, observed, or another documented local modelRequired
DispositionDecisionAccept, revise, or block, with the unresolved fields that determine the choiceUnresolved until review
Copyable status-token acceptance record

Accept only when all evidence required by the declared scope supports the expectation. Choose revise when the policy is sound but a correctable mapping, artifact, component contract, or record remains incomplete. Block when a required policy decision has no owner, a required observation is missing, or the result contradicts the approved contract.

Find the first divergent layer

When the consumer does not match the expectation, inspect the chain in ownership order. Stop at the first divergence instead of correcting whichever file is easiest to edit.

  1. 1

    Check the source policy

    Confirm that the status meaning, permitted uses, exclusions, modes, channels, consumers, and owner are explicit and current.

  2. 2

    Check the emitted artifact

    Confirm that the expected source version produced the required identifiers and mode values in the artifact the project received.

  3. 3

    Check the project mapping

    Confirm that local aliases point to the intended emitted roles in each supported mode and that no stale value replaced them.

  4. 4

    Check the component contract

    Confirm that the named component and variant consume the project mapping for every required channel and do not substitute a literal or unrelated role.

  5. 5

    Check the approved exception

    Determine whether a documented exception intentionally changes this consumer. Verify its scope and owner before treating the difference as a defect.

  6. 6

    Check the rendered consumer

    Inspect the named consumer under the recorded modes, content, and state. Record the observation without making claims about untested consumers.

Fix the owning layer

If the artifact is correct but the project alias points elsewhere, correct the project mapping. If an approved exception explains the difference, update the evidence record instead of erasing the exception. A downstream patch can hide an upstream divergence.

Keep status meaning separate from nearby states

Product status describes something the product needs to communicate, such as a completed operation or a condition requiring attention. Hover, active, selected, and disabled describe interaction or control state. Focus can be a shared semantic role. Input validation needs a local decision: does it reuse danger, use a form semantic role, or belong to a component contract? Chart colors may also be reusable semantic roles. Being close on screen doesn't give these cases shared meaning.

The general Identity Forge semantic-color guide covers the broader role system, including paired foreground roles, state colors, form and focus roles, and chart colors. This guide focuses on status policy, adoption, and evidence. Add a component-token layer only when a named component property has independent change authority and bounded consumers.

Verify one reused role before expanding the taxonomy

Choose the status role reused by the most important current consumers. Select one precise consumer, complete the acceptance record, map only its required channels, inspect both supported modes, and record the first divergence. Add another status name only after the first role has an owner, a traceable mapping, and an actual observation.

Sources