Semantic hierarchy
Primitive values map to roles such as surface, text, border and focus—never directly to one component.
PrimitiveSemanticPattern
AI-first design system
Pattern Library
Reusable, governed interaction patterns for transparent and controllable enterprise AI.
Clarity UI · v1.4.0
Foundations
Semantic tokens connect governance decisions to code.
Every pattern inherits a small set of named foundations, so policy, accessibility and brand changes remain consistent across the workspace.
Risk & evidence
Risk communicates consequence; evidence communicates support. The two remain independent.
Humanist sans-serif type
A single clear, highly legible sans-serif family keeps the product precise, approachable and presentation-ready.
AaClarity, care, control
Spacing & focus
A four-point spacing scale and three-pixel focus ring preserve rhythm and keyboard visibility.
Motion
Motion explains state change, remains subtle and collapses when reduced motion is requested.
140ms220ms
Light & dark themes
Both themes use the same semantic contract and independently tested contrast pairs.
AaAa
Accessibility decisions
Safety must remain visible and operable for everyone.
Logical focus order, visible focus rings and no hover-only actions.
Every state uses iconography and plain-language labels.
Agent transitions use polite screen-reader announcements.
Reduced-motion preferences remove non-essential transitions.