Themes

Themes connect Monster tokens to real UI. Use this page to understand how color pairs, control surfaces and semantic states behave before you override anything in a product theme.

For Developers

Theme classes such as monster-theme-primary-1 are the runtime layer built on top of the token system. They pair foreground and background colors so components, utility classes and plain HTML stay readable without custom one-off CSS.

When you customize a theme, prefer changing the token values, not rewriting component internals. That keeps buttons, tables, badges and status colors consistent across the library.

For Designers

Think in pairs, not isolated swatches. Each theme step defines readable foreground and background combinations for normal, emphasized and inverse surfaces. The goal is system-wide contrast and predictability, not page-local styling.

This playground is useful to test whether a color direction still holds up on controls, content blocks and feedback states.

Token Families

Primary, Secondary, Tertiary

These are the general-purpose brand and surface families. Use them for neutral UI structure, emphasis hierarchy and product-specific accenting.

Success, Warning, Error, Destructive

These families are semantic. They should communicate status and consequence, not be repurposed as arbitrary accent colors.

Disabled

Disabled tokens soften contrast and signal reduced interactivity. They should not be used as regular secondary styling.

Control Surfaces

The control theme tokens define the neutral container, border and text treatment shared by fields and other interactive surfaces.

Theme Playground

Adjust the token pairs below to see how the whole UI reacts. The left input changes the foreground token, the right input changes the paired background token.

Foreground

Background

Primary 1

Primary 2

Primary 3

Primary 4

Secondary 1

Secondary 2

Secondary 3

Secondary 4

Tertiary 1

Tertiary 2

Tertiary 3

Tertiary 4

Disabled 1

Disabled 2

Disabled 3

Disabled 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

Examples

These examples are intentionally mixed. They let you test a theme on controls, tables, stateful UI, tabs, typography and utility classes without switching pages.

Form Controls

option a

option b

option c

Input Textarea

Buttons

Click Me

Table

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3

Disclosure

This is a details element

Tabs

Tab 1

Tab 2

Tab 3

Colors

The color tiles below make the active theme pairs visible at a glance. They are useful for checking whether steps still feel ordered and whether text remains legible on every surface.

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

Typographie

This section checks whether regular reading content, inline feedback and contextual helpers still feel balanced after token changes.

This is a message

This is a text with a

This is an error message

error message. Hover the icon to see the tooltip. This is a text with a

This is a help message

help message icon. Hover the icon to see the tooltip.

This is a heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec dui nec nunc Lorem Link a link example.

State Control with SVG

State-driven graphics are a useful stress test for theme changes because they rely heavily on tokenized fills and contrasts.

This is a headline

loreLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo

Button

The current width of the area is too small to display the content correctly.