From SWEBOK v3: Re-use has two closely related facets: “construction for re-use” and “construction with re-use.” The former means to create reusable software assets, while the latter means to reuse software assets in the construction of a new solution.
With regard to design systems, they are mechanisms for reuse. If there are documented patterns, that makes things more consistent among developers and designers when multiple people are involved.
This goes hand-in-hand with performance since more reuse === less code.
Composition
Design systems can be composed of any combination of the following:
Design tokens
- Brand colors and accents
- Spacing/sizing
- Breakpoints
- Typography
- See open props
Layout
- Grids
Components
- Avatar
- Accordion
- Accordion-Item
- Badge
- Card
- Carousel
- Carousel-Item
- Dropdown
- Dropdown-Control
- Dropdown-Menu
- Modal
- Modal-Overlay
- Spinner
- Tabs
- Tab-Control
- Tab-Item
- etc.
Examples
- Auro (Alaska Air)
- Carbon Design (IBM)
- Cedar (REI)
- Clarity
- Clever Components
- Component Gallery
- Crayons
- Design system gallery
- Elix
- FAST Components (Microsoft)
- Github
- Ionic
- Lion (ING)
- Material Components
- Open WC
- Oracle JET
- Pattern Fly (Red Hat)
- UI5 (SAP)
- USDS
- Salesforce
- Vaadin
Documentation and Tooling
- Backlight
- Eleventy
- Fractal
- Storybook
- Style Dictionary
- ZeroHeight
Planning & Research
- Catalog different components
- Add components incrementally
- Showcase components
- White-label components