Overview
Introduction
What the design system is, and how to use this site.
Every screen on Refusal Dice is built from the pieces on this site, so changing one changes it everywhere. Each piece below renders the real component, live, in whichever theme you’re using.
9
Foundations
color, type, layout, writing…
64
Components
in 9 groups
23
Patterns
whole features, built from components
How this site is organized
| Section | What’s in it |
|---|---|
| Overview | Principles, and how a new pattern gets approved. |
| Foundations | Color, typography, layout, shape, motion, icons, writing, accessibility, and the theme playground. |
| Components | The building blocks, in groups: General, Layout, Navigation, Data entry, Data display, Dice, Table, Odds, Feedback. |
| Patterns | Whole features built from components: Play, the tutorial, the Odds Lab tools, the Strategy Assistant. |
Status
| Status | Means |
|---|---|
| Approved | Use it anywhere. |
| Proposed | On this site for review. Only the design system may render it until it’s approved. |
| Deprecated | Kept for reference. Nothing may import it; the page says what to use instead. |
The tests in src/__tests__/design-system.test.ts enforce all three, and fail when a component file isn’t listed in src/design-system/registry.js.