Appearance
Color
Meaning and Message
Color is the foundation of a visual vocabulary we use to express who and what we are as a company: contemporary, trustworthy, leading, reliable, caring, dependable, successful, vibrant, and focused. The Primerica color palette has been carefully chosen to express these and other key ideas and attributes. It’s important that we all understand and adhere to this palette to present a unified, consistent expression of the Primerica purpose, personality, and values.
Primary
These are the bedrock colors of our company’s digital palette and, as such, should dominate any design. They echo the blue in the Primerica logo and instill a sense of confidence in our clients. The multiple shades of blue allow for design flexibility while maintaining the Primerica look and feel.
Blue
Blue 900
- HEX:
- RGB:
Tokens
- Background:
Blue 800
- HEX:
- RGB:
Tokens
- Background:
- Button text:
Blue 700
- HEX:
- RGB:
Tokens
- Background:
- Link:
- ???:
Blue 600
- HEX:
- RGB:
Tokens
- Background:
Blue 500
- HEX:
- RGB:
Tokens
- Background:
- Info:
Blue 400
- HEX:
- RGB:
Tokens
- Background:
Blue 300
- HEX:
- RGB:
Tokens
- Background:
Blue 200
- HEX:
- RGB:
Tokens
- Background:
Blue 100
- HEX:
- RGB:
Tokens
- Background:
Accent
As the name suggests, accent colors highlight and amplify areas of exceptional interest or importance. Limited and purposeful use of these colors is best practice. Incorporating accent colors simply for design variety will reduce their effectiveness. Excessive use of these colors overshadows the primary colors and presents an unclear Primerica brand message.
Green
Green 900
- HEX:
- RGB:
Tokens
- Background:
Green 800
- HEX:
- RGB:
Tokens
- Background:
Green 700
- HEX:
- RGB:
Tokens
- Background:
- Success:
Green 600
- HEX:
- RGB:
Tokens
- Background:
Green 500
- HEX:
- RGB:
Tokens
- Background:
Green 400
- HEX:
- RGB:
Tokens
- Background:
Green 300
- HEX:
- RGB:
Tokens
- Background:
Green 200
- HEX:
- RGB:
Tokens
- Background:
Green 100
- HEX:
- RGB:
Tokens
- Background:
Cyan
Cyan 900
- HEX:
- RGB:
Tokens
- Background:
Cyan 800
- HEX:
- RGB:
Tokens
- Background:
Cyan 700
- HEX:
- RGB:
Tokens
- Background:
Cyan 600
- HEX:
- RGB:
Tokens
- Background:
Cyan 500
- HEX:
- RGB:
Tokens
- Background:
Cyan 400
- HEX:
- RGB:
Tokens
- Background:
Cyan 300
- HEX:
- RGB:
Tokens
- Background:
Cyan 200
- HEX:
- RGB:
Tokens
- Background:
Cyan 100
- HEX:
- RGB:
Tokens
- Background:
Neutral
Used in backgrounds, text and peripheral elements, these colors work in conjunction with primary, accent, and semantic colors to optimize them. It is the neutrality of these colors that allow other colors to stand out and make the greatest impact.
Grey
Grey 900
- HEX:
- RGB:
Tokens
- Background:
Grey 800
- HEX:
- RGB:
Tokens
- Text:
- Secondary ???:
Grey 700
- HEX:
- RGB:
Tokens
- Background:
Grey 600
- HEX:
- RGB:
Tokens
- Background:
Grey 500
- HEX:
- RGB:
Tokens
- Background:
Grey 400
- HEX:
- RGB:
Tokens
- Background:
Grey 300
- HEX:
- RGB:
Tokens
- Background:
Grey 200
- HEX:
- RGB:
Tokens
- Background:
Grey 100
- HEX:
- RGB:
Tokens
- Background:
Blue Grey
Blue Grey 900
- HEX:
- RGB:
Tokens
- Background:
Blue Grey 800
- HEX:
- RGB:
Tokens
- Text:
Blue Grey 700
- HEX:
- RGB:
Tokens
- Background:
Blue Grey 600
- HEX:
- RGB:
Tokens
- Background:
Blue Grey 500
- HEX:
- RGB:
Tokens
- Background:
Blue Grey 400
- HEX:
- RGB:
Tokens
- Background:
Blue Grey 300
- HEX:
- RGB:
Tokens
- Background:
Blue Grey 200
- HEX:
- RGB:
Tokens
- Background:
Blue Grey 100
- HEX:
- RGB:
Tokens
- Background:
Semantic
Semantic Colors are universally recognized and reserved to identify specific types of messages and information. Avoid using these colors, or those closely resembling them, for general design. They should be used exclusively to indicate the following: Blue = Information; Green = Success, correct; Orange = Alert, caution; Red = Danger, error.
Blue, Green, Orange & Red
Blue 500
- HEX:
- RGB:
Tokens
- Background:
- Info:
Green 700
- HEX:
- RGB:
Tokens
- Background:
- Success:
Orange 500
- HEX:
- RGB:
Tokens
- Background:
- Warning:
Red 600
- HEX:
- RGB:
Tokens
- Background:
- Error:
Supporting Semantic Colors
In addition to the full family of Primary Blue and Accent Green being available as supporting semantic colors we also have Orange and Red palette’s.
Orange
Orange 900
- HEX:
- RGB:
Tokens
- Background:
Orange 800
- HEX:
- RGB:
Tokens
- Background:
Orange 700
- HEX:
- RGB:
Tokens
- Background:
Orange 600
- HEX:
- RGB:
Tokens
- Background:
Orange 500
- HEX:
- RGB:
Tokens
- Background:
- Warning:
Orange 400
- HEX:
- RGB:
Tokens
- Background:
Orange 300
- HEX:
- RGB:
Tokens
- Background:
Orange 200
- HEX:
- RGB:
Tokens
- Background:
Orange 100
- HEX:
- RGB:
Tokens
- Background:
Red
Red 900
- HEX:
- RGB:
Tokens
- Background:
Red 800
- HEX:
- RGB:
Tokens
- Background:
Red 700
- HEX:
- RGB:
Tokens
- Background:
Red 600
- HEX:
- RGB:
Tokens
- Background:
- Error:
Red 500
- HEX:
- RGB:
Tokens
- Background:
Red 400
- HEX:
- RGB:
Tokens
- Background:
Red 300
- HEX:
- RGB:
Tokens
- Background:
Red 200
- HEX:
- RGB:
Tokens
- Background:
Red 100
- HEX:
- RGB:
Tokens
- Background:
Interactive States
We use shades of Blue to indicate active states of icons and buttons, while Grey indicates a disabled state.
Use these colors to indicate the following: Normal = Blue 700; Active = Blue 600 with a 4dp shadow; Hover = Blue 600; Disable = Grey 400.
Illustration Skin Tones
Please use to the following skin tone palette for Illustrations only.
Beige
- HEX:
- RGB:
Porcelain
- HEX:
- RGB:
Almond
- HEX:
- RGB:
Espresso
- HEX:
- RGB:
Gradients
While gradients can add visual interest, they are best used to illustrate and emphasize the concepts of progression, change, and movement. If overused or used without specific purpose, gradients can lose their effectiveness.
Linear Gradient Opp Night
- HEX 1:
- HEX 2:
Linear Gradient Accelerator
- HEX 1:
- HEX 2:
ADA Color Compatibility
For greatest success, it’s important that Primerica digital communications be accessible to everyone. Just as importantly, our commitment to accessibility reinforces the Primerica values of inclusion and provides exceptional customer service. For these reasons, Primerica strives to have the proper color contrast ratios to comply with WCAG 2.0, Level AA. This includes, but is not limited to:
For normal text less than 24 px or less than 18pt, WCAG level AA requires a color contrast ratio of at least 4:5:1. Level AAA requires a ratio that’s equal to or more than 7:1.
For large text equal to or more than 24 px or equal to or more than 18pt, WCAG level AA requires a color contrast ratio of at least 3:1. Level AAA requires a ratio that’s equal to or more than 4:5:1.
- Menus and navigation items
- Titles and headers
- Font colors in combination with any background colors
- Font colors in combination with font sizes and weights
- Background colors in combination with images or text
One important step in meeting ADA accessibility standards is to check color contrast ratios at Contrast Checker