Context

These are, simply put, all the elements in your Web App that Users can click on to execute an action.

Button font

This defines a default font family for primary and secondary buttons. Choose a font with the font weight you prefer, although we recommend using Bold.

Please note: Tertiary button will use body font style defined in Typography article.

These are the requirements for buttons:

• File format: OTF or TTF
• Preferably a font with Bold weight
• License

Colors

Primary Button and text color

Primary buttons are used for a primary action on the screen. Primary buttons are created from two colors: the primary button background color and the primary button text color. Create a combination in a way that makes the text readable.

1. Primary button background color
2. Primary button text color

Secondary Button and text color

It is usually placed as an alternative action (second in importance) compared to the primary button but can work as a standalone option for some cases. Secondary buttons are also created from two colors. Secondary button background color and secondary button text color. This combination should also be created in a way that makes it easy readable.

1. Secondary button background color
2. Secondary button text color

Tertiary Button and text color

Tertiary buttons are used for an additional action on the screen. In terms of their creation: once again, background color and text color - mixed in a way that is still eye-friendly. They are used mostly for dropdown options and subcategories (item groups).

1. Tertiary button background color
2. Tertiary button text color

Button Border Radius

This is used to round the corners of buttons.

Primary and secondary button border radius

• Used for border radius, in primary and secondary buttons.
• Default value: 8px

Tertiary button border radius

• Applied to tertiary/pill buttons.
• Default value: 16px