Loading navigation…
User
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.
Background.Base: default app canvas.Background.Alt / Alt2: recessed or emphasized panels; backgrounds read as more important as you step up.TextColor.Alt / Alt2: de-emphasized copy on those layers; text hierarchy runs inverse to background emphasis.Border.Base → Alt2: separation strength; pair with interactive states from the same step family.Use intents when meaning matters:
--color-intent-*-bg-subtle with --color-intent-*-text for banners, badges, and toasts.--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.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.
On this page