Home ∣ Design Process ∣ Fundamentals ∣ Guidelines ∣ Accessibility ∣ Methods ∣ Research Design Systems ∣ AI ∣ Software Dev ∣ Low-Code Dev ∣ Soft Skills ∣ Career ∣ Tools ∣ Links

Design System Definitions

A design system is a collection of reusable principles: design tokens, elements or components, and patterns. Combine these to create templates.

They are systems that unites product teams around a common visual language. It reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life. Learn how you can create your design system and help your team improve product quality while reducing design debt.

Design System Study

Design Systems Handbook

Intro to Design Systems

• The more reusable the components are the less you need to maintain, and the easier scale becomes
• Needs to have a shared source of truth
• The design system needs to document all aspects of the system including the components, guidelines, and UX best practices

Designing the Design System

• The visual design language will be the foundation of the UI library
• The Design System team model
  • The solitary model: an overlord rules the design system
    • Pro: Speed and scrappy
    • Con: overlord can become bottleneck
  • The centralized team model: a single team maintains the design system as their full-time job
    • Pro: keeps system well maintained
    • Con: may not be as connected to customer needs
  • The federated model: team members from across the company come together to work on the system
    • Pros: insight into what is needed for all products
    • Con: group can get busy and not update system
  • A hybrid model: elements of different models. Common is a hybrid of federated and centralized
• Will get used much more often if created to fit into the workflow of teams
• Two types of interface inventories
  • Visual attributes (spacing, color, typography) to create a visual language
  • UI Elements (buttons, cards, modals) to create a UI Library of components
• Visual design language
  • Colors, typography, spacing, images, possibly visual form, motion, sound
• Color is used to convey feedback, information, and hierarchy