Color Tokens

Complete color token reference for both theme modes. Click any value to copy.

Brand Colors

Core brand palette — indigo primary, cyan accent, mint success-only, navy anchor.

Indigo

Primary: buttons, CTAs, main actions (dark mode: #6366F1)

Aavya Cyan

Accent: links, eyebrow text, focus rings, logo left half

Mint Green

Success only — not a brand accent

Deep Navy

Logo mark, image backgrounds, dark anchors

Light Mode Tokens

Applied when the page uses light theme (default).

Background

Near-white cool surface — never pure white for full backgrounds

Foreground

Deep navy text for maximum contrast and brand cohesion

Card

Pure white floating panels for separation from background

Card Foreground

Deep navy text on card surfaces

Primary

Indigo for primary actions, buttons, and CTAs

Primary Foreground

White text on primary buttons

Secondary

Subtle neutral surface

Secondary Foreground

Deep navy text on secondary surfaces

Muted

Subdued background for supporting content

Muted Foreground

Mid-grey for secondary text

Accent

Subtle neutral accent surface

Accent Foreground

Text on accent surfaces

Border

Light cool grey for edge definition

Input

Input border color

Ring

Focus ring color — Aavya Cyan

Sidebar

Sidebar background — slightly cooler than page background

Sidebar Primary

Active nav item color

Sidebar Accent

Hover/active state surface in sidebar

Sidebar Accent Foreground

Text on sidebar accent

Dark Mode Tokens

Applied when the .dark class is present on the html element.

Background

Navy-anchored dark foundation

Foreground

Near-white — slightly cool for comfort on dark

Card

Navy surface for floating panels and cards

Card Foreground

Near-white text on dark cards

Primary

Indigo-500 — brighter for legibility on dark backgrounds

Primary Foreground

White text on primary buttons

Secondary

Elevated surface, one step above background

Secondary Foreground

Near-white text on secondary surfaces

Muted

Recessed surface, one step below background

Muted Foreground

Mid-tone for secondary text

Accent

Subtle accent surface

Accent Foreground

Text on accent surfaces

Border

Matches accent surface for subtle borders

Input

Input border color

Ring

Focus ring color — Aavya Cyan (consistent across modes)

Sidebar

Slightly lighter than background for sidebar separation

Sidebar Primary

Active nav item color

Sidebar Accent

Hover/active state surface in sidebar

Sidebar Accent Foreground

Indigo-200 text on sidebar accent

Export Tokens

Copy all color tokens in your preferred format.

/* Aavya Color Tokens — Brand Colors */
--primary: #4F46E5;
--aavya: #3AADDD;
--mint: #2CB67D;
--navy: #1E2338;

/* Light Mode */
--background: #FAFBFC;
--foreground: #1E2338;
--card: #FFFFFF;
--card-foreground: #1E2338;
--primary: #4F46E5;
--primary-foreground: #FFFFFF;
--secondary: #EEF0F4;
--secondary-foreground: #1E2338;
--muted: #F1F3F6;
--muted-foreground: #5B6275;
--accent: #E8EBF0;
--accent-foreground: #1E2338;
--border: #E2E5EB;
--input: #E2E5EB;
--ring: #3AADDD;
--sidebar: #F8FBFD;
--sidebar-primary: #4F46E5;
--sidebar-accent: #ECEAFB;
--sidebar-accent-foreground: #4F46E5;

/* Dark Mode */
--background: #14172A;
--foreground: #F4F5F8;
--card: #1E2338;
--card-foreground: #F4F5F8;
--primary: #6366F1;
--primary-foreground: #FFFFFF;
--secondary: #252A42;
--secondary-foreground: #F4F5F8;
--muted: #1A1F33;
--muted-foreground: #9BA1B5;
--accent: #2A2F4A;
--accent-foreground: #F4F5F8;
--border: #2A2F4A;
--input: #2A2F4A;
--ring: #3AADDD;
--sidebar: #242736;
--sidebar-primary: #6366F1;
--sidebar-accent: #322F66;
--sidebar-accent-foreground: #C7C5FA;