Atelier Design System
A hand-rolled React design system built with CSS Modules and design tokens generated by Style Dictionary. Zero Radix, zero Tailwind, zero headless-UI libraries. Every primitive ships keyboard-navigable, screen-reader-friendly, and WAI-ARIA-compliant by default.
Foundations
Colors, typography, spacing, radius, shadows, motion, z-index, and breakpoints. All exposed as CSS custom properties, all themeable per-brand, all light and dark ready.
Primitives
Low-level UI building blocks: Button, Switch, Checkbox, TextField, Select, Tabs, Accordion, and Dialog. Each component follows WAI-ARIA authoring practices and supports controlled and uncontrolled usage.
Patterns
Higher-level compositions showing how primitives combine into real-world UI: form layouts, settings panels, and confirmation flows.
Guidelines
Accessibility expectations, keyboard interaction patterns, ARIA conventions, and the design principles that guide every decision in the system.