<?xml version="1.0" encoding="utf-8"?>

Atoms

Atoms

Atoms are basic elements that form labels, inputs, buttons, and other basic properties like colors, fonts, and border-radius that can't be broken any further. At an individual level, atoms are abstract concepts with no real meaning. But when combined, they start to create more meaningful elements called molecules.[2]

Modifying a single atom has a ripple effect on the entire design. Change a font, for example, and the entire look of the site’s typography is changed. Atoms are likely to show up on a mood board that might be presented to stakeholders on a design project but aren’t really deliverables on their own.

Improve your UX & Product skills with interactive courses that actually work