Level 2 · Lesson 5

Design Systems Basics

Turn repeated visual choices into small reusable rules without creating advanced system overhead.

18 min Product UISystems

Lesson steps

IdeaExampleMistakesQuizExercise

Core idea

A design system starts when repeated decisions get names. Tokens name values, components name reusable pieces, and patterns name repeated workflows.

  • Use tokens for repeated values such as surface, ink, action color, spacing, and radius.
  • Use components for repeated UI pieces such as buttons, cards, inputs, and navigation items.
  • Use patterns for repeated arrangements such as signup, settings, filtering, and checkout steps.
  • Keep the system small at first. Name what repeats before adding variants.

Visual example

A small system makes repeated cards feel intentional.

Before and after

Name the repeated decisions.

Before: one-off choices

Cards use near-matching colors, radii, spacing, and button styles, creating drift across similar content.

After: small reusable rules

The same surface, ink, spacing, radius, and action treatment repeat across cards, so differences are about content instead of styling drift.

Worked example

Why the improved version works

The improved cards do not need a large design system. They need named decisions: one surface, one text color, one action style, one card radius, and two spacing values.

Once those decisions are named, new cards can reuse them. That reduces tiny inconsistencies and leaves the designer free to make content decisions.

Common mistakes

Watch for these patterns

Creating many component variants before the repeated need is clear.
Naming tokens by raw color instead of role, such as blue-1 instead of action.
Treating a design system as decoration rather than shared decision memory.
Ignoring accessibility, focus, and error behavior when documenting a component.

Visual comparison

Which card set behaves like a small system?

One set repeats near-matching choices by accident. The other reuses named roles for surface, ink, spacing, and action.

Wähle eine Option, um die Design-Logik zu sehen.

Small exercise

Diagnose system drift

Pick the card set that behaves like a small system, then spot the repeated choice that should be named and reused.

Kurze Übung starten

Gesperrt — kommt bald