The tangible win
After this lesson, you should be able to look at a product screen and separate one-off UI decoration from system decisions.
Not “make it pretty” — make it repeatable
Material Design describes a mature system as organized around foundations, styles, and components. Carbon describes itself as IBM’s open-source design system for products and digital experiences (Carbon). These systems are not just boxes of buttons.
They answer product questions like:
- What should primary action look like?
- How should errors, empty states, and disabled states behave?
- What color should mean “danger” across dark mode, light mode, and accessibility needs?
- Who decides when a new variant is allowed?
The backend analogy
| Backend world | Design-system world |
|---|---|
| API contract | Component API: props, states, allowed variants. |
| Schema | Tokens: named color, spacing, type, radius decisions. |
| Shared library | Reusable components with usage guidance. |
| RFC / code review | Governance: when and how the system changes. |
| Monitoring regressions | Visual QA, accessibility checks, adoption metrics. |
The core unit: a token
Material says design tokens are the building blocks used across designs, tools, and code (Material tokens). Carbon emphasizes using tokens instead of hard-coded values such as hex codes (Carbon color tokens).
As an engineer, think of a token as a named product decision:
/* weaker: implementation detail */
.error { color: #da1e28; }
/* stronger: product meaning */
.error { color: var(--color-text-danger); }The second version lets the product preserve meaning even if the visual implementation changes later.
Practice: classify the decision
Click the answer that best identifies what belongs in a design system.
A team adds a red border to one specific admin panel because the PM wants it to feel urgent. What is the design-system question?
Your first diagnostic move
When you see a UI choice, ask:
- Meaning: What product meaning is this expressing?
- Reuse: Will this meaning appear elsewhere?
- Contract: Should the system name it as a token, component, or pattern?
That tiny sequence is the beginning of design-system thinking.
Read next
Primary source: read Material Design’s Get started page. Don’t memorize it. Just notice the categories: foundations, styles, components.
If anything feels unclear, ask me. I’m your teacher for this course, and we can slow down, use examples from backend systems, or inspect a real product screen together.