Colors
Colors for Informed K12 are helpful, vibrant, and playful, just like the hidden heroes in schools.
Our core colors
These colors make up our brand
$wb-dark-blue
#3c4ba0
Dark blue, used for specific hover states
$wb-blue-bell
#4658af
Our brand blue
$wb-light-blue
#7e99fc
Light blue, used as an accent color
$wb-darkest-teal
#0a7687
Darkest teal, used for link color
$wb-dark-teal
#1aa69f
Dark teal, used for colored text on white
$wb-teal-me-a-joke
#52d2bc
Our brand teal
$wb-light-teal
#d3f3ec
Light teal, used as our info background
$wb-blackboard
#2c2e3e
Our default black, our base typography color
$wb-blackboard-70
#696a76
70% black
$wb-blackboard-50
#95969e
50% black
$wb-blackboard-40
#bfc0c5
40% black
$wb-blackboard-20
#d5d5d8
20% black
$wb-blackboard-10
#e9eaeb
10% black
$wb-blackboard-5
#f4f4f5
5% black
$wb-whiteout
#fff
Our default white
Status colors
We use these colors to convey specific meaning
$wb-red-rover
#d60147
Dark danger color, for text and icon
$wb-alert
#ffccca
Light danger color, for background
$wb-orange-slice
#d8400f
Dark warning color, for text and icon
$wb-peach
#fbe8e2
Light warning color, for background
$wb-green-goo
#4c8508
Dark success, for text and icon
$wb-green-success
#c2e9b6
Light success color, for background
Secondary colors
These colors are typically used when we want to differentiate
from the core or status colors, and to give our design a more modern
and fun look.
$wb-carrot
#fa7339
Accent color used for illustrations.
$wb-green-peas
#82c02e
Accent color used for illustrations.
$wb-yellow-bus
#f4e87b
Accent color used for illustrations.
$wb-lemon
#f8f1b0
Alternate background color, for neutral status.
$wb-lavender
#ebebfa
Alternate background color, for neutral status.
Common UI colors
$wb-text-color
Our base text color.
$wb-text-muted-color
Our muted text color.
$wb-divider-color
Used for dividers or borders.
$wb-bg-base
Definition for white background.
$wb-bg-colored
Definition for blue background.
