meet it

Primitive tokens hold values; semantic tokens say what they are for.

A splits its tokens in two. A holds a raw value: --teal-700: #0f766e. A names a job and points at a primitive: --action-bg: var(--teal-700). Components only read semantic tokens, so a rebrand changes one line.

Spacing works best as a scale: a few sizes that grow in steps. Store one base, --space: 4px, and build the rest with , which does sums inside a value: --space-3: calc(var(--space) * 3). Change the base and the whole scale follows.

<button class="btn">Book a table</button>

:root {
  --teal-700: #0f766e;
  --space: 4px;
  --action-bg: var(--teal-700);
  --space-3: calc(var(--space) * 3);
  --space-5: calc(var(--space) * 5);
}
.btn {
  padding: var(--space-3) var(--space-5);
  border: 0;
  color: white;
  background-color: var(--action-bg);
}

Press show my page to see it here.

guess first

The base is 8px. What padding does the card get?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<div class="card">Receipt</div>

:root {
  --space: 8px;
  --space-2: calc(var(--space) * 2);
}
.card {
  padding: var(--space-2);
  border: 1px solid #e5e7eb;
}

your turn

Your turn. Rebrand with one line.

Fill in the blanks: point the semantic token at the rust primitive, and make --space-4 four times the base with calc().

the page you’re styling

<a class="btn" href="https://example.com/signup">Sign up</a>

your css

Your code

Press show my page to see it here.

the button is rustnot checked yet
the button has 16px of paddingnot checked yet
the semantic token points at the primitivenot checked yet
the scale step uses calc()not checked yet

fix it

The padding vanished after a tidy-up. Can you fix it?

the page you’re styling

<div class="panel">Weekly summary</div>

your css

Broken code to fix

Press show my page to see it here.

the panel has 16px of paddingnot checked yet

The token exists, so this is the wrong-kind-of-value trap from unit 1. Look inside calc().
8px times 2px is not a length. One side of a * must be a plain number.
Change 2px to 2, then press run.

nailed it

you built tokens a whole team can share. :D

Primitive tokens hold raw values; semantic tokens name the job.
Components read only semantic tokens.
calc() builds a whole scale from one base.

new words in your collection

design system
primitive token
semantic token
calc()

This lesson isn’t saved. A free account remembers every lesson you finish.