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:
    • 14px (0.25rem)
    • 28px (0.5rem)
    • 312px (0.75rem)
    • 416px (1rem)
    • 520px (1.25rem)
    • 624px (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

  1. 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
  1. 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.
  1. 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.