System Requirements Document for 405-page

1. Introduction

405-page is a content-heavy, large-scale website consisting of exactly 405 pages. It is not a small brochure-style site: the product intent is depth and breadth of browsable content, presented as one continuous, designed information system rather than a collection of disconnected screens.

The audience is the Site Visitor — a reader who arrives at the site and browses, navigates, and reads across the full 405-page catalogue. The site's success is measured by whether a visitor can move confidently through a very large body of pages, always knowing where they are, which part of the catalogue they are in, and how far the shelf extends.

The design intent, taken from the project's creative direction, is systematic clarity after Massimo Vignelli: a visible grid, Helvetica-class type, primary colours used strictly as wayfinding codes, and rules doing the work of decoration. The 405 pages are treated as a numbered archival publication — a catalogue raisonné with a permanent contents rail, numbered spread headers, and colour-coded sections.

2. System Overview

The current delivery is a single first-party, publicly readable website of exactly 405 pages. Every page is anonymously reachable: there is no account, no sign-in, no personal state, and no differentiated permission model. The only human actor is the Site Visitor, whose entire accepted responsibility is to browse, navigate, and read the site's content.

The site is composed of:

• Landing — the anonymous public entry surface that explains the site and directs visitors into the 405-page content experience.
• Page 2 through Page 405 — the 404 numbered content pages that make up the catalogue, each an independently browsable destination.

All 405 pages share one persistent navigation and reading frame: a permanent left contents rail listing page ranges and their colour codes, a numbered spread header on every page, a right metadata column carrying page number, section code and date, and a page-range ticker under the header. This shared frame is what makes 405 separate destinations read as one continuous catalogue.

Narrow exclusions. There is no user account, registration, login, profile, or saved-reading state. There is no content authoring, editing, publishing, or moderation surface. There is no search-only interface that hides the 405-page structure. There is no commerce, checkout, or payment capability. There is no social, commenting, or messaging capability. These are not deferred features; they are outside the accepted scope.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The site is first-party and application-owned. All 405 pages are rendered and served by the application itself; no page is delegated to a provider surface or an external destination. There is no headless or provider-owned delivery path in the accepted scope.

Access ownership. Every page, including Landing, is anonymously reachable with no access requirement. This is a hard, source-backed fact of the page contract: the Site Visitor's accepted work — browsing and reading a large public catalogue — creates no durable actor-specific state, no commitment, no entitlement, and no value transfer that would need to remain bound to a particular person. Application-owned identity is therefore neither required nor inferred, and no first-use identity establishment, returning verification, or account-management capability exists.

Current vs. future boundary. Everything described in this document is current. No future-horizon requirements were accepted in the authoritative thread; the only forward-looking material in the source is the design direction's treatment of the 405 pages as a designed system, which is current, not deferred.

Generative output boundary. The site's content is a large, fixed, numbered catalogue. Any generative or upscaling step used to produce page content or page imagery must be constrained so that its output stays within the size budget of a single page render — it must not produce oversized payloads that break the reading experience or the page-range ticker. This is a size constraint on generated output, not a new content capability.

2c. Page Content and Component Coverage

The page inventory below is the closed, ordered page contract: Landing followed by Page 2 through Page 405, exactly 405 pages. Every page is anonymously reachable and owned by the application. Because the 404 numbered content pages share one identical composition and differ only in their number, section code, title, and content, they are documented once as a shared page type, with the per-page facts that vary stated explicitly.

Landing

• Information and state. The anonymous public entry surface. It explains what the site is — a 405-page content-heavy publication — and directs the visitor into the catalogue. It carries no personal state and no access gate.
• Primary action. Enter the index — the visitor commits to entering the 405-page content experience and is taken into the catalogue.
• Supporting actions. Reading the hero headline and its page-range labels; reading the four colour-code bars and their page ranges; following the contents rail into a specific page range.
• Domain entities. Site (the 405-page publication), Section code (red / yellow / ink blue / black), Page range, Page number.
• Component responsibilities.
  • Hero poster — full-viewport information poster, not a centred SaaS hero. A 128px flush-left headline ("405 PAGES, ONE SYSTEM") occupies the left seven columns and wraps across three lines on the warm paper ground.
  • Colour-code spine — a vertical stack of four solid colour code bars (red, yellow, ink blue, black) running the height of the hero to the right of the headline, each labelled with a page range in 13px uppercase.
  • Full-width rule — a single 2px black rule spanning the full width beneath the headline.
  • Entry CTA — "Enter the index" set as plain black text with a red underline that thickens on hover; no button chrome.
  • Contents rail — the permanent left rail (240px on desktop) listing page ranges and their colour codes.
  • Page-range ticker — the thin horizontal ticker under the header showing the page range.
• States.
  • Loading — the hero poster and colour-code spine render as a composed first frame; the ticker begins its continuous scroll.
  • Empty — not applicable; Landing always carries its hero content and the full 405-page range labels.
  • Success — the visitor reads the headline and page ranges and activates Enter the index, arriving in the catalogue.
  • Error / recovery — if the entry action does not resolve, the visitor remains on Landing with the headline, colour-code spine, and contents rail intact and can retry or enter the catalogue directly through the contents rail.
  • Reduced motion — the ticker wraps into static rows; the hero remains a composed still frame.

Page 2 – Page 405 (numbered content pages)

• Information and state. Each of the 404 numbered content pages is an independently browsable destination within the catalogue. Each page carries its own page number, its section code, its title, its date, and its content. Each page is anonymously reachable and holds no personal state.
• Primary action. Reading the page's content.
• Supporting actions. Moving to the previous or next page; jumping to another page through the contents rail; reading the page number, section code, and date in the metadata column; pausing the page-range ticker.
• Domain entities. Page (number, title, section code, date, content), Section code (red / yellow / ink blue / black), Page range, Contents rail entry.
• Component responsibilities.
  • Numbered spread header — a 2px black rule, the page number in tabular figures at 72px, the section code as a colour bar, and the title flush-left in Archivo bold.
  • Contents rail — the permanent left rail listing all 405 pages by number and colour code, with the active page marked by a solid red 8px bar.
  • Metadata column — the right column carrying page number, section code, and date; the page number updates with a hard cut on scroll.
  • Page-range ticker — the thin horizontal ticker under the header scrolling the current chapter's page numbers continuously; pauses on hover.
  • Reading column — the main column holding a single reading measure of 68ch.
  • Artefact panel — where a page carries an artefact, it is shown squarely in a white panel with a 1px border and a 13px uppercase caption.
  • Section boundary rules — full-width rules and a colour-code change marking section boundaries so the 405 pages read as one continuous catalogue with visible chapters.
• States.
  • Loading — the numbered spread header, contents rail, and metadata column render first; the reading column fills in.
  • Empty — a page whose content has not yet been supplied still renders its numbered spread header, section code, page number, and metadata, so the catalogue's structure remains intact and the visitor can continue navigating.
  • Success — the visitor reads the page and continues to the next page or jumps via the contents rail.
  • Error / recovery — if a page's content fails to resolve, the numbered spread header, contents rail, and metadata column remain usable, and the visitor can move to another page through the contents rail or the previous/next controls.
  • Reduced motion — the ticker wraps into static rows; the active-page red code bar snaps in without transition.

3. Functional Requirements

FR-1 — Site of exactly 405 pages (explicit) As a Site Visitor, I should be able to browse a website that contains exactly 405 pages, so that I experience the site as the large, content-heavy publication it is committed to be.

• Trigger/input: The visitor arrives at the site.
• Observable result: The site presents exactly 405 pages, numbered 1 through 405, with Landing as the entry surface and Page 2 through Page 405 as the numbered content pages.
• Access state: Anonymous; no access requirement on any page.
• Failure/recovery: If a page is unreachable, the contents rail still lists it and the visitor can retry or continue to another page.
• Continuation: The visitor continues browsing the remaining pages.

FR-2 — Content-heavy depth rather than a brochure site (explicit) As a Site Visitor, I should be able to browse a site whose depth and scale reflect a large content-heavy publication rather than a small brochure-style site, so that the site delivers the depth it was built for.

• Trigger/input: The visitor moves through the catalogue.
• Observable result: The catalogue extends across 405 numbered pages with visible chapters and section codes, not a handful of marketing screens.
• Access state: Anonymous.
• Failure/recovery: If a section's content is thin or missing, the section's structure and page numbering remain visible so the visitor can continue.
• Continuation: The visitor continues into further pages and sections.

FR-3 — Anonymous public entry (required_inference) As a Site Visitor, I should be able to arrive at the site anonymously and understand what it is before entering the catalogue, so that I can decide to enter the 405-page content experience.

• Trigger/input: The visitor opens the site's public entry surface.
• Observable result: Landing presents the hero poster, the headline, the four colour-code bars with their page ranges, and the Enter the index action.
• Access state: Anonymous; no access requirement.
• Failure/recovery: If the entry action does not resolve, the visitor remains on Landing with the headline, colour-code spine, and contents rail intact and can retry or enter through the contents rail.
• Continuation: The visitor activates Enter the index and arrives in the catalogue.

FR-4 — Browse and view any of the 405 content pages (required_inference) As a Site Visitor, I should be able to browse to and view any of the 405 content pages, so that I can read the content I came for.

• Trigger/input: The visitor selects a page from the contents rail or moves to the previous or next page.
• Observable result: The selected page renders with its numbered spread header, section code, title, content, and metadata.
• Access state: Anonymous; no access requirement.
• Failure/recovery: If the page's content fails to resolve, the numbered spread header, contents rail, and metadata column remain usable and the visitor can move to another page.
• Continuation: The visitor reads the page and continues to the next page or jumps elsewhere via the contents rail.

FR-5 — Navigate across the full 405-page catalogue (required_inference) As a Site Visitor, I should be able to navigate across the full 405-page catalogue, so that I can move between distant pages without losing my place.

• Trigger/input: The visitor uses the contents rail, the previous/next controls, or the page-range ticker.
• Observable result: The visitor arrives at the chosen page, and the contents rail marks the active page with a solid red 8px bar.
• Access state: Anonymous.
• Failure/recovery: If a navigation target does not resolve, the contents rail remains available and the visitor can choose another page.
• Continuation: The visitor continues navigating or reading.

FR-6 — Always know where you are in the catalogue (required_inference) As a Site Visitor, I should be able to tell at any scroll position which page I am on and which chapter of the 405 I am in, so that I never lose my place in a very large catalogue.

• Trigger/input: The visitor scrolls or moves between pages.
• Observable result: The numbered spread header shows the page number in tabular figures at 72px and the section code as a colour bar; the metadata column shows page number, section code, and date, with the page number updating on scroll; the contents rail highlights the active page with a red code bar.
• Access state: Anonymous.
• Failure/recovery: If the metadata column fails to update, the numbered spread header still states the page number and section code.
• Continuation: The visitor continues reading or navigating.

FR-7 — Read the catalogue as one continuous designed system (required_inference) As a Site Visitor, I should be able to read the 405 pages as one continuous catalogue with visible chapters, so that the scale of the site reads as order rather than as an undifferentiated pile.

• Trigger/input: The visitor crosses a section boundary.
• Observable result: Full-width rules and a colour-code change mark the boundary, and the section code changes from one of the four coded colours (red, yellow, ink blue, black) to the next.
• Access state: Anonymous.
• Failure/recovery: If a boundary marker fails to render, the page's own section code in the numbered spread header still identifies the chapter.
• Continuation: The visitor continues into the next chapter.

FR-8 — Pause the page-range ticker (required_inference) As a Site Visitor, I should be able to pause the page-range ticker, so that continuous motion does not interfere with reading.

• Trigger/input: The visitor hovers over the ticker, or the visitor's system requests reduced motion.
• Observable result: The ticker pauses on hover; under reduced motion it wraps into static rows.
• Access state: Anonymous.
• Failure/recovery: If the ticker cannot be paused, the visitor can still read the page; the ticker is a supporting element, not the reading surface.
• Continuation: The visitor resumes reading or navigating.

FR-9 — Constrain generative upscale output size (explicit) As a Site Visitor, I should be able to load and read each page without oversized generated output breaking the page, so that the reading experience holds at scale.

• Trigger/input: A generative or upscaling step produces page content or page imagery.
• Observable result: The generated output stays within the size budget of a single page render and does not produce payloads too large for the page to load and read.
• Access state: Anonymous.
• Failure/recovery: If generated output exceeds the budget, the page falls back to its numbered spread header, section code, and metadata so the visitor can continue navigating.
• Continuation: The visitor continues reading or moves to another page.

4. User Personas

Site Visitor

Product context. The Site Visitor is the only human actor in the product. They arrive at a content-heavy publication of exactly 405 pages — a numbered archival catalogue of writing, notes, and artefacts — and their entire relationship with the site is reading and moving through it. They have no account, no profile, and no saved state; each visit begins anonymously at the public entry surface.

Primary goal. To find and read the content they came for across a very large page set, without losing their place or their sense of where they are in the catalogue.

Distinct accepted responsibilities.

• Entering the site anonymously and deciding whether to enter the catalogue.
• Browsing to and viewing any of the 405 content pages.
• Navigating across the full catalogue, including between distant pages.
• Maintaining orientation: knowing the current page number, the current section code, and how far the shelf extends.
• Reading the catalogue as one continuous designed system with visible chapters.
• Controlling the page-range ticker so continuous motion does not interfere with reading.

Relevant inputs and decisions. The visitor's inputs are navigation choices — which page to open, whether to move to the next page, whether to jump via the contents rail, and whether to pause the ticker. Their central decision is where in the 405-page catalogue to read next, made from the contents rail, the numbered spread header, and the section codes.

Interactions with other accepted participants. There are none. The Site Visitor is the sole accepted human actor; no other persona, counterparty, or recipient is affected by the visitor's reading. There is no handoff, no commitment, and no value transfer to another participant.

Observable success. The visitor reaches the page they were looking for, reads it, and can state which page number and which section code they are in at any scroll position. They can move to any other page in the catalogue and continue reading.

Constraints carried from source. The visitor's experience is anonymous and public on every page; no access requirement applies. The catalogue is exactly 405 pages and is content-heavy by commitment, not brochure-scale.

5. Core User Flows

Flow 1 — Arriving anonymously and entering the catalogue

1. The Site Visitor opens the site and lands on Landing, anonymously, with no access gate.
2. The visitor reads the full-viewport hero poster: the 128px flush-left headline "405 PAGES, ONE SYSTEM" wrapping across three lines on the warm paper ground, with the vertical stack of four solid colour code bars (red, yellow, ink blue, black) to its right, each labelled with a page range in 13px uppercase.
3. The visitor reads the 2px black rule spanning the full width beneath the headline and the Enter the index action set as plain black text with a red underline.
4. The visitor activates Enter the index and arrives in the 405-page catalogue.
5. Observable result: the visitor is inside the catalogue, with the contents rail listing page ranges and their colour codes and the page-range ticker running under the header.
6. Failure/recovery: if the entry action does not resolve, the visitor remains on Landing with the headline, colour-code spine, and contents rail intact, and can retry or enter the catalogue directly through the contents rail.
7. Continuation: the visitor proceeds to Flow 2.

Flow 2 — Browsing to and reading a content page

1. From the catalogue, the Site Visitor selects a page — for example Page 2 — through the contents rail or the previous/next controls.
2. The page renders its numbered spread header: a 2px black rule, the page number in tabular figures at 72px, the section code as a colour bar, and the title flush-left in Archivo bold.
3. The visitor reads the page's content in the main column at a single reading measure of 68ch, with the metadata column showing page number, section code, and date.
4. Observable result: the visitor has read the page and the contents rail marks the active page with a solid red 8px bar.
5. Failure/recovery: if the page's content fails to resolve, the numbered spread header, contents rail, and metadata column remain usable, and the visitor can move to another page through the contents rail or the previous/next controls.
6. Continuation: the visitor moves to the next page or jumps elsewhere via the contents rail.

Flow 3 — Navigating across the full 405-page catalogue

1. The Site Visitor is reading a page deep in the catalogue and wants to reach a distant page.
2. The visitor uses the permanent left contents rail, which lists all 405 pages by number and colour code, and selects the target page.
3. Observable result: the visitor arrives at the chosen page, and the contents rail marks it with a solid red 8px bar.
4. Failure/recovery: if the navigation target does not resolve, the contents rail remains available and the visitor can choose another page.
5. Continuation: the visitor continues reading or navigating.

Flow 4 — Maintaining orientation while reading

1. The Site Visitor scrolls within a page.
2. The page number in the metadata column updates with a hard cut, and the numbered spread header continues to show the page number in tabular figures at 72px and the section code as a colour bar.
3. Observable result: at any scroll position the visitor can tell which page they are on and which of the four coded chapters (red, yellow, ink blue, black) they are in.
4. Failure/recovery: if the metadata column fails to update, the numbered spread header still states the page number and section code.
5. Continuation: the visitor continues reading.

Flow 5 — Crossing a section boundary

1. The Site Visitor moves from the last page of one chapter to the first page of the next.
2. Full-width rules and a colour-code change mark the boundary, and the section code changes to the next of the four coded colours.
3. Observable result: the visitor can see that they have entered a new chapter of the 405, and the catalogue continues to read as one continuous designed system.
4. Failure/recovery: if a boundary marker fails to render, the page's own section code in the numbered spread header still identifies the chapter.
5. Continuation: the visitor continues into the next chapter.

Flow 6 — Pausing the page-range ticker

1. The Site Visitor is reading and finds the continuous page-range ticker under the header distracting.
2. The visitor hovers over the ticker, and it pauses.
3. Observable result: the ticker stops scrolling while the visitor reads; if the visitor's system requests reduced motion, the ticker wraps into static rows instead.
4. Failure/recovery: if the ticker cannot be paused, the visitor can still read the page; the ticker is a supporting element, not the reading surface.
5. Continuation: the visitor resumes reading or navigating.

Flow 7 — Reading a page whose generated output is oversized

1. The Site Visitor opens a page whose content or imagery was produced by a generative or upscaling step.
2. The generated output stays within the size budget of a single page render, and the page loads and reads normally.
3. Observable result: the visitor reads the page without the page breaking or the reading experience degrading.
4. Failure/recovery: if generated output exceeds the budget, the page falls back to its numbered spread header, section code, and metadata, so the visitor can continue navigating.
5. Continuation: the visitor continues reading or moves to another page.

6. Visuals, Colors and Theme

The visual system is authoritative from the project's creative direction: systematic clarity after Massimo Vignelli — 405 pages as a designed information system. The muse is Massimo Vignelli; the headline is 405 PAGES, ONE SYSTEM. The register is archival confidence — a catalogue raisonné, a printed index, a library shelf — not a product launch.

Colour tokens (light mode)

Proportion: approximately 85% paper/white, 10% black type and rules, 5% coded colour. Colour appears as thin rules, 8px code bars, numerals, and one solid red band — never as large soft fills. The four coded section colours are red, yellow, ink blue, and black.

Typography

• Headings: Archivo — Helvetica-class grotesque, medium and bold weights, flush-left ragged-right, tight tracking (-0.02em). Sentence case for editorial headlines; all-caps only for micro-labels and page codes. Hierarchy comes from weight and scale, never from a second display face.
• Body: Archivo.
• Scale: 1.5 modular — 128 / 72 / 40 / 22 / 16 / 13.
• Display headline: clamp(56px, 9vw, 128px).
• Page titles: clamp(40px, 6vw, 72px).
• Section labels: 13px uppercase with 0.14em tracking.
• Body: 16–18px at 1.55 leading.
• Index numerals: tabular figures.

Shape language

Hard edges everywhere — 0px radius on cards, images, buttons, and inputs. Structure is drawn with 1px and 2px black rules and 8px colour code bars, not with shadows or rounding. The only circles are index dots and page-number bullets in the contents rail. Controls are rectangular with a 1px black border and a solid fill on hover.

Layout

A strict 12-column grid with a permanent left contents rail (240px on desktop) listing page ranges and their colour codes, and a right metadata column carrying page number, section code, and date. The main column holds a single reading measure of 68ch. Every page is composed as a numbered spread: a 2px black rule under the header, a code bar, the page title, then content. Section boundaries are marked by full-width rules and a colour-code change, so the 405 pages read as one continuous catalogue with visible chapters.

Imagery

Diagrammatic and informational only: ruled tables, page thumbnails, index maps, pictograms, and black-and-white documentary photographs cropped hard to the grid. No illustration for its own sake, no gradient blobs, no stock people smiling. Where a page needs an artefact, it is shown squarely in a white panel with a 1px border and a caption in 13px uppercase.

7. Signature Design Concept

The Index as the Interface.

The public entry — Landing — is a full-viewport information poster, not a centred SaaS hero. A 128px flush-left headline, "405 PAGES, ONE SYSTEM", occupies the left seven columns and wraps across three lines on the warm paper ground. To its right, a vertical stack of four solid colour code bars — red, yellow, ink blue, black — runs the height of the hero, each labelled with a page range in 13px uppercase. Beneath the headline, a single 2px black rule spans the full width, with the CTA "Enter the index" set as plain black text with a red underline that thickens on hover — no button chrome.

The dominant element is the oversized type and the colour-code spine. The composition is asymmetric, grid-locked, and unmistakably a designed index rather than a product page. The signature moves that carry through the whole site are:

• A permanent left contents rail listing all 405 pages by number and colour code, with the active page marked by a solid red 8px bar — navigation as a visible index, not a hamburger.
• A numbered spread header on every page: a 2px black rule, the page number in tabular figures at 72px, the section code as a colour bar, and the title flush-left in Archivo bold.
• Colour as wayfinding: the four coded section colours appear only as 8px bars, rules, and numerals, so a reader can tell which chapter of the 405 they are in from any scroll position.
• A page-range ticker under the header that scrolls the current chapter's page numbers continuously, pausing on hover and wrapping into static rows under prefers-reduced-motion.
• Index numerals set as the largest type on the page — page numbers at 72–128px in tabular figures — so the count itself becomes the ornament.

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

8. Interaction Model & Motion Direction

Interaction Model: Static (direction) Motion Tempo: still Hero Dimensionality: flat

The direction specifies minimal and instant motion: page transitions are a 120ms opacity swap with no easing theatrics; the contents rail highlights the active page with a red code bar that snaps in; on scroll, the page number in the metadata column updates with a hard cut. The only continuous motion is the thin horizontal ticker under the header showing the page range.

Landing Hero Motion Brief

• Focal subject. The oversized flush-left headline "405 PAGES, ONE SYSTEM" and the vertical colour-code spine of four solid bars (red, yellow, ink blue, black), each labelled with a page range in 13px uppercase.
• Input → transformation → outcome thesis. The visitor arrives on the warm paper ground; the composed first frame presents the headline and the colour-code spine as a still information poster; the page-range ticker under the header scrolls the current chapter's page numbers continuously; the visitor activates Enter the index and the view swaps into the catalogue with a 120ms opacity transition. The outcome is arrival inside the 405-page catalogue with the contents rail and ticker in place.
• Motion vocabulary. Hard cuts, 120ms opacity swaps, a snapping red code bar, and one continuous horizontal ticker. No easing theatrics, no bouncy or springy micro-interactions.
• Composed first frame. The 128px headline wrapping across three lines on the left seven columns; the four colour code bars running the height of the hero to its right; the 2px black rule spanning the full width beneath; the Enter the index text with its red underline; the ticker already running under the header.
• Reduced-motion state. The ticker wraps into static rows so every page number in the current chapter is readable without motion; the hero remains a composed still frame; the active-page red code bar snaps in without transition.

9. Non-Functional Requirements

NFR-1 — Exact page count (explicit) The site must contain exactly 405 pages. This is a hard constraint from the authoritative source ("405 page"). Rationale: the page count is the product's defining commitment, and the numbered spread headers, contents rail, and page-range ticker all depend on it.

NFR-2 — Content-heavy scale (explicit) The site must be content-heavy and large in scale, requiring depth rather than a small brochure-style site. Rationale: stated as a current product commitment in the authoritative source.

NFR-3 — Anonymous public access on every page (required_inference) Every page, including Landing, must be reachable anonymously with no access requirement. Rationale: the page contract assigns access_requirement: none to all 405 pages, and the Site Visitor's accepted work creates no durable actor-specific state, commitment, entitlement, or value transfer that would require application-owned identity.

NFR-4 — Bounded generative output size (explicit) Any generative or upscaling step that produces page content or page imagery must constrain its output so it stays within the size budget of a single page render. Rationale: the user's refinement — "output too large generative upscale" — constrains generated output size as part of this regeneration.

NFR-5 — Readable text and controls at every viewport (explicit, from the creative direction) 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 as the direction asks, as long as they cover no readable text or control. Moving and scrollable content may cross the viewport or container edge by design and is judged by whether it actually moves or scrolls and whether every item becomes fully readable as it passes.

NFR-6 — Reduced-motion usability (explicit, from the creative direction) Under prefers-reduced-motion, the page-range ticker must provide a usable static arrangement — wrapping items into rows or allowing horizontal scrolling — so each item can be brought fully into view.

NFR-7 — No forbidden palette or template look (explicit, from the creative direction) The generic indigo/blue-on-white SaaS template is forbidden. No primary or accent colour in the #2563EB–#7C3AED band. No rounded cards, soft shadows, or hover-lift grids. No centred hero with subtext and a pill button. No gradient blobs, glassmorphism, or frosted panels. No Inter, Roboto, Helvetica, Arial, Poppins, or system-ui as the named families. No decorative illustration or photography used as atmosphere rather than information. No bouncy or springy micro-interactions. The 405-page structure must not be hidden behind a search-only interface.

10. Tech Stack

No technology choices were specified in the authoritative user requirement thread. The following are coherent defaults consistent with the accepted delivery shape (a first-party, anonymously reachable, content-heavy website of exactly 405 pages), and are labeled as defaults.

• Frontend: React — [Default — not specified by user]
• Backend: Python / FastAPI — [Default — not specified by user]
• Storage: appropriate storage for the 405 pages' content and metadata — [Default — not specified by user]
• Containerization: Docker / docker-compose — [Default — not specified by user]
• Orchestration: Kubernetes only if deployment requires it — [Default — not specified by user]

11. Assumptions and Constraints

Assumptions

• A-1. The 405 pages are numbered 1 through 405, with Landing as the entry surface and Page 2 through Page 405 as the numbered content pages, matching the closed page contract. (required_inference)
• A-2. The 404 numbered content pages share one composition and differ only in page number, section code, title, date, and content. (required_inference)
• A-3. The four coded section colours are red, yellow, ink blue, and black, as defined in the creative direction. (explicit, from the creative direction)
• A-4. The site's content is a fixed, numbered catalogue; no authoring, editing, or publishing surface is assumed. (required_inference)

Constraints

• C-1. The site must contain exactly 405 pages. (explicit)
• C-2. The site must be content-heavy and large in scale, requiring depth rather than a small brochure-style site. (explicit)
• C-3. Every page is anonymously reachable with no access requirement; no account, registration, login, profile, or saved-reading state exists. (required_inference, from the page contract)
• C-4. Generative or upscaling output must be constrained to the size budget of a single page render. (explicit)
• C-5. The 405-page structure must not be hidden behind a search-only interface. (explicit, from the creative direction)
• C-6. The generic indigo/blue-on-white SaaS template is forbidden for this project. (explicit, from the creative direction)

12. Glossary

• 405-page — The project name and the site's defining commitment: a content-heavy website of exactly 405 pages.
• Site Visitor — The only accepted human actor; an anonymous reader who browses, navigates, and reads the site's 405 pages.
• Landing — The anonymous public entry surface that explains the site and directs visitors into the 405-page content experience.
• Numbered content page — Any of Page 2 through Page 405; an independently browsable destination within the catalogue.
• Numbered spread header — The header on every page: a 2px black rule, the page number in tabular figures at 72px, the section code as a colour bar, and the title flush-left in Archivo bold.
• Contents rail — The permanent left rail (240px on desktop) listing all 405 pages by number and colour code, with the active page marked by a solid red 8px bar.
• Metadata column — The right column carrying page number, section code, and date, with the page number updating with a hard cut on scroll.
• Page-range ticker — The thin horizontal ticker under the header scrolling the current chapter's page numbers continuously; pauses on hover and wraps into static rows under prefers-reduced-motion.
• Section code — One of the four coded wayfinding colours (red, yellow, ink blue, black) identifying which chapter of the 405 a page belongs to.
• Code bar — An 8px solid colour bar used as a wayfinding marker for a section code.
• Artefact panel — A white panel with a 1px border and a 13px uppercase caption, used where a page carries an artefact.
• Generative upscale — A generative or upscaling step that produces page content or page imagery, whose output size is constrained to the size budget of a single page render.