Foundation

Color

Brand, surface, state and gradient tokens. Every value has HEX, RGB and HSL — and a CSS variable so every HODL product reads from one source.

Brand

The core HODL palette. Primary indigo carries equity from day one; violet and magenta drive the signature gradient.

HODL Primary

#003ECB

rgb(0, 62, 203)

hsl(220 100% 40%)

--color-hodl-primary

HODL Primary Deep

#002D58

rgb(0, 45, 88)

hsl(215 100% 17%)

--color-hodl-primary-deep

HODL Violet

#9B59F2

rgb(155, 89, 242)

hsl(265 90% 65%)

--color-hodl-violet

HODL Magenta

#CC4DD9

rgb(204, 77, 217)

hsl(280 80% 55%)

--color-hodl-magenta

HODL Background

#0D0827

rgb(13, 8, 39)

hsl(250 66% 9%)

--color-hodl-bg

HODL Ink

#191919

rgb(25, 25, 25)

hsl(0 0% 10%)

--color-hodl-ink

Surface

A 5-step neutral ramp on the indigo canvas. Use surface-1 for cards, surface-2 for raised secondary, surface-3 for muted insets.

background

#0F0A1F

hsl(250 35% 6%)

surface 1 / card

#16121F

hsl(255 30% 9%)

surface 2 / secondary

#221C2E

hsl(255 22% 14%)

surface 3 / muted

#272131

hsl(255 18% 16%)

border / input

#2C2636

hsl(255 18% 18%)

State

Success / warning / error / info / disabled. Tuned to read clearly on the dark canvas.

Success

#26B373

hsl(150 65% 45%)

Warning

#F5A623

hsl(38 95% 55%)

Error

#E04B4B

hsl(0 75% 60%)

Info

#3D8BF2

hsl(210 90% 60%)

Disabled

#4F4A66

hsl(255 10% 35%)

Interaction states

Hover overlay

rgba(155,89,242,0.10)

violet @ 10%

Pressed overlay

rgba(155,89,242,0.20)

violet @ 20%

Focus ring

#9B59F2

265 90% 65% @ 60% with 2px offset

Gradients

The signature gradient is the brand. Every other gradient is a tonal variation on it.

Signature (hero / accents)

background: linear-gradient(135deg, hsl(265 90% 60%), hsl(280 80% 55%));

Button primary

background: linear-gradient(135deg, #003ECB, hsl(265 90% 65%));

Card surface

background: linear-gradient(180deg, hsl(255 30% 11%), hsl(255 22% 8%));

Radial glow (violet)

background: radial-gradient(circle at center, hsl(265 90% 65% / 0.35), transparent 60%);

Hero halo

background: radial-gradient(120% 80% at 50% 0%, hsl(265 90% 35% / 0.55), transparent 60%), #0D0827;

Mesh background

background: radial-gradient(40% 50% at 15% 20%, hsl(265 90% 55% / .45), transparent), radial-gradient(35% 45% at 85% 30%, hsl(280 80% 50% / .40), transparent), radial-gradient(50% 60% at 50% 100%, hsl(220 90% 40% / .45), transparent), #0D0827;

Club gold (HODL Club only)

background: linear-gradient(135deg, #8a6a2c, #C9A86B 45%, #f3dfa8 65%, #C9A86B);