Blueprint's color palette is a balance of bright, fresh, and professional. Color is not the focus of the experience, it is used to support the information on the page. Color is used in a consistent, purposeful, and engaging way to communicate functionality within our interfaces. Using color consistently makes our product more predictable and easier to understand for our users.
Primary Colors
Our primary colors are used as accents in navigation, clickable content, text color, and foundational page color.
Apricot
$accent-color-secondary | $apricot | #fda94e | rgb 253, 169, 78
Ultramarine
$accent-color-primary | $link-color-primary | $ultramarine | #0f5ef0 | rgb 15, 94, 240
Midnight
$font-color-primary | $midnight | #221f4d | rgb 34, 31, 77
Coconut
$coconut | #ffffff | rgb 255, 255, 255
Secondary Blues
Our secondary blues are used as supporting colors to our primary palette.
Cobalt
$cobalt | #0b42a8 | rgb 11, 66, 168
Blueberry
$accent-color-primary-hover | $blueberry | #0c4bc0 | rgb 12, 75, 192
Cornflower
$cornflower | #b7cffa | rgb 183, 207, 250
Ice
$ice | #e7effd | rgb 231, 239, 253
Secondary Grays
Our secondary grays are used as supporting colors to our primary palette.
Storm
$font-color-secondary | $border-color-primary | $storm | #516f90 | rgb 81, 111, 144
Haze
$border-color-secondary | $haze | #cbd6e2 | rgb 203, 214, 226
Mist
$mist | #eaf0f6 | rgb 234, 240, 246
Cloud
$cloud | #f5f8fa | rgb 245, 248, 250
Feedback Colors
Our feedback colors are used to communicate immediate messaging content to the user. We use the colors to support our error, success, and alert messaging.
Tomato
$feedback-color-warning | $tomato | #cf171a | rgb 207, 23, 26
Brick
$feedback-color-warning-hover | $brick | #a11214 | rgb 161, 18, 20
Clementine
$feedback-color-alert | $clementine | #ff7b00 | rgb 255, 123, 0
Shamrock
$feedback-color-success | $shamrock | #05ae77 | rgb 5, 174, 119
Dropshadows
These are the four drop shadows we use in our Blueprint components.
Primary dropshadow
$box-shadow-primary | 0 1px 10px 0 rgba($midnight, 0.3)
Secondary dropshadow
$box-shadow-secondary | 0 2px 8px 0 $haze
Tertiary dropshadow
$box-shadow-tertiary | 1px 1px 3px 0 rgba($midnight, 0.2)
Primary navigation dropshadow
$box-shadow-nav-primary | 0 0 7px 0 rgba($cobalt, 0.2)
Focus Indicators
These are the four focus indicator styles we use throughout Blueprint.
Default focus
$box-shadow-focus-default | 0, 0, 0, 0.2rem rgba($cornflower, 1)
Default focus (inset)
$box-shadow-focus-default-inset | inset 0, 0, 0, 0.2rem rgba($cornflower, 1)
Warning focus
$box-shadow-focus-warning | 0, 0, 0, 0.2rem rgba($feedback-color-warning, 0.25)
Readonly focus
$box-shadow-focus-readonly | 0, 0, 0, 0.2rem rgba($storm, 0.3)