Skip to content

DOBT Style Guide




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.


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.


Qualitative Colors

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