Tokens for Spacing & Sizing

1. Introduction

In design systems, design tokens serve as the fundamental building blocks for creating a cohesive visual language. This lesson focuses on spacing and sizing tokens, which are crucial for maintaining consistent layout and proportion across interfaces.

2. Key Concepts

• Design Tokens: Named entities that store visual design attributes.
• Spacing Tokens: Values used to define spacing (margins, paddings, gaps).
• Sizing Tokens: Values that define dimensions (width, height).
• Scalability: Tokens enhance the maintainability and scalability of design systems.

3. Defining Spacing & Sizing Tokens

When creating tokens, it's important to define them in a way that is both scalable and easy to understand. Here’s a step-by-step guide.

1. Identify Common Spacing Needs
2. Define a Base Unit (e.g., 8px)
3. Create Tokens Based on the Base Unit
            

Example of Token Definitions

{
  "spacing": {
    "small": "8px",
    "medium": "16px",
    "large": "24px",
    "xlarge": "32px"
  },
  "sizing": {
    "small": "50px",
    "medium": "100px",
    "large": "150px",
    "xlarge": "200px"
  }
}
        

4. Implementation

Implementing tokens in your CSS or design files enhances reusability and consistency. Below is an example of using tokens in a CSS-in-JS approach.

const styles = {
  container: {
    padding: spacing.medium,
    margin: spacing.large,
  },
  box: {
    width: sizing.medium,
    height: sizing.large,
  }
};
        

5. Best Practices

Following these best practices can improve the effectiveness of your spacing and sizing tokens:

• Be Consistent: Use a consistent naming convention for tokens.
• Use Relative Units: Prefer relative units (like rem) for better scalability.
• Document Tokens: Maintain clear documentation for each token.
• Test Responsiveness: Ensure tokens are tested across different screen sizes.

6. FAQ