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.
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.