sozou — brand colours

想像 · Spectrum — the calm navy ensō, an indigo→violet imagination spectrum, clean neutrals.

Core palette

AA · large / bold

#6366F1

Indigo — Primary

The brand accent. Links, highlights, the “.ai”, active states.

the 想像 hue

#8B5CF6

Violet — Imagination

Signature secondary. Gradients, glows, creative accents.

AA ✓ white text

#4F46E5

Indigo Deep — Action

Solid buttons & CTAs where white text must pass contrast.

sparingly

#D946EF

Fuchsia — Pop

Far end of the gradient; rare emphasis. Decorative, not text.

AA ✓ white text

#172A59

Navy — Brand Dark

The ensō. Headings, dark sections, depth, footers.

the logo spark

#3B5BFF

Spark — Cue

Matches the logo spark. “Live”/active cues, sparingly.

Neutrals & surfaces

#F1ECFF
Violet Wash

#15102E
Cosmic

#0F1020
Midnight

#16181F
Ink

#6B7280
Slate

#9AA0AD
Mist

#E7E8EE
Line

#F4F5F8
Cloud

Semantic

Success#16A34A

Warning#F59E0B

Error#EF4444

Signature gradients

135° · #6366F1 → #8B5CF6 → #D946EF · hero / feature accents, the “imagination” spectrum

135° · #6366F1 → #8B5CF6 · buttons, subtle fills

Design tokens (CSS)

/* sozou.ai — Spectrum brand tokens */
:root{
  /* brand */
  --indigo:       #6366F1;   /* primary accent */
  --violet:       #8B5CF6;   /* imagination hue */
  --indigo-deep:  #4F46E5;   /* solid CTAs (AA) */
  --violet-deep:  #7C3AED;   /* alt CTA / pressed */
  --fuchsia:      #D946EF;   /* pop — sparingly */
  --wash:         #F1ECFF;   /* soft violet surface */
  --navy:         #172A59;   /* brand dark / ensō */
  --spark:        #3B5BFF;   /* logo spark / live cue */
  /* neutrals */
  --cosmic:       #15102E;   --midnight: #0F1020;
  --ink:          #16181F;   --slate:    #6B7280;
  --mist:         #9AA0AD;   --line:     #E7E8EE;
  --cloud:        #F4F5F8;   --white:    #FFFFFF;
  /* semantic */
  --success: #16A34A; --warning: #F59E0B; --error: #EF4444;
  /* gradients */
  --grad-brand: linear-gradient(135deg,#6366F1,#8B5CF6,#D946EF);
  --grad-btn:   linear-gradient(135deg,#6366F1,#8B5CF6);
}