Button & Link Colors

Button Color Changes

Button colors should not be changed from the defaults defined for Primary, Secondary and Alternative buttons. This allows users to identify action items more quickly.

Exception: Buttons related to an upcoming CNS Annual Meeting can be modified to match branding.

Primary Buttons

• Use for high-level actions items where high emphasis is needed.
• Use to identify primary actions in a group of buttons where primary and secondary distinction is needed.

Secondary Buttons

• Use for low-level action items where high emphasis is not needed.
• Use to identify secondary actions in a group of buttons where primary and secondary distinction is needed.
• Use for “view more” action items that display at the bottom of content/card grids or listings.

Alternative Buttons

• Use for situations where primary or secondary buttons do not have sufficient contrast with background colors.
• Light Example: Placing a button on a tinted background color
• Dark Example: Placing a button overtop a graphic or pattern

Link Color Changes

Link colors should follow the rules defined below. Avoid creating link colors that do not follow these rules.

Content Links

• Light Background: Ocean Blue link / Red Orange hover
• Dark Background: Sky Blue link / White hover
• Exception: On dark backgrounds, if Sky Blue clashes or does not provide sufficient contrast for link, use White for link color. Indicate that this is a link with a text underline. Use White with 80% opacity for hover color.

Menu Links

• Light Background: CNS Blue link / Red Orange hover
• Dark Background: White link / Sky Blue hover
• Note: Menu links should have a Semibold font weight so they have added emphasis compared to body text.

Card Action Items

• Light Background: Ocean Blue link / Red Orange hover
• Dark Background: Sky Blue link / White hover
• Exception: On dark backgrounds, if Sky Blue clashes or does not provide sufficient contrast for link, use White for link color. Use White with 80% opacity for hover color.
• Note: Card action items should have a Semibold font weight and a right-aligned chevron icon.