Skip to content
Vy logo


It is important with consistent use of layout, grids and spacing to ensure a user-friendly experience for the customer across platforms, screens and devices. By building on the same basic principles, it is easier to maintain and develop new elements for Spor and Vy.

Layout grids


We use a responsive grid where the number of columns, and the size of the margins and gutters change depending on the breakpoint. Content can change depending on if they use a single column, two or three. Both app and web on mobile have a different grid depending on the orientation of the phone. There is a separate layout grid for vertical and horizontal orientation.

Responsivt grid

Vertical and horizontal view

Vertical and horizontal display of grids, columns, margins, and padding for mobile. This is a default view of grids, but we recommend looking at how different screens can best be solved in the different views. Perhaps there is a need for centered content with larger margins on the sides.

Vertikal visning av grid, kolonner og margins
Horisontal visning av grid, kolonner, spacing og margins
Eksempel på tilpasning av innhold på horisontal visning


Spor uses a spacing scale based on the 6 multiplier, where the default value is 6px. It has standard values that you can find under design tokens that go up to 180px and down to 3px and 0px. Components are designed and built based on the spacing scale and other token values.

Oversikt over spacing-skalaen

User guidelines


It is important to distinguish between alignment of individual elements and a grid. Each component should not follow columns in the grid, but a grouping of components should. It is important to follow how the elements behave in responsive layouts so that this does not worsen the user experience.

Kort med to knapper som viser tilpassing til grid


Content in components does not need to follow a layout grid. But you can use your own keylines to create a visual grouping of content. Keylines can be adjusted according to how much space you want to create a balance between the elements.

eksempel på bruk av nøkkellinjer for å tilpasse innhold

Standardized spacing

Standardized spacing help to create a consistent design and user experience. It helps to set clear relationships between components in a user interface. Spor uses a scale based on a 6px baseline grid. This means that menus, boxes, margins and padding are based on a 6 px scale. Distances should be used consistently, but it should also be used to build clear distinctions between content, establish a hierarchy in the information and make it easy to absorb the information that is presented.

Cards med tydelig visning av spacing