Design Systems Handbook

It wasn’t hard to get them to follow the guidelines, it was hard to get them to agree on the guidelines.”

But in general, what I see most design systems break things down into are:
elements (or basics, or atoms)—these are small, stand-alone components like buttons and icons
components (or molecules, or modules)—these are usually an assembly of small components into a larger component like a search form (which includes a form input, a button, and potentially even a search icon)
regions (or zones, or organisms)—these are an area of the UI like a left-hand navigation
layouts—how the pieces are laid out on the page (like a header region, followed by a sidebar and main content area, followed by a footer)

Let’s take a look at each of these design elements and the role they’ll play in your design system. Take stock of all interface elements in production to see just how much design debt you need to address and what elements are most commonly used. Warning! This can get a bit depressing, as most companies have an intense amount of inconsistency in their UIs.