Styling with CSS Custom Properties

Define a small set of design tokens as CSS variables and apply them to a card component. Edit the CSS panel and press Run to see changes instantly in the sandbox.

Edit the panels below and press Run to preview. Nothing you type here is saved — refreshing the page restores the original starter code.

<div class="card">
  <h2>Design Tokens</h2>
  <p>Style me using CSS variables.</p>
</div>

:root {
  --accent: #0f8b8d;
  --radius: 8px;
}

.card {
  border: 1px solid #ddd;
  border-radius: var(--radius);
  padding: 1.5rem;
}

.card h2 {
  color: var(--accent);
}

console.log("Tokens lesson loaded");