Brand Identity
Customize your platform's visual identity and messaging
01 · Foundations
Build from semantic decisions, not isolated styling
Foundations establish visual hierarchy and consistency. Values shown here follow the live brand configuration above the editor.
primary
bg-primary / text-primaryPrimary actions, active states, signature brand moments
secondary
bg-secondaryQuiet panels, editorial section contrast, supporting surfaces
accent
bg-accentSparse highlights, selected details, premium emphasis
background
bg-backgroundPage canvas and default reading surface
foreground
text-foregroundHeadings, body copy, and high-emphasis information
Display
Marketing hero only
48–60 / 1.0Page title
One H1 per page
30–36 / 1.15Section
Major content sections
24–30 / 1.2Card title
Cards and panels
16 / 1.4Body
Default prose
16 / 1.5Supporting
Descriptions and metadata
14 / 1.5Core spacing
48162432- Page gutters: 16px mobile, 24–32px desktop.
- Section rhythm: 64px mobile, 96px desktop.
- Use max-width containers for readable lines.
- Do not use arbitrary spacing when a scale value exists.
Controls
rounded-md · 6pxSurfaces
rounded-lg · 8pxMotion
150–250ms ease-outUse borders to organize. Add shadow only when elevation communicates hierarchy. Animate state changes—not decoration—and respect reduced-motion preferences.
Recommended: SVG or PNG, min 200x60px, transparent background
For use on dark backgrounds
ICO or PNG, 32x32px or 64x64px
Curated Wine Experiences
Discover exclusive winery visits, private tastings, and bespoke travel packages in the world's finest wine regions.
Color Palette