Design token management in SASS - Mini Project: Build & Apply

Design Token Management with Sass

📖 Scenario: You are building a simple style system for a website. You want to keep your colors and font sizes organized using design tokens in Sass variables. This helps you change the look easily later.

🎯 Goal: Create Sass variables for colors and font sizes as design tokens. Then use these tokens to style a heading and a paragraph in CSS.

📋 What You'll Learn

Create Sass variables for primary color, secondary color, and base font size.

Create a Sass map called $font-sizes with keys small, medium, and large and their respective sizes.

Use the design tokens to style an h1 with the primary color and large font size.

Use the design tokens to style a p with the secondary color and medium font size.

💡 Why This Matters

🌍 Real World

Design tokens help teams keep consistent styles across websites and apps. They make it easy to update colors or fonts in one place.

💼 Career

Front-end developers and UI designers use design tokens with Sass or CSS preprocessors to build scalable and maintainable style systems.

1

Create design token variables

Create three Sass variables: $color-primary with value #3498db, $color-secondary with value #2ecc71, and $font-base-size with value 1rem.

SASS

// Create Sass variables for colors and base font size
// Your code here

Need a hint?

Use $variable-name: value; syntax to create Sass variables.

2

Create a font size map

Create a Sass map called $font-sizes with keys small, medium, and large and values 0.875rem, 1rem, and 1.5rem respectively.

SASS

$color-primary: #3498db;
$color-secondary: #2ecc71;
$font-base-size: 1rem;

// Create a Sass map called $font-sizes with small, medium, and large sizes
// Your code here

Need a hint?

Use parentheses ( ) to create a Sass map with key-value pairs separated by commas.

3

Style the heading using tokens

Write a CSS rule for h1 that sets color to $color-primary and font-size to the large size from the $font-sizes map using map-get().

SASS

$color-primary: #3498db;
$color-secondary: #2ecc71;
$font-base-size: 1rem;

$font-sizes: (
  small: 0.875rem,
  medium: 1rem,
  large: 1.5rem
);

h1 {
  /* Use $color-primary and map-get($font-sizes, large) here */
  // Your code here
}

Need a hint?

Use map-get($map, key) to get a value from a Sass map.

4

Style the paragraph using tokens

Write a CSS rule for p that sets color to $color-secondary and font-size to the medium size from the $font-sizes map using map-get().

SASS

$color-primary: #3498db;
$color-secondary: #2ecc71;
$font-base-size: 1rem;

$font-sizes: (
  small: 0.875rem,
  medium: 1rem,
  large: 1.5rem
);

h1 {
  color: $color-primary;
  font-size: map-get($font-sizes, large);
}

p {
  /* Use $color-secondary and map-get($font-sizes, medium) here */
  // Your code here
}

Need a hint?

Remember to use map-get() to access the medium font size from the map.