Introduction to Scales and Tokens

Introduction

This guide will help you understand how scales and tokens work in Clutch, enabling you to efficiently manage spacing, sizing, typography, colors, and other design properties.

Understanding Tailwind Scales

Tailwind scales provide a structured way to apply spacing and sizing in Clutch, making it easier to maintain consistency while designing.

Base Sizing and REM Units

In Clutch, everything is based on a 16px root size by default.

REM (Root EM) units are used for spacing and sizing, meaning:

1rem = 16px
0.5rem = 8px
2rem = 32px

This system ensures that designs scale responsively without manually adjusting pixel values.

Spacing Scale

Clutch fully integrates Tailwind's spacing scale, making it simple to adjust margins, padding, and gaps.

The scale follows a base-2 progression (multiples of 4px), allowing for quick approximation of design elements.

Example values:

1 → 4px (0.25rem)
2 → 8px (0.5rem)
3 → 12px (0.75rem)
4 → 16px (1rem)
5 → 20px (1.25rem)
6 → 24px (1.5rem)

Why use scales?

Incrementing up or down by 1 keeps spacing predictable.
Improves design consistency without needing arbitrary values.

Design Tokens: A Global Styling System

Design tokens let you define global values for colors, typography, shadows, borders, and more. Instead of manually updating styles throughout your project, you can set tokens once and use them everywhere.

Creating and Using Tokens in Clutch

Define Tokens

Tokens can be created for common design properties such as:

Colors (primary, secondary, accent, background, etc.)
Shadows (elevation levels, soft vs. hard shadows)
Borders (thickness, radius)

Example:

Primary Color = #3490dc
Secondary Color = #ffed4a
Shadow Large = rgba(0, 0, 0, 0.2) 0px 10px 30px

Apply Tokens in Your Design

Instead of setting individual colors for each element, assign the Primary Color Token globally and use it across your design.

For example, a button’s background color can reference the primary color token.

Modify Tokens for Instant Updates

Changing a token value updates every instance where it is used across your project.

This ensures quick adjustments without manually changing multiple components.

Benefits of Using Tokens

Consistency: Maintain a unified design system.

Efficiency: Update once, apply everywhere.

Scalability: Easily expand or modify your design as your project grows.

Summary

Using Tailwind scales and design tokens in Clutch allows for a more structured, consistent, and scalable design workflow. By leveraging rem-based sizing, structured spacing scales, and reusable design tokens, you can efficiently build and manage styles across an entire project. Whether tweaking spacing or updating brand colors, these features provide a seamless way to maintain design integrity while allowing for flexibility and responsiveness.