website_designs

Grandmillennial Design Reference

Grandmillennial (a portmanteau of “grandma” and “millennial,” coined by Emma Bazilian in House Beautiful, 2019) is a sincere and nostalgic embrace of design elements often considered outdated or “stuffy.” It represents a new traditionalism that combines maximalism with careful curation – a direct reaction against the minimalist design trends of the 2010s. The style prioritizes comfort, personal narrative, and timelessness over branded consistency, creating spaces that feel inherited rather than store-bought.

Visual Characteristics

Core Principles

Pattern-on-pattern layering – highly eclectic, maximalist but curated; multiple prints coexist intentionally
Nostalgic warmth – design elements from grandmother-era interiors (chintz, ruffles, needlepoint) presented with millennial curatorial sensibility
Collected, not decorated – arrangements suggest accumulated family heirlooms rather than a single shopping trip
Anti-minimalism – deliberate embrace of visual richness, ornamentation, and decorative detail
Timeless comfort – cozy, livable, personal spaces over sleek showroom perfection
Handmade quality – visible craft, analog textures, and artisan character

Key Motifs and Patterns

Floral chintz – the signature Grandmillennial pattern; large-scale floral prints on glazed cotton
Toile de Jouy – classical French scenic patterns in single color on white/cream ground
Botanical prints – boxwood, hollyhock, roses, thistle, and mixed garden florals
Chinoiserie – Asian-inspired decorative motifs (birds, branches, pagodas, landscapes)
Gingham and plaid – traditional checks used as grounding patterns alongside florals
Needlepoint and cross-stitch – visible handcraft texture, often as decorative accents
Scalloped edges – wavy, shell-like borders on textiles, frames, and architectural elements
Monograms – personalized letterforms as decorative flourishes
Ruffles and pleats – dimensional textile treatments adding softness and movement
Wicker weave – the crosshatch texture of rattan and wicker furniture

Design Principles

Layered eclecticism – multiple patterns in coordinating colors coexist in one composition
Warm, inhabited feeling – nothing should look unused or purely decorative
Personal narrative – objects and arrangements tell a story of family, heritage, and taste
Deliberate imperfection – slight asymmetry and mix-matching convey authenticity over precision
Generous ornamentation – borders, trims, ruffles, and decorative details are celebrated, not minimized
Classic proportions – traditional furniture silhouettes and room arrangements

Color Palette

Palette Strategy

Grandmillennial balances soft pastels (sage, light blue, blush pink, cream) with richer traditional tones (navy, hunter green, burgundy, warm wood brown). The palette feels muddied and vintage rather than bright and saturated – colors appear as though sun-faded on a beloved armchair or mellowed by decades in a country house.

Primary Scheme

Role	Colors
Backgrounds	Warm cream, antique white, pale linen, soft blush
Soft pastels	Sage green, powder blue, dusty rose, lavender, butter yellow
Rich accents	Navy blue, hunter green, burgundy, deep plum
Warm neutrals	Camel, warm taupe, antique gold, soft brown
Grounding darks	Dark walnut, charcoal navy, deep forest

Suggested Hex Values

Color	Hex (suggested)	Usage
Antique Cream	`#FAF5EB`, `#F7F0E3`	Primary page backgrounds, light surfaces
Warm Linen	`#F0E6D4`, `#EDE3D1`	Secondary backgrounds, card fills
Blush Pink	`#F2D3D3`, `#EAB8C8`	Soft accents, highlight backgrounds, floral tones
Dusty Rose	`#D4A6B8`, `#C89BBE`	Decorative accents, borders, secondary elements
Sage Green	`#9CAD8B`, `#B2C4A0`	Primary accent, botanical elements, header touches
Powder Blue	`#B7D8E0`, `#A4C8D8`	Soft backgrounds, alternate section tinting
Butter Yellow	`#F5E4B0`, `#F0DCA0`	Warm highlights, small decorative touches
Lavender	`#C4B5D4`, `#B8A6CA`	Tertiary accent, pattern fills
Navy Blue	`#2A4D6D`, `#1E3A5F`	Strong accents, text on light backgrounds, borders
Hunter Green	`#3B5E3B`, `#4A6E4A`	Rich accent, traditional depth
Burgundy	`#7B2D3B`, `#8B3A4A`	Deep accent, decorative emphasis
Warm Taupe	`#B5A08A`, `#A89580`	Neutral fills, subtle borders, secondary text
Dark Walnut	`#4E3B2A`, `#5C4A38`	Dark text, structural borders, grounding elements
Antique Gold	`#C5A855`, `#B89D48`	Ornamental borders, decorative accents
Soft White	`#FFFFFF`, `#FEFCF9`	Clean space, card backgrounds on tinted pages

Suggested CSS Custom Properties

:root {
  /* Backgrounds */
  --gm-cream: #faf5eb;
  --gm-linen: #f0e6d4;
  --gm-white: #fefcf9;

  /* Pastels */
  --gm-blush: #f2d3d3;
  --gm-dusty-rose: #d4a6b8;
  --gm-sage: #9cad8b;
  --gm-sage-light: #b2c4a0;
  --gm-powder-blue: #b7d8e0;
  --gm-butter: #f5e4b0;
  --gm-lavender: #c4b5d4;

  /* Rich accents */
  --gm-navy: #2a4d6d;
  --gm-hunter: #3b5e3b;
  --gm-burgundy: #7b2d3b;
  --gm-plum: #5a2a4d;

  /* Warm neutrals */
  --gm-taupe: #b5a08a;
  --gm-gold: #c5a855;
  --gm-camel: #c4a87a;
  --gm-walnut: #4e3b2a;

  /* Functional */
  --gm-bg-primary: var(--gm-cream);
  --gm-bg-secondary: var(--gm-linen);
  --gm-bg-card: var(--gm-white);
  --gm-text-primary: var(--gm-walnut);
  --gm-text-secondary: var(--gm-taupe);
  --gm-accent-primary: var(--gm-sage);
  --gm-accent-secondary: var(--gm-dusty-rose);
  --gm-border: var(--gm-taupe);
  --gm-border-light: #d8ccbc;
}

Palette Approaches

Warm and rosy – cream backgrounds with blush, dusty rose, and gold accents (feminine, romantic)
Blue-and-white classic – crisp white with navy, powder blue, and touches of gold (preppy, coastal)
Garden fresh – sage and hunter green with cream, blush pink, and warm brown (botanical, earthy)
Toile-inspired – white ground with a single strong color (navy, burgundy, or hunter green) for all pattern and detail
Rich traditional – deeper backgrounds (navy, hunter, plum) with cream text and gold ornamentation

Typography

Typeface Characteristics

Grandmillennial typography is traditional, literary, and refined with an emphasis on:

Elegant serif fonts – high-contrast transitional or didone serifs for headlines
Readable classic serifs – old-style or Garamond-like fonts for body text
Decorative scripts – calligraphic or hand-lettered scripts for accents and monograms
Mixed formality – pairing a formal serif headline with a slightly casual body or script accent
Traditional letter-spacing – neither tight nor overly loose; classical book typesetting proportions
Capitalized headings – small caps or full uppercase with generous tracking for a traditional feel

Recommended Web Fonts (Google Fonts)

Font	Style	Usage
Playfair Display	High-contrast didone serif	Headlines, display text, hero titles
Cormorant Garamond	Elegant old-style serif	Body text, subheadings, reading content
Lora	Transitional serif with calligraphic roots	Body text, versatile general use
Libre Baskerville	Classic Baskerville revival	Body text, formal content
EB Garamond	Refined Garamond with historical character	Body copy, long-form reading
Spectral	Literary serif with warm personality	Body text, captions
Cinzel	Classically proportioned inscriptional serif	Section titles, navigation, small caps
Great Vibes	Flowing connected script	Monograms, decorative labels, pull quotes
Dancing Script	Casual calligraphic script	Informal accents, callout text
Mrs Saint Delafield	Elegant formal script	Signature-style accents, invitations
Crimson Pro	Warm, readable text serif	Body text alternative

Typography CSS Example

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Great+Vibes&family=Cinzel:wght@400;600&display=swap');

/* Headlines */
h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  color: var(--gm-walnut);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 600;
}

h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 400;
  font-style: italic;
}

h3 {
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-size: clamp(1rem, 2vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 400;
}

/* Display / Hero text */
.gm-display {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--gm-walnut);
}

/* Decorative script accents */
.gm-script {
  font-family: 'Great Vibes', 'Dancing Script', cursive;
  font-size: 1.8em;
  color: var(--gm-dusty-rose);
  line-height: 1.4;
}

/* Monogram style */
.gm-monogram {
  font-family: 'Great Vibes', cursive;
  font-size: 3.5rem;
  color: var(--gm-gold);
}

/* Small caps for labels and categories */
.gm-label {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gm-taupe);
}

/* Body text */
body {
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  line-height: 1.75;
  color: var(--gm-walnut);
}

/* Pull quotes */
blockquote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--gm-dusty-rose);
  border-left: 3px solid var(--gm-sage);
  padding-left: 1.5rem;
  margin: 2rem 0;
}

Layout Principles

Grid and Structure

Traditional, centered layouts – content generally occupies a comfortable center column (max-width 900-1100px) with generous side margins
Layered composition – elements overlap slightly or nest within decorative frames, suggesting depth and accumulation
Symmetrical balance with organic variation – overall structure is balanced and traditional, but individual elements may be slightly offset or varied
Generous padding and margins – nothing should feel cramped; spacing conveys the leisurely, comfortable aesthetic
Decorative borders and frames – panels, cards, and sections enclosed in ornamental borders (scalloped, double-line, botanical)

Section Organization

Use decorative dividers between sections (scalloped lines, floral ornaments, toile-inspired motifs)
Apply generous vertical spacing between content blocks (4-6rem between major sections)
Create hierarchy through traditional scale and weight – large serif headlines, elegant subheadings, comfortable body text
Employ framing devices – double borders, scalloped edges, or chinoiserie-inspired corner ornaments around content panels
Card-based layouts for collections of items, using soft shadows and ornamental borders

Responsive Approach

Desktop: Wide, stately layouts with side-by-side panels and generous whitespace
Tablet: Stack to single-column but maintain decorative borders and comfortable spacing
Mobile: Simplify ornamentation but preserve the warmth, pattern, and traditional typography

CSS/Design Techniques

Scalloped Border (Signature Grandmillennial Element)

/* Scalloped top border using radial gradients */
.gm-scallop-top {
  position: relative;
  margin-top: 20px;
}

.gm-scallop-top::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: radial-gradient(circle at 10px -5px, transparent 12px, var(--gm-cream) 13px);
  background-size: 20px 20px;
  background-position: -10px 0;
}

/* Scalloped bottom border */
.gm-scallop-bottom {
  position: relative;
  margin-bottom: 20px;
}

.gm-scallop-bottom::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: radial-gradient(circle at 10px 25px, transparent 12px, var(--gm-cream) 13px);
  background-size: 20px 20px;
  background-position: -10px 0;
}

Chintz-Inspired Floral Pattern Background (CSS-only)

/* Subtle repeating floral-inspired background using radial gradients */
.gm-chintz-bg {
  background-color: var(--gm-cream);
  background-image:
    radial-gradient(ellipse 8px 12px at 25% 25%, rgba(212, 166, 184, 0.15) 0%, transparent 100%),
    radial-gradient(ellipse 6px 10px at 75% 35%, rgba(156, 173, 139, 0.12) 0%, transparent 100%),
    radial-gradient(ellipse 10px 8px at 50% 70%, rgba(196, 181, 212, 0.10) 0%, transparent 100%),
    radial-gradient(circle 3px at 30% 60%, rgba(212, 166, 184, 0.18) 0%, transparent 100%),
    radial-gradient(circle 4px at 65% 80%, rgba(156, 173, 139, 0.14) 0%, transparent 100%);
  background-size: 120px 120px;
}

/* Toile-inspired single-color pattern */
.gm-toile-bg {
  background-color: var(--gm-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40,15 C35,15 25,20 25,30 C25,38 32,42 40,45 C48,42 55,38 55,30 C55,20 45,15 40,15Z' fill='none' stroke='%232a4d6d' stroke-width='0.5' opacity='0.08'/%3E%3Cpath d='M40,45 L40,65 M35,55 L45,55 M32,50 L40,45 L48,50' fill='none' stroke='%232a4d6d' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}

Grandmillennial Panel / Card

.gm-card {
  background: var(--gm-white);
  border: 1px solid var(--gm-border-light);
  border-radius: 4px;
  padding: 2.5rem;
  position: relative;
  box-shadow:
    0 2px 8px rgba(78, 59, 42, 0.06),
    0 8px 24px rgba(78, 59, 42, 0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.gm-card:hover {
  box-shadow:
    0 4px 12px rgba(78, 59, 42, 0.1),
    0 12px 32px rgba(78, 59, 42, 0.06);
  transform: translateY(-2px);
}

/* Double-line border variant (classic Grandmillennial) */
.gm-card-framed {
  background: var(--gm-white);
  border: 2px solid var(--gm-taupe);
  border-radius: 2px;
  padding: 2.5rem;
  position: relative;
}

.gm-card-framed::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--gm-border-light);
  border-radius: 1px;
  pointer-events: none;
}

Decorative Floral Divider

/* Ornamental divider with floral center */
.gm-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3rem auto;
  width: 60%;
  max-width: 400px;
}

.gm-divider::before,
.gm-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gm-taupe) 20%,
    var(--gm-taupe) 80%,
    transparent
  );
}

.gm-divider::before {
  background: linear-gradient(90deg, transparent, var(--gm-taupe));
}

.gm-divider::after {
  background: linear-gradient(90deg, var(--gm-taupe), transparent);
}

/* Floral center ornament (use content or an SVG) */
.gm-divider-floral {
  text-align: center;
  margin: 3rem auto;
  position: relative;
}

.gm-divider-floral::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--gm-border-light);
}

.gm-divider-floral::after {
  content: '';
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  background: var(--gm-bg-primary);
  border: 1px solid var(--gm-dusty-rose);
  border-radius: 50%;
  z-index: 1;
  box-shadow: -16px 0 0 -1px var(--gm-bg-primary), -16px 0 0 0 var(--gm-dusty-rose),
    16px 0 0 -1px var(--gm-bg-primary), 16px 0 0 0 var(--gm-dusty-rose);
}

Ruffle / Scalloped Edge Trim

/* Decorative scalloped trim on a section edge */
.gm-ruffle-edge {
  position: relative;
  padding-bottom: 2rem;
}

.gm-ruffle-edge::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 16px;
  background:
    radial-gradient(circle 8px at 8px 16px, var(--gm-dusty-rose) 7px, transparent 8px);
  background-size: 16px 16px;
  background-position: 0 0;
  opacity: 0.4;
}

Toile-Inspired Section Styling

/* Section with toile-like framing */
.gm-toile-section {
  background: var(--gm-white);
  border: 1px solid var(--gm-powder-blue);
  padding: 3rem;
  margin: 2rem 0;
  position: relative;
}

.gm-toile-section::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(42, 77, 109, 0.15);
  pointer-events: none;
}

Wicker/Rattan Texture (CSS Pattern)

/* Subtle wicker-weave background texture */
.gm-wicker-bg {
  background-color: var(--gm-linen);
  background-image:
    linear-gradient(45deg, rgba(181, 160, 138, 0.12) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(181, 160, 138, 0.12) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(181, 160, 138, 0.12) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(181, 160, 138, 0.12) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}

Gold Ornamental Accent Line

.gm-gold-rule {
  width: 50%;
  margin: 2rem auto;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gm-gold) 15%,
    var(--gm-gold) 85%,
    transparent
  );
  position: relative;
}

.gm-gold-rule::before,
.gm-gold-rule::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--gm-gold);
  border-radius: 50%;
  transform: translateY(-50%);
}

.gm-gold-rule::before { left: 0; }
.gm-gold-rule::after { right: 0; }

Soft Chintz-like Shadows and Depth

/* Soft, warm shadow for layered feeling */
.gm-shadow {
  box-shadow:
    0 1px 4px rgba(78, 59, 42, 0.08),
    0 6px 20px rgba(78, 59, 42, 0.05);
}

/* Elevated, framed piece (like a picture on a wall) */
.gm-shadow-framed {
  box-shadow:
    0 2px 4px rgba(78, 59, 42, 0.1),
    0 8px 24px rgba(78, 59, 42, 0.06),
    inset 0 0 0 1px rgba(181, 160, 138, 0.3);
}

Wallpaper-Style Repeating Pattern Background

/* Diamond lattice wallpaper pattern */
.gm-lattice-bg {
  background-color: var(--gm-cream);
  background-image:
    linear-gradient(45deg, var(--gm-border-light) 1px, transparent 1px),
    linear-gradient(-45deg, var(--gm-border-light) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: 0 0, 15px 0;
}

Materials and Textures (Visual Metaphors for Web)

Physical Grandmillennial materials and their web equivalents:

Physical Material	Web Equivalent
Floral chintz fabric	Repeating floral background patterns (SVG or CSS gradients), warm soft colors layered
Needlepoint / Cross-stitch	Pixel-grid patterns, small repeating geometric motifs
Wicker / Rattan	Crosshatch CSS patterns, warm tan/natural background textures
Porcelain / Fine china	Clean white card backgrounds with delicate blue or gold borders
Toile de Jouy	Single-color scenic SVG patterns on white ground
Pleated lampshade	Repeating vertical striped gradients with soft shadow at edges
Quilted textile	Diagonal grid patterns with subtle padding/shadow on cells
Wallpaper (patterned)	CSS repeating-background patterns; lattice, damask, or trellis motifs
Dark wood (antique)	Rich warm brown tones (`#4E3B2A`) for borders and structural elements
Linen / Cotton	Off-white backgrounds with very subtle noise or crosshatch texture
Pearl	Small circular accents with radial-gradient shine effect
Gold leaf / Gilt trim	Gold-colored borders, text accents, and ornamental lines

Decorative Elements Vocabulary

The Grandmillennial aesthetic uses a specific vocabulary of decorative objects and treatments. For web implementation, translate these as:

Element	Web Translation
Needlepoint pillows	Textured accent panels with cross-stitch-style CSS patterns
Patterned wallpaper	Full-page or section background patterns
Fine china display	Gallery grid of items with delicate borders
Wicker furniture	Wicker-textured sidebar or card backgrounds
Pleated lampshade	Vertical gradient accents on header or footer sections
Ruffled trim	Scalloped CSS edges on sections, cards, or dividers
Bed canopy / Draping	Curved SVG header shapes suggesting draped fabric
Quilts	Grid-based layouts with soft internal borders
Heirloom paintings	Image frames with double-line borders and mat-like padding
Tchotchkes collection	Dense icon or badge arrangements with warm, varied styling
Monogrammed items	Decorative initial caps, monogram headers, personalized accents

Associated Brands and Design References

For visual reference and inspiration when implementing Grandmillennial web designs:

Brand	Style Contribution
Laura Ashley	Defining floral chintz patterns, cottage-inspired palettes
Schumacher	Luxury wallpapers and fabrics (iconic patterns like Chiang Mai Dragon)
Sister Parish	Bold pattern mixing, preppy-traditional interiors
Rifle Paper Co.	Modern botanical illustration with vintage charm
Anthropologie	Eclectic, collected, handmade-feeling presentation
Draper James	Southern-preppy meets grandmillennial warmth
Katie Kime	Chinoiserie-forward, colorful pattern design
Amy Berry Home	Classic traditional with fresh color and pattern

Aesthetic	Relationship to Grandmillennial
Grandparentcore	Closest relative; broader embrace of grandparent-era lifestyle and fashion
Coastal Grandmother	Shares traditional warmth but focused on relaxed seaside living with neutral palette
Cottagecore	Overlapping fondness for handmade, floral, and pastoral; Cottagecore is more rural and DIY
Preppy	Shared traditional American taste; Grandmillennial is more eclectic and less brand-focused
Sloanie	British upper-middle-class equivalent; overlapping traditional taste markers
Maximalism	Grandmillennial is a specific flavor of maximalism, grounded in traditional domestic decor
Cluttercore	Related through abundance of objects, but Grandmillennial is more curated and intentional
Craftcore	Shared love of handmade textiles (knitting, needlepoint, crochet)
Dark Academia	Both value tradition and heritage, but Dark Academia skews scholarly and Gothic
Minimalism	The direct opposite; Grandmillennial emerged as a reaction against 2010s minimalism

Quick-Start: Minimal Grandmillennial Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grandmillennial Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Cinzel:wght@400;600&family=Great+Vibes&display=swap" rel="stylesheet">
  <style>
    :root {
      --gm-cream: #faf5eb;
      --gm-linen: #f0e6d4;
      --gm-white: #fefcf9;
      --gm-blush: #f2d3d3;
      --gm-dusty-rose: #d4a6b8;
      --gm-sage: #9cad8b;
      --gm-powder-blue: #b7d8e0;
      --gm-navy: #2a4d6d;
      --gm-taupe: #b5a08a;
      --gm-gold: #c5a855;
      --gm-walnut: #4e3b2a;
      --gm-border-light: #d8ccbc;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: var(--gm-cream);
      color: var(--gm-walnut);
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 400;
      font-size: 1.15rem;
      letter-spacing: 0.01em;
      line-height: 1.75;
    }

    /* Hero */
    .hero {
      text-align: center;
      padding: 6rem 2rem 4rem;
      background: var(--gm-linen);
      border-bottom: 2px solid var(--gm-border-light);
    }

    .hero h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.4rem, 6vw, 4.5rem);
      font-weight: 600;
      color: var(--gm-walnut);
      margin-bottom: 0.5rem;
    }

    .hero .subtitle {
      font-family: 'Great Vibes', cursive;
      font-size: 2rem;
      color: var(--gm-dusty-rose);
    }

    /* Decorative divider */
    .gm-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.8rem;
      margin: 2rem auto;
      width: 50%;
      max-width: 300px;
    }

    .gm-divider::before,
    .gm-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--gm-taupe);
    }

    .gm-divider .ornament {
      width: 10px;
      height: 10px;
      background: var(--gm-dusty-rose);
      border-radius: 50%;
      opacity: 0.6;
    }

    /* Section headings */
    h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.6rem, 3.5vw, 2.2rem);
      font-style: italic;
      font-weight: 400;
      text-align: center;
      margin-bottom: 1.5rem;
      color: var(--gm-walnut);
    }

    h3 {
      font-family: 'Cinzel', serif;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--gm-taupe);
      margin-bottom: 1rem;
    }

    /* Content section */
    section {
      max-width: 860px;
      margin: 0 auto;
      padding: 4rem 2rem;
    }

    section p {
      margin-bottom: 1.5rem;
    }

    /* Card */
    .gm-card {
      background: var(--gm-white);
      border: 1px solid var(--gm-border-light);
      padding: 2.5rem;
      margin-bottom: 2rem;
      box-shadow: 0 2px 8px rgba(78, 59, 42, 0.05);
      position: relative;
    }

    .gm-card::after {
      content: '';
      position: absolute;
      inset: 6px;
      border: 1px solid rgba(181, 160, 138, 0.2);
      pointer-events: none;
    }

    /* Blockquote */
    blockquote {
      font-family: 'Playfair Display', serif;
      font-style: italic;
      font-size: 1.35rem;
      color: var(--gm-dusty-rose);
      border-left: 3px solid var(--gm-sage);
      padding-left: 1.5rem;
      margin: 2rem 0;
      line-height: 1.6;
    }

    /* Footer */
    footer {
      text-align: center;
      padding: 3rem 2rem;
      background: var(--gm-linen);
      border-top: 1px solid var(--gm-border-light);
      font-family: 'Cinzel', serif;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--gm-taupe);
    }
  </style>
</head>
<body>
  <div class="hero">
    <h1>Title Here</h1>
    <div class="subtitle">A warm subtitle in script</div>
    <div class="gm-divider">
      <span class="ornament"></span>
    </div>
  </div>

  <section>
    <h2>Section Heading</h2>
    <div class="gm-card">
      <h3>A Traditional Detail</h3>
      <p>Content styled in the Grandmillennial tradition. The layered patterns, warm pastels, and classic serif typography create a cozy, curated feeling that celebrates tradition with fresh eyes.</p>
    </div>
    <blockquote>
      "Comfort and personal narrative over branded consistency."
    </blockquote>
    <p>Additional content with the warm, literary feel of a well-loved family home -- traditional proportions, elegant type, and a palette drawn from faded chintz and antique porcelain.</p>
  </section>

  <footer>
    <p>Crafted with care and tradition</p>
  </footer>
</body>
</html>

This site is open source. Improve this page.