Color Tokens

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

Brand Colors
Primary and secondary accent colors — shared across both themes.

Aavya Blue

Primary: main actions, focus states, brand identity

Electric Violet

Secondary accent: highlights, emphasis, connection lines

Mint Green

Secondary accent: success, data flow, safe status

Light Mode Tokens
Applied when the page uses light theme (default).

Background

Off-white cool grey — never use pure #FFFFFF for full background

Foreground

Dark indigo text for maximum contrast and brand cohesion

Card

Pure white floating panels for separation from background

Card Foreground

Dark indigo text on card surfaces

Primary

Aavya Blue for primary actions and focus states

Primary Foreground

White text on primary buttons

Secondary

Subtle blue-tinted surface

Muted

Subdued background for supporting content

Muted Foreground

Slate grey for secondary text

Border

Light cool grey for edge definition

Ring

Focus ring color — Aavya Blue

Dark Mode Tokens
Applied when the .dark class is present on the html element.

Background

Near-black indigo, the darkest foundation

Foreground

Soft white — slightly desaturated for comfort

Card

Mid-ground floating panels and secondary layers

Card Foreground

Soft white text on dark cards

Primary

Aavya Blue — consistent across themes

Primary Foreground

White text on primary buttons

Secondary

Lighter surface for top-level elements

Muted

Lighter surface for subdued content

Muted Foreground

Cool grey for secondary text

Border

Mid-ground tone for borders in dark mode

Ring

Focus ring color — Aavya Blue

Export Tokens
Copy all color tokens in your preferred format.
/* Aavya Color Tokens — Brand Colors */
--aavya: #3AADDD;
--violet: #7F5AF0;
--mint: #2CB67D;

/* Light Mode */
--background: #F8F9FA;
--foreground: #0B0620;
--card: #FFFFFF;
--card-foreground: #0B0620;
--primary: #3AADDD;
--primary-foreground: #FFFFFF;
--secondary: #F0F7FA;
--muted: #F1F5F9;
--muted-foreground: #475569;
--border: #E2E8F0;
--ring: #3AADDD;

/* Dark Mode */
--background: #0B0620;
--foreground: #E4E6EB;
--card: #1B0F3A;
--card-foreground: #E4E6EB;
--primary: #3AADDD;
--primary-foreground: #FFFFFF;
--secondary: #2B145A;
--muted: #2B145A;
--muted-foreground: #94A3B8;
--border: #2B145A;
--ring: #3AADDD;