Summary - Design system
Build a small design system with variables.
Design system intro
In this group you met variables: names start with two dashes, they live in :root, are used via var(), get safe with fallbacks, and switch colors with themes. Now we combine them into a small design system.
A design system is a set of reusable values and declarations for a consistent interface. Variables are its backbone.
Exercise Define design system variables
Inside the :root selector, define three variables: --bg with #ffffff, --text with #111827, and --gap with 16px.
Show example solution
open :root; write the three declarations one below the other.
Example solution:
:root {
--bg: #ffffff;
--text: #111827;
--gap: 16px;
}Exercise Use variables in a component
Inside a .kart selector, write three properties: background: var(--bg);, color: var(--text);, padding: var(--gap);.
Show example solution
open a .kart selector; write the three declarations with var().
Example solution:
.kart {
background: var(--bg);
color: var(--text);
padding: var(--gap);
}Test yourself
-
What's the biggest advantage of a design system?
- Write colors one by one everywhere
- Write a separate style for each component
- Consistency and one-point updates
- Restart the browser
Show answer
Consistency and one-point updates — Correct! One-point updates and consistency are the heart of a design system.
-
Match the concepts
- --name: value;
- variable definition
- var(--name)
- variable usage
- var(--name, backup)
- fallback
- [data-theme="dark"]
- theme selector
-
Define a design token
:root { --brand-color: ____; }Show answer
:root { --brand-color: #2563eb; }