Agence WagnerAgence Wagner
FRENDEELS
Back to designs
ClairTextureArtisanalPastel
Preview

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
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>
← Back to designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. All rights reserved.

Designs from chrislemke/website_designs, licensed under MIT.