Token

Colors

Our color system provides a comprehensive palette for creating consistent, accessible interfaces with brand recognition and clear visual hierarchy.

Overview

The color system is built on two layers: primitive colors (raw color values) and semantic colors (contextual mappings). Components should always use semantic tokens to ensure consistency and theme support.

Brand Colors

Our brand palette features two distinctive colors: Moonstone (teal) as the primary brand color, and Wisteria (purple) as an accent.

Moonstone

Primary brand color used for interactive elements and brand identification.

moonstone-100 #d6edf3

moonstone-200 #aedce7

moonstone-300 #86cbdb

moonstone-400 #4ebacf

moonstone-500 #389fba

moonstone-600 #2d8699

moonstone-700 #226473

moonstone-800 #16434c

moonstone-900 #0b2126

Wisteria

Secondary brand color used for accents and alternative interactive states.

wisteria-100 #f4ecf8

wisteria-200 #e9d9f1

wisteria-300 #dfc7ea

wisteria-400 #d4b4e3

wisteria-500 #c9a0dc

wisteria-600 #aa6ac7

wisteria-700 #863da7

wisteria-800 #59296f

wisteria-900 #2c1437

Neutral Colors

Neutral colors form the foundation of our UI, used for text, backgrounds, borders, and other structural elements.

Mauve

Warm neutral scale used for text, borders, and subtle backgrounds.

mauve-50 #fdfcfd

mauve-100 #f6f6f6

mauve-200 #e9e8ea

mauve-300 #e4e2e4

mauve-400 #dcdbdd

mauve-500 #c8c7cb

mauve-600 #908e96

mauve-700 #86848d

mauve-800 #6f6e77

mauve-900 #1a1523

Light Scale

Light mode backgrounds and surfaces.

light-100 #ffffff

light-200 #faf9f8

light-300 #f5f4f2

light-400 #f1f1f2

light-500 #ededed

light-600 #e5e5e5

Dark Scale

Dark mode backgrounds and text colors.

dark-100 #0a0a0a

dark-200 #111111

dark-300 #181818

dark-400 #1f1f1f

dark-500 #262626

dark-600 #2e2e2e

System Colors

System colors communicate status and feedback: success, warning, and error states.

Green (Success)

Used for success states, confirmations, and positive actions.

green-100 #f2fcf5

green-200 #ddf3e4

green-300 #b4dfc4

green-400 #92ceac

green-500 #5bb98c

green-600 #30a46c

green-700 #299764

green-800 #18794e

Red (Danger)

Used for errors, destructive actions, and critical warnings.

red-100 #fff8f8

red-200 #ffe5e5

red-300 #f9c6c6

red-400 #f3aeaf

red-500 #eb9091

red-600 #e5484d

red-700 #dc3d43

red-800 #cd2b31

Yellow (Warning)

Used for warnings, caution states, and important notices.

yellow-100 #fffce8

yellow-200 #fff8bb

yellow-300 #f9e68c

yellow-400 #efd36c

yellow-500 #ebbc00

yellow-600 #f5d90a

yellow-700 #e0bb02

yellow-800 #946800

Semantic Colors

Semantic colors provide contextual meaning and should be used in components instead of primitive colors. They are organized by their purpose: foreground, background, and border.

Foreground

Used for text, icons, and other content elements.

--foreground-base Primary text color

--foreground-muted Secondary text color

--foreground-subtle Tertiary text color

--foreground-disabled Disabled text color

--foreground-interactive-primary Primary interactive elements

--foreground-interactive-primaryAlt Alternative interactive color

--foreground-system-success Success state text

--foreground-system-warning Warning state text

--foreground-system-danger Error state text

Background

Used for surfaces, containers, and interactive element backgrounds.

--background-base Page background

--background-surface Card/panel surfaces

--background-raised Elevated surfaces

--background-sunken Recessed surfaces

--background-interactive-primary Primary button background

--background-interactive-primaryAlt Alternative button background

--background-system-success Success state background

--background-system-warning Warning state background

--background-system-danger Error state background

Border

Used for borders, dividers, and outlines.

--border-default Default border color

--border-brand-primary Primary brand border

--border-brand-primaryAlt Alternative brand border

--border-system-success Success state border

--border-system-warning Warning state border

--border-system-danger Error state border

Usage

Always prefer semantic tokens over primitive colors in your component styles.

Do: Use Semantic Tokens

.button {
  background: var(--background-interactive-primary);
  color: var(--foreground-interactive-white);
  border: 1px solid var(--border-brand-primary);
}

.alert-success {
  background: var(--background-system-success);
  color: var(--foreground-system-success);
  border-color: var(--border-system-success);
}

Don't: Use Primitive Colors Directly

/* Avoid this */
.button {
  background: var(--color-moonstone-500);
  color: white;
}