Color System

Our color system prioritizes grayscale with pure neutral grays (chroma = 0) as the foundation, using color sparingly for emphasis and semantic meaning.

Color Palettes

Core Principles

1. Grayscale-First

The interface is primarily built with neutral grays, ensuring content takes center stage.

2. Pure Neutrals

All grays have chroma = 0 in OKLCH color space, creating a clean, sophisticated foundation.

3. Restrained Accent Usage

• Jasper (warm orange) - Primary actions, 5% usage rule
• Sky Blue - Links and secondary accents

4. Semantic Colors for Text Only

Error, warning, and success colors are used for text and icons, never backgrounds.

Usage Guidelines

/* Primary text - high contrast */
color: var(--neutral-500); /* Raisin black */

/* Secondary text - medium contrast */
color: var(--neutral-600);

/* Accent - use sparingly */
color: var(--jasper-500);

/* Semantic - text only */
color: var(--indian-red-500); /* Error text */

Accessibility

All color combinations maintain WCAG AA contrast ratios:

• Primary text: 13.2:1
• Secondary text: 7.1:1
• Minimum interactive: 4.5:1

OKLCH Color Space

We use OKLCH for perceptually uniform color adjustments and future-proof color management. This ensures consistent perceived brightness across different hues.