Clear labels
Every interactive control should expose a visible label or an equivalent accessible name.
Icon-only actions still need an `aria-label` that explains the outcome.
Colors
Foundations Directory
Reference color scales and semantic tokens used across Curie DS surfaces.
Semantic Tokens
ds-surface-1
--ds-surface-1
ds-surface-2
--ds-surface-2
ds-surface-3
--ds-surface-3
ds-text-1
--ds-text-1
ds-text-2
--ds-text-2
ds-border-1
--ds-border-1
ds-ring-1
--ds-ring-1
ds-accent
--ds-accent
ds-success
--ds-success
ds-warning
--ds-warning
ds-danger
--ds-danger
Palette Scales
Base tokens used by semantic mapping
LightDark
Backgrounds
Interactive components
Borders and separators
Solid colors
Accessible text
100200300400500600700800900100011001200
Teal
--numo-teal-100..1200Orange
--numo-orange-100..1200Gray
--numo-gray-100..1200Yellow
--numo-yellow-100..1200Red
--numo-red-100..1200Slate
--numo-slate-100..1200Blue
--numo-blue-100..1200Warm Blue
--numo-warm-blue-100..1200Type
Heading / 3xl
Heading / 2xl
Heading / xl
Body / base - The quick brown fox jumps over the lazy dog.
Small / muted - The quick brown fox jumps over the lazy dog.
Mono / tokens - --background, --primary, --ring
Elevation
Elevation xs
--shadow-xs
Elevation sm
--shadow-sm
Elevation md
--shadow-md
Elevation lg
--shadow-lg
Radius
radius-sm
radius-md
radius-lg
radius-xl
Tailwind v4 maps radius utilities from --radius via @theme.
Accessibility
Practical examples and reminders for inclusive UI across Curie DS surfaces.
Keyboard focus
Interactive elements should be reachable in a logical order with visible focus states.
Use the same reading order as the layout and avoid trapping focus unless a dialog is open.
Contrast and hierarchy
Support meaning with text and structure, not color alone.
Status badges, trend lines, and alerts should pair color with labels, icons, or patterns.
Helpful feedback
Errors, loading states, and summaries should be announced in plain language.
Keep assistive text concise so screen reader users hear the important part first.
Notes
Prefer semantic HTML first, then add ARIA only when native elements cannot express the interaction.
Decorative artwork and repeated visual flourishes should be hidden from assistive tech.
Charts and dense data views should include a short text summary of the takeaway.
Relative dates like Today and Tomorrow are fine visually, but absolute dates help reduce ambiguity.