Colors in Monster

Monster uses a token-based color system that always thinks in pairs: foreground, background and, where needed, border. The goal is not to pick isolated colors, but to compose surfaces that stay readable in light mode and dark mode without manual corrections.

Prefer semantic pairs. Theme classes provide a complete foreground and background treatment.
Use custom properties for composition. Pair --monster-bg-color-* with the matching --monster-color-*.
Let the theme handle color schemes. Token-based markup works in light and dark mode without separate palettes.

Contrast and accessibility

Readable contrast is a functional requirement, not decoration. Normal text should stay at least around 4.5:1; large or bold text should still stay around 3:1. The safest way to stay within that range is to use Monster theme classes or matching foreground/background token pairs.

That is also why the docs avoid examples that set only a text color or only a background color. Partial color decisions tend to break first in dark mode and under custom branding.

A schematic illustration of a light and dark mode select control

Theme classes

Theme classes are the fastest way to get a safe foreground/background combination. They are ideal for badges, notices, callouts, cards and demo blocks where you want a stable visual outcome with minimal CSS.

Primary 1

Primary 2

Primary 3

Primary 4

<div class="monster-theme-primary-1">Primary 1</div>
<div class="monster-theme-primary-2">Primary 2</div>
<div class="monster-theme-primary-3">Primary 3</div>
<div class="monster-theme-primary-4">Primary 4</div>

div {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
}

monster-theme-* is the preferred API for “give me a finished color treatment”.

Each class already defines the text color and the background together, which is why it remains stable across light mode, dark mode and downstream theming.

Theme palette

The theme palette is grouped by semantic families and intensities. Use it when a component or surface needs a ready-made visual treatment.

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

Working with token pairs

When you need more control than the theme classes provide, compose a surface from custom properties. In practice that means choosing a background token, its matching text token and optionally a border token from the same visual level.

Base surface

Default shell bg primary-1 + color primary-1 + border-2

Highlighted section

Secondary emphasis bg secondary-2 + color secondary-2

Status callouts

Success bg success-2 + color success-2

Warning bg warning-2 + color warning-2

Error bg error-2 + color error-2

.custom-shell {
  background: var(--monster-bg-color-primary-1);
  color: var(--monster-color-primary-1);
  border: 1px solid var(--monster-color-border-2);
}

.custom-callout {
  background: var(--monster-bg-color-secondary-2);
  color: var(--monster-color-secondary-2);
}

Combined colors

The examples below show typical combinations when you compose custom surfaces yourself. The important part is not the individual token, but the complete pair.

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

Borders are supporting tokens. In most cases they should reinforce the depth or emphasis level of a surface, not compete with the content.

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

Do and don’t

Do

Use monster-theme-* for complete, safe color treatments.
Combine foreground and background tokens together.
Use state families like success, warning and error semantically.
Keep borders on the same intensity level as the surrounding surface.

Don’t

Don’t introduce raw hex colors into component docs when a Monster token exists.
Don’t set only color or only background for custom shells.
Don’t use aggressive border colors where depth can be expressed with token levels.
Don’t optimize only for light mode; always assume dark mode is active somewhere.

Practical default

If you need a neutral custom wrapper, this is the safest default:

background: var(--monster-bg-color-primary-1);
color: var(--monster-color-primary-1);
border: 1px solid var(--monster-color-border-2);

Color properties

The complete token list is exposed through CSS custom properties. These properties are the foundation for custom theming, wrappers, shells and advanced component compositions. The table below lists the currently available Monster color variables.