Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Foundations
  3. Semantics

Semantics

Background layers, intents, and when to break glass.

Semantics describe why a color or surface exists, not the literal hex. CORE-416 aligns neutral layers with intent slots so components can pivot between product states without rewriting CSS.
Neutral layering
  • Background.Base: default app canvas.
  • Background.Alt / Alt2: recessed or emphasized panels; backgrounds read as more important as you step up.
  • Foreground.Alt / Alt2: de-emphasized copy on those layers; text hierarchy runs inverse to background emphasis.
  • BorderColor.Default → Alt2: separation strength; pair with interactive states from the same step family.
Intent slots
Use intents when meaning matters:
  • Pair --color-intent-*-bg-subtle with --color-intent-*-text for banners, badges, and toasts.
  • Solid --color-intent-*-bg appears on bold actions and live indicators.
  • Neutral covers tooling and infra metadata; Live signals real-time connectivity; In progress covers work-in-flight without abusing warning yellow.
Glass overrides
When a feature truly needs a bespoke treatment, scope local CSS to intent or semantic tokens before referencing raw Radix steps. Document the exception in your feature spec so QA can track contrast.
Previous
Elevation
Next
Tokens
On this page
Neutral layering
Intent slots
Glass overrides