Design Systems

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.


Design systems can be composed of any combination of the following:

Design tokens

  • Brand colors and accents
  • Spacing/sizing
  • Breakpoints
  • Typography
  • See open props


  • Grids


  • Avatar
  • Accordion
    • Accordion-Item
  • Badge
  • Card
  • Carousel
    • Carousel-Item
  • Dropdown
    • Dropdown-Control
    • Dropdown-Menu
  • Modal
    • Modal-Overlay
  • Spinner
  • Tabs
    • Tab-Control
    • Tab-Item
  • etc.


Documentation and Tooling

Planning & Research