Get a quote
Select Page

REI Color Contrast

WCAG AA (4.5 Minimum) & Normal Text

#0078A2 – Blue

#8EB935 – Green

#F3A61B – Yellow

#EE7623 – Orange

#00344F – Dark Blue

#2EA3F2 – Sky

#333333 – Dark Gray

#F5F5F5 – Light Gray

#999999 – Medium Grey

#666666 – Dim Grey

❌ Fail (3.65)

OneDigital Color Contrast

WCAG AA (4.5 Minimum) & Normal Text

#1EA4CD – Light Blue

#8FC224 – Light Green

✅ Pass (9.91)

#FFC300 – Light Yellow

✅ Pass (13.05)

#FE7B15 – Light Orange

#00344F – Medium Blue

#134C00 – Medium Green

#7D4700 – Medium Yellow

#792400 – Medium Orange

#001E2E – Deep Blue

#061E16 – Deep Green

#251500 – Deep Yellow

#350B00 – Deep Orange

#F8F5EF – Off White

#E1E2E1 – Light Grey

#25282A – Deep Grey

Design System

Typography – Our brand typeface is Open Sans. This is a Google font and can be downloaded here.

Important:

[Notes on font usage]

EYEBROW STYLE

Eyebrows are set in Open Sans, all caps and tracked to 50 (5% letter spacing in Figma).

Headline style (H1)

Headlines are set in Open Sans.

Subhead style (H2)

Subheads are set in Open Sans.

Body copy header style (H3)

Body copy header style (H3).

Body copy style. Bist et que re, eos dolut auditae nonseque volorrum cum il in pe arum id que aces si dolupit aut ut experentotas exerferovit rem re nonsectium sam repudio nsequam reptia iusam aut et aut pro tem voluptate versperio.

Body copy is set in Open Sans.

Typography color combinations:

When setting copy, pay close attention to color combinations to ensure there is proper contrast.

On white or light backgrounds, headlines should be set in X or X.

On dark backgrounds, headlines should be set in X or X.

On white or light backgrounds, body copy should be set in X or X.

Headline style (h1)

Subhead Style (H2) Equidi Nos Sitetur

Body copy header style (H3)

Body copy style. Bist et que re, eos dolut auditae nonseque volorrum cum il in pe arum id que aces si dolupit aut ut experentotas exerferovit rem re nonsectium sam repudio nsequam reptia iusam aut et aut pro tem voluptate versperio. Nem venihicia verrum con por alitat quis eum evendit eaquam reperch ilique quam, as earunt que sed utae.

Headline style (h1)

Block Library

H2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat, purus ac iaculis vulputate.

H3 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat, purus ac iaculis vulputate, leo libero convallis quam, in cursus diam nulla vel dui. Sed at egestas massa. Donec maximus vulputate ante et suscipit. Mauris at lectus dignissim, varius odio nec, lobortis nunc. Etiam sit amet velit magna. Curabitur ac felis a dui convallis sagittis. Suspendisse in enim facilisis, accumsan libero sed, auctor orci.

H3 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat, purus ac iaculis vulputate, leo libero convallis quam, in cursus diam nulla vel dui. Sed at egestas massa. Donec maximus vulputate ante et suscipit. Mauris at lectus dignissim, varius odio nec, lobortis nunc. Etiam sit amet velit magna. Curabitur ac felis a dui convallis sagittis. Suspendisse in enim facilisis, accumsan libero sed, auctor orci.

Card One

Card with Icon Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card One

Card with Icon Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card One

Card with Icon Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Horizontal Tabs

Vertical Tabs

Cover Block with Video

Supporting subhead text.

Accordion Block – Grouped

Accordion Block – Split

Slide 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat, purus ac iaculis vulputate, leo libero convallis quam, in cursus diam nulla vel dui. Sed at egestas massa. Donec maximus vulputate ante et suscipit. Mauris at lectus dignissim, varius odio nec, lobortis nunc. Etiam sit amet velit magna. Curabitur ac felis a dui convallis sagittis. Suspendisse in enim facilisis, accumsan libero sed, auctor orci.

Slide 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat, purus ac iaculis vulputate, leo libero convallis quam, in cursus diam nulla vel dui. Sed at egestas massa. Donec maximus vulputate ante et suscipit. Mauris at lectus dignissim, varius odio nec, lobortis nunc. Etiam sit amet velit magna. Curabitur ac felis a dui convallis sagittis. Suspendisse in enim facilisis, accumsan libero sed, auctor orci.

Slide 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat, purus ac iaculis vulputate, leo libero convallis quam, in cursus diam nulla vel dui. Sed at egestas massa. Donec maximus vulputate ante et suscipit. Mauris at lectus dignissim, varius odio nec, lobortis nunc. Etiam sit amet velit magna. Curabitur ac felis a dui convallis sagittis. Suspendisse in enim facilisis, accumsan libero sed, auctor orci.

Slide 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat, purus ac iaculis vulputate, leo libero convallis quam, in cursus diam nulla vel dui. Sed at egestas massa. Donec maximus vulputate ante et suscipit. Mauris at lectus dignissim, varius odio nec, lobortis nunc. Etiam sit amet velit magna. Curabitur ac felis a dui convallis sagittis. Suspendisse in enim facilisis, accumsan libero sed, auctor orci.

Slide 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat, purus ac iaculis vulputate, leo libero convallis quam, in cursus diam nulla vel dui. Sed at egestas massa. Donec maximus vulputate ante et suscipit. Mauris at lectus dignissim, varius odio nec, lobortis nunc. Etiam sit amet velit magna. Curabitur ac felis a dui convallis sagittis. Suspendisse in enim facilisis, accumsan libero sed, auctor orci.

Cover Block (Fixed Background)

Supporting subhead text.

Cover Block (Static Background)

Supporting subhead text.

Recent Posts

  • Does Employee Well-being Benefit Your Business?

    Here’s some good news to report when it comes to well-being benefits at work. A 2024 survey shows that employers have been listening to their employees and taking action to improve the workplace. Nearly half of employees surveyed said they felt better off physically and mentally than they did two years ago. Of those employees,…

  • How to Generate Benefits Adoption Across Multiple Generations

    We all know that the competition for top talent is fierce. Today’s employees are taking a closer look at what you’re offering, but what they want varies depending on their current stage of life. Finding the right mix of employee benefits can go a long way in recruiting and retaining the best of the best.…

  • 5 Tips for Writing Great Job Descriptions for Recruiting

    Job descriptions can be much more than just a way of recruiting top talent for an organization. They can also codify the company’s ethos into a single written package, letting everyone—including management—know what’s expected from any role. The right job description, when written with an eye on company culture, actually contributes to defining the company…

Consult

We visit with your client, absorb their culture, and ask the questions a standard intake form never would.

Search

We hunt for talent proactively. We don’t wait for applications.

Recruit

We sell the opportunity and the company, not just the role.

Pin It on Pinterest