The 4 Layers: Core Systems & Components

Building outward from tokens, the final two layers deliver operational structure and tangible UI widgets:

1. Core Systems: Reusable structural frameworks built from tokens, such as spatial 8-point grids, z-index elevation scales, typographic modular scales, and light/dark theme modes. Core systems demonstrate how discrete rules work together in layout.
2. Components (Outer Layer): The tangible, interactive elements users see and touch—buttons, input fields, navigation bars, modals, and toasts. Components consume tokens and conform to core systems.

When inner foundational layers are rigorous, outer components can evolve smoothly without breaking product consistency.