Styleguide & Components
A comprehensive reference for theme buyers. This page documents all available components, colors, typography, and design tokens.
Color Palette
The Violet Dispatch brand palette with accent and neutral colors.
Violet
#321847
Violet Light
#4a2d6b
Violet Dark
#1e0e2d
Imperial Red
#f15153
Imperial Light
#f47577
Imperial Dark
#d93a3c
Neutrals
Cream
Sand
Stone
Ash
Graphite
Charcoal
Ink
Violet 950
Typography
Playfair Display for headlines, Inter for body text.
Display — Playfair Display
The Quick Brown Fox
H1 — 4rem+
Headline One
H2 — 3rem+
Headline Two
H3 — 2rem+
Headline Three
Body — Inter
This is body text set in Inter. It should be highly readable at various sizes and provide excellent contrast against background colors.
Buttons
Available button variants and sizes.
Variants
On dark backgrounds
Sizes
Badges
Tag and label components for categorization.
Section Headers
Flexible section header component with optional label and alignment.
Left-Aligned Header
With a supporting subtitle and accent line.
Center-Aligned Header
Perfect for feature sections and testimonials.
Spacing Tokens
Consistent spacing values used throughout the theme.
Section Padding
5rem (mobile) → 8rem (desktop)
Container Max Width
1400px (editorial)
Container Padding
1.5rem → 3rem → 4rem