Shape

Components can have many different shapes. Establishing a common shape keeps consistency.

Guidelines

To reflect the round corners of the Equinor logo, our shapes have a default rounded corner of 4px. You will notice this in the corners of buttons, cards, menus and more.

Variations

There are many different shapes to choose between when you are building a component such as: Button, Icon button,  Corners,  Straight,  Field  and Circle.

Button

Add notes

Button

Add notes

Circle

Add notes

Circle

Add notes

Corners

Add notes

Corners

Add notes

Icon Button

Add notes

Icon Button

Add notes

Rounded

Add notes

Rounded

Add notes

Straight

Add notes

Straight

Add notes

Toggle

Add notes

Toggle

Add notes

Toggle rounded border

Add notes

Toggle rounded border

Add notes

Toggle straight border

Add notes

Toggle straight border

Add notes

Caret

Add notes

Field

Add notes