Agence WagnerAgence Wagner
FRENDEELS
Retour aux designs
ColoréMaximalisteLudiqueRétro
Aperçu

Shoe Diva Design Reference

Shoe Diva is a commercial illustration and design aesthetic prevalent from the late 1990s through the 2000s, primarily on products and media targeting adult women. It is defined by a whimsical, hand-drawn illustration style with "loopy" and sketchy linework, a bright and feminine color palette, and an aspirational depiction of the glamorous urban single woman obsessed with fashion, shoes, and shopping. The style is playful, sophisticated, and unapologetically feminine -- a more mature and worldly counterpart to Parisian Girly. It shares its bright, feminine color palette with McBling and its fashion-illustration sensibility with Curly Girly. The cultural archetype is Carrie Bradshaw from Sex and the City.

Visual Characteristics

Core Motifs and Patterns

  • High-heeled shoes -- the single most iconic motif; stilettos, pumps, and Manolo Blahnik-style heels rendered as whimsical illustrations
  • Shopping bags -- luxury department store bags (often with ribbon handles) as symbols of indulgence and retail therapy
  • Cocktails -- Cosmopolitan glasses, martinis, and champagne flutes as lifestyle icons
  • Makeup and cosmetics -- lipstick, compacts, perfume bottles, and nail polish as decorative elements
  • Parisian iconography -- Eiffel Tower silhouettes and references evoking fashion-capital sophistication
  • Stylized female figures -- thin, fashionable women in exaggerated poses, often carrying shopping bags or wearing statement heels
  • Hearts and bows -- decorative romantic flourishes scattered throughout compositions
  • Sparkles and glitter -- small star bursts, shine highlights, and shimmer effects conveying glamour
  • Fluffy textures -- feathery, plush, and soft tactile accents (boas, fur trims, powder puffs)
  • Decorative flourishes -- curling swashes, looping ornamental lines, and ribbon-like scrollwork
  • Handbags and clutches -- designer purse illustrations as secondary fashion motifs
  • Fashion accessories -- sunglasses, tiaras, pearl necklaces, and charm bracelets

Illustration Style

  • Hand-drawn and sketchy -- linework is deliberately loose, organic, and imperfect rather than precise or geometric
  • Thin, loopy lines -- fine-weight strokes with exaggerated curves and swooping movement
  • Free-flowing quality -- lines convey energy, whimsy, and spontaneity as if sketched quickly in a fashion notebook
  • Flat color fills with line overlays -- areas of bright, solid color contained by or layered with the sketchy linework
  • Watercolor-adjacent washes -- soft, semi-transparent color areas suggesting watercolor or marker rendering
  • Vector-fashion hybrid -- the look of hand illustration translated into clean, reproducible commercial graphics

Design Principles

  • Playful sophistication -- fun and lighthearted but with an aspirational, grown-up polish
  • Feminine maximalism -- abundant decorative detail; ornate, embellished, and busy over minimal
  • Bright saturation -- colors are vivid, cheerful, and unapologetic; nothing muted or moody
  • Whimsy over precision -- deliberate imperfection and looseness in illustration and layout
  • Aspirational glamour -- every element reinforces a fantasy of fashionable urban living
  • Consumerist celebration -- shopping, fashion, and luxury goods presented joyfully and without irony
  • Sketch-like energy -- the aesthetic should feel like a chic fashion illustration come to life

Color Palette

Primary Scheme

Role Colors
Primary / Dominant Hot pink, rose pink, bubblegum pink
Secondary Bright yellow, sunny gold
Tertiary Lime green, mint green
Accent Sky blue, periwinkle, lavender purple
Neutral / Background White, soft cream, pale pink
Contrast Black (for linework and text)

Detailed Palette

Color Hex (suggested) Usage
Hot Pink #FF69B4, #FF1493 Primary brand color, headings, key decorative elements
Rose Pink #F472B6, #E8558A Cards, secondary fills, hover states
Blush Pink #FFD6E0, #FFC0CB Light backgrounds, soft fills, panels
Pale Pink #FFF0F5, #FFF5F8 Page backgrounds, subtle surfaces
Sunny Yellow #FFD700, #FFEB3B Accent highlights, badges, star sparkles
Soft Yellow #FFF8DC, #FFFACD Warm background sections, secondary panels
Lime Green #77DD77, #98E698 Tertiary accent, fresh contrast elements
Mint Green #B2F5B2, #D4EDDA Soft accent backgrounds, alternating sections
Sky Blue #87CEEB, #89CFF0 Cool accent, links, decorative touches
Periwinkle #CCCCFF, #B0B0E8 Soft secondary accent, subtle borders
Lavender #E6C8FF, #D8B4FE Light accent surfaces, card backgrounds
Sketch Black #2A2A2A, #333333 Linework, body text, borders
Pure White #FFFFFF Base backgrounds, text on dark surfaces
Soft Cream #FFFEF5, #FFF9F0 Warm white alternative background
Champagne Gold #D4AF37, #C5A55A Metallic accents, sparkle effects, luxury feel

Suggested CSS Custom Properties

:root {
  /* Pinks -- the dominant family */
  --diva-hot-pink: #ff69b4;
  --diva-deep-pink: #ff1493;
  --diva-rose: #f472b6;
  --diva-blush: #ffd6e0;
  --diva-pale-pink: #fff0f5;

  /* Yellows -- sunny secondary */
  --diva-sunny-yellow: #ffd700;
  --diva-soft-yellow: #fff8dc;
  --diva-bright-yellow: #ffeb3b;

  /* Greens -- fresh tertiary */
  --diva-lime-green: #77dd77;
  --diva-mint: #b2f5b2;

  /* Blues and purples -- cool accents */
  --diva-sky-blue: #87ceeb;
  --diva-periwinkle: #ccccff;
  --diva-lavender: #e6c8ff;

  /* Neutrals */
  --diva-black: #2a2a2a;
  --diva-charcoal: #555555;
  --diva-white: #ffffff;
  --diva-cream: #fffef5;

  /* Metallic accent */
  --diva-gold: #d4af37;

  /* Functional mappings */
  --diva-bg-primary: var(--diva-pale-pink);
  --diva-bg-secondary: var(--diva-cream);
  --diva-bg-card: var(--diva-white);
  --diva-text-primary: var(--diva-black);
  --diva-text-secondary: var(--diva-charcoal);
  --diva-text-heading: var(--diva-deep-pink);
  --diva-accent: var(--diva-hot-pink);
  --diva-accent-secondary: var(--diva-sunny-yellow);
  --diva-border: rgba(42, 42, 42, 0.3);
  --diva-border-sketch: var(--diva-black);
  --diva-link: var(--diva-deep-pink);
  --diva-link-hover: var(--diva-hot-pink);

  /* Gradients */
  --diva-gradient-pink: linear-gradient(135deg, #ff69b4, #ff1493);
  --diva-gradient-warm: linear-gradient(135deg, #ffd6e0, #fff8dc);
  --diva-gradient-shimmer: linear-gradient(135deg, #ffd6e0, #e6c8ff, #87ceeb);
}

Palette Approaches

  • Pink dominance -- hot pink and its variants are the primary visual identity; 50-60% of colored surfaces
  • Yellow as sunshine punch -- bright yellow used for highlights, badges, and sparkle accents to energize the pink base
  • Green as fresh contrast -- lime and mint greens appear sparingly for visual breathing room
  • Cool blue-purple touches -- sky blue and lavender provide softness and variety without competing with pink
  • Sketch-black for structure -- dark linework grounds the bright palette and provides the hand-drawn feel
  • White as clean canvas -- generous white space keeps the busy decorative elements from becoming overwhelming
  • Gold for luxury -- champagne and gold metallics used sparingly for shimmer and glamour cues
  • Never dark or moody -- the palette stays bright, warm, and cheerful at all times

Typography

Typeface Characteristics

Shoe Diva typography mirrors the hand-drawn, sketchy illustration style:

  • Loopy, flowing script fonts -- connected cursive letterforms with exaggerated curves and swashes
  • Sketch-like quality -- fonts that appear hand-lettered rather than mechanical or geometric
  • Thin, elegant strokes -- lightweight lines matching the fine linework of the illustrations
  • Bouncy baselines -- letters that dance and move rather than sitting rigidly
  • Fashion-magazine influence -- elegant, aspirational display type evoking editorial fashion layouts
  • Mixed type pairing -- decorative scripts for display paired with clean sans-serifs for readability
  • Feminine without being childish -- sophisticated and grown-up, not tween or juvenile

Recommended Web Fonts (Google Fonts / Free)

Font Style Usage
Great Vibes Flowing calligraphic script Hero headlines, decorative titles, glamour text
Parisienne Elegant French-inspired script Section titles, accent phrases, fashion references
Dancing Script Casual, bouncy cursive Subheadings, callout text, feature labels
Sacramento Thin, flowing monoline script Subtitle text, pull quotes, delicate accents
Alex Brush Formal brush script Display text, decorative headings
Satisfy Retro-flavored flowing script Accent text, badges, decorative labels
Playfair Display High-contrast elegant serif Structured headings, editorial feel
Cormorant Garamond Refined, high-contrast serif Body headings, sophisticated readability
Quicksand Rounded, modern sans-serif Body text, readable contrast to script display
Poppins Geometric, friendly sans-serif Body copy, UI elements, labels
Montserrat Clean geometric sans-serif Navigation, structured labels, subheadings

Typography CSS Example

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Parisienne&family=Dancing+Script:wght@400;700&family=Sacramento&family=Playfair+Display:wght@400;700&family=Quicksand:wght@400;500;600&family=Montserrat:wght@400;600&display=swap');

/* Hero / display headlines -- signature flowing script */
h1 {
  font-family: 'Great Vibes', 'Parisienne', cursive;
  font-weight: 400;
  color: var(--diva-text-heading);
  line-height: 1.2;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  letter-spacing: 0.02em;
}

/* Section headings -- elegant serif or script */
h2 {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-weight: 700;
  color: var(--diva-black);
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  letter-spacing: 0.03em;
  line-height: 1.3;
}

/* Subheadings -- lighter script accent */
h3 {
  font-family: 'Dancing Script', 'Sacramento', cursive;
  font-weight: 700;
  color: var(--diva-hot-pink);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  line-height: 1.4;
}

/* Body text -- clean and readable */
body {
  font-family: 'Quicksand', 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--diva-text-primary);
}

/* Decorative accent text -- fashion phrases, quotes */
.diva-accent-text {
  font-family: 'Parisienne', 'Sacramento', cursive;
  font-size: 1.5em;
  color: var(--diva-deep-pink);
  font-style: italic;
}

/* Labels and structured text */
.diva-label {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--diva-charcoal);
}

Layout Principles

Grid and Structure

  • Centered, airy compositions -- content organized with generous whitespace evoking fashion magazine layouts
  • Sketch-framed panels -- content containers with hand-drawn-style borders (slightly irregular, thin strokes)
  • Generous padding -- spacious interiors within cards and sections for an upscale, editorial feel
  • Mixed illustration and text -- decorative motifs (shoes, bags, cocktails) interspersed with content
  • Card-based layouts -- content grouped into elegant, lightly bordered cards
  • Vertical flow -- sections stack top-to-bottom with decorative dividers between them
  • Fashion-editorial grid -- asymmetric arrangements inspired by magazine page layouts

Section Organization

  • Use decorative motif dividers between sections (stiletto silhouettes, bow ribbons, sparkle clusters)
  • Apply alternating soft backgrounds -- rotate between pale pink, soft cream, white, and light lavender sections
  • Create hierarchy through color warmth -- hot pink for primary elements, blush for secondary, white for tertiary
  • Employ sketch-style borders -- thin, slightly wavy or hand-drawn-effect borders on containers
  • Use fashion-icon section markers -- small shoe, handbag, or cocktail glass illustrations to introduce sections
  • Incorporate sparkle accents -- small glitter dots and star bursts as decorative seasoning
  • Feature fashion illustration vignettes -- stylized figures or accessory sketches as section decorations

CSS/Design Techniques

Hand-Drawn Sketch Border Effect

/* Simulated hand-drawn border using wavy outline */
.diva-sketch-border {
  border: 2px solid var(--diva-black);
  border-radius: 2px 8px 2px 6px;
  position: relative;
}

/* Double-line sketch frame */
.diva-sketch-frame {
  border: 1.5px solid var(--diva-black);
  outline: 1px solid var(--diva-black);
  outline-offset: 4px;
  border-radius: 3px 6px 2px 5px;
  padding: 2rem;
  background: var(--diva-white);
}

/* Slightly irregular border for hand-drawn feel */
.diva-loose-border {
  border: 2px solid var(--diva-black);
  border-radius: 4px 12px 4px 10px / 10px 4px 12px 4px;
}

Sparkle / Glitter Overlay

/* Scattered sparkle dots */
.diva-sparkle::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(255, 215, 0, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 35% 65%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 55% 15%, rgba(255, 215, 0, 0.5), transparent),
    radial-gradient(1px 1px at 75% 70%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 90% 35%, rgba(255, 215, 0, 0.4), transparent),
    radial-gradient(1px 1px at 45% 85%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 10% 50%, rgba(212, 175, 55, 0.5), transparent);
  pointer-events: none;
  opacity: 0.7;
}

/* Shimmer gradient for glamour surfaces */
.diva-shimmer {
  background: linear-gradient(
    135deg,
    #ffd6e0, #fff0f5, #ffd6e0, #fff8dc, #ffd6e0
  );
  background-size: 200% 200%;
  animation: diva-shimmer 4s ease-in-out infinite;
}

@keyframes diva-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

Stiletto Shoe Divider (SVG)

/* Stiletto silhouette section divider */
.diva-shoe-divider {
  height: 50px;
  background: no-repeat center / auto 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'%3E%3Cpath d='M30,45 L35,20 Q37,10 45,8 Q55,5 60,8 L65,12 Q68,15 75,14 L85,12 Q90,11 90,14 L90,18 Q90,22 85,22 L40,22 L35,45 Z' fill='none' stroke='%23ff69b4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  margin: 2rem auto;
  width: 120px;
  opacity: 0.6;
}

Shoe Diva Card

/* Elegant sketch-framed card */
.diva-card {
  background: var(--diva-white);
  border: 1.5px solid var(--diva-black);
  border-radius: 4px 12px 4px 10px;
  padding: 2rem;
  position: relative;
  box-shadow: 3px 3px 0 0 var(--diva-blush);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.diva-card:hover {
  box-shadow: 5px 5px 0 0 var(--diva-hot-pink);
  transform: translate(-2px, -2px);
}

/* Heart accent in corner */
.diva-card::before {
  content: '\2665';
  position: absolute;
  top: -8px;
  right: 12px;
  background: var(--diva-white);
  padding: 0 0.3rem;
  color: var(--diva-hot-pink);
  font-size: 0.9rem;
}

Loopy Line Decorative Border

/* Wavy, loopy top border evoking the sketchy linework */
.diva-loopy-border {
  border: none;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M0 10 Q10 0 20 10 T40 10 T60 10 T80 10 T100 10 T120 10 T140 10 T160 10 T180 10 T200 10' fill='none' stroke='%23ff69b4' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 200px 20px;
  background-position: center;
}

Bow Ribbon Divider

/* Decorative bow divider */
.diva-bow-divider {
  text-align: center;
  margin: 2.5rem 0;
  position: relative;
}

.diva-bow-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--diva-hot-pink),
    transparent
  );
}

.diva-bow-divider::after {
  content: '\1F380';
  position: relative;
  z-index: 1;
  background: var(--diva-bg-primary);
  padding: 0 1rem;
  font-size: 1.3rem;
}

Pink Gradient Backgrounds

/* Soft pink-to-cream hero gradient */
.diva-hero-bg {
  background: linear-gradient(
    180deg,
    var(--diva-pale-pink) 0%,
    var(--diva-cream) 60%,
    var(--diva-white) 100%
  );
}

/* Warm pink-to-lavender section gradient */
.diva-section-warm {
  background: linear-gradient(
    135deg,
    var(--diva-blush) 0%,
    var(--diva-lavender) 100%
  );
}

/* Bright pink accent gradient */
.diva-bold-gradient {
  background: linear-gradient(
    135deg,
    var(--diva-hot-pink) 0%,
    var(--diva-rose) 50%,
    var(--diva-blush) 100%
  );
}

Fashion Motif Scatter

/* Decorative shoe and bag icons scattered on sections */
.diva-motifs::before {
  content: '\1F460'; /* high heel */
  position: absolute;
  top: 8%;
  left: 5%;
  font-size: 1.4rem;
  transform: rotate(-15deg);
  opacity: 0.25;
  pointer-events: none;
}

.diva-motifs::after {
  content: '\1F6CD'; /* shopping bags */
  position: absolute;
  bottom: 6%;
  right: 4%;
  font-size: 1.3rem;
  transform: rotate(10deg);
  opacity: 0.2;
  pointer-events: none;
}

/* Cocktail and sparkle secondary scatter */
.diva-motifs-alt::before {
  content: '\1F378'; /* cocktail glass */
  position: absolute;
  top: 5%;
  right: 7%;
  font-size: 1.2rem;
  transform: rotate(8deg);
  opacity: 0.2;
  pointer-events: none;
}

.diva-motifs-alt::after {
  content: '\2728'; /* sparkles */
  position: absolute;
  bottom: 8%;
  left: 6%;
  font-size: 1rem;
  opacity: 0.3;
  pointer-events: none;
}

Button Styles

/* Primary pink button with sketch energy */
.diva-btn {
  display: inline-block;
  padding: 0.7rem 2rem;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1.5px solid var(--diva-black);
  border-radius: 4px 10px 4px 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.diva-btn--primary {
  background: var(--diva-hot-pink);
  color: var(--diva-white);
  border-color: var(--diva-deep-pink);
}

.diva-btn--primary:hover {
  background: var(--diva-deep-pink);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3);
}

.diva-btn--outline {
  background: transparent;
  color: var(--diva-hot-pink);
  border-color: var(--diva-hot-pink);
}

.diva-btn--outline:hover {
  background: var(--diva-hot-pink);
  color: var(--diva-white);
}

Alternating Section Backgrounds

/* Pale pink section */
.diva-section--pink {
  background: linear-gradient(180deg, var(--diva-blush), var(--diva-pale-pink));
  padding: 4rem 2rem;
}

/* Cream / warm white section */
.diva-section--cream {
  background: var(--diva-cream);
  padding: 4rem 2rem;
}

/* Lavender section */
.diva-section--lavender {
  background: linear-gradient(180deg, #f5f0ff, #faf5ff);
  padding: 4rem 2rem;
}

/* Clean white section */
.diva-section--white {
  background: var(--diva-white);
  padding: 4rem 2rem;
}

Materials and Textures (Visual Metaphors for Web)

Physical Shoe Diva materials and their web equivalents:

Physical Material Web Equivalent
Sketchy pen-and-ink illustration Thin, slightly irregular CSS borders; SVG linework; hand-drawn-style fonts
Watercolor washes Semi-transparent gradient fills; soft pastel background blends
Glitter and sparkle Tiny radial-gradient dots overlay; animated shimmer gradients; gold accents
Satin ribbon Smooth pink gradient strips as dividers; bow emoji decorations
Fluffy textures (feathers, fur trim) Soft box-shadows; blur effects; layered translucent overlays
Glossy magazine paper Clean white card backgrounds; subtle sheen gradients; crisp edges
Designer shopping bag tissue paper Pale, warm-tinted background colors; soft cream and blush surfaces
Champagne bubbles Scattered small radial gradient circles; gentle floating animations
Lipstick / nail polish High-saturation pink accent blocks; glossy gradient buttons
Fashion illustration paper White or off-white card backgrounds with fine sketch-style line borders
Perfume bottle glass Translucent pink overlays with backdrop-filter: blur; soft glow effects

Key Visual Values

  • Playful sophistication -- lighthearted and fun, but aimed at adult women rather than children or tweens
  • Aspirational glamour -- the aesthetic sells a fantasy of fashionable urban living, shopping sprees, and cocktail culture
  • Hand-drawn whimsy -- the sketch-like, loopy illustration style is the defining visual signature
  • Unapologetic femininity -- everything is bright, pink, sparkly, and confidently girly without restraint
  • Consumerist joy -- shopping, shoes, fashion, and luxury goods are celebrated as sources of happiness
  • Urban chic -- rooted in a glamorized vision of New York and Paris as fashion capitals
  • Editorial polish -- despite the hand-drawn looseness, the overall presentation is polished and commercial-ready
Aesthetic Relationship to Shoe Diva
Parisian Girly Closely related; Shoe Diva is the more mature, worldly counterpart with adult women as the target audience
Curly Girly Shares the fashion-illustration sensibility and pink palette; Curly Girly is more tween-oriented with curled serif typography
McBling Contemporary trend (2003-2008); shares bright, feminine color palette and commercial glamour
Vectordelia Related through the vector illustration and decorative line art traditions

Associated Brands and Media

Literature

  • Sophie Kinsella's Confessions of a Shopaholic series (book covers are quintessential examples)
  • Lauren Weisberger's The Devil Wears Prada (2003)
  • Madonna's The English Roses book series

Television and Film

  • Sex and the City (1998-2004) -- Carrie Bradshaw as the cultural archetype
  • Legally Blonde (2001)
  • Ugly Betty (2006-2010)
  • Confessions of a Shopaholic (2009 film)

Brands

  • Manolo Blahnik
  • Chanel
  • Skinny Girl Cocktails
  • My Scene (Mattel doll franchise)

Quick-Start: Minimal Shoe Diva Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shoe Diva Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playfair+Display:wght@400;700&family=Dancing+Script:wght@400;700&family=Quicksand:wght@400;500;600&family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --diva-hot-pink: #ff69b4;
      --diva-deep-pink: #ff1493;
      --diva-rose: #f472b6;
      --diva-blush: #ffd6e0;
      --diva-pale-pink: #fff0f5;
      --diva-sunny-yellow: #ffd700;
      --diva-lime-green: #77dd77;
      --diva-sky-blue: #87ceeb;
      --diva-lavender: #e6c8ff;
      --diva-black: #2a2a2a;
      --diva-white: #ffffff;
      --diva-cream: #fffef5;
      --diva-gold: #d4af37;
    }

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

    body {
      background: var(--diva-pale-pink);
      color: var(--diva-black);
      font-family: 'Quicksand', sans-serif;
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 1.7;
    }

    h1, h2 {
      font-family: 'Playfair Display', serif;
      font-weight: 700;
      letter-spacing: 0.03em;
    }

    h3 {
      font-family: 'Dancing Script', cursive;
      font-weight: 700;
    }

    .hero {
      text-align: center;
      padding: 5rem 2rem 4rem;
      background: linear-gradient(
        180deg,
        var(--diva-pale-pink) 0%,
        var(--diva-cream) 100%
      );
    }

    .hero h1 {
      font-family: 'Great Vibes', cursive;
      font-size: clamp(3rem, 8vw, 6rem);
      color: var(--diva-hot-pink);
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 1.2;
    }

    .hero .subtitle {
      font-family: 'Montserrat', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      font-size: 0.85rem;
      color: var(--diva-black);
      margin-top: 0.5rem;
    }

    /* Bow ribbon divider */
    .diva-divider {
      text-align: center;
      margin: 2rem 0;
      position: relative;
    }

    .diva-divider::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 15%;
      right: 15%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--diva-hot-pink), transparent);
    }

    .diva-divider::after {
      content: '\1F460';
      position: relative;
      z-index: 1;
      background: var(--diva-pale-pink);
      padding: 0 0.8rem;
      font-size: 1.2rem;
    }

    section {
      max-width: 900px;
      margin: 0 auto;
      padding: 3rem 2rem;
      text-align: center;
    }

    section h2 {
      margin-bottom: 1rem;
      color: var(--diva-black);
    }

    .card {
      background: var(--diva-white);
      border: 1.5px solid var(--diva-black);
      border-radius: 4px 12px 4px 10px;
      padding: 2rem;
      margin: 1.5rem 0;
      box-shadow: 3px 3px 0 0 var(--diva-blush);
      transition: box-shadow 0.3s ease, transform 0.3s ease;
      text-align: left;
    }

    .card:hover {
      box-shadow: 5px 5px 0 0 var(--diva-hot-pink);
      transform: translate(-2px, -2px);
    }

    .card h3 {
      font-size: 1.4rem;
      color: var(--diva-deep-pink);
      margin-bottom: 0.5rem;
    }

    /* Loopy decorative line */
    .loopy-line {
      height: 20px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M0 10 Q10 0 20 10 T40 10 T60 10 T80 10 T100 10 T120 10 T140 10 T160 10 T180 10 T200 10' fill='none' stroke='%23ff69b4' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: repeat-x;
      background-size: 200px 20px;
      background-position: center;
      margin: 1rem 0;
    }
  </style>
</head>
<body>
  <div class="loopy-line"></div>
  <div class="hero">
    <h1>Title Here</h1>
    <p class="subtitle">A Shoe Diva Presentation</p>
    <div class="diva-divider"></div>
  </div>
  <section>
    <h2>Section Heading</h2>
    <div class="card">
      <h3>Fabulous Content</h3>
      <p>Styled with the Shoe Diva aesthetic -- whimsical hand-drawn energy, bright pinks, and the glamour of fashion-forward urban living.</p>
    </div>
    <div class="card">
      <h3>Shopping Spree</h3>
      <p>Every element celebrates playful sophistication, from the loopy linework to the sparkle-dusted accents and sketch-style borders.</p>
    </div>
  </section>
  <div class="loopy-line"></div>
</body>
</html>
← Retour aux designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Tous droits réservés.

Designs issus de chrislemke/website_designs, sous licence MIT.