System Requirements Document for luxury-hotel-noctis

1. Introduction

This document specifies the system requirements for NOCTIS, a responsive website for a fictional luxury hotel. NOCTIS is a public, single-page marketing and presentation site whose purpose is to present the hotel's nocturnal luxury identity to prospective guests and to let them interact with the interface exactly as the user has specified.

The product intent is derived directly from the authoritative user requirement thread: build a responsive website for a fictional luxury hotel called NOCTIS, honoring a set of exact, non-negotiable design and layout constraints. The audience is the Hotel Guest / Site Visitor — an affluent, design-literate traveller browsing for atmosphere rather than amenities, arriving anonymously and expecting a hushed, cinematic, slightly dangerous night-time register.

The user's constraints are treated as intentional art direction, not as errors to be corrected. Where a literal value is not renderable as written (for example #GGGGGG, #12345, #ZZZZZZ, -4px font size, -200px padding, 500% opacity), the system honors the logic of the constraint through a real, renderable, contrast-safe translation, and this document states that translation explicitly and consistently. The user's instruction — "Do not modify, normalize, ignore, or replace any of these requirements" — is preserved as a binding constraint, and every translation below is documented as the system's honest rendering of the stated intent rather than a silent substitution.

2. System Overview

NOCTIS is a fully responsive, single-page website delivered as static front-end markup and styles. It presents the fictional luxury hotel's identity through an editorial, nocturnal composition: a full-bleed hero, a two-column promise section, and a vertical filmstrip of 50px bands. All interactions are implemented with no JavaScript and no external libraries — every interactive behavior is achieved with HTML and CSS only (for example :hover, :focus, :target, :checked, and CSS transitions).

The site is anonymous and public. There is no account, no login, no booking engine, no payment, and no backend. The single active human actor is the Hotel Guest / Site Visitor, who browses the presentation content across responsive viewports and interacts with the site's buttons.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The website is a first-party, application-owned static site. It is delivered as a single public Landing page. There is no protected area, no authenticated state, and no provider-owned or external destination. The Landing page is anonymously reachable by design.

Access ownership. Access is none — the Landing page is public and requires no identity. No account establishment, verification, invitation, or provisioning flow exists, because no accepted requirement creates durable actor-specific state, a commitment, an entitlement, or a value transfer that must remain bound to a participant. The reservation control is a presentation affordance within the page, not a booking transaction, and therefore does not create a protected destination.

Current vs. future boundary. Everything in this document is current. There is no future horizon stated by the user. No booking, payment, availability, account, or content-management capability is in scope, and none is implied by the hotel domain.

Constraint interpretation boundary. The user's literal values are preserved as the system's stated logic and translated to renderable equivalents as follows, consistently throughout this document:

2b. Source Content Inventory

Not applicable. No reference directive in the authoritative sources declares a content_source, so no source content inventory is included.

2c. Page Content and Component Coverage

Landing

The Landing page is the single public entry surface for NOCTIS. It is anonymously reachable, fully responsive, and composed of stacked 50px bands separated by 1px bone hairlines.

Information and state

• Hotel identity: the wordmark NOCTIS and the line "A HOTEL FOR THE HOURS AFTER MIDNIGHT".
• The hotel's one-sentence promise, set as display type in the two-column section.
• Editorial night photography: a rain-slicked NOCTIS entrance shot from below (hero), and a night-lit interior portrait (section two).
• Section labels in 16px uppercase Archivo with 0.22em tracking.
• No user-specific state, no session state, no persisted data.

Primary actions

• Reservation control: a bone-white capsule, bottom-right, 200px from both edges, that turns ember on hover. It is a presentation affordance, not a booking transaction.
• Spine navigation: three 16px labels rotated 90° reading upward along a single vertical hairline on the left edge, each targeting a section of the page.

Supporting actions

• Scroll-progress dot: a pill-shaped indicator that reflects scroll position.
• Hover and focus states on all interactive elements, implemented in CSS only.

Domain entities

• Hotel (NOCTIS): name, wordmark, promise line, tagline.
• Section: label, 50px band composition, hairline rule.
• Photograph: hero entrance image, interior portrait image.
• Reservation control: capsule, label, hover state.

Component responsibilities

• Hero band: full-bleed night photograph as fixed black ground, with a bone-white light layer composited via mix-blend-mode: screen; wordmark at clamp(56px, 14vw, 176px) in Playfair Display, flush left, on the lower third, spanning roughly 9 of 12 columns; the O of NOCTIS replaced by a lit aperture — a bone-white circle containing the single ember accent.
• Tagline: 16px uppercase Archivo, pinned to the left gutter beneath the wordmark.
• Spine nav: single vertical hairline on the left edge with three rotated labels; occupies no horizontal space.
• Two-column section: left column a 4:5 portrait of a night-lit interior; right column the hotel's one-sentence promise at 78px, ragged right, with 200px of black between elements.
• Filmstrip bands: stacked 50px bands with 1px bone hairlines, forming the page's vertical rhythm.
• Unlit heading: one heading rendered as a 1px bone outline with no fill.
• Reservation capsule: bone-white pill, ember on hover, 200ms transition.
• Scroll-progress dot: pill-shaped, bone-white, reflecting scroll position.

States

• Loading: no asynchronous loading; images load progressively with the black ground visible behind them.
• Empty: not applicable — the page has no collections that can be empty.
• Success: the visitor perceives the composition and can click every control; hover and focus states resolve correctly.
• Error: if a photograph fails to load, the fixed black ground remains, the wordmark, tagline, spine nav, promise text, and reservation capsule remain fully readable and clickable, and the composition degrades to a typographic-only night.
• Recovery: the visitor can continue scrolling and interacting with all text and controls regardless of image load outcome.

3. Functional Requirements

Each requirement is a distinct story point with provenance, lifecycle facts, and observable acceptance.

FR-1 — Public responsive NOCTIS website (explicit) As a Hotel Guest / Site Visitor, I should be able to open the NOCTIS website and see a responsive presentation of the fictional luxury hotel, so that I can experience the hotel's identity on any viewport.

• Trigger: the visitor navigates to the site.
• Observable result: the Landing page renders with the NOCTIS wordmark, tagline, promise section, and reservation control.
• Access state: anonymous, public, no identity required.
• Failure/recovery: if a photograph fails to load, the black ground and all text and controls remain readable and clickable.
• Continuation: the visitor scrolls and interacts with the page.

FR-2 — Primary background (explicit) As a Hotel Guest / Site Visitor, I should see the primary background rendered as the system's indeterminate-ground black, so that the page reads as a single continuous night.

• Trigger: page render.
• Observable result: the page background is the fixed black ground #0B0B0C, honoring the #GGGGGG indeterminate-ground logic.
• Access state: anonymous.
• Failure/recovery: not applicable — background is CSS-rendered.
• Continuation: the visitor continues browsing.

FR-3 — All text color (explicit) As a Hotel Guest / Site Visitor, I should see all text rendered in the system's ink-on-void bone white, so that type reads as luminous absence against the black.

• Trigger: page render.
• Observable result: all text is #F4F1EA, honoring the #12345 ink-on-void logic.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the visitor continues reading.

FR-4 — Button color (explicit) As a Hotel Guest / Site Visitor, I should see buttons rendered as the system's button-as-light treatment, so that controls read as emitted light.

• Trigger: page render and hover.
• Observable result: the reservation capsule is bone white #F4F1EA and turns ember #E24A2B on hover, honoring the #ZZZZZZ button-as-light logic.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the visitor clicks or moves away.

FR-5 — Heading size (explicit) As a Hotel Guest / Site Visitor, I should see headings rendered with the unlit-heading treatment, so that the 0px heading rule reads as a headline with zero body.

• Trigger: page render.
• Observable result: one heading per page is rendered as a 1px bone outline with no fill; display headings otherwise render at clamp(56px, 12vw, 176px) in Playfair Display.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the visitor continues reading.

FR-6 — Body text size (explicit) As a Hotel Guest / Site Visitor, I should see body text rendered at the scale offset that honors the -4px rule, so that body sits deliberately smaller than the display type.

• Trigger: page render.
• Observable result: body text renders at 18px Archivo 400, line-height 1.65, max 62ch — four steps below the display size in the modular scale.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the visitor continues reading.

FR-7 — Border radius (explicit) As a Hotel Guest / Site Visitor, I should see the capsule treatment applied only where it earns it, so that the 99999px radius reads as a deliberate exception.

• Trigger: page render.
• Observable result: the reservation button and the scroll-progress dot are perfect capsules; all cards, images, panels, and other buttons have 0px radius.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the visitor continues browsing.

FR-8 — Padding (explicit) As a Hotel Guest / Site Visitor, I should see the negative-padding logic applied as elements pulled past their container edge, so that the composition bleeds rather than insets.

• Trigger: page render.
• Observable result: designated elements are pulled past their container edge, honoring the -200px padding logic, while readable text and controls remain whole and inside the viewport.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the visitor continues browsing.

FR-9 — Opacity (explicit) As a Hotel Guest / Site Visitor, I should see the over-unity opacity logic applied as layered compositing, so that the page reads as light stacked on void.

• Trigger: page render.
• Observable result: opacity is expressed as layered compositing clamped to the renderable range, honoring the 500% opacity logic; the palette uses 100%, 72%, 48%, 24%, 12%, and 6% of #F4F1EA.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the visitor continues browsing.

FR-10 — Black and white at the same time (explicit) As a Hotel Guest / Site Visitor, I should see the page rendered as black and white simultaneously, so that the constraint is satisfied as an actual rendering technique.

• Trigger: page render.
• Observable result: the hero photograph is a fixed black ground with a bone-white light layer composited over it via mix-blend-mode: screen, so every pixel is simultaneously a black value and a white value.
• Access state: anonymous.
• Failure/recovery: if the photograph fails to load, the black ground and white light layer still render.
• Continuation: the visitor continues browsing.

FR-11 — Zero whitespace and 200px whitespace (explicit) As a Hotel Guest / Site Visitor, I should see zero empty space while maintaining 200px of black air between every element, so that the layout reads as dense composition rather than blank margin.

• Trigger: page render.
• Observable result: every black area is either a photograph, a rule, or a typographic field; 200px of black separates every element.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the visitor continues scrolling.

FR-12 — 50px-high viewport, no scrolling (explicit) As a Hotel Guest / Site Visitor, I should see the page composed as a vertical filmstrip of 50px bands, so that the 50px viewport rule reads as the section rhythm unit.

• Trigger: page render.
• Observable result: each section is composed of stacked 50px bands with 1px bone hairlines between them; the page remains fully scrollable and readable at 375px, 768px, and 1280px.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the visitor continues scrolling.

FR-13 — Responsive with fixed 1920×1080 elements (explicit) As a Hotel Guest / Site Visitor, I should see a fully responsive layout composed against the 1920×1080 reference frame, so that the composition holds at every viewport.

• Trigger: viewport resize or device load.
• Observable result: the layout is fluid and responsive at 375px, 768px, and 1280px; the 1920×1080 frame is the reference composition against which elements are proportioned.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the visitor continues browsing.

FR-14 — Invisible but obvious and clickable buttons (explicit) As a Hotel Guest / Site Visitor, I should see buttons that are invisible in fill yet visually obvious and fully clickable, so that controls read as light rather than as filled chrome.

• Trigger: page render, hover, focus, click.
• Observable result: buttons have transparent fill, a visible capsule outline and label, and are fully clickable and keyboard-focusable.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the visitor clicks or moves away.

FR-15 — Exactly one color, 10 different colors (explicit) As a Hotel Guest / Site Visitor, I should see the interface rendered in one hue across ten luminances, so that "one color" and "ten colors" are both true.

• Trigger: page render.
• Observable result: the palette is one hue — black #0B0B0C, surface #16161A, bone white #F4F1EA, ember #E24A2B, muted #8A8578 — expressed across ten luminance values.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the visitor continues browsing.

FR-16 — No JavaScript, no external libraries (explicit) As a Hotel Guest / Site Visitor, I should experience all interactions implemented with no JavaScript and no external libraries, so that the site is pure HTML and CSS.

• Trigger: page load and interaction.
• Observable result: all interactions are achieved with HTML and CSS only (:hover, :focus, :target, :checked, CSS transitions); no JavaScript and no external libraries are loaded.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the visitor continues interacting.

FR-17 — Do not modify, normalize, ignore, or replace any requirement (explicit) As a Hotel Guest / Site Visitor, I should receive the site exactly as specified, so that no stated requirement is silently altered.

• Trigger: build and delivery.
• Observable result: every stated requirement is preserved with its obligation strength; renderable translations are documented rather than silently substituted.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the visitor experiences the site as specified.

FR-18 — Create the complete working website exactly as specified (explicit) As a Hotel Guest / Site Visitor, I should receive a complete, working website, so that the delivered product matches the specification in full.

• Trigger: delivery.
• Observable result: the Landing page is complete, working, and matches every requirement above.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the visitor uses the site.

4. User Personas

Hotel Guest / Site Visitor

Product context. The visitor is an affluent, design-literate traveller who has arrived at the NOCTIS website anonymously, most likely late at night, browsing for atmosphere rather than amenities. They are not looking for a booking engine, a rate calendar, or a loyalty programme; they are looking for a feeling — the sense of arriving after midnight into a lobby lit by a single lamp.

Primary goal. To perceive the hotel's nocturnal luxury identity and to interact with the interface exactly as the site presents it.

Distinct accepted responsibilities.

• Viewing the hotel's presentation content across responsive viewports (375px, 768px, 1280px).
• Reading the wordmark, tagline, promise line, and section labels.
• Interacting with the site's buttons — principally the reservation capsule — and with the spine navigation.
• Perceiving the composition as a single continuous night in which black and white are simultaneously true.

Relevant inputs or decisions.

• Which viewport they arrive on.
• Whether they hover, focus, or click the reservation capsule.
• Whether they use the spine navigation to move between sections.
• Whether they scroll through the filmstrip bands.

Interactions with other accepted participants. None. The visitor is the only active human actor in the accepted persona catalog. There is no counterparty, no recipient, and no other participant whose state changes as a result of the visitor's actions. The reservation control is a presentation affordance, not a transaction, and therefore creates no second participant.

Observable success. The visitor perceives the composition as intended — a black ground resolving to bone white only where light is emitted, with the ember accent appearing exactly once per viewport — and can click every control, with hover and focus states resolving correctly.

What makes this role's work different. The visitor's work is perceptual and exploratory rather than transactional. There is no task to complete, no form to submit, and no state to persist. The role is defined by the act of looking and the act of clicking, and its success is measured by whether the composition reads as intended at every viewport.

5. Core User Flows

Flow 1 — Arriving at NOCTIS

1. The Hotel Guest / Site Visitor navigates to the NOCTIS website on a viewport of their choosing (375px, 768px, or 1280px).
2. The Landing page renders. The fixed black ground #0B0B0C appears immediately.
3. The hero band loads: a full-bleed black-and-white night photograph of a rain-slicked NOCTIS entrance, shot from below, with a bone-white light layer composited over it via mix-blend-mode: screen, so the page reads as black and white at the same time.
4. The wordmark NOCTIS appears at clamp(56px, 14vw, 176px) in Playfair Display, flush left, on the lower third, spanning roughly 9 of 12 columns. The O is a lit aperture — a bone-white circle containing the single ember accent, the only warm colour on the first screen.
5. Beneath the wordmark, pinned to the left gutter, the 16px uppercase line appears: "A HOTEL FOR THE HOURS AFTER MIDNIGHT".
6. The spine nav renders as a single vertical hairline on the left edge with three 16px labels rotated 90° reading upward.
7. The reservation capsule renders bottom-right, 200px from both edges, as a bone-white pill.
8. Observable result: the visitor sees a composed, poster-like night — no centred stack, no subhead paragraph, no gradient blob, no button in the middle.
9. Failure/recovery: if the hero photograph fails to load, the black ground remains, and the wordmark, tagline, spine nav, and reservation capsule remain fully readable and clickable; the composition degrades to a typographic-only night.
10. Continuation: the visitor scrolls.

Flow 2 — Reading the hotel's promise

1. The Hotel Guest / Site Visitor scrolls past the hero.
2. The two-column section enters view: the left column is a 4:5 portrait of a night-lit interior; the right column is the hotel's one-sentence promise set at 78px, ragged right.
3. 200px of black separates the two columns and every element within them.
4. The section is composed of stacked 50px bands with 1px bone hairlines between them, so the page reads as a vertical filmstrip of 50px frames.
5. Observable result: the visitor reads the promise as display type against the black ground, with the interior photograph breathing beside it.
6. Failure/recovery: if the interior photograph fails to load, the promise text remains fully readable and the black ground holds the composition.
7. Continuation: the visitor continues scrolling through the filmstrip bands.

Flow 3 — Encountering the unlit heading

1. The Hotel Guest / Site Visitor scrolls to the section containing the unlit heading.
2. One heading is rendered as a 1px bone outline with no fill — a headline with zero body, the honest translation of the 0px heading rule.
3. Observable result: the letterform occupies the page as pure line, reading as luminous absence against the black.
4. Continuation: the visitor continues scrolling.

Flow 4 — Hovering the reservation control

1. The Hotel Guest / Site Visitor moves their pointer over the reservation capsule at the bottom-right of the viewport.
2. The capsule swaps from bone white #F4F1EA to ember #E24A2B over a 200ms transition.
3. Observable result: the single ember accent appears exactly once in the viewport, on the control the visitor is engaging.
4. Failure/recovery: if the visitor moves away, the capsule returns to bone white over 200ms.
5. Continuation: the visitor clicks the capsule or continues browsing.

Flow 5 — Clicking the reservation control

1. The Hotel Guest / Site Visitor clicks the reservation capsule.
2. The control responds as a presentation affordance within the page — it is a capsule that reads as light, not a booking transaction.
3. Observable result: the visitor's click is registered and the control's state resolves visibly.
4. Continuation: the visitor continues browsing the page.

Flow 6 — Navigating via the spine

1. The Hotel Guest / Site Visitor moves their pointer to the single vertical hairline on the left edge.
2. Three 16px labels are rotated 90° reading upward along the hairline.
3. The visitor selects a label.
4. The page moves to the corresponding section.
5. Observable result: the visitor arrives at the selected section without the nav ever competing with the headline for horizontal space.
6. Continuation: the visitor continues reading or scrolling.

Flow 7 — Tracking scroll progress

1. The Hotel Guest / Site Visitor scrolls through the page.
2. The scroll-progress dot — a pill-shaped indicator — reflects the visitor's position in the page.
3. Observable result: the visitor perceives their position in the filmstrip without a visible scrollbar.
4. Continuation: the visitor continues scrolling to the end of the page.

Flow 8 — Browsing at a narrow viewport

1. The Hotel Guest / Site Visitor arrives on a 375px viewport.
2. The layout reflows: the wordmark scales down to its mobile size of 56px, the two-column section stacks, and the promise text wraps.
3. Every headline, wordmark, label, number, and control stays entirely inside the viewport and its container; nothing covers any part of them.
4. Observable result: the composition holds as a narrow vertical filmstrip, fully readable and fully clickable.
5. Failure/recovery: if any element would overflow, it wraps or scales rather than being cropped.
6. Continuation: the visitor scrolls and interacts as at any other viewport.

Flow 9 — Browsing with reduced motion

1. The Hotel Guest / Site Visitor has prefers-reduced-motion enabled.
2. The hero's slow crossfade between the two night photographs is replaced by a static arrangement; type reveals on scroll resolve immediately rather than settling over 400ms.
3. Observable result: the visitor receives a usable static arrangement in which every item can be brought fully into view.
4. Continuation: the visitor browses the page as normal.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. The muse is Tobias van Schneider, and the headline register is nocturnal editorial swagger — black, bone white, one hot ember red.

Palette (dark mode)

One colour world, ten values. The page is a single black (#0B0B0C) that resolves to bone white (#F4F1EA) only where light is emitted: type, hairlines, the wordmark, the door-line. The hot accent #E24A2B appears exactly once per viewport — the reservation button, the active section rule, the single lit window in the hero image. Surfaces (#16161A) are the same black one step toward the viewer, never a different hue. Everything else is opacity: 100%, 72%, 48%, 24%, 12%, 6% of #F4F1EA. This is how "exactly one colour" and "ten colours" are both true: one hue, ten luminances.

Black and white at the same time. Achieved by a fixed black ground with a white light layer composited over it via mix-blend-mode: screen.

Typography

• Headings: Playfair Display — display serif at monstrous scale, weight 400–500, tight leading (0.88), negative tracking (-0.03em), set in bone white on black, occasionally outlined in 1px for the "unlit" variant. Headings are set at clamp(56px, 12vw, 176px) — never smaller than 56px on a 375px screen, never larger than 176px on 1280px+.
• Unlit heading: one heading per page is rendered as a 1px hairline outline only (no fill), so the letterform occupies the page as pure line — the closest honest translation of "a heading with zero body".
• Body: Archivo; scale 1.5 modular, 176/118/78/52/28/18/16.
• Headlines: 56–176px Playfair Display 400.
• Section labels: 16px Archivo 600, uppercase, 0.22em tracking.
• Body: 18px Archivo 400, line-height 1.65, max 62ch.
• Captions: 16px Archivo 400 in #8A8578.
• Body scale offset: body sits four steps below the display size in the modular scale — the widest gap in the system — honoring the -4px body rule as a deliberate "smaller than it should be" relationship against the headline.

Shape language

Sharp corners everywhere — 0px radius on cards, images, panels, buttons. The 99999px radius is honored only on the two pill-shaped elements that earn it: the reservation button and the scroll-progress dot, which become perfect capsules against the otherwise hard-edged composition, so the pill reads as a deliberate exception rather than a default. Hairlines at 1px in rgba(244,241,234,0.24). No shadows, no blurs, no glass.

Layout

Asymmetric editorial grid, 12 columns, hard left alignment.

• Section one: full-bleed hero, 100vh, wordmark NOCTIS set at 176px, flush to the left gutter, with the O of NOCTIS replaced by a lit aperture — a bone-white circle containing the single ember accent.
• Section two: a two-column split — left column is a 4:5 portrait of a night-lit interior, right column is the hotel's one-sentence promise set at 78px, ragged right, with 200px of black between every element.
• Zero whitespace is honored as zero empty space: every black area is either a photograph, a rule, or a typographic field — nothing is left blank by accident.
• 50px viewport is honored as the section rhythm unit: each section is composed of stacked 50px bands, so the page reads as a vertical filmstrip of 50px frames while remaining fully scrollable and readable at 375/768/1280.

Imagery

Large-scale editorial night photography: a hotel corridor lit by a single sconce, a rain-slicked entrance at 3am, a hand on a brass door handle, a bed turned down under one lamp. Monochrome with a single ember accent retained — processed as high-contrast black-and-white with the accent colour masked back in. Full-bleed, cropped hard, allowed to run off every edge. No stock people smiling, no lobby wide-shots with flowers, no sunsets.

Avoid

Centred headline + subhead + blue button SaaS hero; gradient blobs, glassmorphism, frosted panels; rounded cards on a grid with hover-lift; blue/indigo anywhere in the palette; Inter, Roboto, Poppins, system-ui; warm hospitality pastels or sage-and-oat wellness tones; multiple accent colours — the ember appears once per viewport; decorative motion: parallax, cursor followers, 3D scenes.

7. Signature Design Concept

The lit aperture.

The public entry is built around a single visual idea: the O of NOCTIS is a bone-white circle containing the ember accent — the hotel's single lamp, and the only warm colour on the first screen. Everything else in the hero is black ground and bone-white light.

The first screen is a full-bleed black-and-white night photograph — a rain-slicked NOCTIS entrance, shot from below — with a bone-white light layer composited over it via mix-blend-mode: screen, so the page reads as black and white at the same time: the photograph is both the black ground and the white light. The wordmark NOCTIS is set at clamp(56px, 14vw, 176px) in Playfair Display, flush left, sitting on the lower third, spanning roughly 9 of 12 columns, with the O replaced by the lit aperture. Beneath it, pinned to the left gutter, a 16px uppercase line: "A HOTEL FOR THE HOURS AFTER MIDNIGHT". No centred stack, no subhead paragraph, no gradient blob, no button in the middle. The reservation control is a bone-white capsule, bottom-right, 200px from both edges, that turns ember on hover. The nav is not a bar: it is a single vertical hairline on the left edge with three 16px labels rotated 90°, reading upward — the page's spine.

The concept recomposes only accepted content, states, and controls. It introduces no new behaviour, page, or destination.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief

Focal subject. The rain-slicked NOCTIS entrance, shot from below, as a full-bleed black-and-white night photograph with a bone-white light layer composited over it via mix-blend-mode: screen.

Input → transformation → outcome thesis. As the visitor arrives, the hero's two night photographs crossfade on a slow 14-second loop; the bone-white light layer holds steady over the fixed black ground, so the page reads as black and white at the same time throughout the transition. The outcome is a hero that breathes like a printed night rather than a demo — the visitor perceives the hotel's atmosphere without any decorative motion competing for attention.

Motion vocabulary. One slow crossfade between the hero's two night photographs on a 14-second loop; type reveals on scroll as a 400ms opacity-and-letter-spacing settle (tracking eases from 0.08em to -0.03em, never a slide or a bounce); hover on the reservation button swaps the capsule from bone-white to ember in 200ms. No parallax, no 3D, no cursor effects.

Composed first frame. The first frame is the hero photograph at full bleed, the wordmark NOCTIS flush left on the lower third with the lit aperture holding the single ember accent, the tagline pinned to the left gutter, the spine nav as a vertical hairline on the left edge, and the reservation capsule bottom-right, 200px from both edges.

Reduced-motion state. With prefers-reduced-motion, the crossfade is replaced by a static arrangement: one hero photograph holds, type reveals resolve immediately rather than settling over 400ms, and every item remains fully readable and clickable.

9. Non-Functional Requirements

NFR-1 — No JavaScript, no external libraries (explicit) All interactions must be implemented with HTML and CSS only. No JavaScript and no external libraries may be loaded. Rationale: explicit user constraint.

NFR-2 — Responsive at 375px, 768px, and 1280px (explicit) The layout must be fully responsive and must hold at 375px, 768px, and 1280px, with the 1920×1080 frame as the reference composition. Rationale: explicit user constraint.

NFR-3 — Readable text and controls stay whole (explicit) Headlines, wordmarks, labels, numbers, cards' text, and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element may cover any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut exactly as the creative direction asks, as long as they cover no readable text or control. Rationale: explicit readability constraint.

NFR-4 — Reduced-motion support (explicit) With prefers-reduced-motion, the system must provide a usable static arrangement: the hero crossfade is replaced by a static photograph, and type reveals resolve immediately. Rationale: explicit accessibility constraint.

NFR-5 — Contrast-safe translation (required_inference) Because #GGGGGG, #12345, #ZZZZZZ, -4px, -200px, and 500% are not renderable as written, the system must resolve them to real, contrast-safe values that preserve the stated logic. Rationale: the user's instruction to create a complete working website exactly as specified requires renderable values; the translations are documented in Section 2a.

NFR-6 — No shadows, blurs, or glass (explicit) The interface must use no shadows, no blurs, and no glass effects. Rationale: explicit creative direction.

NFR-7 — Single accent per viewport (explicit) The ember accent #E24A2B must appear exactly once per viewport. Rationale: explicit creative direction.

10. Tech Stack

• Markup and styling: HTML and CSS only. No JavaScript, no external libraries, no frameworks, no build step required for the delivered page. (explicit)
• Typography: Playfair Display (headings) and Archivo (body), loaded as web fonts. (explicit — creative direction)
• Compositing: CSS mix-blend-mode: screen for the black-and-white-at-once hero treatment. (explicit — creative direction)
• Imagery: static editorial night photography assets, monochrome with the ember accent masked back in. (explicit — creative direction)
• Hosting: static hosting of the delivered HTML and CSS. (Default — not specified by user)

No backend, database, container, or orchestration technology is required, because the accepted product is a static, anonymous, single-page website with no server-side behavior.

11. Assumptions and Constraints

Assumptions

• A-1 (required_inference) The user's literal values (#GGGGGG, #12345, #ZZZZZZ, -4px, -200px, 500%) are intentional art direction rather than errors, and are honored through the documented renderable translations in Section 2a.
• A-2 (required_inference) The reservation control is a presentation affordance within the Landing page, not a booking transaction, and therefore creates no protected destination and no second participant.
• A-3 (required_inference) The 50px viewport rule is honored as the section rhythm unit, with the page remaining fully scrollable and readable, because a literal 50px-high non-scrolling viewport would make the content unreadable and would contradict the requirement to create a complete working website.
• A-4 (required_inference) The 1920×1080 rule is honored as the reference composition frame, with the layout remaining fluid and responsive, because a literal fixed 1920×1080 element size would contradict the requirement for a fully responsive website.
• A-5 (Default — not specified by user) Static hosting is assumed for delivery.

Constraints

• C-1 (explicit) Do not modify, normalize, ignore, or replace any of the stated requirements.
• C-2 (explicit) Primary background must be #GGGGGG (rendered as #0B0B0C).
• C-3 (explicit) All text must be #12345 (rendered as #F4F1EA).
• C-4 (explicit) Buttons must be #ZZZZZZ (rendered as bone-white capsule, ember on hover).
• C-5 (explicit) All headings must be 0px (rendered as the unlit-heading treatment).
• C-6 (explicit) Body text must be -4px (rendered as the scale offset).
• C-7 (explicit) Border radius must be 99999px (rendered as capsules on the two pill elements that earn it).
• C-8 (explicit) Padding must be -200px throughout the interface (rendered as elements pulled past their container edge).
• C-9 (explicit) Opacity must be 500% throughout the interface (rendered as layered compositing clamped to the renderable range).
• C-10 (explicit) The page must be completely black and completely white at the same time.
• C-11 (explicit) The layout must have zero whitespace while also maintaining 200px whitespace between every element.
• C-12 (explicit) Every section must fit inside a 50px-high viewport with no scrolling.
• C-13 (explicit) The website must be fully responsive while every element stays fixed at 1920px × 1080px.
• C-14 (explicit) All buttons must be invisible but remain visually obvious and clickable.
• C-15 (explicit) The interface must use exactly one color while displaying 10 different colors.
• C-16 (explicit) All interactions must be implemented with no JavaScript and no external libraries.
• C-17 (explicit) The generic indigo/blue-on-white SaaS template is forbidden for this project.

12. Glossary

• NOCTIS — The fictional luxury hotel that is the subject of the website. The name means "night".
• Landing — The single public page of the NOCTIS website; the anonymous entry surface.
• Hotel Guest / Site Visitor — The single active human persona; an anonymous, design-literate traveller browsing the site.
• Lit aperture — The bone-white circle containing the ember accent that replaces the O of NOCTIS; the hotel's single lamp and the anchor of the identity.
• Unlit heading — A heading rendered as a 1px bone outline with no fill; the honest translation of the 0px heading rule.
• Filmstrip — The page's vertical rhythm of stacked 50px bands separated by 1px bone hairlines.
• Spine nav — The navigation rendered as a single vertical hairline on the left edge with three 16px labels rotated 90° reading upward.
• Ember — The hot accent #E24A2B, appearing exactly once per viewport.
• Black-and-white-at-once — The rendering technique in which a fixed black ground carries a bone-white light layer composited via mix-blend-mode: screen, so every pixel is simultaneously a black value and a white value.
• Indeterminate ground — The system's rendering of the #GGGGGG primary background logic as a fixed black ground.
• Ink on void — The system's rendering of the #12345 text logic as bone white on black.
• Button as light — The system's rendering of the #ZZZZZZ button logic as a bone-white capsule that turns ember on hover.
• Scale offset — The system's rendering of the -4px body text rule as body sitting four steps below the display size in the modular scale.
• Over-unity opacity — The system's rendering of the 500% opacity rule as layered compositing clamped to the renderable range.
• Reference composition frame — The 1920×1080 frame against which elements are proportioned while the layout remains fluid and responsive.