When To Use Primary Colored Buttons
Use on high-tiered call to actions like “Donate Now” or “Give Now” that link to a way to complete a monetary transaction.
Use Primary Fill on white or light colored backgrounds
Remember: use Chicago title case rules for all buttons.
Use Primary Outline on dark backgrounds
Or use both Primary Fill and Outline in a two column when need two buttons that go to separate donation pages.
When To Use Secondary Colored Buttons
Use on low-tiered call to actions and links like “Learn More” or “Read More” that link to a page or PDF document
Use Secondary Fill on white or light colored backgrounds
Remember: use Chicago title case rules for all buttons.
Use Secondary Outline on dark backgrounds
Or use both Secondary Fill and Outline in a two column when need two buttons that go to separate donation pages.
When To Use Tertiary Colored Buttons
Use rarely, only when there is a column of three buttons and you need a third colored button. Use hierarchy to determine which buttons get assigned different colors