Introduction

Spacing tokens define the distances between and within UI elements across the TomTom Automotive Navigation Application. They ensure layouts remain readable, balanced, and predictable across different screen sizes, orientations, and activity types, while supporting size modes and OEM customization. The spacing system is token-based and works across global, system, and component levels to provide consistent layout density and structure.

Global tokens

At the global level, spacing is based on the same neutral numeric size scale used across the design system. These tokens represent raw numeric values and are shared across multiple foundations, including spacing and sizing.

Examples:

• tt_glb_size_8
• tt_glb_size_16
• tt_glb_size_32

Global size tokens act as the underlying value source for all higher-level sizing definitions. They:

• Are numeric and semantic-free
• Provide a common scale across the system
• Can be reused by multiple system-level attributes

System tokens

System-level spacing tokens define how spacing behaves along the vertical and horizontal directions. They provide semantic meaning and allow spacing density to adapt to different screen proportions and available space.

Vertical spacing

Defines spacing between elements stacked vertically.

Examples:

• tt_sys_size_spacing_vertical_s
• tt_sys_size_spacing_vertical_r
• tt_sys_size_spacing_vertical_l

Vertical padding

Defines internal padding applied vertically within components.

Examples:

• tt_sys_size_padding_vertical_s
• tt_sys_size_padding_vertical_r
• tt_sys_size_padding_vertical_l

Horizontal spacing

Defines spacing between elements arranged horizontally.

Examples:

• tt_sys_size_spacing_horizontal_s
• tt_sys_size_spacing_horizontal_r
• tt_sys_size_spacing_horizontal_l

Horizontal padding

Defines internal padding applied horizontally within components.

Examples:

• tt_sys_size_padding_horizontal_s
• tt_sys_size_padding_horizontal_r
• tt_sys_size_padding_horizontal_l

Component tokens

Component-level spacing tokens apply system-level spacing semantics to concrete UI layouts.

Component tokens:

• Reference the appropriate system-level spacing or padding tokens
• Ensure consistent layout behavior across components
• Allow controlled, component-specific overrides when needed

Examples:

• Top and bottom padding → vertical padding tokens
• Start and end padding → horizontal padding tokens
• Vertical gaps between items → vertical spacing tokens
• Horizontal gaps between items → horizontal spacing tokens

This ensures spacing behavior remains predictable and aligned across the UI.

Theming and scaling

Spacing is size-mode aware. Learn more about size modes here.

Each size mode assigns different values to the same system-level spacing tokens to adjust layout density based on available space and screen proportions. The token structure remains identical across modes — only the mapped values change.

This allows:

• Centralized control of layout density
• Consistent behavior across activities and screens
• Adaptation to constrained or spacious layouts without redefining components