Style Detail - Art Deco

See this style applied to a real page — identical content, different stylesheet.

About This Style

Art Deco is a visual arts design style that emerged in the 1920s and 1930s. It is characterized by rich ornamentation, bold geometric patterns, symmetry, strong lines, and often a sense of luxury and period modernity. Its inspiration comes from various elements including Cubism, Futurism, and ancient Egyptian and Aztec art.

This style has been widely applied in architecture, interior design, fashion, graphic arts, and other fields, conveying an atmosphere of elegance, sophistication, and dynamism.

Main Features:

Geometric Patterns: Extensive use of chevrons, sunbursts, stepped patterns, triangles, and repeating geometric shapes.
Symmetry: Designs are often (though not exclusively) symmetrical, creating a sense of order and grandeur.
Bold Colors & High Contrast: Common palettes include black, white, gold, silver, and deep jewel tones like emerald green, sapphire blue, or ruby red.
Implied Luxurious Materials: Visually represented through metallic sheens (gold, chrome, bronze), polished surfaces, and rich textures.
Stylized Motifs: Natural forms (flowers, animals, fountains, etc.) are depicted in a highly stylized, often geometric manner.
Streamlined & Vertical Lines: Emphasis on verticality and sleek, aerodynamic forms.
Typography: Fonts are often geometric or tightly structured sans-serifs (like Futura, Broadway), or elegant, sometimes elongated serifs. Text itself is often treated as a significant design element.

Example AI Prompt

Design a website interface in the Art Deco style. The layout should be largely symmetrical with strong vertical lines. Use a color palette of deep black (#1a1a1a), metallic gold (#daa520), and cream (#f5f5dc) as a neutral, with accents of emerald green (#00693e). Incorporate classic Art Deco geometric patterns like chevrons, sunbursts, and stepped borders. Typography should feature a geometric sans-serif font (like 'Poppins' or 'Montserrat' used in a condensed, uppercase style for headings) and an elegant serif for body text. Elements should have sharp edges and a polished look. Use gold for borders, accents, and highlights to convey luxury.

(English explanation: Design a website interface in the Art Deco style. The layout should be largely symmetrical with strong vertical lines. Use a color palette of deep black (#1a1a1a), metallic gold (#daa520), and cream (#f5f5dc) as a neutral, with accents of emerald green (#00693e). Incorporate classic Art Deco geometric patterns like chevrons, sunbursts, and stepped borders. Typography should feature a geometric sans-serif font (like 'Poppins' or 'Montserrat' used in a condensed, uppercase style for headings) and an elegant serif for body text. Elements should have sharp edges and a polished look. Use gold for borders, accents, and highlights to convey luxury.)

Theme CSS Snippets

The following are the core CSS variable definitions for applying this Art Deco style as a global theme (body.theme-art-deco). Complete style rules (including uppercase headings, borders, etc.) are defined in the main style.css file:


/* Core Art Deco Theme Variables */
body.theme-art-deco {
    --art-deco-gold: #daa520;
    --art-deco-black: #1a1a1a;
    --art-deco-cream: #f5f5dc;
    /* --art-deco-emerald: #00693e; /* Example accent color */

    --page-bg: var(--art-deco-black);
    --text-color: var(--art-deco-cream);
    --heading-color: var(--art-deco-gold);
    --link-color: var(--art-deco-gold);
    --link-hover-color: #fff; 
    
    --border-color: rgba(218, 165, 32, 0.5); /* Translucent gold border */
    
    --card-bg: var(--art-deco-black); /* Content block background */
    --card-shadow: 0 0 15px rgba(218, 165, 32, 0.2);
    
    --header-bg: var(--art-deco-black);
    --header-text-color: var(--art-deco-gold);
    /* header/footer borders applied directly in the theme */
    
    --button-bg: var(--art-deco-gold);
    --button-text-color: var(--art-deco-black);
    --button-hover-bg: #b8860b; /* Dark gold hover */
    --button-border: 1px solid #b8860b;
    
    --prompt-bg: rgba(255, 255, 255, 0.05);
    --prompt-text-color: #ccc;
    
    --base-font: var(--font-sans); 
    --heading-font: var(--font-pop); /* Poppins font for headings */
    
    --card-border-radius: 4px;
    --button-border-radius: 2px; /* Sharp-edged buttons */
}

/* 
   More specific styles (like uppercase headings, header/footer borders, body background patterns)
   are defined in the body.theme-art-deco rules in style.css.
*/

Note: Art Deco style is known for its unique geometric beauty and sense of luxury. Gold, black, and symmetry are common elements. Font choice and pattern details are crucial for creating the atmosphere.

Resource Download (Example)

Download a zip file containing a more complete CSS definition for this style.

Download art-deco.zip