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
- System Command — Azul 700
Engage with Site Content:
PMS Blue
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
Mobile
Default
Hover
Focus
Desktop/Tablet - Dark Background
Mobile - Dark Background
Sign Up for Newsletters:
Gold 700
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 700
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
System CTA:
a) System Command
Azul 700
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”.
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
b) System Request
Coral 600
Coral 600 has a LARGE TEXT AA rating = 3.49
✕
Is this page helpful?
Yes
No
Yes
No✕
NO THANKS
255 characters maximum
255 characters maximum reached
255 characters maximum reached
✕
Thank you for your feedback.
Comments or suggestions?
Comments or suggestions?
