Color

Cedar offers a range of colors designed to be accessed, understood, and used by all people regardless of their age, background, or ability. We meet or exceed color contrast WCAG AA accessibility standards.

Typography Colors

$text-color-primary-on-light
#292929 r41 g41 b41
$text-color-primary-on-dark
#fafafa r250 g250 b250
$text-color-secondary-on-light
#616161 r97 g97 b97
$text-color-secondary-on-dark
#999999 r153 g153 b153

Background Colors

$background-color-light
#f7f7f7 r247 g247 b247
$background-color-lighter
#fafafa r250 g250 b250
$background-color-lightest
#ffffff r255 g255 b255
$background-color-dark
#292929 r41 g41 b41
$background-color-darker
#1a1a1a r26 g26 b26

Color Palette

Neutral colors

Neutral colors support the cohesive use of typography, backgrounds, and borders across the digital ecosystem.

#ffffff r255 g255 b255
#fafafa r250 g250 b250
#f7f7f7 r247 g247 b247
#dadada r218 g218 b218
#b8b8b8 r184 g184 b184
#999999 r153 g153 b153
#7a7a7a r122 g122 b122
#616161 r97 g97 b97
#434343 r67 g67 b67
#292929 r41 g41 b41
#1a1a1a r26 g26 b26

Accent colors

Accents drive a user’s attention to important actions or content. Use accents sparingly to maintain a balanced hierarchy.

#5197cd r81 g151 b205
#3278ae r50 g120 b174
#2b6692 r43 g102 b146
#1e4e72 r30 g78 b114
#e86868 r232 g104 b104
#c83232 r200 g50 b50
#b5292b r181 g41 b43
#a12024 r161 g32 b36

Brand colors

Brand colors are core to the co-op. They’re often used as backgrounds when an experience calls for a stronger brand impression.

#46522e r70 g82 b46
#faf9f5 r250 g249 b245
#f1efe4 r241 g239 b228

Feedback colors

Feedback colors are used for alerts, notifications, and other components to communicate, reinforce, or prompt user action.

#faecec r250 g236 b236
#e86868 r232 g104 b104
#b5292b r181 g41 b43
#fff5eb r255 g245 b235
#f8b877 r248 g184 b119
#c77523 r199 g117 b35
#edf7ee r237 g247 b238
#6c9f71 r108 g159 b113
#367c3c r54 g124 b60
#ecf2f7 r236 g242 b247
#5197cd r81 g151 b205
#3278ae r50 g120 b174

Examples

Do example image
Do
Don't example image
Don't
Do example image
Do
Don't example image
Don't

Text choices should be paired with their corresponding background color to ensure accessibility.

text-color-primary-on-darkAAA 13.94:1AAA 16.67:1
text-color-secondary-on-darkAAA 5.11:1AAA 6.11:1