Agence WagnerAgence Wagner
FRENDEELS
Retour aux designs
ClassiqueOrganiqueOrnemental
Aperçu

Art Nouveau Design Reference

Art Nouveau (also known as Jugendstil, Stile Liberty, Modernismo) is a decorative art and design movement from the 1890s-1910s. It represents organic beauty, nature worship, handcrafted elegance, the total work of art (Gesamtkunstwerk), and flowing, sinuous line. The style celebrates the natural world through abstracted botanical and zoological forms, rejects historical imitation, and strives to unify all design disciplines -- from architecture and furniture to typography and jewelry -- into a single harmonious aesthetic.

Visual Characteristics

Core Motifs and Patterns

  • Whiplash curves -- asymmetrical, sinuous S-curves suggesting organic movement; the signature Art Nouveau line
  • Flowing botanical forms -- stylized plants with visible stems, leaves, tendrils, and organic branching
  • Peacock feathers -- fan-like iridescent plumes used as decorative fills, borders, and standalone motifs
  • Stylized flora -- cyclamen, iris, orchid, thistle, mistletoe, holly, water lily, and vines
  • Stylized fauna -- swans, peacocks, dragonflies, butterflies rendered in elegant, abstracted forms
  • Feminine figures -- young women in flowing gowns, often with flower crowns, elongated graceful proportions
  • Celtic/Anglo-Saxon knot work -- complex interlacing patterns, especially in Scandinavian and British variants
  • Moon gate circles -- circular window forms inspired by Japanese Zen garden architecture
  • Visible outlines -- clear contour lines defining forms, influenced by Japanese woodblock prints

Design Principles

  • Organic, nature-derived construction emphasizing curves over straight lines
  • Asymmetrical composition throughout all design elements
  • Integration of decoration and structure -- ornament is not applied but integral
  • Handcrafted quality -- visible artistic technique, never industrial smoothness
  • Blank color spaces influenced by Japanese woodblock print composition (negative space)
  • Flowing continuity -- lines and forms extend across boundaries, connecting elements organically
  • Vertical growth -- compositions often suggest upward botanical growth

Color Palette

Primary Scheme

Role Colors
Base Muted earthy tones, cream, warm ivory
Primary palette Olive green, mustard yellow, brown, lilac, sage
Metallic accents Gold, silver
Soft accents Pale pink, faded rose

Suggested Hex Values

Color Hex (suggested) Usage
Olive Green #6B7B3A, #808A4C Primary accent, botanical elements, backgrounds
Mustard Yellow #C5A033, #D4A843 Headings, highlights, floral accents
Sage #9CAF88, #B2C4A4 Secondary backgrounds, subtle fills
Lilac #B39DCA, #9B7DB8 Decorative accents, secondary highlights
Warm Brown #7B5B3A, #8B6B4A Borders, text, structural lines
Pale Pink / Rose #E8C4C4, #D4A0A0 Soft accents, floral details
Gold #C5A03F, #D4AF37 Metallic accents, ornamental borders
Cream / Ivory #F5F0E1, #FAF6ED Page backgrounds, light surfaces
Deep Charcoal #2D2B28, #3A3632 Dark backgrounds, text on light surfaces

Suggested CSS Custom Properties

:root {
  /* Base */
  --nouveau-cream: #f5f0e1;
  --nouveau-ivory: #faf6ed;
  --nouveau-charcoal: #2d2b28;
  --nouveau-warm-black: #1e1c19;

  /* Earthy naturals */
  --nouveau-olive: #6b7b3a;
  --nouveau-olive-light: #808a4c;
  --nouveau-sage: #9caf88;
  --nouveau-mustard: #c5a033;
  --nouveau-brown: #7b5b3a;

  /* Soft accents */
  --nouveau-lilac: #b39dca;
  --nouveau-rose: #d4a0a0;
  --nouveau-pale-pink: #e8c4c4;

  /* Metallics */
  --nouveau-gold: #c5a03f;
  --nouveau-gold-light: #dcc87a;
  --nouveau-silver: #b8b8b0;

  /* Functional */
  --nouveau-bg-primary: var(--nouveau-cream);
  --nouveau-bg-secondary: var(--nouveau-ivory);
  --nouveau-text-primary: var(--nouveau-charcoal);
  --nouveau-accent: var(--nouveau-olive);
  --nouveau-border: var(--nouveau-brown);
}

Approaches

  • Muted, earthy palette with natural warmth -- never saturated or neon; always faded and organic
  • Gold and silver as ornamental accents -- used for borders, dividers, and decorative elements
  • Light backgrounds with organic accents -- cream/ivory bases with olive, sage, and brown details
  • Dark variant -- warm charcoal/dark brown backgrounds with gold and cream, evoking lacquered surfaces
  • Limited palette with tonal variation -- 3-4 base colors with lighter/darker tonal shifts

Typography

Typeface Characteristics

Art Nouveau typography features:

  • Hand-lettered, organic letterforms with flowing curves
  • Japanese-influenced design sensibilities in spacing and form
  • Integrated ornamental decoration -- letters merge with surrounding organic motifs
  • Variable stroke weight -- thick-to-thin transitions mimicking calligraphic brushwork
  • Elongated, elegant proportions -- tall ascenders and graceful descenders
  • Regional variation -- British and Austrian versions tend toward geometric characteristics resembling later Art Deco typefaces
  • Visible artistic personality -- each letterform has handcrafted individuality

Recommended Web Fonts (Google Fonts / Free)

Font Style Usage
Cormorant Garamond Elegant serif with Art Nouveau proportions Body text, subheadings
Playfair Display High-contrast serif with flowing curves Headlines, display text
Tangerine Calligraphic script with organic movement Decorative titles, accents
EB Garamond Classic proportions with organic feel Body copy
Cinzel Refined serif with elegant weight Formal headings, section titles
Cormorant Flowing, high-contrast display serif Feature headlines
Great Vibes Flowing calligraphic script Decorative accents, pull quotes
Spectral Organic serif with visible stroke variation Body text, reading content
Marcellus Inscriptional with gentle organic curves Subheadings, navigation

Typography CSS Example

/* Headlines */
h1, h2, h3 {
  font-family: 'Playfair Display', 'Cormorant Garamond', serif;
  letter-spacing: 0.05em;
  color: var(--nouveau-charcoal);
  font-weight: 400;
  line-height: 1.2;
}

/* Display / Hero text */
.nouveau-display {
  font-family: 'Cormorant', 'Playfair Display', serif;
  font-size: clamp(2.5rem, 7vw, 6rem);
  letter-spacing: 0.08em;
  line-height: 1.1;
  font-weight: 300;
  font-style: italic;
}

/* Decorative script accents */
.nouveau-script {
  font-family: 'Tangerine', 'Great Vibes', cursive;
  font-size: 1.8em;
  color: var(--nouveau-gold);
}

/* Body text */
body {
  font-family: 'Cormorant Garamond', 'EB Garamond', 'Spectral', serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.8;
  color: var(--nouveau-charcoal);
}

Layout Principles

Grid and Structure

  • Organic, asymmetrical layouts -- avoid rigid grids; use flowing, off-center compositions
  • Vertical growth metaphor -- content flows upward like a growing plant, with branching sections
  • Integrated borders and content -- decorative frames flow into and around content, not just containing it
  • Generous negative space -- influenced by Japanese woodblock prints; let elements breathe
  • Curved containers -- rounded and organic panel shapes instead of sharp rectangles

Section Organization

  • Use organic dividers between sections (sinuous vine lines, floral separators, whiplash curves)
  • Apply generous whitespace around ornamented elements for elegance
  • Create hierarchy through organic scale -- flowing large headings that curve into smaller supporting text
  • Employ botanical framing -- vine and tendril borders that grow around content panels
  • Circle and arch motifs -- moon gate circles, rounded arches for framing key content

CSS/Design Techniques

Whiplash Curve Dividers (SVG + CSS)

/* Sinuous organic divider using inline SVG background */
.nouveau-divider {
  height: 40px;
  background: no-repeat center / 60% auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40'%3E%3Cpath d='M0,20 C50,0 100,40 150,20 S250,0 300,20 S350,40 400,20' fill='none' stroke='%236b7b3a' stroke-width='2'/%3E%3C/svg%3E");
  margin: 2rem auto;
  opacity: 0.7;
}

/* Double whiplash line */
.nouveau-divider-double {
  height: 50px;
  position: relative;
  margin: 2rem auto;
  width: 60%;
}
.nouveau-divider-double::before,
.nouveau-divider-double::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  background: no-repeat center / 100% auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40'%3E%3Cpath d='M0,20 C60,0 120,40 180,20 S300,0 360,20 S390,35 400,20' fill='none' stroke='%237b5b3a' stroke-width='1.5'/%3E%3C/svg%3E");
}
.nouveau-divider-double::after {
  top: 6px;
  opacity: 0.5;
}

Organic Border / Vine Frame

/* Organic rounded panel with botanical border */
.nouveau-panel {
  background: var(--nouveau-ivory);
  border: 2px solid var(--nouveau-olive);
  border-radius: 20px 5px 20px 5px; /* asymmetric organic rounding */
  padding: 2.5rem;
  position: relative;
  box-shadow: 0 4px 20px rgba(107, 123, 58, 0.1);
}

/* Organic corner ornament */
.nouveau-panel::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 20px;
  width: 60px;
  height: 60px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30,5 C20,5 10,15 10,25 C10,35 20,40 25,45 C28,48 30,55 30,55' fill='none' stroke='%236b7b3a' stroke-width='1.5'/%3E%3Ccircle cx='30' cy='5' r='3' fill='%23c5a033'/%3E%3C/svg%3E");
}

Gold Accent Line with Floral Endpoint

.nouveau-gold-line {
  width: 40%;
  margin: 1.5rem auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--nouveau-gold) 20%,
    var(--nouveau-gold) 80%,
    transparent
  );
  position: relative;
}

.nouveau-gold-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: var(--nouveau-gold);
  border-radius: 50% 0 50% 0; /* leaf/petal shape */
  rotate: 45deg;
}

Art Nouveau Card

.nouveau-card {
  background: var(--nouveau-ivory);
  border: 1px solid var(--nouveau-brown);
  border-radius: 12px 4px 12px 4px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.4s ease;
}

.nouveau-card:hover {
  box-shadow: 0 8px 30px rgba(107, 123, 58, 0.15);
}

/* Subtle botanical background pattern */
.nouveau-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  opacity: 0.06;
  background: no-repeat top right / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M100,0 C90,30 60,50 40,80 C30,95 50,100 60,90 C70,80 80,50 100,0Z' fill='%236b7b3a'/%3E%3Cpath d='M110,0 C100,20 85,35 70,60 C65,70 75,75 80,65 C90,45 105,20 110,0Z' fill='%239caf88'/%3E%3C/svg%3E");
  pointer-events: none;
}

Peacock Feather Decorative Element

.nouveau-peacock {
  width: 200px;
  height: 300px;
  position: relative;
}

.nouveau-peacock::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 40% 50% at 50% 40%,
    var(--nouveau-olive) 0%,
    var(--nouveau-sage) 30%,
    var(--nouveau-mustard) 50%,
    transparent 70%
  );
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity: 0.3;
}

Stained Glass Effect (CSS Grid)

/* Inspired by Art Nouveau stained glass and Tiffany design */
.nouveau-glass {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  background: var(--nouveau-brown); /* "leading" between panes */
  border-radius: 50% 50% 5px 5px / 30% 30% 5px 5px;
  overflow: hidden;
  padding: 3px;
}

.nouveau-glass > * {
  background: var(--nouveau-ivory);
  padding: 1.5rem;
  border-radius: 4px;
}

.nouveau-glass > *:nth-child(odd) {
  background: rgba(156, 175, 136, 0.15); /* sage tinted pane */
}

Soft Organic Shadow/Depth

/* Soft, diffused organic shadow (not sharp geometric) */
.nouveau-shadow {
  box-shadow:
    0 2px 8px rgba(123, 91, 58, 0.1),
    0 8px 25px rgba(107, 123, 58, 0.08);
}

/* Subtle inner glow for panels */
.nouveau-inner-glow {
  box-shadow:
    inset 0 0 30px rgba(197, 160, 63, 0.05),
    0 4px 20px rgba(107, 123, 58, 0.1);
}

Background Texture Pattern

/* Subtle organic repeating pattern */
.nouveau-pattern-bg {
  background-color: var(--nouveau-cream);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(107, 123, 58, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(179, 157, 202, 0.04) 0%, transparent 50%);
  background-size: 200px 200px;
}

/* Japanese-inspired minimal pattern */
.nouveau-wave-bg {
  background-color: var(--nouveau-ivory);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,10 C25,0 25,20 50,10 C75,0 75,20 100,10' fill='none' stroke='%236b7b3a' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
  background-size: 100px 20px;
}

Materials and Textures (Visual Metaphors for Web)

Physical Art Nouveau materials and their web equivalents:

Physical Material Web Equivalent
Hand-blown glass Subtle translucent overlays with color tinting, frosted glass effects (backdrop-filter: blur)
Wrought iron Dark brown/charcoal thin ornamental borders and structural lines
Stained glass (Tiffany) Colored grid panels with dark "leading" borders between them
Ceramic / Earthenware Muted earthy background tones with subtle texture noise
Gold leaf / Gilt Gold gradient accents on borders, text highlights, ornamental details
Enamel Smooth, rich color fills with slight sheen (subtle gradient)
Pearls Small circular accent elements with soft radial gradient
Carved wood Warm brown tones with organic border shapes
Silk / Flowing fabric Subtle gradient transitions, flowing SVG background shapes
Japanese lacquer Deep dark backgrounds with high-gloss-style subtle reflection gradients

Poster Art and Graphic Design

Art Nouveau graphic design, particularly poster art, has distinct characteristics useful for web layout:

  • Color lithography style -- flat color areas with visible outlines, like Alphonse Mucha's posters
  • Blank color spaces -- large areas of muted, flat color influenced by Japanese woodblock prints
  • Faded earthy tones -- olive green backgrounds, mustard accents, never harsh or saturated
  • Visible outlines defining all forms clearly
  • Hand-lettering integration -- text flows as part of the overall organic composition
  • Female figures as central compositional elements, framed by botanical arches
  • Circular and arch framing -- content enclosed in organic rounded frames

Regional Variations and Sub-styles

Region Name Visual Characteristics
France / Belgium Art Nouveau Whiplash curves, foliage, flowing ironwork, glass-metal integration
Germany Jugendstil Named after Jugend magazine; similar flowing organic forms
Austria-Hungary Wiener Secessionsstil Straighter geometric lines blended with gentle florals; precursor to Art Deco geometry
Britain Glasgow Style / Modern Style Rooted in Arts and Crafts; geometric straight lines with restrained floral decoration
Spain (Catalonia) Modernisme Inspiration from traditional Catalan, Mudejar, and Gothic architecture; highly sculptural
Italy Stile Liberty Named after Liberty & Co. department store; emphasis on decorative surface
Netherlands Nieuwe Kunst Dutch interpretation with local craft traditions
Portugal Arte Nova Regional adaptation with local architectural influences
Romania Arta 1900 Subtle ornamental approach due to political restrictions
Scandinavia National Romantic Style Viking-inspired complex knot ornaments (interlaces)
United States Tiffany Style Glass design focus; naturalistic decorative motifs by Louis Comfort Tiffany

Notable Artists and Their Visual Signatures

Artist Contribution Visual Signature
Alphonse Mucha Poster art, decorative panels Elongated female figures framed by botanical arches, circular halos, muted earthy palettes
Hector Guimard Architecture (Paris Metro) Flowing glass-and-metal structures, exposed ornamental ironwork
Victor Horta Interior architecture Sinuous metalwork staircases, whiplash iron railings, integrated structural ornament
Gustav Klimt Painting (Vienna Secession) Golden surface patterns, decorative flat areas, organic abstraction over figurative forms
Antoni Gaudi Architecture (Barcelona) Undulating organic surfaces, sculptural facades, integration of natural forms into structure
Louis Comfort Tiffany Glass design Naturalistic stained glass with botanical and landscape motifs, layered colored glass
Emile Galle Glass and furniture Three-layered hand-blown glass vases with nature motifs, botanical marquetry
Aesthetic Relationship to Art Nouveau
Aestheticism Philosophical predecessor; "art for art's sake" attitude
Arts and Crafts Major influence; shared emphasis on handcraft and rejection of industrial aesthetics
Japonisme Major visual influence; Japanese woodblock prints directly shaped composition and motifs
Symbolism Contemporary movement sharing mystical and nature-focused themes
Post-Impressionism Shared interest in expressive line and color over realistic representation
Art Deco Direct successor; Art Deco's geometry replaced Art Nouveau's organic curves
Glasgow Style Regional variant with more geometric leanings
Psychedelia (1960s) Revival movement drawing heavily on Art Nouveau poster art and flowing forms

Quick-Start: Minimal Art Nouveau Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Art Nouveau Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,400&family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --nouveau-cream: #f5f0e1;
      --nouveau-ivory: #faf6ed;
      --nouveau-charcoal: #2d2b28;
      --nouveau-olive: #6b7b3a;
      --nouveau-sage: #9caf88;
      --nouveau-mustard: #c5a033;
      --nouveau-brown: #7b5b3a;
      --nouveau-lilac: #b39dca;
      --nouveau-rose: #d4a0a0;
      --nouveau-gold: #c5a03f;
    }

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

    body {
      background: var(--nouveau-cream);
      color: var(--nouveau-charcoal);
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 1.8;
    }

    h1, h2, h3 {
      font-family: 'Playfair Display', serif;
      letter-spacing: 0.05em;
      color: var(--nouveau-charcoal);
      font-weight: 400;
    }

    .hero {
      text-align: center;
      padding: 6rem 2rem;
      position: relative;
      overflow: hidden;
    }

    .hero h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.5rem, 7vw, 5.5rem);
      font-style: italic;
      font-weight: 400;
      letter-spacing: 0.08em;
    }

    .hero .subtitle {
      font-family: 'Tangerine', cursive;
      font-size: 2rem;
      color: var(--nouveau-gold);
      margin-top: 0.5rem;
    }

    /* Organic whiplash divider */
    .nouveau-divider {
      height: 40px;
      width: 50%;
      margin: 2rem auto;
      background: no-repeat center / 100% auto;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40'%3E%3Cpath d='M0,20 C50,0 100,40 150,20 S250,0 300,20 S350,40 400,20' fill='none' stroke='%236b7b3a' stroke-width='1.5'/%3E%3C/svg%3E");
      opacity: 0.6;
    }

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

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

    section p {
      text-align: justify;
      text-indent: 1.5em;
    }
  </style>
</head>
<body>
  <div class="hero">
    <h1>Title Here</h1>
    <div class="subtitle">A flowing subtitle in script</div>
    <div class="nouveau-divider"></div>
  </div>
  <section>
    <h2>Section Heading</h2>
    <p>Content with Art Nouveau styling applied. The organic forms and muted earthy palette create an elegant, nature-inspired presentation.</p>
  </section>
</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.