Pebellslearn by building
RoadmapsMatrixCoursesSandboxSign in

Course details

Design System

Learn what a design system is, who builds it and the words its makers use. Then start one for a real product: choose a route, audit what already exists, and write the vision, voice and first components every team will share.

Ready to learn5 sections · 23 lessons
Start learning

Course curriculum

Understand the Basics5 lessons

Meet design systems as shared decisions, reusable parts and rules. See why companies with several teams need one, how a system differs from a component library, how atomic design breaks an interface into pieces, and who has to be involved.

  1. What Is a Design System?12 min
  2. Why Teams Need a Design System12 min
  3. Design System vs Component Library12 min
  4. Atomic Design12 min
  5. Who Builds a Design System12 min
Terminology5 lessons

Learn the vocabulary precisely: components and component libraries, design tokens and their tiers, patterns and guidelines, design language and UI kits, and the governance that decides how the system changes.

  1. Components and the Component Library12 min
  2. Design Tokens14 min
  3. Patterns and Guidelines12 min
  4. Design Language and UI Kits12 min
  5. Governance14 min
Making a Design System3 lessons

Compare building a system from scratch with distilling one from an existing product, then prove it on one real product with a pilot before asking every team to adopt it.

  1. Starting from Scratch12 min
  2. Starting from an Existing Product12 min
  3. Proving It with a Pilot14 min
Existing Design Analysis5 lessons

Run a visual audit, learn how the current design process and past experiments shaped the product, then consolidate colour, typography, spacing and sizing into small scales that pass accessibility checks and work in every language.

  1. Performing a Visual Audit12 min
  2. Existing Process and Experiments12 min
  3. Auditing Colour14 min
  4. Auditing Typography14 min
  5. Auditing Space and Size14 min
Creating Design Language5 lessons

Write a vision and principles that settle arguments, a voice that adapts its tone to the moment, and writing rules with a product glossary. Then apply the language to buttons, badges and banners.

  1. Vision and Design Principles12 min
  2. Voice and Tone12 min
  3. Writing Guidelines and Terminology12 min
  4. Buttons12 min
  5. Badges and Banners14 min