Token-driven color palettes in SASS

Introduction

Token-driven color palettes help keep colors consistent and easy to change across a website or app.

When you want to use the same colors in many places on your site.

When you want to quickly update a color everywhere by changing it once.

When working with a team to keep design consistent.

When building themes that can switch colors easily.

When you want to avoid repeating color codes in your styles.

Syntax

SASS

$color-token-name: color-value;

Use $ to define a color token (variable) in Sass.

Refer to tokens by their name to apply colors in styles.

Examples

Defines a primary color token with a blue shade.

SASS

$primary-color: #3498db;

Defines a background color token with a light gray.

SASS

$background-color: #f0f0f0;

Uses the color tokens in CSS rules for body background and text color.

SASS

body {
  background-color: $background-color;
  color: $primary-color;
}

Sample Program

This example shows how to define color tokens in Sass and use them in styles for body, heading, and button. The button hover color is a darker shade of the secondary color using Sass's color functions.

SASS

@use 'sass:color';

// Define color tokens
$color-primary: #005f73;
$color-secondary: #0a9396;
$color-accent: #94d2bd;
$color-background: #e9d8a6;
$color-text: #001219;

// Use tokens in styles
body {
  background-color: $color-background;
  color: $color-text;
  font-family: Arial, sans-serif;
  padding: 2rem;
}

h1 {
  color: $color-primary;
}

button {
  background-color: $color-secondary;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
}

button:hover {
  background-color: color.scale($color-secondary, $lightness: -10%);
}

Important Notes

Using tokens makes it easy to update colors by changing just one place.

Sass color functions like color.scale() help create shades from tokens.

Keep token names clear and meaningful for easier use.

Summary

Color tokens are Sass variables that store colors for reuse.

They keep your design consistent and easy to update.

Use tokens in your styles instead of hard-coded colors.