Last edit: 2023.08.09

TomTom Digital Cockpit comes with a built-in library of UI styles that can be reused to apply any brand guidelines. For example, choice of colors and typography can reflect the brand or vehicle interior, and the size can adapt to their screen sizes to provide the best user experience for the driver and passengers.

To ensure that custom UI themes meet usability standards, vehicle makers should follow the design principles defined in the Design Guidance section.

Any brand can be expressed using the TomTom Digital Cockpit predefined design system.


Foundations form the base of the design language and are essential for building a cohesive user interface.

design tokens thumbnail

Design tokens

Design tokens represent small, repeatable design elements such as colors, typography, etc.

colors thumbnail


Applied in a way to provide a hierarchy of information and to meet contrast standards.

typography thumbnail


A type system with flexible font styles to ensure legibility standards.

size and spacing thumbnail

Size and spacing

Used to set the sizes and spacing of elements according to a predefined scale system. (Documentation available soon.)

shape thumbnail


All shaped components use values from the predefined set of radiuses. (Documentation available soon.)

elevation thumbnail


Shadows in our system are created using Android's elevation feature. (Documentation available soon.)

motion thumbnail


Provides guiding principles for the use of animation in an automotive context. (Documentation available soon.)