Size Tokens

Overview

Size tokens define consistent dimensional values used for component sizing, icon dimensions, and layout measurements throughout the design system. They ensure visual harmony and predictable scaling across all interface elements.

Architecture

Size tokens are organized into a two-layer system where base sizing values are defined in the metric-base token set and then referenced by contextual and component-specific size tokens in the App group.

How it works:

The system progresses from foundational to applied:

1. Base sizes (size.unit.*) provide raw dimensional values (0-1024px)
2. Contextual sizes (size.context.*) assign semantic meaning (xsmall, small, medium, large, etc.)
3. Component sizes (size.[component].*) define specific dimensions for UI components

Benefits:

• Consistent sizing scale across all components
• Predictable visual rhythm through systematic increments
• Easy to adjust component sizes globally
• Semantic naming clarifies sizing intent

Organization

Size tokens are organized into three categories:

Base Sizes: Raw dimensional values in pixels, primarily using an 8-point grid system with additional increments.

Contextual Sizes: Semantic size scales (2xsmall through 2xlarge) for general use.

Component Sizes: Specific dimensional values for individual UI components (buttons, badges, icons, etc.).

This organization provides flexibility while maintaining consistency.

Base Sizes

Base size tokens provide foundational dimensional values. These reference the underlying dimension.base.* tokens defined in metric-base.json.

Standard Scale

The primary sizing scale follows an 8-point grid with additional values:

Extended Scale

For larger dimensions:

Fractional and Negative Sizes

For fine-tuning and special cases:

Contextual Sizes

Contextual size tokens provide semantic sizing scales for general application.

Icon Sizes

Icon size tokens ensure consistent icon dimensions throughout the system.

Component Sizes

Component-specific size tokens define exact dimensions for UI elements.

Button Sizes

Badge Sizes

Form Input Sizes

Modal Sizes

Navigation Sizes

Usage Guidelines

Choosing the Right Token

For components: Use component-specific tokens (size.button.*, size.badge.*, etc.)

For icons: Use icon size tokens (size.icon.glyph.*)

For semantic sizes: Use contextual tokens (size.context.*)

For custom dimensions: Use base size tokens (size.unit.*)

Design Principles

Touch Targets: Minimum 32px (size.unit.32) for interactive elements on touch devices

Icon Sizing: Keep icon sizes at 24px (size.icon.glyph.medium) or larger for clarity

Visual Rhythm: Stick to 8-point grid increments for harmonious layouts

Consistency: Use the same size token for similar elements across components

Accessibility

• Interactive elements should be at least 32×32px for touch accessibility
• Icons conveying important information should be at least 24×24px
• Ensure sufficient size for users with motor impairments
• Test touch targets on actual devices, not just in design tools

Best Practices

Do:

• Use contextual size tokens for flexible, semantic sizing
• Reference component size tokens for specific UI elements
• Stick to the 8-point grid when possible
• Document the purpose when using non-standard sizes

Don't:

• Create arbitrary size values—always use tokens
• Use sizes smaller than 32px for primary interactive elements
• Mix sizing systems inconsistently
• Use pixel values directly in component styles