Buttons

Buttons are used for actions or interactions and primary CTA links. Buttons should scale to fit the text and icons inside of them.

Primary buttons

Primary buttons are the most used and represent the main actions. Primary buttons could have icons on the left or right of the button.

Responsive sizing

Buttons do not resize as the page width changes. Buttons are the same size on desktop and mobile.

Specs

• Text color: white

• Font-weight: 400

• Default background-color: primary 100

• Hover/Active color: dark accent

• Disabled color: gray 60

• Focus outline border: 2px solid [primary 60]

• Focus box-shadow: 0px 0px 2px 0px [light accent]

• Use a 7.5° skew for the angle. Read more about angles in Design elements.

Secondary buttons

Secondary buttons are used for less important actions that are not the primary flows for the user. These actions draw less attention to themselves with their lighter color.

There is a small version of the secondary button used in some templates.

Responsive

Buttons do not resize as the page width changes. Buttons are the same size on desktop and mobile.

Specs

• Text color: primary 100 (default), dark accent (hover/active), gray 80 (disabled)

• Font-weight: 400 (default size), 700 (small button)

• Default background-color: white

• Border: 1px solid [primary 100]

• Hover/active border: 2px solid [dark accent]

• Disabled border: 1px solid [gray 80]

• Focus outline border: 2px solid [primary 60]

• Focus box-shadow: 0px 0px 2px 0px [light accent]

• Use a 7.5° skew for the angle. Read more about angles in design elements.

Inspect buttons in brand styles in Figma