Foundations

Foundations are the lowest layer of a design system — colour, typography, spacing, motion, iconography, elevation and grid — the visual primitives every component is built from. In most modern systems, foundations are expressed as design tokens so they can power both Figma libraries and code at the same time.

Get foundations right and components fall out cleanly; get them wrong and every component carries the bug. They're the layer to lock in early, and the layer to think hardest about when designing for theming or multi-brand use cases. Material, Carbon and Polaris all expose their foundations as the first chapter of their docs — for good reason.

Related: Design system · Design tokens · Colour system · Typography scale