Atoms

Atoms are the smallest building blocks of an interface. In the example, they include a text input, a button, a color palette and a typeface.

On its own, an atom does little. A button with no context or an input with no label does not yet help anyone complete a task. Atoms become useful when you combine them.

Because everything else is built from atoms, changing one has a wide effect. Update the primary blue or the base typeface, and every component that uses it changes too.