11. Design Tokens

11.1 Why tokens?

Design Tokens · Section 11.1

Without tokens:

.card {
  color: #161616;
  background: #ffffff;
  border-radius: 8px;
}

.modal {
  color: #161616;
  background: #ffffff;
  border-radius: 8px;
}

With tokens:

.card,
.modal {
  color: var(--color-text-primary);
  background: var(--color-surface-primary);
  border-radius: var(--radius-md);
}

The important difference is semantic meaning.

11. Design Tokens

Name, structure, and distribute design decisions across themes and platforms.

11.2 Token layers

Design Tokens · Section 11.2