Lesson 09

Custom properties as design tokens

Use custom properties to name shared design decisions instead of repeating magic values.

design tokens
custom properties
maintainability

Good Code

notice.css

:root {
  /* Named tokens make shared design decisions reviewable. */
  --color-surface: #ffffff;
  --color-border: #d8dee8;
  --space-4: 1rem;
  --radius-sm: 0.375rem;
}

.notice {
  --notice-accent: #2563eb;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--notice-accent);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.notice--warning {
  --notice-accent: #b45309;
}

Bad Code

notice.css

.notice {
  /* Repeated raw values hide which decisions are shared tokens. */
  padding: 16px;
  border: 1px solid #d8dee8;
  border-left: 4px solid #2563eb;
  border-radius: 6px;
  background: #ffffff;
}

.notice--warning {
  border-left-color: #b45309;
}

Review Notes

What to review

Good Code

The good version gives shared design values names and lets the warning variant change only the accent token it owns.

Bad Code

The bad version works visually, but every repeated value becomes a search-and-replace dependency when the design system changes.

Takeaways

Name reusable color, spacing, radius, and component accents with custom properties.