CodeAI

Color

The CADS color system is broken into two categories: primitives and semantics. Primitives define core brand colors while semantics define how they should be applied in the product.

Primitive colors

Our core colors and their ramps, broken down into brand, sentiment, and neutral families. Primitives are used to build the semantic colors and are not light/dark theme aware, they should not be used directly in the product.

base

3

gray

11

black-alpha

11

white-alpha

11

Semantic colors

Semantic colors are broken into three primary families: backgrounds, text, and borders. They assign primitives to specific contexts and are carefully crafted to ensure proper contrast, support consistent usage of colors in the UI, and are theme aware.

neutral

12

alpha

11

purple

4

error

4

warning

4

success

4

info

4

pink

4

orange

4

selected

3

disabled

8