Skip to content

DOBT Style Guide

Color

Grayscale

$black
$darkestGray
$darkerGray
$darkGray
$gray
$lightGray
$lighterGray
$lightestGray
$white

Do establish visual hierarchy with the $black, $darkestGray and $darkerGray color variables.

Don't use lighter grayscale variables (like $gray or $lightGray) against white backgrounds. These will fail accessibility tests.

UI Colors

Each app should override $primaryColor and $secondaryColor with its primary brand colors.

$primaryColor
$secondaryColor
$successColor
$warningColor
$errorColor
$highlight

Do supplement color with text and icons to differentiate data or call out a UI element.

Don't attempt to communicate something to users with only a change in color. This is inaccessible to color-blind users.

Label Colors

When building a feature that allows users to add labels to their data, use this color palette for the suggested presets.

$redLabelColor
$lightRedLabelColor
$orangeLabelColor
$lightOrangeLabelColor
$yellowLabelColor
$lightYellowLabelColor
$greenLabelColor
$lightGreenLabelColor
$blueLabelColor
$lightBlueLabelColor
$purpleLabelColor
$lightPurpleLabelColor

Qualitative Colors

Use this color range to provide a value judgment (ranging from “bad” to “good”) on user-generated information.

$qualColor1
$qualColor2
$qualColor3
$qualColor4
$qualColor5
$qualColor6
$qualColor7
$qualColor8
$qualColor9
$qualColor10