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;
}

Next lesson: Input styles

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies