A · 1 / 26

A — Art Deco

Gilt geometry from the age of the skyscraper.

The style

Modern, and dressed for the evening.

In 1925 Paris held the Exposition internationale des Arts décoratifs et industriels modernes, and the style on show there later took its name from it; the short form was coined only in the 1960s. It borrowed from everywhere at once: the broken planes of Cubism, the stepped temples of Mesopotamia and Mexico, and Egypt, fashionable again after Tutankhamun’s tomb was found in 1922.

In New York it went upward. The 1916 zoning law made tall buildings step back as they rose, and architects turned the setbacks into ornament. William Van Alen’s Chrysler Building, finished in 1930, ends in a crown of stepped stainless-steel arches pierced by triangular windows. The Empire State Building followed in 1931.

The grammar is consistent: symmetry, terraces, sunbursts, chevrons, and costly materials (lacquer, chrome, gold leaf) used with precision. It suits a page that should feel like an occasion: an invitation, a menu, a hotel, a theatre.

In use

A box office for opening night.

A Broadway house in 1930: pick a performance, choose seats on a plan that steps out from the stage, and hold the ticket. The programme runs from the curtain time you choose.

Arrow keys move around the plan; Enter takes a seat.

The Meridian Theatre · Box officeWindow two
Now playing

The Gilded Hour

A revue in two acts, with the Meridian orchestra
Orchestra · $3.30
Mezzanine · $2.75
Balcony · $1.65
The pleasure of your company

The Gilt Room

An evening of jazz on the thirtieth floor. Friday at nine, black tie.

  1. One axisThe stage, the title and the plan share a centre line; the ticket is symmetrical about its own.
  2. Gold means “yours”Your seats, the chosen performance, the total and the one button that books. Everything else is ivory.
  3. Stepped, never roundedFrames cut their corners in two steps; the plan steps out from the stage in tiers.
  4. The same system, printedThe invitation uses the frame, the type and the gilt button at a different size, and holds together.
The kit

Every part, in evening dress.

The parts that box office is built from, in every state. The rows of states hold still for comparison; everything else works.

Button

One gilt button per screen; disabled loses the gilt

Text field

A ruled line to write on, as on a printed form

Select

The chosen line turns gold and takes the lozenge

Switch, checkbox, radio

Programme by post
Coat check
Seating
Square, diamond, slot: on is always gold

Slider

A gold rule with a lozenge riding it, steps marked

Progress

Seats sold tonight68%
68%The same, as a floor dial
Loading the seating plan

Segments and tabs

A rooftop, a rumour and a borrowed tuxedo. Fifty minutes.

Pressed fills gold; the open tab is ruled

List rows

Supper after the show
Dotted leaders carry the eye to the price

Card and loading

Box fourMezzanine, stage left
Seats
4
Each
$3.30
Status
Open
Loading box five
Loading: blank bars that breathe, no spinner

Toast

Seats held ten minutes. Stop.
A telegram strip: caps, ivory, read out politely

Modal

A double-stepped frame; the page behind dims

Steps

  1. ISeats, done
  2. IISupper
  3. IIIDetails
  4. IVTickets
Roman numerals in diamonds; done is filled

Badges and avatars

  • Black tie
  • Premiere
  • Sold out
Tickets3
  • VAarrived
  • CR
  • ES
  • +4
Monograms in a double gold ring
Signature

Make a sunburst.

The style’s favourite figure, as a tool. Set the rays, the steps in the sun and the inks, and take the tile away as SVG.

The dial in the corner is a lobby’s floor indicator: it is this page’s scroll progress, from L to 9.

Shape
Inks
Download

The tile: A fan of 24 rays, 3 steps, gold on black.
One tile, 240 × 240
Repeated
Fans repeat into a scallop wall; full suns into a lobby floor
Tokens

The system, in numbers.

Nine colours, two typefaces in four roles, three rule weights, a stepped corner and a spacing scale. Copy them as custom properties.

Palette
  • --black · #0e0e0cThe ground, everywhere
  • --gold · #c9a54cDisplay, rules, the one button, 8.3:1
  • --gold-light · #e6d39bThe lit top of the gilt
  • --gold-deep · #9a7c33The shaded foot; pressed
  • --ivory · #f2ead3Reading text, 16.1:1
  • --ivory-2 · #b5ad98Labels and notes, 8.7:1
  • --jade · #1f4d45The one other ground
  • --ruby · #e07a5fErrors and sold seats, 6.6:1
  • --off · #5e5440Disabled, 2.6:1 on purpose
Typefaces · Poiret One, Josefin Sans
  • Gilt geometryDisplay · Poiret One 400 · 44–108px
  • The Grand SalonCaps · Josefin Sans 600 · 14px · +3px
  • Set in the age of the skyscraper.Text · Josefin Sans 300 · 17–22px · 1.6
  • Orchestra · Row CLabel · Josefin Sans 400 · 12px · +2px
Rules
  • Hairline, 1px · Frames, rays, dividers
  • Rule, 2px · Focus, the chosen tab
  • Inlay, 4px · The gilt button’s inner line
Stepped corner
  • 6px
  • 10px
  • 14px
Radius is always 0. Corners step; they never round.
Spacing
  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
  • 72
:root {
  --black: #0e0e0c;
  --gold: #c9a54c;
  --gold-light: #e6d39b;
  --gold-deep: #9a7c33;
  --ivory: #f2ead3;
  --ivory-2: #b5ad98;
  --jade: #1f4d45;
  --ruby: #e07a5f;
  --off: #5e5440;

  --font-display: 'Poiret One', serif;
  --font-text: 'Josefin Sans', sans-serif;
  --caps: 600 14px/1 var(--font-text); /* + letter-spacing: 3px; uppercase */

  /* The gilt: lit top, gold, shaded foot, a black inlay 3px in. */
  --gilt: linear-gradient(180deg, var(--gold-light), var(--gold) 48%, var(--gold-deep));
  --gilt-inlay: inset 0 0 0 3px var(--gold), inset 0 0 0 4px var(--black);

  /* Rules: hairline for frames, 2px for focus and the chosen tab. */
  --hairline: 1px solid var(--gold);
  --rule: 2px solid var(--gold);

  /* The stepped frame's corner; nest two for the double frame. */
  --step: 14px;
  --step-sm: 10px;
  --radius: 0;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

Do

  • Build on one axis. Symmetry is the first ornament.
  • Step, fan and point: setbacks, sunbursts and chevrons, not soft corners.
  • Keep gold for display, rules and the one button that matters. Set reading text in ivory.
  • Save the gilt for an occasion. A whole site of it turns to costume.

Don’t

  • Gilt on everything

    Six gold buttons. When everything is gilt, nothing is the occasion.

  • Gold text on jade

    4.1:1, under the 4.5:1 reading text needs. Set it in ivory, 7.9:1.

  • Off the axis

    Deco is built on a centre line. Off it, the ornament looks dropped, not placed.

In the wild

Where the style shows up outside this page.

  1. Chrysler Building

    William Van Alen · 1930The steel crown: sunburst arches stacked to a point, each pierced with triangular windows.

  2. Normandie

    A. M. Cassandre · 1935A liner’s bow from the waterline, cut down to a few hard shapes and one smooth gradient.

  3. Hoover Building, Perivale

    Wallis, Gilbert and Partners · 1933A strict symmetrical front, picked out in coloured faience round the doors.

  4. The Great Gatsby

    Baz Luhrmann, Catherine Martin · 2013The style replayed at full volume: gold linework, fans and frames on every title.