Understanding Color Schemes
Vitrine uses a 5-scheme color system. Each preset defines its own set of 5 schemes, and every section can use any scheme.
How It Works
Each color scheme defines:
- Background — The section's background color
- Foreground — Text and icon color
- Accent — Links, buttons, and highlights
- Button background — Primary button fill
- Button text — Primary button text color
Vitrine Preset Schemes
| Scheme | Name | Background | Foreground | Accent |
|---|---|---|---|---|
| 1 | Primary | #FAFAFA | #1A1A1A | #1A1A1A |
| 2 | Warm | #F0EDE8 | #1A1A1A | #8B7355 |
| 3 | Dark | #1A1A1A | #FAFAFA | #FAFAFA |
| 4 | Accent | #8B7355 | #FAFAFA | #1A1A1A |
| 5 | Clean | #FFFFFF | #1A1A1A | #C4C0B8 |
Using Color Schemes
In the Theme Editor, most sections have a Color scheme dropdown. Select 1–5 to apply that scheme's colors to the entire section.
Tips
- Use Scheme 3 (Dark) for high-impact sections like hero banners or CTAs
- Alternate between light and dark schemes to create visual rhythm
- The Newsletter section defaults to Scheme 3 for contrast