Colors

Overview of the color system and semantic color tokens in Apsara.

Apsara uses a semantic color system that provides meaningful, context-aware colors for your interface. Rather than using fixed color values, semantic tokens represent the intended purpose of a color—such as "primary text" or "danger background"—and automatically resolve to the appropriate value based on the active theme and style. This abstraction allows you to build consistent, themeable interfaces by focusing on what a color represents rather than what it looks like.

Foreground Colors

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

TokenDescription
--rs-color-foreground-base-primary
Primary text color for headings and important content
--rs-color-foreground-base-secondary
Secondary text color for supporting content
--rs-color-foreground-base-tertiary
Tertiary text color for muted or placeholder content
--rs-color-foreground-base-emphasis
High contrast text for emphasis on colored backgrounds
--rs-color-foreground-accent-primary
Accent color for interactive elements and links
--rs-color-foreground-accent-primary-hover
Hover state for accent foreground
--rs-color-foreground-accent-emphasis
Text on accent emphasis backgrounds
--rs-color-foreground-danger-primary
Error and destructive action text
--rs-color-foreground-danger-primary-hover
Hover state for danger foreground
--rs-color-foreground-danger-emphasis
Text on danger emphasis backgrounds
--rs-color-foreground-attention-primary
Warning and attention text
--rs-color-foreground-attention-primary-hover
Hover state for attention foreground
--rs-color-foreground-attention-emphasis
Text on attention emphasis backgrounds
--rs-color-foreground-success-primary
Success and positive action text
--rs-color-foreground-success-primary-hover
Hover state for success foreground
--rs-color-foreground-success-emphasis
Text on success emphasis backgrounds

Background Colors

Background colors define surfaces and containers in your interface.

TokenDescription
--rs-color-background-base-primary
Primary background for main content areas
--rs-color-background-base-primary-hover
Hover state for primary background
--rs-color-background-base-secondary
Secondary background for cards and panels
--rs-color-background-neutral-primary
Neutral background for subtle elements
--rs-color-background-neutral-secondary
Secondary neutral background
--rs-color-background-neutral-secondary-hover
Hover state for secondary neutral background
--rs-color-background-neutral-tertiary
Tertiary neutral background
--rs-color-background-neutral-tertiary-hover
Hover state for tertiary neutral background
--rs-color-background-neutral-emphasis
High contrast neutral background
--rs-color-background-accent-primary
Subtle accent background for highlights
--rs-color-background-accent-emphasis
Strong accent background for buttons and CTAs
--rs-color-background-accent-emphasis-hover
Hover state for accent emphasis background
--rs-color-background-danger-primary
Subtle danger background for error states
--rs-color-background-danger-emphasis
Strong danger background for destructive actions
--rs-color-background-danger-emphasis-hover
Hover state for danger emphasis background
--rs-color-background-attention-primary
Subtle attention background for warnings
--rs-color-background-attention-emphasis
Strong attention background
--rs-color-background-attention-emphasis-hover
Hover state for attention emphasis background
--rs-color-background-success-primary
Subtle success background for positive states
--rs-color-background-success-emphasis
Strong success background
--rs-color-background-success-emphasis-hover
Hover state for success emphasis background

Border Colors

Border colors define boundaries and separators.

TokenDescription
--rs-color-border-base-primary
Primary border for subtle boundaries
--rs-color-border-base-secondary
Secondary border for dividers
--rs-color-border-base-tertiary
Tertiary border for inputs and cards
--rs-color-border-base-tertiary-hover
Hover state for tertiary border
--rs-color-border-base-focus
Focus ring for interactive elements
--rs-color-border-base-emphasis
High contrast border for emphasis
--rs-color-border-accent-primary
Accent border for highlights
--rs-color-border-accent-emphasis
Strong accent border
--rs-color-border-accent-emphasis-hover
Hover state for accent emphasis border
--rs-color-border-danger-primary
Danger border for error states
--rs-color-border-danger-emphasis
Strong danger border
--rs-color-border-danger-emphasis-hover
Hover state for danger emphasis border
--rs-color-border-attention-primary
Attention border for warnings
--rs-color-border-attention-emphasis
Strong attention border
--rs-color-border-attention-emphasis-hover
Hover state for attention emphasis border
--rs-color-border-success-primary
Success border for positive states
--rs-color-border-success-emphasis
Strong success border
--rs-color-border-success-emphasis-hover
Hover state for success emphasis border

Overlay Colors

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

TokenValueDescription
--rs-color-overlay-base-primary
Default overlay
--rs-color-overlay-black-a1
5%
Black overlay
--rs-color-overlay-black-a2
10%
Black overlay
--rs-color-overlay-black-a3
15%
Black overlay
--rs-color-overlay-black-a4
20%
Black overlay
--rs-color-overlay-black-a5
30%
Black overlay
--rs-color-overlay-black-a6
40%
Black overlay
--rs-color-overlay-black-a7
50%
Black overlay
--rs-color-overlay-black-a8
60%
Black overlay
--rs-color-overlay-black-a9
70%
Black overlay
--rs-color-overlay-black-a10
80%
Black overlay
--rs-color-overlay-black-a11
90%
Black overlay
--rs-color-overlay-black-a12
95%
Black overlay
--rs-color-overlay-white-a1
5%
White overlay
--rs-color-overlay-white-a2
10%
White overlay
--rs-color-overlay-white-a3
15%
White overlay
--rs-color-overlay-white-a4
20%
White overlay
--rs-color-overlay-white-a5
30%
White overlay
--rs-color-overlay-white-a6
40%
White overlay
--rs-color-overlay-white-a7
50%
White overlay
--rs-color-overlay-white-a8
60%
White overlay
--rs-color-overlay-white-a9
70%
White overlay
--rs-color-overlay-white-a10
80%
White overlay
--rs-color-overlay-white-a11
90%
White overlay
--rs-color-overlay-white-a12
95%
White overlay

Visualization Colors

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

TokenDescription
--rs-color-viz-sky-9
Sky blue for data visualization
--rs-color-viz-mint-9
Mint for data visualization
--rs-color-viz-lime-9
Lime for data visualization
--rs-color-viz-grass-9
Grass green for data visualization
--rs-color-viz-green-9
Green for data visualization
--rs-color-viz-jade-9
Jade for data visualization
--rs-color-viz-cyan-9
Cyan for data visualization
--rs-color-viz-blue-9
Blue for data visualization
--rs-color-viz-iris-9
Iris for data visualization
--rs-color-viz-purple-9
Purple for data visualization
--rs-color-viz-pink-9
Pink for data visualization
--rs-color-viz-crimson-9
Crimson for data visualization
--rs-color-viz-orange-9
Orange for data visualization
--rs-color-viz-gold-9
Gold for data visualization

Usage

1/* Custom status indicator */
2.status-badge {
3  padding: var(--rs-space-1) var(--rs-space-3);
4  border-radius: var(--rs-radius-full);
5}
6

7.status-badge[data-status="active"] {
8  background-color: var(--rs-color-background-success-primary);
9  color: var(--rs-color-foreground-success-primary);
10}
11

12.status-badge[data-status="pending"] {
13  background-color: var(--rs-color-background-attention-primary);
14  color: var(--rs-color-foreground-attention-primary);
15}
16

17.status-badge[data-status="error"] {
18  background-color: var(--rs-color-background-danger-primary);
19  color: var(--rs-color-foreground-danger-primary);
20}
21

22/* Data table with hover states */
23.data-table-row {
24  border-bottom: 1px solid var(--rs-color-border-base-primary);
25}
26

27.data-table-row:hover {
28  background-color: var(--rs-color-background-base-primary-hover);
29}
30

31.data-table-cell-muted {
32  color: var(--rs-color-foreground-base-tertiary);
33}
34

35/* Metric card with visualization */
36.metric-card {
37  background: var(--rs-color-background-base-secondary);
38  border: 1px solid var(--rs-color-border-base-primary);
39}
40

41.metric-value {
42  color: var(--rs-color-foreground-base-primary);
43}
44

45.metric-trend-up {
46  color: var(--rs-color-foreground-success-primary);
47}
48

49.metric-trend-down {
50  color: var(--rs-color-foreground-danger-primary);
51}
52

53/* Sidebar navigation */
54.nav-item {
55  color: var(--rs-color-foreground-base-secondary);
56}
57

58.nav-item:hover {
59  background-color: var(--rs-color-background-neutral-secondary);
60  color: var(--rs-color-foreground-base-primary);
61}
62

63.nav-item[data-active="true"] {
64  background-color: var(--rs-color-background-accent-primary);
65  color: var(--rs-color-foreground-accent-primary);
66}

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