Website

Buttons

Buttons present the user's action options in a clear hierarchy. Well-crafted labels are concise and specific, clearly communicating the resulting action. They provide visual feedback when activated, unless they are disabled.

The size of buttons adapts to the viewport width.

Small button is solely used on navigation menus.
Medium button with a base font of 12px is used in mobile viewports.
Large button with a base font of 16px is used in desktop viewports.

The horizontal and vertical paddings for all button sizes are kept at 16px, it can however be adjusted for smaller viewports.

Primary button

The filled-out primary button is used for the most important action on a page or in a view. Primary buttons are available in spice pink and white. The icon that comes after the button text is optional and can be swapped for other instances.

Primary Button

Secondary button

Used for subordinate actions, secondary buttons are available in spice pink (on light backgrounds) and white (on dark backgrounds). The icon that comes after the button text is optional and can be swapped for other instances.

Secondary Button

Single icon button

Primarily used on cards. Single icon buttons are available in two colours – Cool grey/100 and White. Small icon button has a fixed size of 32x32px whereas the medium icon button is 46x46px.

Button group

Buttons can be grouped so as to offer several actions alongside each other. The number of buttons should be easy for the user to grasp. The recommended spacing between buttons is 16px.

Primary CTA Primary CTA

DMCC Figma Kit

Request access to the DMCC Figma Kit to view the latest and most up-to-date web assets.