Design systems can be tricky if you don’t know what certain words mean! Here’s a quick primer to help you get acclimated.
One of two main ingredients of any design system—the other being guidelines—a component library—also referred to as a pattern library—is a collection of components or patterns where you can browse examples of components and find code references for how to implement the components into a codebase.
A package-managed, version-controlled, software product that contains the smallest set of components and guidelines an organization needs to make digital products consistently, efficiently, and happily.
Many people have different and useful definitions for design systems:
The other big ingredient of design systems (along with a component library), guidelines are suggestions or rules to follow for how to best use any given design system.
Good guidelines tell you what and what not to do. A great example of a guideline from Shopify’s design system Polaris is from their anti-patterns section: “Fix a problem before proceeding to the next step.”
A product designed to be a proof-of-concept for the efficacy of a design system.
A platform- and technology-agnostic way to store a value to be ingested by specific applications.
Examples of useful properties to store as tokens: color palette, typographic families, spacing units.