Introducing Spacing to Verso Design System
- Irfan Rafeek
- Oct 16, 2024
- 4 min read
In a design system, however, managing spacing across reusable components often becomes a challenge. Too much rigidity limits flexibility, while too much freedom leads to inconsistency. Verso’s approach to spacing addresses this balance. Our goal was to simplify component complexity, improve cross-brand flexibility, and create a semantic structure that scales gracefully as the system evolves.
The Need for Structured Spacing
As Verso evolved, components had grown more complex, with individual brands introducing custom spacing props to meet their specific layout needs. This led to inconsistencies and unnecessary variations across the system.
The solution was to standardize spacing through semantic tokens that reference primitive tokens. This would create a consistent structure for spacing values, ensure design scalability, and make cross-brand customization easier.
Core Principles for Scalable Spacing
The current state of spacing in Verso was highly complex and hacky, making it extremely difficult to systemize. Spacing between elements was often the unintended result of various individual spacing properties layering from multiple components.
Before defining our new tokens, we grounded our approach in a few essential principles to ensure a robust and scalable implementation
1. Avoid Outer Spacing in Components
A core rule is to avoid assigning outer spacing (margins) to reusable components. While initially convenient, margins "baked" into components limit their flexibility and make layout unpredictable. By keeping components atomic and truly portable, all outer spacing is managed by parent layouts or containers.
2. Embrace Layout-Driven Spacing
We will leverage modern CSS properties like gap within layout containers to manage space between items. This mirrors how designers define spacing in tools like Figma. This approach:
Centralizes control at the layout level.
Enables dynamic adjustments (responsive or themed spacing).
Reduces overrides and component-specific hacks.
These principles formed the foundation for how we defined our semantic spacing tokens in Verso. For a detailed look at the successful best practices we followed, you can refer to this: Spacing in Design Systems: Best Practices.
Naming the Primitives
Once the philosophy was set, we explored various ways to name primitive spacing tokens, the foundational units upon which semantic tokens would be built.
1. Pixel/Rem Values
Example: spacing-12 = 12px, spacing-16 = 16px
Easy to understand and extend, but risks arbitrary additions and a lack of structural clarity.
2. Numerical Order
Example: spacing-0 = 2px, spacing-1 = 4px
Simple and sequential, but hard to insert new sizes without disrupting order.
3. T-Shirt Sizing
Example: spacing-s, spacing-m, spacing-xl
Intuitive in small sets, but lacks transparency on actual measurements, and is inflexible for future expansion.
4. Multiplier
Example: space-025, space-100, space-150
Scalable, calculated as multiples of a base unit, though slightly less intuitive than pixel values for new adopters.
Feedbacks and Decision
After evaluating both usability and scalability, our team concluded that the Pixel/Rem Value approach would best serve the Verso Design System.
While both the Pixel/Rem and Multiplier styles offer the necessary clarity and long-term scalability, critical for a system supporting multiple brands—we ultimately chose the Pixel/Rem naming. This decision was influenced by feedback from our developers: using direct pixel/rem values makes implementation lighter and more straightforward, as it removes the immediate need for a base multiplication function. We agreed that if greater flexibility is needed down the line, we can always introduce base multiplication logic later.
With the naming convention decided, we conducted a thorough audit of all existing spacing values used across our brands. This process allowed us to define a carefully curated set of primitive tokens that will serve as the stable foundation for all future spacing decisions.
Semantic Tokens
Semantic tokens add meaning and context to spacing. They are built on top of primitive tokens and help ensure consistency across patterns while allowing brands to apply their own nuances.
When to Use Semantic Tokens
Repeating spacing patterns across components
Brand-specific spacing variations
Contextually defined spacing (e.g., editorial vs. luxury brands)
Theming prominent, high-visibility spacing patterns
When Not to Use Them
Component-specific or one-off spacing needs
Subtle, unnoticeable changes
Low-visibility elements with minimal impact on layout
Categorizing Semantic Tokens
Inspired by Gestalt’s Law of Proximity, we categorized spacing into two types to reflect how users perceive relationships between elements:
1. Space Around
Defines the space around an item — often used as padding or inset to create breathing room within components.
2. Space Between
Defines the space between items — used for layout gaps between child elements or content groups.
By keeping this distinction clear, we ensure that spacing reinforces hierarchy and visual relationships consistently.
Naming Semantic Tokens
To make spacing tokens readable, scalable, and meaningful, we adopted a structured naming format:
Foundation Context Modifier
Foundation: Token type (e.g., color, type, spacing, motion, decoration)
Context: Category or component where the token is used.
Modifier: Describes the spacing behavior Space-around or Space-between
Modifiers
Space-around: Refers to spacing around an item
We use “padding” (common and intuitive in both CSS and Figma).
Space-between: Refers to spacing between items
We use “gap”, and when needed, specify direction: “row-gap” or “column-gap”.
Example
Structure First, Then Space
For complex components like story cards, which can have variable elements (rubric, title, byline, date, etc.) spacing should adapt dynamically. By structuring components first, then applying spacing using layout-driven tokens (like gap), spacing remains predictable even as content changes.
This principle ensures that when elements are removed or toggled off, no unnecessary space persists, keeping the layout clean and consistent.
Summary
The introduction of semantic spacing tokens in Verso simplifies component design, reduces inconsistency, and enables brand-level flexibility.
By separating component spacing (padding) from layout spacing (gap) and grounding our approach in the principles of structure and proximity, Verso ensures that every pixel of space has a purpose.
This new system not only strengthens design consistency but also bridges design and engineering workflows creating a cleaner, more scalable, and more predictable design foundation for the future.
Comments