website_designs

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>

This site is open source. Improve this page.