New
01
Card title
Elevated panel with ember shadow fill and crimson badge accent.
Wine base · Champagne accents · Luxury boutiques
Bordeaux velvet with champagne highlights
A luxurious wine-red theme utilizing deep velvet crimson backgrounds with champagne gold highlights and roman headers. Tailored for creative writing, upscale culinary spaces, and boutique galleries.
00 — Color Identity
Accent roles
Each accent has a specific role in the design language. Click any swatch below to copy its hex value.
Bordeaux wine
#991B1B
Primary accent, rules, CTAs
Champagne Gold
#F59E0B
Secondary highlights, hover states
Bright Velvet
#EF4444
Link highlight, alert badges
Cream Gold
#FEF3C7
Decorative highlights, details
01 — Foundation
Color palette
Click any swatch to copy its hex value. Accent colors are shared across modes; surface tokens update when you switch between light and dark.
Accent — shared
Surfaces — dark mode
02 — Tokens
CSS variables
Drop this block into your project's global stylesheet. Includes shared accents plus light and dark
surface tokens — toggle data-theme on <html> to switch.
03 — Typography
Type scale
Playfair Display + Montserrat
Playfair Display generates gorgeous, high-contrast serif headers with luxury curves. Montserrat handles readable dashboard body segments.
Bordeaux Velvet
Section title
Subsection label
Use the text token for primary copy and text-mid for supporting paragraphs. Keep line height
around 1.7–1.8 for readability in both light and dark modes.
Eyebrow · Metadata · Captions
04 — Components
UI patterns
Common building blocks using the palette. Uppercase labels and heavy weight are part of the theme voice.
Buttons
Tags
Accent
Neutral
Filled
Navigation
Section header
Feature spotlight
Supporting copy sits in text-mid with a short accent rule underneath the headline.
Cards
Draft
02
Card title
Hover lifts the card slightly — keep motion on transform only.
Live
03
Card title
Forge background on the card header creates depth without extra imagery.
05 — Contrast & Harmony
Design theory
Mathematical color relationships and accessibility validation. Checks compliance against W3C WCAG 2.1 contrast ratios.
Theme Metrics
8
Core colors
4.5:1
Min contrast target
WCAG Contrast Validation
Aa
Pass AAA
Aa
Pass AA
Aa
Pass AA
Accent Color Spectrum
Visual segments detailing color pairing distribution across accents.
Generates high-contrast analogous and monochromatic relationships to ensure active components are highly visible.
06 — Spacing & Geometry
Layout System
Proportional spacing scale guidelines. Built on a modular unit grid to govern container padding, margins, and layout gutters.
Proportional Spacing Scale
--sp-1
4px
--sp-2
8px
--sp-3
12px
--sp-4
16px
--sp-5
24px
--sp-6
32px
Layout Symmetrical Grid
Visual representation of wide-margin gutters and core content boundaries.
Gutter
Max Content Width (1240px)
Gutter
Leverages a symmetrical layout grid to structure blocks. Wide margins ensure high-fidelity reading focus across viewport transitions.
07 — Guidelines
Design principles
Core behavioral guidelines to preserve the design language's integrity when scaling templates.
01
Wine depth
Surfaces utilize warm rose-maroon shades, never cold greys. The environment feels high-end and velvet.
02
Gilded borders
Keep gold accents locked to rule lines and tags to replicate classic gilt-edge paper booklets.
03
Editorial serif
Playfair display weight offers luxury styling; leverage italic headers to create visual hierarchy.