Storefront identity
Colors & palette
Every color in Vesperia is a single setting. Change it once — it propagates everywhere via CSS variables.
Where to find them
Theme settings (gear icon) → Colors. The settings are grouped into general, secondary, and state colors.
The 12 color settings
| Setting | Used for |
|---|---|
| Background | Page background, card backgrounds. |
| Foreground | Default text color. |
| Background secondary | Hover states, alternate sections. |
| Foreground secondary | Muted text (captions, eyebrows). |
| Border | Dividers, card outlines, input borders. |
| Accent | Highlight color, marker, active states. |
| Accent foreground | Text on accent backgrounds. |
| Button | Primary button background. |
| Button foreground | Primary button text. |
| Success | Confirmation badges, in-stock indicator. |
| Error | Form errors, out-of-stock badge. |
| Sale | Sale tag, discounted price color. |
Color formula tips
- Keep Background and Foreground high-contrast. WCAG AA recommends 4.5:1 minimum.
- Accent should match your brand color — it shows up on links, marker highlights, hover states.
- Sale and Error can be the same color for simplicity (typically a warm red).
How the colors propagate
Vesperia exposes every color as a CSS variable (--color-background, --color-foreground, etc.) on the :root selector. Every section uses these variables, so a single change updates the whole storefront instantly. You can also reference them inside Custom CSS if you write custom rules.