Design tokens

Our main colors are the ones we use the most. These are used for, among other things, background colors, in core functionality, navigation, and buttons – to create a framework for our services. By using mostly these colors, we create a unity and recognizability across our digital platforms.

Vy uses a spacing scale based on 6 px, in combination with a 3 px baseline grid for smaller components. This means that menus, boxes, margins, and padding are based on 6 px. While components like buttons and icons are based on 6 and 12 px.

The rounding follows the size of the component. Small components have small rounding, and large components have larger rounding. All components that consist of a 'box/card' have rounding. We rarely use completely square components (0 px rounding). An easy way to determine which rounding you should use is to follow the rule of thumb: components with 1-2 lines of text or very compact elements will always have a rounding of 12 px. When there are more lines horizontally, such as cards or boxes, we use a rounding of 18 px. In addition, 24 px rounding is used on drawers, 30 px rounding on buttons, and 36 px rounding on the app header.

"Shadow is used to lift something from the background (an action) and to clarify that something is clickable. Shadow should only be used on components that are clickable. We use shadow to create a hierarchy of importance. Not all clickable elements have shadow, such as input fields and buttons. Sometimes shadow is used only in certain states of components, to clarify an action. Components with strong colors or outline do not need shadow. We have three levels of shadow: Elevation 1, Elevation 2, and Elevation 3 (or in code: "sm", "md" and "lg")

It is important that the length of the animation and which attributes are animated do not appear disturbing or make it more difficult for the user to navigate. We have set up three basic animations that one can use when setting up transitions between states. These define three different timings and how the curve of the animation should be executed: Slow, Medium, Fast.