Project 26: Cryptocurrency Ticker

CSS Stylist

Builds on these lessons

Design Tokens Design Variables Strategy Design Themes Design Dark Mode

Step 1 of 2

Project

Semantic Design Tokens

Define --color-up, --color-down, and --font-mono on :root instead of hardcoding #16a34a / #dc2626 / a font stack wherever price changes appear. Naming a token by its MEANING ("up", "down") rather than its raw value is what makes a token system survive a rebrand.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

:root {
  --color-up: #16a34a;
  --color-down: #dc2626;
  --font-mono: 'JetBrains Mono', monospace;
}

.price-change--up {
  color: var(--color-up);
  font-family: var(--font-mono);
}

.price-change--down {
  color: var(--color-down);
  font-family: var(--font-mono);
}

← Previous Next →