Templatorium
Shop

Nocturne

The hotel site where a split-flap arrivals board clacks you into your room.

$69

Live preview →

templatorium-demos.pages.dev Nocturne — home page at desktop width
templatorium-demos.pages.dev Nocturne — tablet view
Live preview

Yours for unlimited own projects; one license per client build. The license, in plain English.

Make it yours (+$49) →

Short on time? Send us your brand, logo and copy and we'll build your version — a real human, not a form.

What's inside
  • FILES hand-written HTML pages + one CSS file per concern
  • DEPENDENCIES none — vanilla JS only where it earns its place
  • BUILD none — open index.html
  • FONTS vendored woff2, free-for-commercial, zero CDN calls
  • DOCS buyer README + re-theme variable guide
  • LICENSE LICENSE.txt in the zip, plain English
Specs
License

Unlimited websites for yourself or your business; one client build per license; no resale or redistribution of the template itself. The whole license, in plain English.

Why this exists

Nocturne is a six-page site for a design-forward boutique hotel — a jewel-box city stay that opens at dusk — built as one committed idea: the booking apparatus IS an arrivals board. The ground is a deep aubergine concourse the shelf has never used (no beige, no white minimalism, no dark cinematic hero-video with a date-picker stapled on top), and a hand-authored Solari split-flap board clacks the property name, the room availability and tonight's service into place character by character. You don't fill in a form, you read the board. The type is an Art-Deco register no other template carries: Limelight, a geometric poster face used large and all-caps for the marquee and the flap glyphs, over General Sans for the concourse UI, with Fragment Mono reserved strictly for machine data — rates, room numbers, m², times and coordinates. The booking rail is styled as the arrivals desk, and it is a real split-booking pattern: the one amber Check-availability button links out to whatever engine you already run (SynXis, Mews, Cloudbeds, Little Hotelier, Airbnb) via a single editable URL, and a native Request-to-book form is the fallback for buyers with no engine. The rooms index filters by guests, bed and view on pure CSS :has() with zero JavaScript, the guests panel uses the native Popover API, and the whole board degrades all the way down: with JavaScript off every board is plain resting text and every price and status is present, and reduced-motion snaps the flaps straight to their final text. It is designed to look finished with no photos at all — every image region is a designed Art-Deco neon-sign empty-state that retires the moment you drop in a real photo. Every colour pair is computed to WCAG 2.2 AA (body bone 13.9:1 on the plum, the tightest pair 5.3:1, the amber buy-button 9.3:1), the motion is our own hand-written Web Animations code with one MIT smooth-scroll library (Lenis) and nothing else — no GSAP, no paid libraries — and all three typefaces are vendored so nothing ever loads from a font CDN.

Inspection facts

Per template

Checks 42 0 exceptions
  • MECH-05 · works on a phone — no overflow at 375px PASS
  • A11Y-01 · contrast passes the law — computed, not eyeballed PASS
  • MECH-01 · zero broken links PASS
  • PKG-05 · readable with JavaScript switched off PASS
  • PKG-02 · buyer docs included and current PASS

+37 more — every one public

Certified 2026-07-22
registry v2026-07-17

TEMPLATORIUM • QUALITY GATED • 42 CHECKS

42 checks · Nocturne passed 2026-07-22

The inspection, in full.

  • MECH-05 · works on a phone — no overflow at 375px PASS
  • A11Y-01 · contrast passes the law — computed, not eyeballed PASS
  • MECH-01 · zero broken links PASS
  • PKG-05 · readable with JavaScript switched off PASS
  • PKG-02 · buyer docs included and current PASS
  • A11Y-02 · visible focus on every ground PASS
  • MECH-04 · zero serious axe-core violations PASS
  • PROV-01 · zero leftover client strings in shipped code PASS
Show all 42
  • DES-01 · One signature moment, named explicitly in the DESIGN.md PASS
  • DES-02 · Real type contrast: display face distinct from body with a genuine jump PASS
  • DES-03 · Intentional asymmetry / broken grid somewhere PASS
  • DES-04 · One restrained accent color, used under 5%, no rainbow PASS
  • DES-05 · An editorial detail that reads art-directed PASS
  • DES-06 · Opinionated copy: specific and tight, no 'Welcome to' PASS
  • DES-07 · Imagery art-directed, not boxed; slot specs, never faked before/afters PASS
  • A11Y-01 · Body text meets WCAG AA contrast, computed per ground PASS
  • A11Y-02 · Visible focus states on every ground, including full scroll range under fixed chrome PASS
  • A11Y-03 · Sticky navs paired with [id] scroll-margin-top PASS
  • A11Y-04 · prefers-reduced-motion honored PASS
  • A11Y-05 · Semantic HTML structure (landmarks, heading order) PASS
  • A11Y-06 · Texture/grain overlays keep >=0.3 contrast headroom near any floor (rendered-pixel check) PASS
  • COH-01 · Hero is trustworthy and on-system first PASS
  • COH-02 · Spacing rhythm consistent across sections PASS
  • COH-03 · Buttons get identical treatment everywhere PASS
  • COH-04 · Surfaces, shadows, borders behave the same way throughout PASS
  • COH-05 · CTA visually connected to the hero system PASS
  • COH-06 · Motion supports the page, never distracts PASS
  • COH-07 · Every section shares the same visual DNA PASS
  • DIV-01 · No two library designs share layout system + color story PASS
  • DIV-02 · Latent default test named and demonstrated; breaks at least one house habit PASS
  • DIV-03 · Appropriate to the industry: different but never wrong PASS
  • MECH-01 · Zero broken internal links PASS
  • MECH-02 · Zero missing asset references PASS
  • MECH-03 · Zero console/page errors across viewports PASS
  • MECH-04 · Zero serious/critical axe-core violations PASS
  • MECH-05 · No horizontal overflow at 375px PASS
  • MECH-06 · No horizontal overflow at 768px PASS
  • MECH-07 · No horizontal overflow at 1440px PASS
  • PROV-01 · Zero provenance strings (client names, trackers, third-party IDs) in shipped code PASS
  • PKG-01 · LICENSE.txt present with correct purchase terms PASS
  • PKG-02 · Buyer docs (README) present and current PASS
  • PKG-03 · Fonts vendored locally, free-for-commercial, no external CDN calls PASS
  • PKG-04 · Favicon set present and linked PASS
  • PKG-05 · Usable without JavaScript (content readable, nav works) PASS
  • CAT-01 · Catalog manifest validates against the schema PASS
  • CAT-02 · Live demo deployed and serving the correct product PASS
  • REC-01 · Texture over gradient PASS
  • REC-02 · Density rhythm: cramped and airy passages, not uniform padding PASS
  • REC-03 · Not three identical cards: vary size, role, or module PASS
  • REC-04 · Motion-as-meaning with reduced-motion and mobile fallback PASS

Also on the shelf

The whole shelf →

$69 Demo Buy