How to Define a Sizing Scale for Your Design System

A well-defined sizing system is crucial for creating a consistent and scalable design system. It ensures that all UI components, images, and typography are proportionally sized, thereby enhancing visual harmony across your design.

Prerequisites

Before defining your sizing system, ensure you have established a comprehensive spacing scale. This scale will serve as the foundation for maintaining consistency and coherence throughout your design system.

Steps to Define a Sizing System

1. Understand the Relationship Between Spacing and Sizing
   Ensure your sizing system aligns harmoniously with your spacing scale to maintain visual consistency across all elements.
2. Choose a Base Size
   Determine the base size derived from your spacing scale’s base unit. For example, if your spacing scale uses 8px as its base unit, consider starting with 8px as your base size.
3. Define the Size Increments
   Decide on the increments for your sizing system. You can choose between geometric progression (multiplying by a constant factor) or additive progression (adding a constant value).

• Example (Geometric Progression): 8px, 16px, 32px, 64px, 128px
• Example (Additive Progression): 8px, 16px, 24px, 32px, 40px

The geometric progression aligns well with the best practices for UI design, where you need tighter increments at the beginning of the scale and…