Apsara uses a semantic color system that provides meaningful, context-aware colors for your interface. Colors are organized by their purpose rather than their appearance, making it easy to maintain consistency and support theming.

Foreground Colors

Foreground colors are used for text, icons, and other content elements.

Base Foreground

Semantic Foreground

Background Colors

Background colors define surfaces and containers in your interface.

Base Background

Semantic Background

Border Colors

Border colors define boundaries and separators.

Overlay Colors

Overlay colors are used for modals, tooltips, and layered elements.

Visualization Colors

A palette of colors designed for data visualization, charts, and graphs.

Usage

1/* Text colors */
2.heading {
3  color: var(--rs-color-foreground-base-primary);
4}
5
6.description {
7  color: var(--rs-color-foreground-base-secondary);
8}
9
10/* Background colors */
11.card {
12  background-color: var(--rs-color-background-base-secondary);
13}
14
15.button-primary {
16  background-color: var(--rs-color-background-accent-emphasis);
17  color: var(--rs-color-foreground-accent-emphasis);
18}
19
20/* Border colors */
21.input {
22  border: 1px solid var(--rs-color-border-base-tertiary);
23}
24
25.input:focus {
26  border-color: var(--rs-color-border-accent-emphasis);
27}
28
29/* Semantic states */
30.error {
31  color: var(--rs-color-foreground-danger-primary);
32  background-color: var(--rs-color-background-danger-primary);
33  border-color: var(--rs-color-border-danger-primary);
34}

Best Practices

• Use semantic tokens - Prefer semantic color tokens over raw color values for consistency and theming support
• Match foreground with background - Use corresponding foreground colors when placing text on semantic backgrounds (e.g., foreground-accent-emphasis on background-accent-emphasis)
• Respect color hierarchy - Use primary colors for main content, secondary for supporting content, and tertiary for subtle elements
• Test in both themes - Ensure your color choices work well in both light and dark modes