Agence WagnerAgence Wagner
FRENDEELS
Retour aux designs
SombreClassiqueÉlégantOrnementalGéométrique
Aperçu

Art Deco Design Reference

Art Deco (also known as Style Moderne) is a decorative art and design movement that emerged in the 1910s-1930s. It represents luxury, glamour, modernity, progress, faith in technology, the machine aesthetic, and speed. The style celebrates technological advancement through geometric abstraction, luxury through material richness, forward momentum via dynamic angular composition, and industrial precision balanced with decorative opulence.

Visual Characteristics

Core Motifs and Patterns

  • Chevrons -- V-shaped angular patterns, often repeated in rows or borders
  • Sunbursts / Radiating lines -- Fan-shaped rays emanating from a central point; a signature Art Deco motif
  • Zig-zag patterns -- Sharp, angular repetitions used as borders, dividers, and background fills
  • Stepped forms -- Tiered, pyramid-like shapes inspired by Mesoamerican and Egyptian architecture
  • Stylized natural forms -- Abstracted/geometric versions of plants, animals, and human figures
  • Symmetry -- Strong bilateral or radial symmetry throughout all compositions
  • Geometric fans and arches -- Semi-circular fan shapes with internal geometric divisions
  • Repeating geometric pattern backgrounds -- Tessellated grids of triangles, hexagons, and diamonds

Design Principles

  • Angular, geometric construction emphasizing verticality
  • Streamlined, aerodynamic curves (especially in the later Streamline Moderne variant)
  • Symmetrical composition throughout all design elements
  • Strong focal points using angular emphasis and radiating patterns
  • Directional movement created through chevron and sunburst patterns
  • Lavish ornamentation -- rich decorative detail, never minimalist
  • Verticality used for prestige, technological advancement, and dramatic effect

Color Palette

Primary Scheme

Role Colors
Base Black, deep charcoal
Primary accents Gold, silver, chrome
High contrast Black paired with gold, silver, or chrome

Secondary / Jewel Tones

Color Hex (suggested) Usage
Emerald #046307, #2E8B57 Accent panels, decorative elements
Sapphire #0F52BA, #1E3A5F Secondary backgrounds, highlights
Ruby #9B111E, #8B0000 Accent text, call-to-action elements
Amber / Gold #D4AF37, #C5A03F Borders, headings, ornamental details
Silver / Platinum #C0C0C0, #A9A9A9 Secondary metallic accents
Ivory / Cream #FFFFF0, #F5F5DC Light backgrounds, text on dark

Suggested CSS Custom Properties

:root {
  /* Base */
  --deco-black: #1a1a1a;
  --deco-charcoal: #2d2d2d;
  --deco-cream: #f5f0e1;
  --deco-ivory: #fffff0;

  /* Metallics */
  --deco-gold: #d4af37;
  --deco-gold-light: #e8d48b;
  --deco-silver: #c0c0c0;
  --deco-chrome: #dbe4eb;

  /* Jewel tones */
  --deco-emerald: #046307;
  --deco-sapphire: #0f52ba;
  --deco-ruby: #9b111e;
  --deco-amethyst: #6b3fa0;

  /* Functional */
  --deco-bg-primary: var(--deco-black);
  --deco-bg-secondary: var(--deco-charcoal);
  --deco-text-primary: var(--deco-cream);
  --deco-accent: var(--deco-gold);
  --deco-border: var(--deco-gold);
}

Approaches

  • Monochromatic with high contrast gradients -- e.g., black to dark gray with gold accents
  • Metallic finishes as primary design elements -- gradients mimicking gold, chrome, brass
  • High contrast combinations -- always pair dark bases with bright metallics
  • Limited color separation for bold impact -- restrict palette to 3-4 colors maximum

Typography

Typeface Characteristics

Art Deco typography features:

  • Geometric, sans-serif typefaces with streamlined characteristics
  • Bold, angular letterforms with sharp terminals
  • Inline / engraved effects -- letters with internal lines or decorative strokes
  • Strong vertical emphasis -- tall, narrow proportions
  • Uniform stroke weight or dramatic thick/thin contrast
  • Uppercase-heavy usage for headlines and display text
  • Decorative capitals with geometric embellishments

Recommended Web Fonts (Google Fonts / Free)

Font Style Usage
Poiret One Geometric, thin, elegant Headlines, display text
Josefin Sans Geometric, vintage feel Headlines, subheadings
Bebas Neue Bold, condensed, uppercase Headlines, banners
Raleway Thin geometric with elegant weight range Body text, subheadings
Cinzel Serif with classical proportion Formal headings
Cinzel Decorative Ornamental serif Feature titles, logos
Tenor Sans Clean geometric sans Body copy
Limelight Art Deco display font Large display headlines
Metropolis (self-hosted) Geometric sans inspired by 1920s All-purpose

Typography CSS Example

/* Headlines */
h1, h2, h3 {
  font-family: 'Poiret One', 'Josefin Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--deco-gold);
  font-weight: 400;
}

/* Display / Hero text */
.deco-display {
  font-family: 'Bebas Neue', 'Limelight', sans-serif;
  font-size: clamp(3rem, 8vw, 8rem);
  letter-spacing: 0.2em;
  line-height: 1.1;
}

/* Body text */
body {
  font-family: 'Raleway', 'Tenor Sans', sans-serif;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.7;
  color: var(--deco-cream);
}

Layout Principles

Grid and Structure

  • Grid-based systematic organization -- use modular grids with strong alignment
  • Symmetrical layouts -- center-aligned content, mirrored columns
  • Strong vertical axis -- content flows along a central vertical spine
  • Stepped/tiered sections -- content blocks arranged in pyramid or ziggurat formations
  • Careful alignment and rhythm using modular spacing units

Section Organization

  • Use geometric dividers between sections (chevron lines, sunburst separators, stepped borders)
  • Apply generous whitespace (or dark space) around ornamented elements
  • Create hierarchy through scale -- oversized headings, medium subheadings, refined body text
  • Employ angular containers -- frames, borders, and panels with geometric embellishment

CSS/Design Techniques

Metallic Gradient Effects

/* Gold metallic gradient for headings or accents */
.deco-gold-text {
  background: linear-gradient(
    135deg,
    #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gold metallic border */
.deco-gold-border {
  border: 2px solid transparent;
  border-image: linear-gradient(
    135deg,
    #bf953f, #fcf6ba, #b38728
  ) 1;
}

/* Chrome/silver gradient */
.deco-chrome {
  background: linear-gradient(
    135deg,
    #c0c0c0, #e8e8e8, #a9a9a9, #d4d4d4, #b0b0b0
  );
}

Geometric Borders and Dividers

/* Stepped border effect */
.deco-stepped-border {
  border: 3px solid var(--deco-gold);
  outline: 1px solid var(--deco-gold);
  outline-offset: 6px;
  padding: 2rem;
}

/* Double-line geometric divider */
.deco-divider {
  height: 0;
  border: none;
  border-top: 3px solid var(--deco-gold);
  border-bottom: 1px solid var(--deco-gold);
  margin: 2rem auto;
  width: 60%;
  position: relative;
}

/* Chevron separator using CSS */
.deco-chevron::after {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  border-right: 3px solid var(--deco-gold);
  border-bottom: 3px solid var(--deco-gold);
  transform: rotate(45deg);
  margin: -20px auto 0;
}

Sunburst / Radiating Pattern (CSS-only)

.deco-sunburst {
  background: repeating-conic-gradient(
    var(--deco-gold) 0deg 5deg,
    transparent 5deg 10deg
  );
  opacity: 0.1;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

Art Deco Card / Panel

.deco-card {
  background: var(--deco-charcoal);
  border: 1px solid var(--deco-gold);
  padding: 2rem;
  position: relative;
  text-align: center;
}

/* Corner ornaments */
.deco-card::before,
.deco-card::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: var(--deco-gold);
  border-style: solid;
}

.deco-card::before {
  top: 8px;
  left: 8px;
  border-width: 2px 0 0 2px;
}

.deco-card::after {
  bottom: 8px;
  right: 8px;
  border-width: 0 2px 2px 0;
}

Fan/Arch Decorative Element

.deco-fan {
  width: 200px;
  height: 100px;
  background: conic-gradient(
    from 180deg at 50% 100%,
    var(--deco-gold) 0deg,
    transparent 20deg,
    var(--deco-gold) 40deg,
    transparent 60deg,
    var(--deco-gold) 80deg,
    transparent 100deg,
    var(--deco-gold) 120deg,
    transparent 140deg,
    var(--deco-gold) 160deg,
    transparent 180deg
  );
  border-radius: 200px 200px 0 0;
  opacity: 0.3;
}

Geometric Shadow/Depth

/* Sharp geometric shadow (not soft box-shadow) */
.deco-shadow {
  box-shadow:
    4px 4px 0 0 var(--deco-gold),
    8px 8px 0 0 var(--deco-charcoal);
}

Background Texture Pattern

/* Repeating diamond/rhombus pattern */
.deco-pattern-bg {
  background-color: var(--deco-black);
  background-image:
    linear-gradient(45deg, var(--deco-gold) 25%, transparent 25%),
    linear-gradient(-45deg, var(--deco-gold) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--deco-gold) 75%),
    linear-gradient(-45deg, transparent 75%, var(--deco-gold) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  opacity: 0.05;
}

Materials and Textures (Visual Metaphors for Web)

Physical Art Deco materials and their web equivalents:

Physical Material Web Equivalent
Polished marble Subtle noise texture overlay on light surfaces
Chrome / Brushed steel Linear metallic gradients (silver/gray)
Gilt / Gold leaf Gold gradient text, gold borders
Lacquer (high-gloss black) Deep black backgrounds with subtle sheen gradients
Exotic wood grain Warm brown textured backgrounds (subtle)
Stained glass Jewel-tone color blocks with dark leading-style borders
Onyx Dark translucent overlays with depth
Ivory / Bone Off-white / cream tones for light themes

Sub-styles and Variations

Early Art Deco (1910s-1920s)

  • More ornamental and handcrafted
  • Influenced by Cubism, Fauvism, and non-Western art (Egyptian, African, Mesoamerican)
  • Rich surface decoration and exotic materials
  • Heavier, more opulent feel

Neo-Egyptian Art Deco

  • Incorporates Egyptian motifs: scarabs, lotus flowers, papyrus columns, pyramidal forms
  • Sparked by the discovery of Tutankhamun's tomb (1922)
  • Geometric interpretation of Egyptian hieroglyphs and symbols

Streamline Moderne (1930s)

  • Evolved, later form of Art Deco
  • Emphasizes aerodynamic curves over angular geometry
  • Horizontal lines, rounded corners, nautical references
  • Cleaner, less ornamented, more futuristic
  • Chrome and glass over gold and exotic materials
Aesthetic Relationship to Art Deco
Art Nouveau Predecessor; organic curves vs. Art Deco's geometry
Bauhaus Contemporary; shares geometric focus, but Bauhaus is minimalist and functional
Cubism Major influence; geometric abstraction of natural forms
Futurism Shared fascination with speed, technology, and dynamism
Decopunk Speculative fiction aesthetic based on Art Deco visual language
Dieselpunk Retro-futuristic style drawing from 1920s-1940s industrial design
Flapper Cultural companion aesthetic (1920s fashion and lifestyle)
Streamline Moderne Direct evolution of Art Deco into softer, more aerodynamic forms

Quick-Start: Minimal Art Deco 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 Deco Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Poiret+One&family=Raleway:wght@300;400;600&family=Bebas+Neue&display=swap" rel="stylesheet">
  <style>
    :root {
      --deco-black: #1a1a1a;
      --deco-charcoal: #2d2d2d;
      --deco-cream: #f5f0e1;
      --deco-gold: #d4af37;
      --deco-gold-light: #e8d48b;
    }

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

    body {
      background: var(--deco-black);
      color: var(--deco-cream);
      font-family: 'Raleway', sans-serif;
      font-weight: 300;
      letter-spacing: 0.03em;
      line-height: 1.7;
    }

    h1, h2, h3 {
      font-family: 'Poiret One', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--deco-gold);
    }

    .hero {
      text-align: center;
      padding: 6rem 2rem;
      border-bottom: 3px solid var(--deco-gold);
    }

    .hero h1 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(3rem, 8vw, 7rem);
      letter-spacing: 0.2em;
    }

    .deco-divider {
      width: 60%;
      margin: 2rem auto;
      border: none;
      border-top: 3px solid var(--deco-gold);
      position: relative;
    }

    section {
      max-width: 900px;
      margin: 0 auto;
      padding: 4rem 2rem;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="hero">
    <h1>Title Here</h1>
    <hr class="deco-divider">
    <p>Subtitle or tagline in elegant Raleway</p>
  </div>
  <section>
    <h2>Section Heading</h2>
    <p>Content with Art Deco styling applied.</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.