Website Design Explorer

Style

Art deco

The glamour of the 1920s: symmetry, fans and sunbursts, tall elegant type and gold on cream and black.

  • luxurious
  • bold
  • balanced
  • retro
  • warm

See it live

Example: cocktail bar page for The Gilded Lantern, a fictional brand made up for this explorer. Switch the width to see the style on a phone, a tablet and a desktop screen.

Open the example on its own

Copy the idea

Take the style with you as a brief for a person, as instructions for an AI assistant, or as design tokens. It describes the idea and the rules — never the example's code.

The recipe

Art deco — style recipe: the same text the brief copies.

The idea

  • The glamour of the 1920s: symmetry, fans and sunbursts, tall elegant type and gold on cream and black.

Use it when

  • Bars, hotels, theatres and events
  • Premium brands with a classic story
  • Celebrations and invitations

Avoid it when

  • The product is casual or for children
  • The brand must feel modern and minimal

Principles

  • Strong central symmetry
  • Fan, sunburst and stepped geometric ornaments
  • Tall, thin, elegant display type
  • Gold lines framing cream and black fields
  • Repeated patterns at the edges, calm in the middle
  • Everything framed, nothing floating

Colour

  • Champagne (background): #f5ecd7
  • Parchment (surface): #ece0c0
  • Jet (text): #14181f
  • Smoke (muted): #4a4a40
  • Old gold (accent): #8a6416
  • Jade (accent-2): #1f4d4a
  • Jet line (border): #14181f
  • Text on background contrast: 15.13:1

Type

  • Headings: Poiret One, weights 400 — Thin geometric deco face; large sizes only, uppercase
  • Body: Josefin Sans, weights 400, 600 — Geometric, period-appropriate, readable
  • Scale: 14px, 17px, 21px, 30px, 48px, 76px
  • A decorative display face only for headings; a clean geometric sans for everything else.

Spacing and shape

  • Base unit: 8px
  • Spacing steps: 8px, 16px, 24px, 48px, 88px
  • Symmetric margins; framed blocks.
  • Corner radii: 0px
  • Borders: Double gold rules and stepped corners
  • Shadows: None

Imagery and motion

  • Imagery: Geometric ornaments: fans, sunbursts, chevrons and stepped frames drawn in SVG.
  • Motion: Slow, symmetric reveals from the centre.

Do

  • Centre the hero and frame it
  • Repeat one ornament as a border
  • Use gold for lines, not big areas

Don't

  • No rounded blobs
  • No asymmetric chaos
  • No casual handwriting

Palette

  • Champagnebackground#f5ecd7
  • Parchmentsurface#ece0c0
  • Jettext#14181f
  • Smokemuted#4a4a40
  • Old goldaccent#8a6416
  • Jadeaccent-2#1f4d4a
  • Jet lineborder#14181f

Text on background: 15.13:1 — passes AA

Type

Headings Poiret One, weights 400

The quick brown fox jumps over the lazy dog

Thin geometric deco face; large sizes only, uppercase

Body Josefin Sans, weights 400, 600

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Geometric, period-appropriate, readable

Scale A decorative display face only for headings; a clean geometric sans for everything else.
  • 76pxThe quick brown fox jumps over the lazy dog
  • 48pxThe quick brown fox jumps over the lazy dog
  • 30pxThe quick brown fox jumps over the lazy dog
  • 21pxThe quick brown fox jumps over the lazy dog
  • 17pxThe quick brown fox jumps over the lazy dog
  • 14pxThe quick brown fox jumps over the lazy dog

Spacing and shape

Spacing base unit 8px
  • 8px
  • 16px
  • 24px
  • 48px
  • 88px

Symmetric margins; framed blocks.

Corner radii
  • 0px
Borders
Double gold rules and stepped corners
Shadows
None

Do and don't

Do

  • Centre the hero and frame it
  • Repeat one ornament as a border
  • Use gold for lines, not big areas

Don't

  • No rounded blobs
  • No asymmetric chaos
  • No casual handwriting

Similar styles

The styles closest to this one in mood, density, era, warmth and accent colour.