website_designs

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>

This site is open source. Improve this page.