CTA Button Summary

The Design team has identified 4 button categories and assigned a color to represent each category. Below is an explanation of these categories and the colors / usage cases that fall within each.

The 4 categories are as follows:

  • Engage with Site Content — PMS Blue 
    • Dark background — Steel 50
  • Sign Up for Newsletters — Gold 700
  • Respond to a Census Survey — Forest 700
  • System Call to Action
    • System Command — Azul 700
      • Dark background — Primary 50
    • System Request — Coral 600

 

Engage with Site Content:
PMS Bluehello
PMS Blue has a LARGE TEXT AAA rating = 4.91
“Engage with Site Content” is referring to a default button with no specific job other than to allow the user to engage with various content and navigation on the site.
Desktop/Tablet

 

Default
Hover
Focus
 
 
Desktop/Tablet - Dark Background
Mobile - Dark Background

Sign Up for Newsletters:
Gold 700hello
Gold 700 has a LARGE TEXT AAA rating = 11.21
“Subscribe to Newsletter” refers specifically to promps which invite the user to take part in an official Census survey.
Desktop/Tablet

 

Default
Hover
Focus

Respond to a Survey:
Forest 700hello
Forest 700 has a LARGE TEXT AAA rating = 4.58
“Respond to a Census Survey” refers specifically to promps which invite the user to take part in an official Census survey.
Desktop/Tablet

 

Default
Hover
Focus
 
 
Mobile

 

Default
Hover
Focus

System CTA:

a) System Command
Azul 700hello
Azul 700 has a LARGE TEXT AAA rating = 5.87
“System Command” refers to a situation where the user is giving the system a command . “Take me there” “create this for me” “download content for me” etc.

This category has a lot of various usage scenarios, so for outlying CTA such as interacting with a form / map etc., there are Secondary Azul buttons, as well borrowed System Alert Banner colors such as red and green for commands like “stop” and “finish”.
Desktop/Tablet

 

Default
Hover
Focus
 
 
Mobile

 

Default
Hover
Focus
 
 
Desktop/Tablet

 

Default
Hover
Focus
 
 
Mobile

 

Default
Hover
Focus
 
 
Desktop/Tablet

 

Default
Hover
Focus
 
 
Mobile

 

Default
Hover
Focus
 
 
Desktop/Tablet

 

Default
Hover
Focus
 
 
Mobile

 

Default
Hover
Focus
b) System Request
Coral 600hello
Coral 600 has a LARGE TEXT AA rating = 3.49
“System Request” refers to when the system is passively prompting the user for feedback, and pertains to “yes” or “no” answers.
Desktop/Tablet

 

Default
Hover
Focus
 
 
 
Mobile

 

Default
Hover
Focus