Color
These are our color palettes. They are some of the primary building blocks for any design and give you the tools to reinforce CFA branding.
Palettes
Section titled “Palettes”Primary
Section titled “Primary”The primary color palette is used on sustaining elements of the brand and features our main brand colors: Chick-fil-A Red and white. Guests associate Chick-fil-A Red with our brand, so it’s used to highlight the most important elements. This is our primary palette for brand recognition.
Secondary
Section titled “Secondary”The secondary palette typically geared toward internal facing apps. This allows for clarity when making use of destructive color actions such as “Delete”.
Secondary
Section titled “Secondary”Still part of the ‘Secondary’ family, these additional brand colors are primarily used in print materials, but can be used in aesthetically pleasing situations.
Tertiary
Section titled “Tertiary”Our tertiary palette helps add vibrancy—it can be used as a subtle detail that adds excitement in elements like local events and social media. Colors from the tertiary palette should be used sparingly.
Feedback
Section titled “Feedback”Our feedback colors are used to represent a warning, error, success, or informational statuses. This could take various forms within our components such as Message Block or Banner Messages Each color has the same fundamental meaning in all contexts.
Use Tokens, not hex values when possible
Section titled “Use Tokens, not hex values when possible”While our hex values are a nice verification of the correct web colors, it’s important to keep in mind that it’s not only the correct colors we’re shooting for with the Design System. We have Figma Tokens! That means if you use our Style Colors in Figma or our Design Tokens repo in code, you stay connected to our source of truth for the option to update to the latest in the future!
As you can see our Figma styles are connected directly to our Tokens already!
Destructive Actions
Section titled “Destructive Actions”Destructive actions such as “Delete” or “Remove” should use colors intentionally. When using the Secondary blue color theme, use our destructive button variant so actions stand out and avoid being associated with Chick-fil-A’s Primary Red. The Chick-fil-A Red should never be used or associated with destructive actions.
