Colors in design systems
Colors fulfill several important functions in design systems: They structure content, facilitate navigation and support the brand identity. Consistently used colors improve the user experience and strengthen visual communication.
Contrast and accessibility
Adequate color contrast is crucial to ensure that all users, especially people with visual impairments, can clearly recognize content. Text content should have a contrast ratio of at least 4.5:1, for larger fonts (18pt or 14pt bold) a ratio of at least 3:1. Specify the text size in points (1pt = 1.333px), 14pt, and 18pt correspond to approximately 18.5px and 24px respectively.
A thoughtful use of color facilitates accessibility and improves the overall user experience.
Light and dark mode
The colors in our design system are optimized to work effectively in both light mode and dark mode. This careful tuning ensures that all elements are clearly visible in both modes without users having to make manual adjustments. The consistency of color perception between modes improves the user experience and ensures that accessibility is maintained under different lighting conditions.
Colors
Our color palette is carefully crafted to ensure consistency and accessibility in all aspects of our design system. It includes different shades for primary, secondary and tertiary colors, each available in four intensities. In addition, we offer special colors for states such as success, warning and error, which help to promote intuitive user interactions. The 'disabled' variants in our palette ensure that elements remain visually distinguishable even when disabled. Each shade is optimized in both light mode and dark mode to ensure excellent readability and visual clarity.
<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;
}This example shows how the theme classes can be used. You can specify the colors with a single class and don't have to worry about anything else.
Classes such as monster-theme-primary-4 always defines the text color and the background colors.
This is important because it ensures that the contrast is optimal and that the design works in both dark and light mode.
Theme colors
The following examples show the different shades of our primary, secondary and tertiary colors. The color classes always define the foreground and background. This means they can be used for dark and light mode without any major problems. All color classes have the prefix monster-theme-.
Combined colors
The following examples show how different colors can be combined to create a harmonious overall appearance. The colors can be used for text, backgrounds, borders, and other elements to create a consistent visual language. All color classes are prefixed with monster-color-.
Border colors
The following examples show the different border colors in our design system. The border colors can be used to create visual separation between elements or to emphasize certain areas. All border color classes are prefixed with monster-border-.
Color Properties
The basic colors are defined in our color system via so-called CSS custom properties. The colors are coordinated in such a way that they can be used freely. In this way, you can easily adapt elements to your brand identity or create a unique visual appearance. The following table lists the CSS variables for the different color tones and intensities.