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.

Leading, or line-height in CSS, can improve readability and aesthetics of your typography. While the best line-height can vary depending on the font face and the line length, a general rule of thumb is to have leading at around 1.4–1.5x the font-size. 1.5 is recommended by the W3C Web Accessibility Initiative.

we break apart each component of a design system we find these fundamental elements that make up its visual design language:
Colors
Typography (size, leading, typefaces, and so on)
Spacing (margins, paddings, positioning coordinates, border spacing)
Images (icons, illustrations)

With insights in hand from customer interviews, it’s time to take an inventory. There are two types of interface inventories to be created:
An inventory of the visual attributes (such as spacing, color, and typography), which will help us create a codified visual language
An inventory of each UI element (such as buttons, cards, and modals), which will help us create a UI library of components

Components are portions of reusable code within your system and they serve as the building blocks of your application’s interface.

Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

examples of how a North Star impacts company alignment in his talk, “Purpose, Mission and Strategy.” One example he gives is about Foursquare’s product focus moving from the consumer app to the direction of being a location data platform that could power other applications. This was a massive shift in direction. It was the vision “making cities more delightful” that provided a much-needed North Star for employees to accept and embrace this new model. Gro

Regardless of the technologies and tools behind them, a successful design system follows these guiding principles:
It’s consistent. The way components are built and managed follows a predictable pattern.
It’s self-contained. Your design system is treated as a standalone dependency.
It’s reusable. You’ve built components so they can be reused in many contexts.
It’s accessible. Applications built with your design system are usable by as many people as possible, no matter how they access the web.
It’s robust. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs.