RDI Design System
V2 · single source of truth
/
The canonical source for every RDI product surface — tokens, components, and UI kits — unified across React web and Avalonia native. Build parity is enforced by a machine-readable contract, not screenshots.
Logo & wordmark, color, typography, iconography, spacing, radii, shadow, and motion — the raw materials every product is built from.
Contract-defined components. Each ships a live preview, spec, React + Avalonia source, and a machine-readable mapping that enforces platform parity.
How components compose into real RDI surfaces. Each kit is a working prototype with kit-specific overrides, key screens, and usage guidelines.
Start in Brand Foundations. Commit to a token — not a hex, not a pixel value.
var(--accent) · {color.accent.default}
Copy the React snippet from the Component Explorer. CSS is token-bound; no magic numbers.
<Button variant="primary" size="md">Save</Button>
Same tokens, same variants. AXAML mirrors the React API. Compliance matrix catches drift.
<Button Classes="primary" Size="Md"/>
Each component's Compliance tab shows parity status per category. Green = shipped on both platforms.
spec.md · mapping.json · ✓ pass