Design 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

The Gilded Lantern is a fictional cocktail bar page, written for this library to show the Art decostyle. Switch the width to see it at phone, tablet and desktop size.

Open the example on its own

Copy the idea

The Art deco recipe — its principles, palette, type, spacing and rules — ready to paste into a design tool or an AI assistant.

# Art deco — style recipe

## 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 — passes AA

## Type
- Headings: Poiret One, weights 400 — Thin geometric deco face; large sizes only, uppercase
- Body: Josefin Sans, weights 400 and 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

Design in the "Art deco" style.
The idea: The glamour of the 1920s: symmetry, fans and sunbursts, tall elegant type and gold on cream and black.
It suits: Bars, hotels, theatres and events.
It suits: Premium brands with a classic story.
It suits: Celebrations and invitations.
Do not choose it when: The product is casual or for children.
Do not choose it when: The brand must feel modern and minimal.
Follow this rule: Strong central symmetry.
Follow this rule: Fan, sunburst and stepped geometric ornaments.
Follow this rule: Tall, thin, elegant display type.
Follow this rule: Gold lines framing cream and black fields.
Follow this rule: Repeated patterns at the edges, calm in the middle.
Follow this rule: Everything framed, nothing floating.
Use #f5ecd7 (Champagne) as the background colour.
Use #ece0c0 (Parchment) as the surface colour.
Use #14181f (Jet) as the text colour.
Use #4a4a40 (Smoke) as the muted colour.
Use #8a6416 (Old gold) as the accent colour.
Use #1f4d4a (Jade) as the accent-2 colour.
Use #14181f (Jet line) as the border colour.
Keep text on the background at least 4.5:1 contrast (WCAG AA); this palette gives 15.13:1.
Use Poiret One in weights 400 for headings: Thin geometric deco face; large sizes only, uppercase.
Use Josefin Sans in weights 400 and 600 for body text: Geometric, period-appropriate, readable.
Use only these type sizes: 14px, 17px, 21px, 30px, 48px, 76px.
Type: A decorative display face only for headings; a clean geometric sans for everything else.
Space things on a 8px base with the steps 8px, 16px, 24px, 48px, 88px.
Spacing: Symmetric margins; framed blocks.
Use corner radii of 0px.
Borders: Double gold rules and stepped corners.
Shadows: None.
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.
Do: Repeat one ornament as a border.
Do: Use gold for lines, not big areas.
Avoid: rounded blobs.
Avoid: asymmetric chaos.
Avoid: casual handwriting.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #f5ecd7;
  --color-surface: #ece0c0;
  --color-text: #14181f;
  --color-muted: #4a4a40;
  --color-accent: #8a6416;
  --color-accent-2: #1f4d4a;
  --color-border: #14181f;
  --font-heading: "Poiret One", sans-serif;
  --font-body: "Josefin Sans", sans-serif;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 48px;
  --space-5: 88px;
  --radius-1: 0px;
}

Download brief (.md)Download tokens (.css)

The recipe

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 — passes AA

Type

Headings: Poiret One, weights 400 — Thin geometric deco face; large sizes only, uppercase
Body: Josefin Sans, weights 400 and 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

Similar styles

Styles that share the most of Art deco's mood, density, era and warmth.

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 · 400

The quick brown fox jumps over the lazy dog

Thin geometric deco face; large sizes only, uppercase

Body · Josefin Sans · 400, 600

The quick brown fox jumps over the lazy dog

Geometric, period-appropriate, readable

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

A decorative display face only for headings; a clean geometric sans for everything else.

Spacing and shape

Spacing on a 8px base

8px
16px
24px
48px
88px

Symmetric margins; framed blocks.

Corners, borders and shadows

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

Compare with…

See Art deco side by side with another style, and what differs.

Art deco

See it live

The GildedLantern

The cocktail list

The Lantern

Velvet Hour

Jade Terrace

Midnight Fan

Evenings at the Lantern

The Quiet Quartet

Swing in the Salon

The Gold Room

Visit the salon

Copy the idea

The recipe

The idea

Use it when

Avoid it when

Principles

Colour

Type

Spacing and shape

Imagery and motion

Do

Don't

Similar styles

Palette

Type

Spacing and shape

Spacing on a 8px base

Corners, borders and shadows

Do and don't

Do

Don't

Compare with…