Art Deco Revival

# Art Deco Revival

## Philosophy

Art Deco Revival translates interwar luxury graphics into a contemporary product interface: ceremonial hierarchy, architectural symmetry, lacquer-dark surfaces, metallic linework, and theatrical framing. It treats interface moments like lobby entrances and ticket counters—every section is announced, bordered, and aligned with intentional grandeur rather than casual utility.

### Values

- ornament with discipline
- ceremonial hierarchy and strong axial alignment
- luxury conveyed through contrast and finish rather than clutter
- graphic geometry that feels architectural and collectible
- dramatic framing around important information

### Anti-Values

- soft casual minimalism
- blob-like organic shapes
- playful rounded consumer app tropes
- invisible structure or borderless layouts
- flat utilitarian typography without drama

### Visual Character

- all major panels sit inside double-line metallic frames with a narrow inset gap
- section titles use uppercase high-contrast serif typography with wide letterspacing and a geometric fanburst divider beneath
- cards and modals feature chamfered top corners that create a faceted marquee silhouette
- dark lacquer backgrounds are overlaid with repeating gold pinstripes and stepped sunburst geometry
- data emphasis appears in vertically stacked number blocks with thin separator rules and centered composition

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#1B1A1F` |
| secondary | `#332B2B` |
| accent | `#D4AF37` |
| background | `#0F0D12` |
| surface | `#17141C` |
| text | `#F4E9D8` |
| muted | `#B79F77` |
| border | `#8F6B2E` |
| error | `#C4544C` |
| success | `#4E8B63` |
| warning | `#C6922A` |
| info | `#5F7FA7` |

### Typography

- **Heading Font**: Cinzel Decorative
- **Body Font**: Cormorant Garamond
- **Mono Font**: IBM Plex Mono
- **Base Size**: 18px
- **Scale Ratio**: 1.25
- **Line Height**: 1.5
- **Letter Spacing**: 0.04em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap

### Spacing

- **Base**: 8px
- **Scale**: ["4px","8px","16px","24px","32px","48px","64px","96px"]

### Radii

- **None**: 0px
- **Sm**: 6px
- **Md**: 12px
- **Lg**: 20px
- **Full**: 999px

### Shadows

- **Sm**: 0 6px 18px rgba(0,0,0,0.22)
- **Md**: 0 14px 32px rgba(0,0,0,0.34)
- **Lg**: 0 24px 64px rgba(0,0,0,0.42)

### Surfaces

- **Treatment**: gradient
- **Card Style**: outlined lacquer panels with inset glow and metallic trim
- **Bg Pattern**: custom SVG

### Borders

- **Default Width**: 1px
- **Accent Width**: 3px
- **Style**: double
- **Character**: hairline outer rules paired with emphatic gold accents and inset filigree lines

### Motion

- **Duration**: 220ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: deliberate

### Responsive

- **Breakpoints**: [1200,1024,768,480]
- **Column Progression**: 12 → 8 → 4 → 1

## Rules

### Composition

Favor centered and axial compositions with strong header-to-content procession. Major regions should feel like rooms in a grand interior: marquee header, stat salon, reservation ledger, itinerary sidebar. Use nested frames to define zones instead of loose cards floating in space.

### Hierarchy

Make headlines ceremonial and uppercase, subtitles elegant and literary, and data labels restrained but aligned. Important actions should appear as framed plaques or gilded capsules. Numeric information should stack vertically and center-align before resolving into detailed tables.

### Density

Medium density with generous top and bottom breathing room, but internally precise and gridded. Decorative detail lives in rules, dividers, and framing rather than excessive copy or dense iconography.

### Signature Patterns

- every primary panel uses a double border created with an outer border plus inset box-shadow rule
- section headers carry a fanburst divider built from repeating linear-gradient rays
- cards, dialogs, and highlighted callouts use chamfered corners via clip-path polygons
- stat blocks center their values and labels in vertically stacked columns separated by metallic hairlines
- buttons and badges use stepped inline accents with small geometric corner caps rendered by pseudo-elements

## Layout

### Grid

Desktop uses a 12-column ceremonial grid with a wide central content lane and balanced side regions. The hero spans full width, metrics occupy four columns each, the ledger/table spans eight columns, and the itinerary or form rail spans four. At tablet sizes this condenses to 8 columns, then 4, then a single-column stacked procession on phone.

### Breakpoints

At 1024px reduce ornamental margins and move the side rail beneath the ledger. At 768px collapse metric panels into a two-column salon and stack header actions. At 480px all framed modules become single-column, buttons go full width, tabs scroll, and tables remain usable inside horizontal overflow wrappers.

### Whitespace

Use dramatic outer margins and tall sectional spacing to preserve grandeur. Inside components keep measured rhythm based on 8px units, with extra padding reserved for marquee areas and modal interiors.

## Guidance

### Do

- use symmetry or near-symmetry for major page regions
- frame important content with double rules and inset accents
- pair decorative display typography with refined readable serif body text
- treat alerts, modals, and forms like formal announcements rather than casual overlays
- use gold sparingly but decisively on structure, hierarchy, and focal actions

### Don't

- do not introduce soft rounded cards or pillowy neumorphism
- do not rely on bright multicolor accents that dilute the gold-on-lacquer palette
- do not left-align every element by default when a centered axis would create drama
- do not remove decorative dividers; the linework is structural, not optional
- do not use generic sans-serif display typography for headlines