Colors
Opportunity’s brand has a vibrant color palette, and Weavr contains utility classes to quickly set the text color or background to each brand color. Color classes are named .brand-[color] for setting text color and .brand-[color]-bg for setting the background color.
Color palette
For reference, here are the colors and their RGB and HEX values:
Purple
.brand-purple
.brand-purple-bg
#4a0059
rgb(74,0,89)
Light Purple
.brand-light-purple
.brand-light-purple-bg
#611171
rgb(97,17,113)
Teal
.brand-teal
.brand-teal-bg
#00abab
rgb(0,171,171)
Light Teal
.brand-light-teal
.brand-light-teal-bg
#6cc9c8
rgb(108,201,200)
Pink
.brand-pink
.brand-pink-bg
#ed027e
rgb(237,2,126)
Light Pink
.brand-light-pink
.brand-light-pink-bg
#ea69a7
rgb(234,105,167)
Orange
.brand-orange
.brand-orange-bg
#f15b22
rgb(241,91,34)
Light Orange
.brand-light-orange
.brand-light-orange-bg
#f37d50
rgb(243,125,80)
Green
.brand-green
.brand-green-bg
#7bc557
rgb(123,197,87)
Offwhite
.brand-offwhite
.brand-offwhite-bg
#efeeea
rgb(239,238,234)
Gray
.brand-gray
.brand-gray-bg
#8f8e8c
rgb(143,142,140)
Dark Gray
.brand-dark-gray
.brand-dark-gray-bg
#222222
rgb(34,34,34)
A darker purple also exists, but should only be used in print and for background color overlays.
Dark Purple
.brand-dark-purple
.brand-dark-purple-bg
#2d0a3c
rgb(45,10,60)
NOTE: Due to legibility concerns, text should never be placed on a gray background (.brand-gray-bg). That color should really only be used for text.
Miscellaneous color classes
A few other utility color classes exist outside the palette above:
White text and backgrounds
.brand-white, .brand-white-bg
Transparent background
.brand-transparent-bg
Text colors
Weavr’s default text color is #333333, with the secondary color #555555 available.
.text-color, .text-color-secondary.
Text against background colors
All background color classes, with the exception of .brand-offwhite-bg, set the text color to #fff for legibility.