Color Tokens

Color System

Aavya uses a dual-theme color system anchored by Indigo as the primary color, with Aavya Cyan as the accent (focus rings, links, logo) and Mint used mainly for semantic success, with sparing supporting-accent use (e.g. gradients).

Updated April 2026 — primary collapsed to a single indigo. Electric Violet has been retired as a brand color; the --violet token remains as a back-compat alias only. See /brand-guidelines/changelog for rationale.

Brand Colors

Indigo primary, Cyan accent, Mint mainly for success with sparing accent use.

Indigo

Primary — Buttons, CTAs, main actions, links

Aavya Cyan

Accent — Links, eyebrow text, focus rings

Deep Navy

Anchor — Logo mark, dark backgrounds, image overlays

Mint Green

Success — primary role; also a sparing supporting accent (e.g. gradients)

Mint usage: Mint (#2CB67D) is primarily the success color (--success). It may also be used sparingly as a supporting accent — most often in gradients — to bring interest to indigo/cyan. Keep it minimal.

Dark Mode Palette (Primary)

For cinematic video, hero images, and high-tech storytelling.

Background

Navy-anchored dark foundation

Card / Popover

Floating panels, cards, popovers

Secondary Surface

Elevated surface — one step above background

Muted Surface

Recessed surface — one step below background

Text Primary

Near-white — slightly cool for comfort on dark

Text Secondary

Mid-tone grey for supporting text

Visual Effects (Dark)

Lighting: Embedded rather than directional. Objects glow from within.
Glassmorphism: Semi-transparent layers with background blur for depth.
Glows: Subtle outer glows in indigo (#6366F1) to lift elements off the navy background.

Light Mode Palette (Secondary)

For documentation, process diagrams, and daylight social content.

Background

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

Cards / Surfaces

Pure White — floating panels for separation

Secondary Surface

Subtle neutral — secondary containers

Stroke / Border

Light cool grey — defines edges

Text Primary

Deep Navy — maximum contrast and brand cohesion

Text Secondary

Mid-grey for supporting text

Visual Effects (Light)

Shadows: Soft, diffused drop shadows (#1E2338 at 5-10% opacity) for the “floating” effect.
Translucency: Frosted glass effect — white overlays at 80% opacity with high background blur.
Contrast: Crisp borders and clean lines rather than ambient lighting.

Prohibited Colors (Branding & Imagery)

These colors are forbidden in brand imagery, marketing assets, and visual design. This is not a blanket ban: standard UI components (error/failure states, warnings, form validation, destructive actions) may use conventional warm colors.

Red

#EF4444

Orange

#F97316

Yellow

#EAB308

Gradients

Approved gradient patterns for backgrounds and connection lines.

Dark Background Gradient

linear-gradient(135deg, #14172A, #1E2338)

Accent Gradient (Connection Lines)

linear-gradient(135deg, #4F46E5, #3AADDD)