Skip to Content


Design Specs


Not all messages are the same. To provide a smooth user journey a clear hierarchy of interactions must be created. For this reason the system has several different types of buttons of varying importance.

On light background:

On dark/red background:

Icons in buttons

All button variations have an optional icon.

Usage of icons

The icon in the button is optional. Icons should be used to draw the user’s attention to the button.

Meaning of icon

The meaning of the icon should be connected to the copy in the button. Examples:

External links

In case of the buttons that lead  to the external websites, the editors should use the icon presented below:

Usage of chevrons

Chevrons should be used in case of the flows with multiple steps, to show progress to the next step.

Alignment principles

Try to avoid using the buttons with very long copy. If there is no other option, follow the alignment principles:

Dos and Dont’s

DO: Have a maximum of two buttons.

DON’T: Have more than two buttons in a button area.

DO: Have the most primary action sit on the right.

DON’T: Have the most primary action sit on the left.

DO: Have only one primary button at the time.

DON’T: Never have more than one primary action.

DO: Combine primary with a secondary or tertiary button.

DO: Combine Secondary and Tetriary button. The most primary button always sits to the right.

DO: Use two secondary or two tertiary buttons together.

DO: Use the button without the icon if you can’t find equivalent icon to the copy.

DON’T: Use arrows in the buttons if you can’t find equivalent icon to the copy.

DO: Use chevons in case of multiple steps flows.

DON’T: Use this design of an arrows in multiple step flows.