Design Tokens🔗

All components in VCC UI are derived from a set of design tokens. These are basically properties describing each design attribute of a given component.

Theoretically these could be used to build components in another framework and make sure they still align to the overall web design system.

There are also low level design tokens like colors, spacing, typography and grid, which would allow you to build your own custom component from scratch.

Colors🔗

This is a design token reference of all colors being used in VCC UI. Learn how to use theme colors in the theming documentation. You can toggle the theme on this page to see how the colors will change.

Brand

theme.color.brand

primary

#284e80The primary brand color, used sparingly to create brand associated UI components.

Background

theme.color.background

primary

#ffffffPrimary background

secondary

#fafafaSecondary backround

Foreground

theme.color.foreground

primary

#141414Use for primary text and icons

secondary

#707070Use for secondary text and icons

inverted

#ffffffUse for inverted text and icons

positive

#058a22Use to highlight positive actions or events

alert

#bf2012Use to highlight destructive actions

action

#1c6bbaUse for links and other interactive elements

Ornament

theme.color.ornament

border

#d5d5d5Use to visually group or separate UI elements

divider

#ebebebUse to visually group or separate UI elements

highlight

#1c6bbaUse to highlight selected and focus states

positive

#058a22Use to highlight successful states

alert

#bf2012Use to highlight errors and invalid states
2022 © Volvo Car Corporation