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 backgroundsecondary
#fafafaSecondary backroundForeground
theme.color.foreground
primary
#141414Use for primary text and iconssecondary
#707070Use for secondary text and iconsinverted
#ffffffUse for inverted text and iconspositive
#058a22Use to highlight positive actions or eventsalert
#bf2012Use to highlight destructive actionsaction
#1c6bbaUse for links and other interactive elementsOrnament
theme.color.ornament
border
#d5d5d5Use to visually group or separate UI elementsdivider
#ebebebUse to visually group or separate UI elementshighlight
#1c6bbaUse to highlight selected and focus statespositive
#058a22Use to highlight successful statesalert
#bf2012Use to highlight errors and invalid states