What this module should change
You will be able to define a foundation by role and constraint, then determine whether it belongs in guidance, tokens, utilities, or components.
Module guide
Four decisions to understand
Color roles
Color systems distinguish brand expression from semantic communication, interaction states, surfaces, and data visualization.
Replace a palette list with roles for text, surface, border, action, status, focus, and data.
Typography
A type system defines reading hierarchy, density, language coverage, scaling, and implementation—not only font families.
Test one content page at 200% zoom, narrow width, bold text settings, and with a fallback font.
Spacing and layout
Spacing encodes relationship; layout rules determine how those relationships adapt when content or viewport changes.
Label spacing as inset, stack, inline, section, or layout gap instead of choosing numbers ad hoc.
Motion and feedback
Motion should explain continuity, hierarchy, state change, or causality while respecting reduced-motion preferences.
For each animation, write the information it communicates. Remove it if the answer is only decoration.
Working principles
Name purpose before value
A role such as text.muted survives theme changes better than a name tied to gray.600.
Test real content
Foundations fail when long labels, localized text, dense data, zoom, and assistive settings are introduced late.
Allow controlled variation
Platform modes, density modes, and brand themes should change through explicit rules rather than local overrides.
Saved in this browser
Practice and check your understanding
Explore next