Deco hotel design language kit

Build brief for a coding agent. Rebuild this piece in the reader’s stack. If they haven’t said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don’t “improve” them.

What it is

A kit sheet for “The Vesper”, a fictional 1926 harbour hotel, that teaches an Art Deco dialect: ivory #F6EFE0 cells on a lacquer #0F1C18 field, 1px gold hairlines as the only divider, centred symmetry, and stepped ziggurat bars. The first row is a hotel-identity + reservation fragment: three shrinking gold steps, a 220×90 gold sunburst fan, a 56px Italiana “VESPER”, and Suite / Chamber / Salon tabs that rewrite the stay copy above a “Reserve the night” control. Below: type specimen, five chips, three button treatments, harbour chips, an arrival field, a late-dining switch, three surface plates, four grammar cards. The detail worth copying: everything is centred and hairline. No drop shadows. No radii. Burgundy #8B2A32 is a selected-chip colour, not a second gold.

Reference behaviour

1. Initial state: 64px ivory header, three-column grid (nav | brand | nav). Brand is Italiana 22px, tracking +0.28em, with “EST. 1926 · KIT 05” in 9px gold Josefin. Sheet gap is 1px gold. First 800px shows the 420px hero + specimen.
2. Hero is text-align center. Three gold bars at the top: 420×8, 360×8, 300×8, stacked 12px apart, each left: 50%; transform: translateX(-50%). A stroke-only sunburst SVG sits at top: 48px.
3. Hover a solid button: fill and border become gold, text becomes lacquer, 180ms. Ghost inverts to lacquer fill. Gold outline fills gold.
4. Click Suite / Chamber / Salon. aria-selected moves; the selected tab is lacquer fill, ivory text. Copy swaps: harbour suites; corner chambers on the sixth floor; salon for a night.
5. Click Harbour / Garden / Roof chips: pressed state is burgundy fill, ivory text.
6. Focus the arrival input: the 1px bottom rule becomes solid gold with a 1px gold follow-shadow (box-shadow: 0 1px 0 var(--gold)). Type is Italiana 18px.
7. Click Late dining: aria-checked flips; track fills lacquer; gold knob slides 22px over 240ms.
8. Header link hover: lacquer text + 1px gold underline.
9. Reduced motion: transitions 1ms.

Structure

1280 × 800 first frame
┌──────────────────────────────────────────────────────────────────────────────┐
│ TYPE  COLOUR              VESPER / EST. 1926              CONTROLS  SURFACE  │ 64
├───────────────────────────────────────────────┬──────────────────────────────┤
│ ═══ stepped gold (420 / 360 / 300) ═══        │ 01 TYPE SPECIMEN             │
│           (fan 220×90)                        │ Aa (92px Italiana)           │
│ THE VESPER · HARBOUR ROOMS                    │ Display 56 / H2 24 / Body 14 │
│          VESPER (56px, +0.12em)               │                              │
│ [Suite | Chamber | Salon]                     │                              │
│      [Reserve the night]          cols 1–7    │ cols 8–12 · 420h             │
├───────────┬───────────┬───────────┬──────────────────────────────────────────┤
│02 PALETTE │03 BUTTONS │04 INPUTS  │05 SURFACE                                │
│ 5 chips   │ 3 btns    │ arrival   │ Stepped gold / Lacquer / Burgundy        │
│           │ 3 chips   │ link + sw │                                          │
├───────────┴───────────┴───────────┴──────────────────────────────────────────┤
│ Hairline · Step · Fan · Symmetry                                             │
└──────────────────────────────────────────────────────────────────────────────┘

• Header: grid-template-columns: 1fr auto 1fr. Left nav Type + Colour; right nav Controls + Surface.
• Grid gap: 1px; background: var(--gold) so every cell boundary is a gold hairline.
• Labels use a gold hairline on both sides of the title (flex + ::before / ::after).
• Footer is lacquer with gold 10px/600 Josefin, tracking +0.16em.
• Tabs sit in .tabs as inline-flex (not a full-width bar) so the Suite / Chamber / Salon lockup is a centred jewel, not a stretched track.
• Copy block is top: 148px so it clears the 90px fan. The reservation button sits in .reserve with justify-content: center; gap: 10px.
• Josefin Sans sits low in its em; add padding-top: 2px on the brand subtitle and on any Josefin string vertically centred against Italiana.

Tokens

:root {
  --ivory: #f6efe0;          /* paper, 60 % */
  --ivory-2: #ebe1cc;        /* inner rules */
  --lacquer: #0f1c18;        /* ink / field, 25 % */
  --gold: #c4a35a;           /* hairline, 10 % */
  --gold-line: rgba(196,163,90,.45);
  --burgundy: #8b2a32;       /* selected chip only */
  --ink-2: #4a5648;
  --display: "Italiana", Didot, serif;
  --text: "Josefin Sans", system-ui, sans-serif;
  --fs-display: 56px; --fs-aa: 92px; --fs-h2: 24px; --fs-body: 14px; --fs-label: 11px;
  --hair: 1px; --pad: 20px; --ctl: 44px; --radius: 0;
  --t-micro: 180ms; --t-line: 320ms; --t-switch: 240ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

Typography

Role	Family	Size	Weight	Line-height	Tracking	Case
Hero headline	Italiana	56px	400	.95	+0.12em	UPPERCASE
Specimen glyph	Italiana	92px	400	.8	+0.04em	“Aa”
Brand	Italiana	22px	400	1	+0.28em	UPPERCASE
Grammar title	Italiana	16px	400	1	+0.1em	UPPERCASE
Input value	Italiana	18px	400	1	+0.08em	as typed
Button / tab	Josefin Sans	11–12px	600	1	+0.14–0.18em	UPPERCASE
Body	Josefin Sans	14px	400	1.5	0	sentence
Label / eyebrow	Josefin Sans	10–11px	600	1	+0.2–0.22em	UPPERCASE, gold

Italiana is 400 only and sits high in the em. Add 2–4px optical padding when vertically centering it (brand subtitle is Josefin, which sits low — they will not share a baseline).

Motion

Element	Trigger	Property	From → To	Duration	Easing
.btn	hover	background, color, border	lacquer/ivory → gold/lacquer	180ms	--ease
switch knob	toggle	translateX	0 → 22px	240ms	--ease
input focus	focus	border-color, box-shadow	gold-line → gold + 1px follow	180ms	--ease
tab selected	click	background, color	transparent/ink-2 → lacquer/ivory	instant	—

No looping motion. The fan and steps are static. Reduced motion: 1ms transitions.

States

• Button rest: 44px, 1px lacquer, 0 radius, uppercase Josefin 12px / +0.14em. Solid lacquer/ivory. Ghost transparent/lacquer. Gold: gold hairline, gold text.
• Hover: gold fill, lacquer text (solid and gold); ghost becomes lacquer/ivory.
• Tab selected: lacquer fill, ivory text, inside a 1px gold bar. Unselected: transparent, --ink-2.
• Chip pressed: burgundy, ivory text. Unpressed: gold hairline, --ink-2.
• Input: no box, 1px gold-line bottom. Focus: gold + 1px follow.
• Switch on: lacquer track, gold knob at right.
• Focus-visible: 1px gold, offset 4px (the extra offset is the “jewellery” of the language).

Accessibility

• Two header navs: “Kit sections” (Type, Colour) and “Kit more” (Controls, Surface). Hero labelled “Composition: hotel identity and reservation”. Room group is a tablist.
• Steps and fan are aria-hidden="true".
• Switch labelled “Late dining”. Chips aria-pressed.
• Contrast: lacquer on ivory 14.6:1; ivory on lacquer 14.6:1; gold on ivory 2.4:1 — gold is lines and 11px/600 labels only, never body. --ink-2 on ivory 6.2:1. Ivory on burgundy 8.1:1.
• Hit targets: buttons 44px; tabs 36px tall, full bar; switch label is the hit area.

Responsive rules

• ≥ 1280: as drawn.
• 700–1100: hero and specimen span 12; headline 42px; header side navs hide; components and grammar span 6.
• < 700: every cell spans 12; hero 480px.
• Applying the language: keep 0 radius. A 4px round “to soften” destroys Deco. Keep the name centred even in a sidebar product — lock a centred lockup, do not left-align Italiana headlines.

Acceptance checklist

• Cells are ivory on a lacquer field; every region boundary is a 1px gold gap, not a cell border.
• No border-radius on any control. No drop shadows.
• Hero headline is Italiana 56px, uppercase, tracking +0.12em, centred.
• Three stepped gold bars (420, 360, 300 × 8px) sit at the top of the hero, centred.
• A stroke-only gold sunburst (220×90, 1.2px) sits above the name.
• Suite / Chamber / Salon tabs rewrite the stay paragraph and set aria-selected.
• Arrival input is Italiana 18px with a 1px gold underline that thickens on focus.
• Pressed chips are burgundy #8B2A32, not gold fills.
• Focus-visible is 1px gold, 4px offset.
• Late-dining switch slides 22px and sets aria-checked.
• Only Italiana and Josefin Sans are loaded.
• Gold is never used as body text.

Implementation notes

Hairlines from the grid gap, same trick as a dark-rule sheet, but the gap colour is gold:

.sheet { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; background: var(--gold); }
.cell { background: var(--ivory); padding: 20px; }

Stepped ziggurat is three centred bars, not a clip-path:

.step { position: absolute; left: 50%; transform: translateX(-50%); background: var(--gold); height: 8px; }
.step.s1 { width: 420px; top: 0; }
.step.s2 { width: 360px; top: 12px; }
.step.s3 { width: 300px; top: 24px; }

Buttons invert through gold, they do not lift:

.btn {
  height: 44px; padding: 0 20px; border: 1px solid var(--lacquer);
  background: var(--lacquer); color: var(--ivory);
  font: 600 12px var(--text); letter-spacing: .14em; text-transform: uppercase;
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--lacquer); }

Common mistakes: using Cormorant or another text serif instead of Italiana (the wide tracking is the point); filling the sunburst; putting burgundy on the primary button; adding a soft gold gradient (the gold is a flat #C4A35A hairline, not champagne metal); left-aligning the hotel name.