Design systems
A design system is where design and engineering meet most often. Tokens, scales and themes are the shared language, and components are what gets built from it.
Not yet reviewedLevel
Resources
Terms
- BeginnerDesign systemA design system is a shared set of components, tokens, patterns and guidelines that a team uses to build a consistent product.Not yet reviewed
- BeginnerDesign tokensDesign tokens are named values for design decisions, such as colors, spacing and type sizes, stored once and used everywhere.Not yet reviewed
- BeginnerCSS custom propertiesCustom properties, also called CSS variables, are values you define with a double dash name and reuse with var().Not yet reviewed
- IntermediateSemantic tokensSemantic tokens are named by purpose, like color-text-danger, and point to raw values like red-600.Not yet reviewed
- BeginnerSpacing scaleA spacing scale is a short list of allowed gaps and paddings, such as 4, 8, 12, 16, 24 and 32.Not yet reviewed
- BeginnerType scaleA type scale is a set of related font sizes, each with a matching line height and weight, used for headings and body text.Not yet reviewed
- IntermediateThemingTheming changes the look of a product by swapping token values, for example for a brand, a customer or a color scheme.Not yet reviewed
- IntermediateDark modeDark mode is a second color scheme with dark surfaces and light text.Not yet reviewed
- BeginnerComponent libraryA component library is a collection of ready made UI parts, such as buttons, inputs and dialogs, that a team assembles screens from.Not yet reviewed
- IntermediateAtomic designAtomic design is a method by Brad Frost for building interfaces from atoms, molecules, organisms, templates and pages.Not yet reviewed
- IntermediateToken pipelineA token pipeline is an automated flow that takes tokens from a source file, often exported from Figma, and transforms them into code for each platform.Not yet reviewed
- BeginnerUtility-first CSSUtility first CSS builds styles from many small single purpose classes, like p-4 or text-center, applied directly in the markup.Not yet reviewed
Documentation
Design Tokens Community Group
The community working on a shared file format for design tokens, useful for seeing where the standard is heading.
Books
Atomic Design
A free online book that explains how to think of interfaces as small reusable parts combined into larger ones.
Know more about Design systems?
Suggest a term, a change, or a resource. No account needed.
Suggest a change