Skip to content
Vy logo

Effects and styles

Components in Spor use different styles and effects to distinguish between functions, importance and location. The variants are defined as design tokens and can be used when designing new elements.


We use largely rounded components to create a softer user interface. The rounding usually follows the size of the component. Small components have little rounding, and large components have larger rounding. There are few cases where we do not round components or design elements and states. But you have exceptions like full-screen elements, images, image galleries or where two elements meet as in open search fields.

An easy way to see 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 rounding of 12 px. When there are more lines horizontally, such as cards or boxes, we use rounding of 18 px. In addition, 24 px rounding is used on drawers, 30-36px rounding on components that are to be completely rounded such as buttons.

komponent med 12px rounding
komponent med 18px rounding
komponent med 30px rounding


Spor uses outlines to structure content, define components or distinguish between states. Components always retain the same border-width between different sizes. While states can change border-width based on interaction. An example of this is Hover and Focus state on components with outline, such as the add button.

1px outline

Spor-components usually use 1px outline in default state. This is standard for all boxes, dividers and form elements.

Komponent med 1px outline

2-3px outline

Used as weighting on components for different forms of interaction. To make it easier to distinguish between keyboard focus and hover, changing the outline will help the user.

Komponenter med 2-3px outline


Dotted line is only used to separate content within a component. It should not be used as a divider between content or as an outline on components.

Eksempel på bruke av dashed-outline


Most components in Spor use some form of contrast against the background, whether it is color, outlines or shadow. Shadow is used to lift something from the background, whether it lies over an element or just for contrast. We also use shadow to clarify that something is clickable.

Not all clickable elements have shadow, such as input fields and buttons. Sometimes shadow is only used 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. Different levels of shadow can be used to create a hierarchy of importance.

Kort med elevation 1
Kort med Elevation 2