Color

Color is part of the visual language of a design system. It is used to communicate meaning, organize elements, and create visual interest in designs. Color is also used to create contrast between elements, so that users can easily scan and interact with content.

Theme Colors

The theme colors are listed below. The values must be prefixed with monster-theme-. The colors contain a definition for the background and the text. The color scheme is optimized for display in light and dark mode.

primary-1
primary-2
primary-3
primary-4
primary-disabled-1
primary-disabled-2
primary-disabled-3
primary-disabled-4
secondary-1
secondary-2
secondary-3
secondary-4
tertiary-1
tertiary-2
tertiary-3
tertiary-4
destructive-1
destructive-2
destructive-3
destructive-4
success-1
success-2
success-3
success-4
warning-1
warning-2
warning-3
warning-4
error-1
error-2
error-3
error-4
selection-1
selection-2
selection-3
selection-4

Special colors

<div class="monster-color-neutral-1"></div>

The special colors are listed below. The values must be prefixed with monster-color-. The colors contain a definition for the background or the text.

neutral-1
neutral-2
neutral-3 + bg-color-primary-3
neutral-4 + bg-color-primary-4
neutral-1 + bg-color-secondary-1
neutral-1 + bg-color-secondary-2
neutral-1 + bg-color-secondary-3
neutral-4 + bg-color-secondary-4
neutral-1 + bg-color-secondary-1 + border-primary
neutral-1 + bg-color-secondary-2 + border-color-2
neutral-1 + bg-color-secondary-3 + border-color-3
neutral-4 + bg-color-secondary-4 + border-color-4

Border colors

<div class="monster-border-primary-1"></div>

The border colors are listed below. The values must be prefixed with monster-. The colors contain a definition for the border including the border width and the border style.

border-primary-1
border-primary-2
border-primary-3
border-primary-4
border-secondary-1
border-secondary-2
border-secondary-3
border-secondary-4
border-tertiary-1
border-tertiary-2
border-tertiary-3
border-tertiary-4

Color Properties

References