Introduction

Sizing tokens define the physical dimensions of UI elements across the TomTom Automotive Navigation Application. They ensure components remain readable, usable, and consistent across different screen sizes, orientations, and product contexts, while supporting size modes and OEM customization.

The sizing system is token-based and works across global, system, and component levels to provide a scalable and predictable foundation.

Global tokens

At the global level, sizing is defined through a neutral numeric size scale. These tokens represent raw size values and are shared across multiple foundations, including sizing, spacing, typography, and iconography.

Examples: tt_glb_size_16, tt_glb_size_80, tt_glb_size_160

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 sizing tokens give semantic meaning to size usage by grouping global size values into functional categories.

Scale

Defines general component dimensions such as heights, widths, and key layout sizes.

Examples:

• tt_sys_size_scale_xs
• tt_sys_size_scale_m
• tt_sys_size_scale_xl

These tokens typically reference global size values and are theme-aware.

Icon sizing

Defines standard sizes for icons used across UI components.

Examples:

• tt_sys_size_icon_s
• tt_sys_size_icon_r
• tt_sys_size_icon_l

Graphic sizing

Defines sizes for non-icon graphical elements such as illustrations or visual indicators.

Examples:

• tt_sys_size_graphic_s
• tt_sys_size_graphic_m
• tt_sys_size_graphic_l

Radius

Defines rounding applied to UI elements.

Examples:

• tt_sys_size_radius_s
• tt_sys_size_radius_r
• tt_sys_size_radius_l

Weight

Defines stroke or line thickness used in UI elements.

Examples:

• tt_sys_size_weight_s
• tt_sys_size_weight_m
• tt_sys_size_weight_l

Component tokens

Component-level sizing tokens apply system-level sizing semantics to concrete UI elements.

Component tokens:

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

Examples:

• Component height → scale tokens
• Icon size inside a button → icon sizing tokens
• Corner radius of a panel → radius tokens

Using component tokens ensures sizing remains consistent while allowing flexibility where required.

Theming and scaling

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

Each size mode (Small, Medium, Large) assigns different values to the same system-level sizing tokens. The token structure remains identical across modes — only the mapped values change.

This allows:

• Centralized control of size behavior
• Predictable scaling across products and screens
• Safe adaptation without redefining component logic