Applying an Art Deco visual direction

You are applying Art Deco to a boutique design-hotel site. Preserve a useful hospitality story—rooms, an experience, and booking-oriented information—while making symmetry, exact geometry, and machine-age luxury visible.

What “Art Deco” means here

Art Deco is decorative precision: a vertical axis, stepped forms, fans and rays, paired rules, restrained brass, and formal display typography over a deep ground. Every arc is constructed and every angle is intentional. It is not floral Art Nouveau, and it is not black-and-gold decoration without structure.

Recommendations

• Center the masthead and hero, then mirror the major content blocks around the axis.
• Use one bounded motif kit: stepped frame, fan/rays, and paired rules are enough.
• Keep brass or gold to rules, highlights, and small geometry; use a deep navy, oxblood, forest, or near-black ground.
• Set display titles in an uppercase condensed face with generous tracking; keep body, dates, room details, and booking furniture readable.
• Make the specimen’s hotel, rooms, dates, amenities, and prices explicitly illustrative rather than real availability.
• Preserve the task path: the primary booking-oriented label remains easy to find even when ornament is simplified.

Avoid

• Organic floral ornament, freehand curves, or arbitrary angles.
• Metallic color spread across the whole surface or used as the only text contrast.
• A pale ground, single casual divider, or a left-aligned layout that loses the axial structure.
• Decorative motifs that cover room details, dates, prices, or action labels.
• Claims about a real hotel, room, availability, rate, or historical source.

A working order

1. State the hospitality job and list the information the visitor needs.
2. Build the centered masthead, vertical hero, room/experience index, and booking note.
3. Choose a deep ground and a high-contrast readable body color.
4. Add a single stepped or radiating motif as structural framing.
5. Introduce paired rules and a restrained brass accent.
6. Set only display typography in the formal condensed voice.
7. Re-measure the metallic area after reflow.
8. Simplify motifs and stack the content with container queries at narrow widths.
9. Check that no ornament interrupts the information path.

How to check your own work

Fold the specimen down its vertical center and compare the major regions. Confirm that the motif uses exact geometry, that brass is an accent rather than wallpaper, and that every paired rule marks a real division. Read the room details and booking information without relying on color or ornament. Verify that narrow layouts remain centered, readable, and free of clipped copy.

Art Deco — Specification

Definition

Art Deco is a web-interface style built on strict axial symmetry and exact geometry: stepped and radiating motifs, restrained metallic accents over a deep ground, formal display capitals, and grouped rules. In this specimen it frames a synthetic boutique-hotel experience so ornament and hospitality information share one precise hierarchy.

Core principles

• Symmetry is the structure. Major regions mirror around a vertical axis.
• Ornament is constructed. Steps, fans, rays, and arcs are exact geometry, never freehand filler.
• Metal stays precious. Brass is a small accent for rules and highlights.
• Depth supports contrast. A dark ground lets the metallic note read without carrying text legibility.
• Hospitality remains clear. Rooms, dates, amenities, and booking-oriented information stay findable.
• Synthetic content is explicit. The hotel and availability furniture are illustrative, not real claims.

Visual characteristics

• Centered masthead and vertical hero with mirrored information blocks.
• Deep navy ground, brass rules, and a small stepped fan motif.
• Uppercase condensed display type with controlled tracking.
• Paired or triple rules framing real divisions.
• Exact rays, stepped geometry, and clean circle sections.

Rules

1. Strict axial symmetry. The hospitality composition mirrors. Acceptance criterion: The masthead, hero motif, room index, and booking note share a visible vertical center axis at every breakpoint.
2. Structural geometric motif. Ornament organizes information. Acceptance criterion: A stepped frame or radiating fan directly frames or aligns the hero and does not float as unrelated decoration.
3. Restrained brass. Metallic material remains valuable. Acceptance criterion: Brass is confined to rules, rays, and small highlights, occupies no more than 15% of the rendered specimen, and sits over a deep ground.
4. Formal display voice. Typography carries the period reference. Acceptance criterion: Display headings are uppercase, use the project’s condensed artifact face, and have computed tracking of at least 0.05em; body copy stays readable.
5. Grouped rules. Divisions use inlay-like rhythm. Acceptance criterion: At least two real regions are separated or framed by parallel groups of two or three 1–2px rules, not single casual dividers.
6. Exact geometry. Construction is repeatable. Acceptance criterion: All rays use documented 15° increments and all curved motifs are circle sections or CSS border-radius constructions.
7. Information over ornament. Luxury does not hide the hotel job. Acceptance criterion: Room details, illustrative dates, amenities, and the booking-oriented label remain legible without relying on brass or ornament for meaning.

Avoid

• Organic floral ornament, freehand marks, arbitrary angles, or Art Nouveau substitution.
• Black-and-gold shorthand without symmetry and structural geometry.
• Metallic surfaces large enough to become wallpaper or a contrast dependency.
• Decorative frames crossing room details, dates, prices, or action labels.
• Claims about a real hotel, room, availability, rate, or historical provenance.

Acceptance criteria

• Major site regions mirror on a vertical axis.
• A stepped or radiating motif organizes the hero.
• Brass remains a small accent over a deep ground.
• Display headlines are uppercase, condensed, and letterspaced.
• Paired or triple rules mark real divisions.
• Curves and angles use exact constructions.
• Hospitality information remains readable without ornament.

Blocking failures

• Ornament interrupts or obscures the room, date, amenity, or booking information.
• Metallic treatment creates a contrast failure at one of its light or dark extremes.
• Responsive reflow destroys the central axis or clips a heading and is presented as decoration.

Responsive adaptation guidance

• Keep content centered as regions stack; reduce motif steps and rays rather than shrinking them into illegibility.
• Re-measure the 15% brass budget after reflow because fixed ornaments occupy more of a narrow specimen.
• Preserve paired-rule divisions, display tracking at or above 0.05em, and readable body copy at every container width.
• Render the hospitality path as synthetic specimen furniture only; the site should not become a real booking flow.