Design Tokens
The VCC UI theme is deprecated
Read the documentation on its replacement, which should be used for any new development.
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
#2a609d
The primary brand color, used sparingly to create brand associated UI components.
Background
theme.color.background
#ffffff
Primary background
#fafafa
Secondary backround
Foreground
theme.color.foreground
rgba(0, 0, 0, 0.96)
Use for primary text and icons
rgba(0, 0, 0, 0.64)
Use for secondary text and icons
#ffffff
Use for inverted text and icons
#048220
Use to highlight positive actions or events
#bf2012
Use to highlight destructive actions
#2a609d
Use for links and other interactive elements
#2a609d
Ornament
theme.color.ornament
#d5d5d5
Use to visually group or separate UI elements
#ebebeb
Use to visually group or separate UI elements
#2a609d
Use to highlight selected and focus states
#048220
Use to highlight successful states
#bf2012
Use to highlight errors and invalid states