website_designs

Shabby Chic Design Reference

Shabby Chic is an interior design aesthetic that centers around furniture and furnishings chosen for their appearance of age and signs of wear. Coined by British designer Rachel Ashwell in the 1980s, the style blends vintage, rustic, and romantic elements to create a look that is both elegant and comfortable. Its core features include distressed or antique furniture, a soft and muted pastel color palette, and the prominent use of floral patterns, particularly roses. The aesthetic celebrates the beauty of imperfection and the charm of aged items – relaxed, feminine, and deeply nostalgic.

Visual Characteristics

Core Motifs and Patterns

Distressed furniture surfaces – painted wood with sanded, chipped, or rubbed-through layers revealing underlying colors or raw wood grain
Floral patterns (especially roses) – vintage-style rose prints on fabrics, wallpapers, and decorative elements; faded, watercolor, or toile-like renderings
Lace and crochet – delicate openwork patterns used as overlays, borders, trim, and decorative accents
Vintage textiles – chenille, cotton ticking stripes, linen, muslin, and faded chintz fabrics
Crystal chandeliers – ornate, glamorous lighting with faceted crystal drops adding sparkle and “chic” to the “shabby”
Carved ornamental details – Rococo and Gustavian-influenced scrollwork, floral swags, cherubs, and cabriole legs
Slipcovers – loose, rumpled white or pastel fabric covers giving furniture a casual, lived-in softness
Vintage and antique accessories – ornate mirrors, picture frames, birdcages, porcelain, old books, and decorative plates

Design Principles

Celebrating imperfection – beauty found in wear, patina, fading, and the passage of time; nothing pristine or factory-fresh
Romantic femininity – soft, gentle, inviting atmosphere with graceful curves and delicate details
Casual elegance – polished and beautiful but never stiff; comfort is paramount
Layered softness – multiple textures, fabrics, and cushions creating depth and warmth
Light and airy atmosphere – white and pale tones dominating to create brightness and spaciousness
Vintage charm – everything should feel discovered, inherited, or lovingly repurposed
Mix of high and low – crystal chandeliers paired with flea-market finds; ornate frames on distressed walls
Natural materials – cotton, linen, wood, and ceramic over synthetic or industrial materials

Color Palette

Primary Scheme

Role	Colors
Base	White, cream, ivory, off-white
Primary accents	Rose pink, blush, dusty rose
Cool pastels	Sky blue, mint green, lavender
Warm neutrals	Warm gray, linen beige, aged bronze

Full Palette

Color	Hex	Usage
Pure White	`#FFFFFF`	Primary backgrounds, slipcover surfaces, clean open space
Antique Cream	`#FAF5EF`	Warm backgrounds, card surfaces, aged paper feel
Ivory Lace	`#F5EDE3`	Alternate section backgrounds, lace-inspired fills
Blush Pink	`#F2D4D0`	Primary accent backgrounds, highlight panels, soft tints
Dusty Rose	`#D4A0A0`	Primary accent, links, buttons, featured elements
Rose Pink	`#E8B4B8`	Decorative accents, border highlights, floral motifs
Deep Rose	`#B47B84`	Headings, strong accent text, active states
Sky Blue	`#B8CCD8`	Secondary accent, tags, badges, cool contrast
Faded Blue	`#A4B8C8`	Borders, secondary text elements, muted accents
Mint Green	`#C4D8C8`	Tertiary accent, success states, botanical references
Sage Mist	`#B8C8B4`	Soft green backgrounds, nature-referencing elements
Lavender	`#C8B8D4`	Decorative accents, hover states, feminine highlights
Warm Gray	`#B8B0A8`	Borders, dividers, secondary text
Linen Beige	`#E8DFD4`	Fabric-textured backgrounds, neutral fills
Driftwood	`#9C8E80`	Body text on light backgrounds, muted UI elements
Aged Bronze	`#8C7C68`	Dark text, ornamental details, icon accents
Charcoal Warm	`#4A4440`	Primary text, headings on light backgrounds

Suggested CSS Custom Properties

:root {
  /* Backgrounds */
  --shabby-white: #ffffff;
  --shabby-cream: #faf5ef;
  --shabby-ivory: #f5ede3;
  --shabby-linen: #e8dfd4;

  /* Pinks */
  --shabby-blush: #f2d4d0;
  --shabby-rose: #e8b4b8;
  --shabby-dusty-rose: #d4a0a0;
  --shabby-deep-rose: #b47b84;

  /* Cool pastels */
  --shabby-sky: #b8ccd8;
  --shabby-blue: #a4b8c8;
  --shabby-mint: #c4d8c8;
  --shabby-sage: #b8c8b4;
  --shabby-lavender: #c8b8d4;

  /* Neutrals */
  --shabby-gray: #b8b0a8;
  --shabby-driftwood: #9c8e80;
  --shabby-bronze: #8c7c68;

  /* Text */
  --shabby-text: #4a4440;
  --shabby-text-light: #6b6460;
  --shabby-text-muted: #9c9490;

  /* Functional */
  --shabby-bg-primary: var(--shabby-white);
  --shabby-bg-secondary: var(--shabby-cream);
  --shabby-bg-accent: var(--shabby-blush);
  --shabby-accent: var(--shabby-dusty-rose);
  --shabby-accent-light: var(--shabby-rose);
  --shabby-border: var(--shabby-gray);
  --shabby-border-light: var(--shabby-linen);
}

Approaches

Predominantly white and cream base – let pale, warm tones dominate for the light, airy, lived-in feel
Rose pink as the signature accent – the defining color of Shabby Chic; use consistently but gently
Colors should appear faded – nothing saturated or vivid; all tones look washed by time and sunlight
Layered pastels for variety – introduce blue, mint, lavender as secondary accents to avoid monotony
Warm neutrals for grounding – driftwood, linen, and bronze prevent the palette from feeling too saccharine
Soft contrast, never harsh – text and backgrounds should have gentle contrast; avoid pure black

Typography

Typeface Characteristics

Shabby Chic typography reflects:

Romantic, flowing serif forms – elegant letterforms with calligraphic influence and graceful curves
Light to regular font weights – nothing heavy or aggressive; favor delicate readability
Script fonts for decorative accents – hand-lettered, flowing cursive for titles and decorative moments (used sparingly)
Classical serif for body text – warm, traditional, and slightly old-fashioned feel
Generous line-height – relaxed, airy reading with comfortable spacing
Soft letter-spacing in headings – slightly expanded tracking for an open, gentle feel
Italic used for romantic emphasis – graceful italic forms for quotes, captions, and decorative text

Recommended Web Fonts (Google Fonts)

Font	Style	Usage
Playfair Display	Elegant transitional serif	Headlines, hero text, section headings
Cormorant Garamond	Refined high-contrast serif	Subheadings, display text, pull quotes
Lora	Warm calligraphic serif	Body text, long-form reading
Libre Baskerville	Classic readable serif	Body text alternative
EB Garamond	Traditional old-style serif	Body text, elegant paragraphs
Great Vibes	Flowing script	Decorative titles, single-word accents, taglines
Dancing Script	Casual handwritten script	Labels, annotations, informal accents
Raleway (light weights)	Thin geometric elegance	Subheadings, navigation, small caps labels
Josefin Sans (light)	Vintage geometric sans	Captions, metadata, UI elements
Caveat	Casual handwritten	Annotations, informal notes

Typography CSS Example

/* Headlines */
h1, h2, h3 {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--shabby-text);
  line-height: 1.3;
}

/* Display / Hero text */
.shabby-display {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--shabby-deep-rose);
}

/* Script accent -- decorative titles, taglines */
.shabby-script {
  font-family: 'Great Vibes', 'Dancing Script', cursive;
  font-size: 2em;
  color: var(--shabby-dusty-rose);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Body text */
body {
  font-family: 'Lora', 'EB Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  line-height: 1.8;
  color: var(--shabby-text);
}

/* Labels and navigation */
.shabby-label {
  font-family: 'Raleway', 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--shabby-text-muted);
}

/* Blockquote -- romantic italic */
blockquote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--shabby-text-light);
  border-left: 2px solid var(--shabby-rose);
  padding-left: 1.5rem;
  line-height: 1.9;
}

Layout Principles

Grid and Structure

Soft, organic layouts – avoid rigid, mechanical grids; favor gentle asymmetry and flowing arrangements
Generous whitespace – abundant breathing room evoking light-filled cottage interiors
Center-aligned hero sections – romantic, focused compositions for primary content
Card-based groupings – content organized in softly bordered, rounded panels
Layered visual depth – overlapping elements, stacked textures, and offset positioning creating a collected, curated feel
Wide margins and gentle containment – content never feels crowded; max-width 900-1100px for reading areas

Section Organization

Use ornamental dividers between sections (decorative flourishes, thin rose-colored lines, or floral motifs)
Apply generous vertical spacing – 5-7rem between major sections to let content breathe
Create hierarchy through scale and softness – large romantic headings, gentle subheadings, comfortable body text
Employ rounded containers with soft borders – nothing sharp-edged or angular
Use alternating warm backgrounds – alternate between white, cream, and blush-tinted sections
Incorporate decorative frames and borders – thin ornamental outlines that feel like vintage picture frames

Spacing Philosophy

Generous padding and margin throughout for the relaxed, unhurried feel
Line heights of 1.7-1.9 for body text creating comfortable readability
Section spacing: clamp(3rem, 8vh, 6rem) for responsive rhythm
Content max-width: 700px-900px for an intimate reading experience

CSS/Design Techniques

Distressed / Aged Surface Effect

/* Subtle texture mimicking aged, painted wood or vintage paper */
.shabby-distressed {
  background-color: var(--shabby-cream);
  background-image:
    url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Worn paint-through effect on containers */
.shabby-worn {
  position: relative;
  background: var(--shabby-cream);
  border: 1px solid var(--shabby-linen);
}

.shabby-worn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(156, 142, 128, 0.03) 3px,
    rgba(156, 142, 128, 0.03) 4px
  );
  pointer-events: none;
}

Lace / Crochet Border Pattern

/* Decorative lace-inspired top border */
.shabby-lace-border {
  position: relative;
  padding-top: 2rem;
}

.shabby-lace-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  background:
    radial-gradient(circle at 12px 0, transparent 10px, var(--shabby-blush) 10px, var(--shabby-blush) 12px, transparent 12px)
    repeat-x;
  background-size: 24px 12px;
}

/* Scalloped bottom edge */
.shabby-scallop::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 20px;
  background:
    radial-gradient(circle at 10px 20px, var(--shabby-white) 10px, transparent 10px)
    repeat-x;
  background-size: 20px 20px;
}

Ornamental Divider (Floral Flourish)

.shabby-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 3rem 0;
  color: var(--shabby-dusty-rose);
}

.shabby-divider::before,
.shabby-divider::after {
  content: '';
  flex: 1;
  max-width: 180px;
  height: 1px;
  background: linear-gradient(
    to var(--direction, right),
    transparent,
    var(--shabby-rose),
    transparent
  );
}

.shabby-divider::before { --direction: right; }
.shabby-divider::after { --direction: left; }

/* Rose or floral symbol in center */
.shabby-divider span {
  font-size: 1.4rem;
  opacity: 0.6;
}

Shabby Chic Card / Content Panel

.shabby-card {
  background: var(--shabby-white);
  border: 1px solid var(--shabby-linen);
  border-radius: 8px;
  padding: 2.5rem;
  box-shadow:
    0 2px 8px rgba(74, 68, 64, 0.05),
    0 6px 20px rgba(74, 68, 64, 0.03);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.shabby-card:hover {
  box-shadow:
    0 4px 12px rgba(74, 68, 64, 0.07),
    0 10px 28px rgba(74, 68, 64, 0.05);
  transform: translateY(-2px);
}

/* Card with decorative rose-tinted top border */
.shabby-card-accent {
  border-top: 3px solid var(--shabby-rose);
}

Vintage Frame Effect

/* Ornate double-border frame inspired by antique picture frames */
.shabby-frame {
  position: relative;
  padding: 3rem;
  border: 1px solid var(--shabby-gray);
  background: var(--shabby-white);
}

.shabby-frame::before,
.shabby-frame::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: var(--shabby-dusty-rose);
  border-style: solid;
}

.shabby-frame::before {
  top: 10px;
  left: 10px;
  border-width: 1px 0 0 1px;
}

.shabby-frame::after {
  bottom: 10px;
  right: 10px;
  border-width: 0 1px 1px 0;
}

/* Full ornamental outline frame */
.shabby-frame-full {
  border: 1px solid var(--shabby-gray);
  outline: 1px solid var(--shabby-gray);
  outline-offset: 5px;
  padding: 2.5rem;
  background: var(--shabby-cream);
}

Soft Gradient Backgrounds

/* Blush-to-white gradient for hero sections */
.shabby-gradient-hero {
  background: linear-gradient(
    180deg,
    var(--shabby-blush) 0%,
    var(--shabby-cream) 50%,
    var(--shabby-white) 100%
  );
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Subtle cream-to-white section transition */
.shabby-gradient-section {
  background: linear-gradient(
    180deg,
    var(--shabby-white) 0%,
    var(--shabby-cream) 50%,
    var(--shabby-ivory) 100%
  );
}

/* Romantic rose-tinted wash */
.shabby-gradient-rose {
  background: linear-gradient(
    135deg,
    var(--shabby-blush) 0%,
    var(--shabby-white) 40%,
    var(--shabby-ivory) 100%
  );
}

Rose Pattern Background (CSS Only)

/* Subtle floral-inspired dot pattern evoking scattered petals */
.shabby-petals {
  background-color: var(--shabby-white);
  background-image:
    radial-gradient(circle, var(--shabby-blush) 1px, transparent 1px),
    radial-gradient(circle, var(--shabby-blush) 0.5px, transparent 0.5px);
  background-size: 40px 40px, 20px 20px;
  background-position: 0 0, 10px 10px;
}

/* Cotton ticking stripe pattern */
.shabby-ticking {
  background: repeating-linear-gradient(
    90deg,
    var(--shabby-white) 0px,
    var(--shabby-white) 10px,
    var(--shabby-blush) 10px,
    var(--shabby-blush) 11px
  );
}

Button Styles

/* Primary -- Dusty rose */
.shabby-btn-primary {
  background: var(--shabby-dusty-rose);
  color: var(--shabby-white);
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 6px;
  font-family: 'Raleway', 'Josefin Sans', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.15s ease;
}

.shabby-btn-primary:hover {
  background: var(--shabby-deep-rose);
  transform: translateY(-1px);
}

/* Secondary -- Outlined with rounded pill shape */
.shabby-btn-secondary {
  background: transparent;
  color: var(--shabby-dusty-rose);
  border: 1.5px solid var(--shabby-dusty-rose);
  padding: 0.7rem 1.8rem;
  border-radius: 24px;
  font-family: 'Raleway', 'Josefin Sans', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.shabby-btn-secondary:hover {
  background: var(--shabby-dusty-rose);
  color: var(--shabby-white);
}

/* Romantic CTA -- Blush with script feel */
.shabby-btn-romantic {
  background: var(--shabby-blush);
  color: var(--shabby-deep-rose);
  border: none;
  padding: 0.85rem 2.2rem;
  border-radius: 24px;
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.shabby-btn-romantic:hover {
  background: var(--shabby-rose);
  box-shadow: 0 4px 16px rgba(212, 160, 160, 0.3);
}

Image Presentation

/* Soft rounded image with gentle shadow */
.shabby-img {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(74, 68, 64, 0.08);
  object-fit: cover;
}

/* Vintage photo frame effect */
.shabby-photo-frame {
  background: var(--shabby-white);
  padding: 10px 10px 32px 10px;
  border: 1px solid var(--shabby-linen);
  border-radius: 2px;
  box-shadow: 0 3px 12px rgba(74, 68, 64, 0.1);
  transform: rotate(-1.5deg);
  display: inline-block;
}

/* Image with faded, vintage color treatment */
.shabby-img-vintage {
  filter: saturate(0.75) brightness(1.05) contrast(0.92);
  border-radius: 8px;
}

/* Image overlay with soft pink wash */
.shabby-overlay {
  position: relative;
}

.shabby-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(242, 212, 208, 0.0) 40%,
    rgba(242, 212, 208, 0.35) 100%
  );
  border-radius: 8px;
}

Chandelier / Soft Glow Effect

/* Radial glow mimicking chandelier light */
.shabby-glow {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(242, 212, 208, 0.2) 0%,
    transparent 55%
  );
}

/* Soft romantic ambient light */
.shabby-ambient {
  box-shadow:
    0 0 60px rgba(232, 180, 184, 0.12),
    0 0 120px rgba(242, 212, 208, 0.06);
}

.shabby-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--shabby-linen);
  border-bottom: 1px solid var(--shabby-linen);
}

.shabby-nav a {
  font-family: 'Raleway', 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--shabby-text-muted);
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

.shabby-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--shabby-dusty-rose);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.shabby-nav a:hover {
  color: var(--shabby-dusty-rose);
}

.shabby-nav a:hover::after {
  width: 100%;
}

Materials and Textures (Visual Metaphors for Web)

Physical Shabby Chic materials and their web equivalents:

Physical Material	Web Equivalent
Distressed painted wood	Subtle noise/grain texture overlay on pale backgrounds; layered, slightly uneven fills
White cotton slipcovers	Pure white backgrounds with soft, fabric-like texture patterns
Vintage lace and crochet	Delicate scalloped borders, lace-pattern CSS overlays, openwork dividers
Faded floral chintz	Muted, low-opacity floral background patterns or decorative SVG motifs
Crystal chandelier	Soft radial gradient glow effects; sparkle-like subtle highlights
Aged bronze hardware	Warm bronze-toned accent colors for small details, icons, and borders
Chenille and cotton ticking	Striped or textured CSS background patterns at low opacity
Ornate gilt picture frames	Double-line ornamental borders, corner accent pseudo-elements
Worn vintage wallpaper	Faint repeating patterns on section backgrounds with very low opacity
Smooth porcelain	Clean white surfaces with gentle rounded corners and soft shadows
Dried roses and lavender	Rose-pink and lavender accent tones; botanical SVG decorations

Sub-styles and Variations

Classic Shabby Chic (Rachel Ashwell)

The original, most recognized form of the aesthetic
Predominantly white with soft pink and cream accents
Heavy use of roses, lace, slipcovers, and crystal
Flea-market finds mixed with elegant custom pieces
Web approach: very white, very soft, rose-pink accents, script fonts, ornamental frames

Rustic Shabby Chic

Leans more toward the “shabby” than the “chic”
More exposed wood grain, rougher textures, earthier tones
Burlap, twine, and galvanized metal alongside lace and roses
Farmhouse and country influences
Web approach: warmer neutrals, visible wood-grain textures, heavier distressing effects, earthier accent palette

Coastal Shabby Chic

Merges beach and vintage sensibilities
Pale blues and aquas replace or join the rose pinks
Weathered white wood, rope accents, seashell motifs
Light and breezy with a maritime softness
Web approach: cooler palette with sky blue and seafoam accents, wave-like dividers, driftwood textures

Modern Shabby Chic

A contemporary, more restrained interpretation
Cleaner lines with fewer ruffles and frills
Retains the soft pastel palette and vintage touches
Less clutter, more curated minimalism
Web approach: generous whitespace, fewer ornamental elements, cleaner sans-serif pairings, subtle vintage nods

Aesthetic	Relationship to Shabby Chic
Cottagecore	Shares pastoral charm, floral motifs, and cozy warmth; Cottagecore is more whimsical and nature-focused
French Provincial Style	Closely related; shares distressed finishes and soft palettes; French Provincial is more symmetrical and refined
Gustavian	Swedish ancestor; shares painted/distressed furniture, pale palette, and romantic softness
Rococo	Shares ornate carved details, curved forms, and decorative exuberance; Rococo is far more opulent
Victorian	Shares love of ornament, pattern mixing, and feminine decoration; Victorian is heavier and darker
Coastal Style	Overlapping weathered/distressed finishes; Coastal uses blues where Shabby Chic uses pinks
Grandmillennial	Modern revival of traditional aesthetics including chintz and antique styling; more polished
Live Laugh Love	Mass-market descendant; shares romantic sentimentality but loses the vintage authenticity

Design Do’s and Don’ts

Do

Use a soft, faded, pastel-dominant palette with warm whites
Celebrate imperfection through distressed textures and vintage effects
Incorporate floral motifs (especially roses) as decorative accents
Layer textures and patterns gently for depth and warmth
Choose elegant, romantic serif fonts and use script sparingly for decoration
Maintain generous whitespace and gentle, airy layouts
Add ornamental touches (decorative dividers, corner accents, scalloped edges) with restraint
Use soft, diffused shadows rather than harsh drop shadows

Don’t

Use bright, saturated, or neon colors – everything should look sun-faded
Apply purely black text on pure white; always warm the tones
Overcrowd layouts – clutter contradicts the airy cottage feel
Use heavy, blocky sans-serif fonts as primary typography
Over-decorate with too many competing ornamental elements
Use sharp geometric shapes or hard mechanical edges
Make things look factory-new or digitally perfect; embrace gentle imperfection
Use dark backgrounds – Shabby Chic is fundamentally a light, bright aesthetic

Quick-Start: Minimal Shabby Chic Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shabby Chic Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Lora:ital,wght@0,400;0,500;1,400&family=Great+Vibes&family=Raleway:wght@300;400&display=swap" rel="stylesheet">
  <style>
    :root {
      --shabby-white: #ffffff;
      --shabby-cream: #faf5ef;
      --shabby-ivory: #f5ede3;
      --shabby-linen: #e8dfd4;
      --shabby-blush: #f2d4d0;
      --shabby-rose: #e8b4b8;
      --shabby-dusty-rose: #d4a0a0;
      --shabby-deep-rose: #b47b84;
      --shabby-text: #4a4440;
      --shabby-text-muted: #9c9490;
      --shabby-gray: #b8b0a8;
    }

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

    body {
      background: var(--shabby-cream);
      color: var(--shabby-text);
      font-family: 'Lora', Georgia, serif;
      font-weight: 400;
      font-size: 1.05rem;
      line-height: 1.8;
      letter-spacing: 0.01em;
    }

    h1, h2, h3 {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 400;
      letter-spacing: 0.03em;
      color: var(--shabby-text);
    }

    .hero {
      text-align: center;
      padding: 7rem 2rem 5rem;
      background: linear-gradient(180deg, var(--shabby-blush) 0%, var(--shabby-cream) 100%);
    }

    .hero h1 {
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      font-weight: 300;
      font-style: italic;
      margin-bottom: 0.5rem;
      color: var(--shabby-deep-rose);
    }

    .hero .tagline {
      font-family: 'Great Vibes', cursive;
      font-size: 1.6rem;
      color: var(--shabby-dusty-rose);
    }

    .shabby-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      margin: 3rem auto;
      max-width: 400px;
      color: var(--shabby-dusty-rose);
    }

    .shabby-divider::before,
    .shabby-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--shabby-rose), transparent);
    }

    section {
      max-width: 880px;
      margin: 0 auto;
      padding: 4rem 2rem;
    }

    section h2 {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 2rem;
      margin-top: 2rem;
    }

    .card {
      background: var(--shabby-white);
      border-radius: 8px;
      padding: 2rem;
      border: 1px solid var(--shabby-linen);
      box-shadow: 0 2px 8px rgba(74,68,64,0.05), 0 6px 20px rgba(74,68,64,0.03);
      border-top: 3px solid var(--shabby-rose);
    }

    .accent-section {
      background: var(--shabby-ivory);
    }
  </style>
</head>
<body>
  <div class="hero">
    <h1>Shabby Chic</h1>
    <p class="tagline">Timeless Elegance, Beautifully Worn</p>
  </div>

  <div class="shabby-divider"><span>&#10045;</span></div>

  <section>
    <h2>Section Heading</h2>
    <p>Content styled in the Shabby Chic manner -- soft, romantic, and lovingly imperfect. Rose-tinted accents, vintage textures, and graceful typography.</p>
    <div class="card-grid">
      <div class="card">
        <h3>Card Title</h3>
        <p>Gentle borders and warm shadows evoke antique picture frames and heirloom furnishings.</p>
      </div>
      <div class="card">
        <h3>Card Title</h3>
        <p>Faded pastels and romantic serif type bring the charm of a sun-washed country cottage.</p>
      </div>
    </div>
  </section>
</body>
</html>

This site is open source. Improve this page.