Semantic Colors

Semantic colors for consistent status and feedback across themes.

Overview

Semantic color tokens provide a consistent way to communicate status and feedback across your application. Each status type includes multiple color variants:

• base - Primary status color
• bg - Background color for status containers
• fg - Foreground/text color for status content
• border - Border color for status elements
• muted - Muted variant for secondary status indicators

Available Status Colors

Success

1
2
3
4
5

Error

1
2
3
4
5

Warning

1
2
3
4
5

Info

1
2
3
4
5

Usage

CSS Variables

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

React Components

Use semantic colors in your components:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Using semantic colors with Tailwind

Semantic colors should be consumed via CSS variables (so they can adapt to light/dark themes). In Tailwind, use arbitrary values:

1
2
3
4
5
6
7
8
9
10
11
12

Theme Support

Semantic colors automatically adapt to the current theme (light, dark). The colors are optimized for each theme to ensure proper contrast and readability.

Best Practices

• Use semantic colors consistently: Always use status color tokens instead of hardcoded colors
• Consider context: Use bg/fg variants for containers, base for accents
• Test contrast: Ensure text is readable in all themes
• Use appropriate variants: Use muted for secondary indicators, base for primary actions

Links

• Design Tokens
• Theming & Modes