Art Deco

Applying an Art Deco visual direction

You are being asked to apply an Art Deco visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.

What “Art Deco” means here

Art Deco composes with symmetry and exact geometry. Everything mirrors about a vertical axis. Motifs step and radiate: ziggurat forms, fans, rays spreading from a point. A metallic accent — brass, gold, chrome — appears against a deep ground and is used sparingly enough to still read as precious. Typography is condensed, uppercase, and widely letterspaced. Thin rules appear in groups of two or three, framing regions the way inlay frames a panel.

What makes it distinctive is the combination of ornament and precision. It is decorative, but every arc is a section of a circle and every angle is a clean fraction of a right angle. Nothing is organic or freehand. That is what separates it from the flowing, plant-derived ornament of the era before it, which is a different style with almost opposite rules.

The register is machine-age luxury: confident, formal, and unmistakably designed. It suits work that wants to feel crafted and expensive, and it fights work that wants to feel casual or immediate.

Recommendations

• Compose symmetrically about a vertical axis. Deco without symmetry loses most of its identity.
• Build one stepped or radiating motif and make it structural — a ziggurat frame around a heading, a fan behind a title, rays spreading from a corner. It should organize a region, not sit in one.
• Restrain the metallic accent. Use it for rules, motifs, and highlights, and keep it well under a fifth of the visible area so it stays valuable rather than becoming the background.
• Choose a deep ground: navy, oxblood, forest, near-black. The metallic needs darkness to read as metal rather than as yellow.
• Set headlines condensed and uppercase with generous letterspacing. This one typographic decision carries a large share of the style.
• Draw rules in pairs or triples rather than singly. A single hairline is a divider; two parallel hairlines with a small gap is deco.
• Keep the geometry exact. Snap arcs to circle sections and angles to multiples of fifteen degrees. Approximate curves make the ornament look drawn rather than constructed.

Avoid

• Asymmetric or dynamically balanced composition.
• Organic, floral, or freehand ornament, which belongs to the preceding style rather than this one.
• Metallic accent spread across large areas, which turns precious material into wallpaper.
• A pale background, on which gold reads as mustard.
• Single hairline rules where paired rules are the convention.
• Arbitrary angles and approximate arcs.

How to check your own work

Before considering the result finished, look at it and ask:

• Fold the composition down the middle. Do the halves correspond? If not, symmetry is missing and it is the first thing to fix.
• How much of the screen is metallic? If it is a large share, the accent has stopped being an accent.
• Are the arcs true circle sections and the angles clean fractions? Freehand curves are visible immediately at this level of formality.
• Are the headlines condensed, uppercase, and letterspaced? If they are set in an ordinary sans at default spacing, the typography is not participating.
• Is there any organic or floral ornament? That is a different style, and mixing them makes both illegible.

Art Deco — Specification

Definition

Art Deco is a web-interface design style built on strict axial symmetry and exact geometry, using stepped and radiating motifs, a restrained metallic accent over a deep ground, condensed letterspaced capitals, and rules drawn in groups. It is decorative but never freehand: every arc is a circle section and every angle a clean fraction, which distinguishes it from the organic ornament of the style that preceded it.

Core principles

• Symmetry is the composition. The layout mirrors about a vertical axis.
• Ornament is constructed. Motifs are geometric, exact, and repeatable rather than drawn.
• Metal stays precious. The metallic accent is restricted enough to retain value.
• Depth of ground. A dark, saturated background is what makes metal read as metal.
• Typography is formal. Condensed uppercase with wide letterspacing carries the register.

Visual characteristics

• Bilateral symmetry about the vertical center.
• Stepped ziggurat forms, fans, and radiating ray motifs.
• Brass, gold, or chrome accents against navy, oxblood, forest, or near-black.
• Condensed uppercase headlines with generous tracking.
• Thin rules grouped in pairs or triples framing regions.
• Arcs that are true circle sections and angles at clean intervals.

Rules

1. Strict axial symmetry. The composition mirrors. Acceptance criterion: The primary composition is reflected about the vertical center axis.

2. Stepped or radiating motif. Ornament is structural. Acceptance criterion: At least one ziggurat, fan, or sunburst motif functions as a structural element organizing a region of the layout.

3. Restrained metallic accent. Metal remains valuable. Acceptance criterion: The metallic color is used over a dark or deeply saturated ground and occupies no more than 15% of the rendered area.

4. Formal display typography. Headlines carry the style. Acceptance criterion: Headline elements are set uppercase in a condensed display family with a computed letter-spacing of 0.05em or greater.

5. Grouped rules. Separation follows the convention. Acceptance criterion: Rules appear as parallel groups of two or three lines of 1–2px framing regions, rather than as single dividers.

6. Exact geometry. Ornament is constructed, not drawn. Acceptance criterion: All arcs are sections of circles and all angles are multiples of 15°.

7. Contrast over metal. Text on metallic ground remains readable. Acceptance criterion: Text over a metallic accent measures at least 4.5:1 against both its lightest and its darkest value.

Avoid

• Asymmetric or dynamically balanced composition.
• Organic, floral, or freehand ornament.
• Metallic accent spread across large areas.
• A pale background, on which gold reads as mustard.
• Single hairline rules where paired rules are the convention.
• Arbitrary angles and approximate arcs.

Acceptance criteria

• Rule 1: The primary composition is symmetrical about the vertical axis.
• Rule 2: A stepped or radiating motif organizes a region.
• Rule 3: Metallic accent covers 15% or less of the area, over a deep ground.
• Rule 4: Headlines are condensed uppercase at 0.05em tracking or more.
• Rule 5: Rules appear in parallel groups of two or three.
• Rule 6: All arcs are circle sections and all angles multiples of 15°.
• Rule 7: Text over metallic ground meets 4.5:1 at both extremes.

Blocking failures

• Text is set over a metallic gradient and fails contrast at one extreme, which no single text color can resolve.
• Wide letterspacing is applied to body copy rather than to headlines alone, which degrades reading speed substantially and affects readers with dyslexia disproportionately.
• Ornamental motifs are placed such that they overlap or interrupt reading text, since the density of stepped and radiating forms makes any text over them unreadable.

These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.

Responsive adaptation guidance

• Symmetry (Rule 1) is preserved as the layout stacks: content remains centered rather than collapsing to a left-aligned column, since a left-aligned deco layout loses its defining property.
• Motifs (Rule 2) are simplified — fewer steps, fewer rays — rather than scaled down, because a reduced ziggurat quickly stops reading as one.
• Letterspacing (Rule 4) may reduce toward 0.05em at narrow widths where wide tracking forces headline wrapping, but never below it.
• The metallic budget (Rule 3) is re-measured after reflow, since a fixed-size ornament occupies a much larger share of a narrow viewport.
• Rules 6 and 7 hold unchanged at every breakpoint.