Token-driven color palettes in SASS - Browser Rendering Trace

Render Flow - Token-driven color palettes

[Define color tokens] -> [Assign tokens to CSS variables] -> [Use variables in styles] -> [Browser applies colors] -> [Visual color palette appears]

The browser reads the CSS variables defined from tokens, applies them to elements, and renders the colors visually on the page.

Render Steps - 5 Steps

Code Added:$color-primary: #005f73;

Before

[No colors defined]
[Empty white background]

→

After

[Token $color-primary defined]
[No visible change yet]

We define a primary color token in Sass, but it does not affect the page yet.

🔧 Browser Action:Sass compiles variable, no CSS output yet

Code Sample

This code shows three colored boxes using tokens defined in Sass, assigned to CSS variables, and used as background colors.

SASS

<section class="palette">
  <div class="color-box primary">Primary</div>
  <div class="color-box secondary">Secondary</div>
  <div class="color-box accent">Accent</div>
</section>

SASS

$color-primary: #005f73;
$color-secondary: #0a9396;
$color-accent: #94d2bd;

:root {
  --color-primary: #{$color-primary};
  --color-secondary: #{$color-secondary};
  --color-accent: #{$color-accent};
}

.palette {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}
.color-box {
  flex: 1 1 0;
  color: white;
  font-weight: bold;
  padding: 2rem;
  border-radius: 0.5rem;
  text-align: center;
}
.primary {
  background-color: var(--color-primary);
}
.secondary {
  background-color: var(--color-secondary);
}
.accent {
  background-color: var(--color-accent);
  color: black;
}

Render Quiz - 3 Questions

After applying render_step 3, what color does the primary box background show?

A Dark teal (#005f73)

B Light mint (#94d2bd)

C White

D Transparent

Common Confusions - 3 Topics

Why doesn't changing the Sass token color immediately change the page color?

Because Sass variables are compiled once to CSS variables. You must recompile Sass and reload the page to see changes. Also, CSS variables must be used in styles to affect visuals (see render_steps 2 and 3).

💡 Sass tokens define colors but only affect visuals when assigned to CSS variables and used in styles.

Why do I need CSS variables if I already have Sass variables?

Sass variables exist only during compilation and can't change at runtime. CSS variables live in the browser and can be reused and updated dynamically, making the palette flexible (see render_steps 2 and 3).

💡 Use Sass tokens to set CSS variables, then use CSS variables in styles for live color application.

Why is the text color white on some boxes and black on others?

Text color is chosen for good contrast against the background color for readability. Dark backgrounds get white text, light backgrounds get black text (see render_step 5).

💡 Always pick text color that contrasts well with background for accessibility.

Property Reference

Property	Value Applied	Visual Effect	Common Use
$color-primary	#005f73	Dark teal background	Main brand color
$color-secondary	#0a9396	Teal background	Secondary brand color
$color-accent	#94d2bd	Light mint background	Accent highlights
--color-primary	#005f73	Used as background-color	Connect Sass tokens to CSS
background-color	var(--color-primary)	Colors the element background	Apply token colors visually

Concept Snapshot

Token-driven color palettes use Sass variables to define colors. These tokens are assigned to CSS variables in :root. CSS variables are used in styles for backgrounds and text colors. This approach separates design tokens from usage. It allows easy updates and consistent color usage. Text colors must contrast backgrounds for readability.