Primary Button

Used as the most important and/or principal call-to-action. Because it’s so visually obtrusive, it should be used judiciously and strategically.

Guidelines for use:

• Should primarily be used on it’s own, as the predominant CTA on a page, within a section or in a content module. If used on it’s own, the iteration with the drop shadow should be used for maximum visibility.
• If the primary button is locked up with another button, the instance without the drop shadow should be used
• Should only be locked up with the tertiary (teal stroke) button, to draw a clear differentiation of importance
• Should not be placed too close to other elements that share the same red color value

In sections:

• Should not be used if it adds visual noise to the composition, instead, use the secondary or tertiary button
• Use the iteration without the shadow, as it visually conflicts with the button in the navigation menu
• Should not be placed near other elements that share the same red color value

Secondary Button

Depending on the contents of the section or module it appears, the secondary button sometimes assumes the role of the primary call-to-action.

Guidelines for use: