Graphic system

We have four basic geometric shapes that make for the foundations of our new graphic system.

The basic shapes can extend from single shapes into containers. Make sure to keep the corners cohesive.

Tip! Creating squares with different corner treatments (instead of circles and diamond shapes) will simplify the workflow when transforming the single shapes into containers.

Single shapes and containers can be used as functional labels, CTA buttons and guiding UI-components.

The containers can be connected and used in different ways to tell a story. They can be used with both filled or outlined shapes.

When used in an Active sequence, the visual emphasizes clarity and hierarchies.

Besides being connected horizontally, sequences can be shaped and combined in various ways. These shapes can be connected by highlighting, stacking or both.

The containers are designed to hold messaging and information, to be used purposefully in our applications.

To define the outline stroke size, divide the typographic size with 20. This will give you a good indication of what stroke size to use, and it will create a consistent and uniform expression throughout various formats and applications.

We use the same line thickness for all containers in a sequence. In these cases the line thickness is generally decided
by the smallest typographic size.

Note:
The outline should never be thinner
than 0.5 pt/px.

The containers are designed to hold messaging and information, to be used purposefully in our applications.

Container size
The container size is based on the x-height
of the message (X). The containers height equals three X. The width equals the word length together with 1.5 X of clear space.

Container size
The container size is based on the x-height
of the message (X). The containers height equals three X. The width equals the word length together with 1.5 X of clear space.

Note:
Sometimes the clear space needs to be larger for functional reasons. Diamond containers, for example, need 2 X of clear space. Most importantly; be consistent.

Regardless of what typographic weight we are using, the creation of the outline stroke size follows the same rules.