Atomic Design model
How this kit is organized. Based on Brad Frost's model, with the names we use at Yuno.
The 6 levels
Design tokens and systemic decisions: colors, typography, iconography, spacing, radius, shadows. Not components themselves — the variables everything else consumes.
The indivisible atom of UI: Button, Input, Label, Badge, Checkbox, Switch. One job, highly reusable, no business logic.
Small groups of atoms working together: form field (Label + Input + hint), search box (Icon + Input), KPI card (Card + typography). Still reusable.
Larger blocks made of molecules and atoms: Page header, Sidebar, Top bar, full Form, Data table, Filter bar. Already living in specific context.
Reusable page structures without real content: List page, Detail page, Settings page, Wizard flow. Define where each organism lives.
The template with actual content of a specific flow. It's what the PM/designer assembles for a concrete case — discarded once it hits production.