ArtDeco
PaletteComponentsAnimationsGalleryPhilosophy
←StyleKit
1920 — 1939 — The Golden Era

Art
Deco

Geometric symmetry, golden ornament, and high-contrast luxury. The design language of the Machine Age — timeless and precise.

1920s
Originated
45+
Pattern Types
Gold
Primary Palette
Serif
Typography
Color System

The Golden Palette

Five tones drawn from Chryselephantine sculpture and lacquered brass. Every shade earns its place through restraint and contrast.

Deco Gold
#d4af37
Primary
Midnight Navy
#1a1a2e
Background
Deep Slate
#2d2d44
Secondary
Antique Gold
#c9a227
Accent
Ivory Cream
#f5f5dc
Surface

Gradient combinations

Gold to Night
Night to Gold
Antique to Slate
Cream to Gold
Components

Building Blocks

Every element is governed by symmetry, serif type, and gold as the sole accent. No component escapes the geometric grid.

Primary — Golden Shimmer gradient sweep

Ghost & Outline variants

Size variants

Interaction Design

Animation & Interaction Rules

Four named axioms govern every transition in Art Deco. Hover or interact with each demo below to feel the difference.

Elegant & Slow

duration-500 / duration-700
cubic-bezier(0.16,1,0.3,1)
No abrupt bounces — noble pacing

Hover to feel the slow, considered lift

Golden Shimmer

bg-[length:200%_auto]
hover:bg-right — gradient slides
Simulates metallic light sweep

Hover to trigger the metallic sweep

Symmetrical Expansion

group-hover:{-translate-x, -translate-y}
group-hover:{translate-x, translate-y}
Corners expand symmetrically outward

ELEGANCE

Hover the card to see symmetric expansion

Subtle Lift

hover:-translate-y-0.5
hover:shadow-[0_0_30px_rgba(212,175,55,0.4)]
Gold halo expands on hover

Hover to see the subtle lift with gold halo

App Demo

The Grand Hotel

A luxury hotel reservation interface rendered in full Art Deco discipline. Symmetric layout, gold accents, and serif type throughout.

Standard Chamber

45 m²

$420
per night
  • King Bed
  • City View
  • Minibar

Deluxe Suite

85 m²

$890
per night
  • King Bed
  • Terrace
  • Butler
  • Lounge

Grand Penthouse

240 m²

$2400
per night
  • Master Suite
  • Panorama
  • Private Pool
  • Chef
Decorative System

Geometric Ornament

Sunburst radials, corner brackets, gradient dividers, and diamond separators form the decorative vocabulary of Art Deco.

Sunburst Radial

Rotating gradient lines from a central ornament. Used as hero backgrounds and section dividers.

Hover

Corner Brackets

Four-corner accent lines that expand symmetrically. Hover the box above to see the Symmetrical Expansion rule.

Gold Dividers

Gradient lines fading to transparent, with optional diamond separators for section breaks.

Typography Specimen

Aa
Playfair Display — Primary Serif
Geometry and ornament are not mutually exclusive — the greatest Art Deco architects proved that mathematical precision could coexist with decorative luxury. Every letterform is chosen for its dignity and weight.
DISPLAY
tracking-[0.15em]
HEADING
tracking-[0.3em]
BODY
tracking-wider
Philosophy

Design Principles

Three governing axioms. Adherence to all three is mandatory. Deviation produces pastiche, not Art Deco.

I

Geometric Symmetry

Balance is non-negotiable

Every layout element has a mirror. Radial patterns, paired columns, centered typography. Asymmetry is an error, not a choice.

  • Centered text on hero/section headers
  • Paired column grids
  • Radial and reflective decorations
II

Gold & Dark Contrast

High contrast, high luxury

Deep navy or slate backgrounds only. Gold (#d4af37) as the sole accent. Cream (#f5f5dc) for surface-level text contrast.

  • bg-slate-900, bg-slate-800 mandatory
  • text-yellow-500 border-yellow-500 for accents
  • No bright or saturated hues
III

Elegant Motion

Unhurried, noble, precise

Transitions take 500-700ms. cubic-bezier(0.16,1,0.3,1) — a controlled deceleration. No spring overshoots, no bounces.

  • duration-500 or duration-700 only
  • cubic-bezier(0.16,1,0.3,1) everywhere
  • hover:-translate-y-0.5 max lift

Do

  • Gold (#d4af37) as the only accent color
  • Deep navy/slate as the background base
  • Serif typefaces — font-serif, tracking-wider
  • Symmetric, centered layouts
  • Corner bracket decorations on containers
  • Gradient dividers fading to transparent
  • duration-700 with cubic-bezier(0.16,1,0.3,1)
  • hover:-translate-y-0.5 for the Subtle Lift
  • Geometric patterns: sunburst, chevron, diamond

Don't

  • No vivid neon or saturated modern colors
  • No asymmetric or chaotic layouts
  • No sans-serif fonts as primary typefaces
  • No rounded corners — geometry is angular
  • No spring bounce (cubic-bezier(0.34,1.56,...))
  • No omission of decorative border elements
  • No short transition durations under 300ms
  • No full-color flat fills without gold involvement
  • No light backgrounds — this style is nocturnal
Features

Crafted With Precision

Six defining characteristics that ensure every page rendered in Art Deco speaks the same disciplined visual language.

01

Gold as Singular Accent

One accent color. #d4af37 and its warm derivatives. Nothing competes with gold.

02

Nocturnal Palette

Deep navy and slate backgrounds. Darkness amplifies the luminosity of gold.

03

Geometric Discipline

Every shape is rectangular, trapezoidal, or radially symmetrical. Organics are forbidden.

04

Serif Typography

Font-serif throughout. Wide letter-spacing (tracking-[0.3em]) for a monumental scale.

05

Deliberate Motion

Long durations (500-700ms), controlled easing. Elegance is measured by restraint.

06

Ornamental Detail

Corner brackets, radial lines, gradient dividers. Every container is decorated at its edges.

Art Deco

The design language of the Machine Age — geometric, symmetrical, and uncompromisingly luxurious. 1920-1939.

StyleDocumentationShowcaseCover
StyleKitHomeAll Styles
PaletteDeco GoldMidnight NavyDeep SlateAntique GoldIvory Cream
Crafted for StyleKit
←Back to StyleKit