The Colophon
The Deco Aviary
How this hotel was designed & built — a tour behind the gold leaf.
← Return to the HôtelRoom I
Concept & Inspiration
GILDED imagines Nomadic Owls as a 1920s grand hotel of craft: emerald-noir walls, gold linework, champagne light. The references are the great Art-Deco lobbies — the Chrysler Building's elevator doors, Parisian hotel signage, Cassandre's poster geometry — and the owl itself becomes heraldry: an emblem built strictly from the deco vocabulary of sunburst fans, chevrons, stepped curves and diamonds.
Of the ten directions, this is the only strictly symmetric one. Everything folds around a centre line: the navigation spreads from a monogram, sections open with mirrored rules, services check in as numbered suites, projects sign a ledger, and the contact card is a gilded invitation. Motion is deliberately unhurried — light moving across metal, lines being inlaid — nothing bounces in a grand hotel.
Room II
Palette & Type
Emerald Noir
#06231e
the ground — velvet dark of the lobby at midnight
Deep Teal
#0d3a32
panelling — every framed card and ledger
Gold Leaf
#c9a227
every line of ornament, numeral and rule
Champagne Shimmer
#f0d98c
the highlight the shimmer sweeps through
Champagne
#f3e9d2
body text — warm light on warm stone
Poiret One — display
Nomadic Owls
Geometric deco display for the brand, headings, numerals and ledger names. All caps, tracked wide.
Marcellus — engraved serif
We have ideas — and send them to the Internet.
Body text and mottoes; an inscription face with roman proportions, set warm champagne on emerald.
Josefin Sans — small capitals
Suite Nº IV · Grand Hôtel of Craft · R.S.V.P.
Every label, wayfinding line and rubric — uppercase, letter-spaced 0.3–0.42em like brass plate engraving.
Room III
Techniques
The owl is computed, not drawn
Every coordinate of the emblem is generated in Astro frontmatter — ray fans, eye ticks and chest chevrons come from small loops over angles and radii. The left half (tuft, eye, wing, foot) lives in one <g id="owl-half">; a single <use> with transform="translate(440 0) scale(-1 1)" mirrors it, so the symmetry is mathematical, not eyeballed.
Self-drawing linework without measuring paths
Each stroke carries pathLength="1", so stroke-dasharray: 1 / stroke-dashoffset: 1 normalises every circle, polyline and path to the same unit length. One @keyframes draw animates dashoffset to 0; a --d custom property staggers ~80 elements into a 3.5-second choreography — no getTotalLength(), no JavaScript.
Gold shimmer as background position
Gilded text is a 230%-wide gradient (dark gold → gold → champagne → gold → dark gold) clipped to the glyphs with background-clip: text. Hovering a suite or registry row animates background-position across the whole span — light passing over gold leaf. The hero title runs the same sweep slowly, forever.
Frames that draw themselves in
Every panel owns a ::before inset border that starts at scale(.94) and opacity 0. A 20-line IntersectionObserver adds a single .in class; CSS transitions do the rest — the inner rule appears to be inlaid as you scroll to it.
A parametric ornament kit
Corner filigree (double bracket, quarter arc, diamond terminal) is one SVG path rendered four times and mirrored per corner with CSS transforms. Sunburst dividers are loops over 12° steps with alternating ray lengths. Same vocabulary everywhere: diamond, ray, double rule.
Reduced motion, still gilded
prefers-reduced-motion (media query and matchMedia both) removes the draw-on, the rotating halo and every shimmer; gradients collapse to flat gold and all reveals render visible. The reduced page is the finished hotel, simply not filmed in motion.
No raster assets · every visual is hand-built SVG & CSS · no Higgsfield prompts were needed
Room IV
Three Passes of Polish
Pass One
Reviewed the first full build at five scroll depths, mobile and guide. Found the corner filigree colliding with the "Suites" and "Invitation" nav links on narrow phones and restacked the nav into three centred rows below 480px. Hardened the hero to 100dvh so mobile browser chrome cannot miscalculate its height. Complexified: gold-shimmer hover parity for the pillar cards and a hover glow + halo speed-up for the owl emblem itself, which previously had no response to touch.
Pass Two
Found the "Shoot an Offer" invitation button wrapping to two misaligned lines under 480px and tightened its tracking and padding to hold one line. Audited every text/background pairing for contrast; the quiet "By appointment" label measured 3.1:1 and was raised to 4.8:1. Verified prefers-reduced-motion renders a fully static, fully gilded page and that keyboard focus rings are visible on every interactive element.
Pass Three
Nitpick sweep across tablet and mobile widths, tile by tile, plus a final zero-console-error build and guide-route check on both routes.