Style Guide

PokéVault design system reference

Core Palette

Warm darks with purple undertones — lets card art pop

vault-bg

#12111a

vault-surface

#1c1b27

vault-surface-hover

#2a2940

vault-border

#2e2d42

Aa

vault-text

#eee8f5

Aa

vault-text-muted

#9b93b0

Accent Colors

Primary red (Pokeball energy), secondary purple, and functional colors

vault-accent

#ff5757

vault-accent-hover

#ff3838

vault-purple

#a78bfa

vault-gold

#fbbf24

vault-green

#34d399

vault-cyan

#22d3ee

Gradients

Used for primary actions, active states, and branding

Primary gradient

accent -> purple (buttons, nav active, branding)

Logo gradient

accent -> purple diagonal (logo, icons)

Gradient text for headings

Use .text-gradient class for page titles

Pokémon Type Colors

Fire Water Grass Electric Psychic Fighting Dark Fairy Dragon Steel Normal