A button is used to trigger an action.

• Primary Buttons are strong visual indicators to guide the user to complete their goal or journey. Example situations are where the user would want to go to the next step, starting a journey, etc. These should be obvious.
• Secondary Buttons are used for to provide an alternative action to the primary one. These should be clear but not obvious.
• Tertiary Buttons are used for actions that may be used by the user but not necessarily the action they would need to do right then.

For the primary set of colors (blue), you should use a different shade based on the background its on top of (note the differences in hover as well).

Primary Color

Disabled State

For all other colors

This includes secondary colors (red, green, yellow) and indigo. You should use the "dark" shade of the color for the hover state and the "light" shade of the color for disabled state. Look at Colors from more specifics.

Button Structure and Spacing

There are 3 sizes of buttons. Large buttons are mainly used for call to actions and homepage. Use sparingly.

Large

Medium

Small

Basic Visual Style

Borders

Buttons have a border radius of 13 px. Secondary Buttons have border widths of 2 px.

Drop Shadow

Drop shadows have these attributes: box-shadow: 0 1px 6px 2px rgba(0,0,0,0.15);

Inline Links

Inline links should inherit text style.

Button Typography

Large & Medium Button

Small Button