System Requirements Document for proud-york

1. Introduction

proud-york is a Spider-Man project set in New York City. It is a pop-culture, comic-book, street-level entertainment product for fans and curious visitors: the city is treated as a character, not a backdrop, and the whole experience is meant to read like a piece of New York street culture rather than a calm product tour.

The product intent derived from the authoritative requirement thread is:

• Build a Spider-Man project.
• Set that project in / theme it around New York City.

The audience is twofold. The Spider-Man Project Creator (Ashie Gaming, PH) is the person building the project and shaping its content and presentation; their successful outcome is a working Spider-Man-themed New York City experience they can view and share. The Visitor is anyone who opens the project to browse the Spider-Man-themed New York City content and reach its intended experience — the outcome the creator is building toward.

The emotional register is kinetic, urban, loud, heroic and a little chaotic. The visual and interaction language is poster-scale New York typography after Paula Scher: type as skyline, colour blocks that collide, words as architecture.

2. System Overview

proud-york is delivered as a single first-party custom web experience with one anonymous, publicly reachable entry surface: Landing. There is no account, no sign-in, and no protected area in the current scope — the Landing page is the anonymous entry point presenting the Spider-Man-themed New York City experience for visitors to open and browse.

Actors

• Spider-Man Project Creator — the sole active human in the source; defines the project's content and shapes its presentation, and views/shares the finished experience.
• Visitor — browses the Spider-Man-themed New York City content and reaches the project's intended experience.
• Application (system) — serves the Landing experience, its content, its navigation, and its motion/static states.

Accepted behavior in current scope

• A full-viewport poster entry that presents the project as "PROUD YORK" and lets a visitor enter the city experience.
• A continuously running ticker of NYC place-names.
• A five-block borough wayfinding rail (Manhattan, Brooklyn, Queens, Bronx, Staten Island) that acts as both navigation and section index.
• Poster-grid content sections separated by diagonal colour bands, with section numbers.
• Duotone/halftone New York photography cutouts and a single stylised web-line graphic as decoration.

Narrow exclusions

• No literal Spider-Man clip art or trademarked character illustration.
• No rounded corners, pill buttons, or soft drop shadows.
• No centred headline + subtext + blue button hero.
• No gradient blobs, glassmorphism, or frosted panels.
• No Inter, Roboto, Arial, Helvetica, or system-ui for headings or body.
• No identical hover-lift card grids.
• No blue–indigo primary accents (#0057FF, #2563EB, #6366F1 and neighbours).
• No 3D renders, no stock people, no clip art.
• No parallax on text; nothing bounces, nothing floats.
• No readable text or control cropped, covered, or running off an edge.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. proud-york is a first-party custom web experience. The application owns the Landing surface, its content, its navigation, and its motion states. There is no provider-owned or external-destination surface in the current scope, and no headless-only delivery: the experience is a rendered, browsable page.

Access ownership. The Landing surface is anonymous and publicly reachable (access_requirement: none). No identity, account, or session continuity is required or established anywhere in the current scope, because no accepted behavior creates durable actor-specific state, a commitment, an entitlement, or a value transfer that must remain bound to a particular participant. There is therefore no sign-in, registration, invitation, or provisioning surface, and none is inferred.

Current vs. future boundary. Everything described in this document is current scope. No future-horizon requirements were stated in the authoritative thread; nothing is deferred, and nothing beyond the accepted requirements is added.

2b. Source Content Inventory

Not applicable — no reference directive declares content_source.

2c. Page Content and Component Coverage

Landing

Information and state

• Full-viewport poster hero: the wordmark PROUD YORK set in Anton, uppercase, flush-left, stacked on three lines, filling roughly 70% of the first screen height, bone-white (#F5F1E6) on black (#0E0E0F).
• The word YORK sits on a hot-red block (#E8231A) that bleeds off the right edge of the viewport.
• A bone ticker band runs across the lower third with NYC place-names in uppercase Archivo (Coney Island, Hell's Kitchen, Queensboro, 42nd St, and further place-names).
• Five colour-coded borough wayfinding blocks form the bottom rail: Manhattan, Brooklyn, Queens, Bronx, Staten Island.
• Poster-grid content sections below the hero, each introduced by a diagonal −7° colour band carrying a section number in Archivo 600 micro-caps.
• Section content alternates 7/5 and 5/7 splits: one side a solid colour block, the other type or a high-contrast duotone/halftone photo cutout.
• A single closing call-to-action, the only centred element on the page.

Primary actions

• ENTER THE CITY — a rectangular red CTA slab under the left edge of the headline; enters the city experience.
• Borough wayfinding blocks — each block navigates to its borough's section and wipes its colour across on hover in 180ms.

Supporting actions

• Horizontal scrolling of the ticker band when prefers-reduced-motion is active.
• Scrolling through poster sections, each revealed by a colour-block wipe (clip-path inset).

Domain entities

• Project wordmark ("PROUD YORK").
• Borough (Manhattan, Brooklyn, Queens, Bronx, Staten Island) — name, colour code, section index.
• NYC place-name — ticker item text.
• Section — number, diagonal band, content split.
• Photo cutout — duotone red/black or bone/black halftone New York imagery (fire escapes, water towers, subway signage, a rooftop water tank).
• Web-line graphic — thin bone strokes crossing a colour block.

Component responsibilities

• Poster hero — renders the stacked Anton wordmark, the red block behind "YORK", and the CTA slab; keeps all readable text and the control whole at every viewport.
• Ticker band — runs the uppercase place-name marquee continuously at ~60px/s; becomes a horizontally scrollable row under reduced motion.
• Borough rail — renders five hard-edged colour-coded blocks as navigation and section index; handles the 180ms colour wipe on hover.
• Diagonal band — renders the −7° colour transition and its section number between sections.
• Section split — renders the alternating 7/5 and 5/7 colour-block/type-or-photo layout.
• Photo cutout — renders duotone/halftone imagery cropped hard to the grid and bled off one edge, never framed inside a card.
• Web-line decoration — renders the thin bone stroke graphic; never crosses readable type.
• Closing CTA — renders the single centred call-to-action.

States

• Loading — poster hero renders immediately as static type; no skeleton or spinner is required for the hero. Photo cutouts may resolve progressively without shifting layout.
• Empty — not applicable: the Landing content is authored, not user-generated, so there is no empty collection state.
• Success — the visitor sees the full poster, the running ticker, the borough rail, and can enter the city experience or navigate to a borough section.
• Error — if a photo cutout fails to load, its colour block or type content still renders so the section layout and all readable text remain intact.
• Recovery — the visitor can continue scrolling and navigating; no action is blocked by a failed decorative asset.
• Reduced motion — the ticker becomes a horizontally scrollable row, all reveals become instant static states, and every item can be brought fully into view.

3. Functional Requirements

FR-1 — Spider-Man project experience As a Spider-Man Project Creator, I should have a working Spider-Man project so that the experience I am building exists and can be viewed.

• Provenance: explicit
• Trigger/input: the creator builds and publishes the project.
• Observable result: a rendered, browsable Spider-Man project experience.
• Access state: anonymous, publicly reachable.
• Failure/recovery: not applicable at this level; the project is the delivered artifact.
• Continuation: the creator views and shares the experience; visitors open it.
• Acceptance: the project exists as a browsable experience themed around Spider-Man.

FR-2 — New York City setting and theme As a Spider-Man Project Creator, I should have the project set in and themed around New York City so that the city reads as a character in the experience.

• Provenance: explicit
• Trigger/input: the creator authors the project's content and presentation around New York City.
• Observable result: New York City is present throughout the experience — as place-names, boroughs, and New York imagery.
• Access state: anonymous, publicly reachable.
• Failure/recovery: not applicable.
• Continuation: visitors encounter the New York City theme on Landing.
• Acceptance: the experience is recognizably set in and themed around New York City.

FR-3 — Anonymous poster entry As a Visitor, I should land on a full-viewport poster entry so that I immediately understand this is a Spider-Man New York City project and can enter it.

• Provenance: required_inference
• Trigger/input: the visitor opens the project URL.
• Observable result: the Landing page renders the "PROUD YORK" wordmark in Anton, uppercase, flush-left, stacked on three lines, bone-white on black, filling roughly 70% of the first screen height, with "YORK" reversed out of a hot-red block bleeding off the right edge.
• Access state: anonymous; no identity required.
• Failure/recovery: if a decorative asset fails, the type hero still renders and remains readable.
• Continuation: the visitor uses the CTA or the borough rail.
• Acceptance: at 375px, 768px, and 1280px the headline, wordmark, labels, numbers, and controls stay entirely inside the viewport and their container, wrapping or scaling to fit, with nothing covering them.

FR-4 — Enter the city As a Visitor, I should activate a single rectangular red CTA slab so that I enter the city experience.

• Provenance: required_inference
• Trigger/input: the visitor activates ENTER THE CITY, positioned under the left edge of the headline.
• Observable result: the visitor enters the city experience.
• Access state: anonymous; no identity required.
• Failure/recovery: the control remains visible and activatable; no state is lost.
• Continuation: the visitor browses the city experience.
• Acceptance: the CTA is a rectangular slab with a 3px inner offset border that snaps on hover, with zero border-radius, and it stays whole and uncovered at every viewport.

FR-5 — NYC place-name ticker As a Visitor, I should see a continuously running ticker of NYC place-names so that the page carries the energy of the city.

• Provenance: required_inference
• Trigger/input: the Landing page renders.
• Observable result: a bone band crosses the full viewport width in the lower third, carrying uppercase Archivo place-names (Coney Island, Hell's Kitchen, Queensboro, 42nd St, and further place-names) moving continuously at ~60px/s.
• Access state: anonymous.
• Failure/recovery: under prefers-reduced-motion the ticker becomes a horizontally scrollable row in which every item can be brought fully into view.
• Continuation: the visitor continues to the hero CTA or the borough rail.
• Acceptance: the ticker actually moves; every item becomes fully readable as it passes; the band may cross the viewport edge by design.

FR-6 — Borough wayfinding rail As a Visitor, I should use five colour-coded borough blocks so that I can navigate to a borough's section.

• Provenance: required_inference
• Trigger/input: the visitor hovers or activates a borough block — Manhattan, Brooklyn, Queens, Bronx, Staten Island — in the bottom rail.
• Observable result: the block wipes its colour across in 180ms and navigates to that borough's section.
• Access state: anonymous.
• Failure/recovery: if a block's target section is unavailable, the rail remains visible and the visitor can continue scrolling.
• Continuation: the visitor reads the borough section and continues through the poster.
• Acceptance: five hard-edged colour-coded blocks (red, yellow, teal, bone, black) act as both navigation and section index, with zero border-radius.

FR-7 — Poster section transitions As a Visitor, I should move between poster sections through diagonal colour bands so that the page reads as a continuous poster rather than a stack of cards.

• Provenance: required_inference
• Trigger/input: the visitor scrolls.
• Observable result: each section is revealed by a colour-block wipe (clip-path inset), separated by a −7° diagonal colour band carrying a section number in Archivo 600 micro-caps.
• Access state: anonymous.
• Failure/recovery: under prefers-reduced-motion all reveals become instant static states.
• Continuation: the visitor continues to the next section.
• Acceptance: section transitions are diagonal colour bands, never plain gaps; nothing bounces or floats.

FR-8 — Poster-grid content sections As a Visitor, I should read poster-grid content sections so that I can take in the project's New York City content.

• Provenance: required_inference
• Trigger/input: the visitor scrolls through the page.
• Observable result: sections alternate 7/5 and 5/7 splits on a 12-column base with 24px gutters, one side a solid colour block and the other type or a high-contrast photo cutout; everything flush-left, ragged-right.
• Access state: anonymous.
• Failure/recovery: if a photo cutout fails to load, the colour block or type content still renders and all readable text remains intact.
• Continuation: the visitor reaches the closing call-to-action.
• Acceptance: no identical hover-lift card grids; no rounded corners; readable text and controls stay whole at every viewport.

FR-9 — New York imagery treatment As a Visitor, I should see New York photography treated as duotone halftone cutouts so that the imagery matches the poster language.

• Provenance: required_inference
• Trigger/input: the Landing page renders its sections.
• Observable result: high-contrast duotone red/black or bone/black halftone cutouts of New York — fire escapes, water towers, subway signage, a rooftop water tank — cropped hard to the grid and bled off one edge, never framed inside a card.
• Access state: anonymous.
• Failure/recovery: a failed cutout degrades to its colour block without breaking layout.
• Continuation: the visitor continues through the section.
• Acceptance: no stock people, no gradient blobs, no 3D renders, no clip art; imagery may bleed off an edge but covers no readable text or control.

FR-10 — Web-line decoration As a Visitor, I should see a single stylised web-line graphic so that the Spider-Man motif is present without character illustration.

• Provenance: required_inference
• Trigger/input: the Landing page renders.
• Observable result: thin bone strokes cross a colour block.
• Access state: anonymous.
• Failure/recovery: if the graphic fails to render, the colour block and its content remain intact.
• Continuation: the visitor continues through the page.
• Acceptance: the web-line never crosses readable type, and no literal Spider-Man clip art or trademarked character illustration appears.

FR-11 — Closing call-to-action As a Visitor, I should reach a single closing call-to-action so that I have a clear final action.

• Provenance: required_inference
• Trigger/input: the visitor scrolls to the end of the poster.
• Observable result: the page's only centred element renders as the closing call-to-action.
• Access state: anonymous.
• Failure/recovery: the control remains visible and activatable.
• Continuation: the visitor completes the experience or returns to the borough rail.
• Acceptance: it is the single centred element; nothing else on the page is centred.

FR-12 — Reduced-motion static arrangement As a Visitor who prefers reduced motion, I should get a usable static arrangement so that I can read every item without animation.

• Provenance: required_inference
• Trigger/input: the visitor's system reports prefers-reduced-motion.
• Observable result: the ticker becomes a horizontally scrollable row, and all reveals become instant static states.
• Access state: anonymous.
• Failure/recovery: items wrap into rows or scroll horizontally so each item can be brought fully into view.
• Continuation: the visitor reads the full page and uses the CTA and borough rail normally.
• Acceptance: no animation runs; every item is reachable and fully readable.

4. User Personas

Spider-Man Project Creator

Product context. The creator is the sole active human in the source and the person building a Spider-Man project set in New York City. They are not a passive end user of someone else's product: they define the project's content and shape its presentation, and the project's identity — its name, its theme, its look — is theirs to establish.

Primary goal. A working Spider-Man-themed New York City experience that they can view and share.

Distinct accepted responsibilities. Establishing the project and its New York City theme; authoring the content and presentation that the Landing surface renders; viewing the finished experience as a visitor would; sharing it with others.

Relevant inputs or decisions. The project name (proud-york); the Spider-Man framing; the New York City setting; the poster content — wordmark, boroughs, place-names, sections, imagery.

Interactions with other accepted participants. The creator's work is what the Visitor encounters. The creator does not interact with the Visitor directly in the product; the handoff is the published experience itself.

Observable success. The project renders as a browsable Spider-Man New York City experience, and the creator can open and share it.

Visitor

Product context. The Visitor arrives at a Spider-Man project set in New York City. They are a fan or a curious passer-by, not a signed-in user: they land anonymously on a poster and decide whether to enter the city.

Primary goal. Browse the Spider-Man-themed New York City content and reach the project's intended experience.

Distinct accepted responsibilities. Reading the poster entry; entering the city experience; navigating borough sections; taking in the New York imagery and place-names; reaching the closing call-to-action.

Relevant inputs or decisions. Whether to activate ENTER THE CITY; which borough block to choose; how far to scroll.

Interactions with other accepted participants. The Visitor is the recipient of the creator's authored experience. There is no other human participant in the product.

Observable success. The Visitor reaches the project's intended experience and can read every item on the page, including under reduced motion.

5. Core User Flows

Flow A — Creator establishes and views the Spider-Man New York City project

1. The Spider-Man Project Creator builds the proud-york project as a Spider-Man project set in New York City.
2. The creator authors the Landing content: the "PROUD YORK" wordmark, the borough rail (Manhattan, Brooklyn, Queens, Bronx, Staten Island), the NYC place-name ticker, the poster sections with their section numbers, the duotone New York photo cutouts, and the single web-line graphic.
3. The creator opens the project URL as an anonymous visitor would.
4. Observable result: the full-viewport poster renders — bone-white Anton wordmark on black, "YORK" reversed out of a hot-red block bleeding off the right edge, the bone ticker band running across the lower third, the five borough blocks on the bottom rail, and the red ENTER THE CITY slab under the left edge of the headline.
5. The creator scrolls through the poster sections, confirming each diagonal −7° band and its section number, and that readable text and controls stay whole at 375px, 768px, and 1280px.
6. Continuation: the creator shares the project so that Visitors can open it.

Flow B — Visitor enters the city from the poster

1. The Visitor opens the proud-york project URL anonymously. No account, sign-in, or identity step occurs.
2. The Visitor sees the poster hero: "PROUD YORK" stacked on three flush-left lines, filling roughly 70% of the first screen height, with "YORK" on a hot-red block bleeding off the right edge.
3. The Visitor reads the bone ticker band running across the lower third, carrying uppercase NYC place-names (Coney Island, Hell's Kitchen, Queensboro, 42nd St, and further place-names) at ~60px/s.
4. The Visitor activates the rectangular red ENTER THE CITY slab under the left edge of the headline; the slab's 3px inner offset border snaps on hover.
5. Observable result: the Visitor enters the city experience.
6. Continuation: the Visitor browses the city experience and can return to the poster.

Flow C — Visitor navigates a borough section

1. From the Landing poster, the Visitor looks at the bottom rail of five hard-edged colour-coded borough blocks: Manhattan, Brooklyn, Queens, Bronx, Staten Island.
2. The Visitor hovers a borough block; its colour wipes across in 180ms.
3. The Visitor activates the block.
4. Observable result: the page navigates to that borough's section, introduced by a −7° diagonal colour band carrying the section number in Archivo 600 micro-caps.
5. The Visitor reads the section's 7/5 or 5/7 split — a solid colour block beside type or a duotone halftone New York cutout (fire escape, water tower, subway signage, rooftop water tank) cropped hard to the grid and bled off one edge.
6. Failure/recovery: if a photo cutout fails to load, the colour block or type content still renders and all readable text remains intact; the Visitor continues scrolling.
7. Continuation: the Visitor selects another borough block or continues to the closing call-to-action.

Flow D — Visitor scrolls the poster to the closing call-to-action

1. The Visitor scrolls down from the hero.
2. Each section is revealed by a colour-block wipe (clip-path inset), separated by a diagonal −7° colour band rather than a plain gap.
3. The Visitor passes the single stylised web-line graphic — thin bone strokes crossing a colour block, never crossing readable type.
4. Observable result: the Visitor reaches the page's only centred element, the closing call-to-action.
5. Continuation: the Visitor completes the experience or returns to the borough rail.

Flow E — Visitor with reduced motion reads the full page

1. The Visitor's system reports prefers-reduced-motion.
2. The Visitor opens the project URL.
3. Observable result: the ticker band renders as a horizontally scrollable row instead of a running marquee, and all section reveals are instant static states.
4. The Visitor scrolls the ticker row horizontally so that each place-name is brought fully into view.
5. The Visitor scrolls the page, reads every section, and uses the borough rail and the ENTER THE CITY slab normally.
6. Continuation: the Visitor reaches the closing call-to-action.

6. Visuals Colors and Theme

Muse and headline. Paula Scher — Typography as skyline: New York at poster scale. The skyline becomes letterforms, the hero becomes a poster, and the first screen reads as a piece of New York street culture rather than a SaaS landing page.

Colour tokens (dark mode)

Red and yellow never sit as text on each other — they are always colour blocks behind bone text or black text. Proportions: ~60% black, ~25% bone, ~10% red, ~5% yellow/teal accents.

Typography

• Headings: Anton, uppercase, flush-left, tight leading 0.88–0.92, tracking −0.01em, so words read as slabs of architecture.
• Body: Archivo at 400/500, line-height 1.6, generous measure.
• Micro-labels (borough names, section numbers, coordinates): Archivo 600 uppercase at 11–12px with 0.14em tracking, like painted signage.
• Scale — 1.5 modular poster scale: display clamp(64px, 13vw, 200px); h2 clamp(36px, 6vw, 88px); h3 clamp(24px, 3.4vw, 44px); lead 20/22px; body 16/17px; micro-label 11/12px. Line heights: display 0.9, h2 0.95, body 1.6. Scale contrast is extreme — display type is 6–10x body.

Shape language. Hard edges only — zero border-radius on cards, buttons, images, and inputs. Thick 3–4px black or bone rules separate bands. Colour blocks are perfect rectangles that bleed off the viewport edge. Diagonal bands at −6° to −8° cut across section boundaries as transition devices. Buttons are rectangular slabs with a 3px inner offset border that snaps on hover. No pills, no soft shadows, no rounded corners anywhere.

Layout. Asymmetric poster grid on a 12-column base with 24px gutters: a full-bleed type hero across all columns, then alternating 7/5 and 5/7 splits where one side is a solid colour block and the other is type or a high-contrast photo cutout. Section transitions are diagonal colour bands, never plain gaps. Boroughs are colour-coded wayfinding blocks that double as navigation. Everything flush-left, ragged-right; nothing centred except the single closing call-to-action.

Imagery style. Typography is the image. Where photography appears it is high-contrast duotone red/black or bone/black halftone cutouts of New York — fire escapes, water towers, subway signage, a rooftop water tank — cropped hard to the grid and bled off one edge. A single stylised web-line graphic (thin bone strokes) may cross a colour block but never crosses readable type. No stock people, no gradient blobs, no 3D renders, no clip art.

Readability rule (takes precedence). Readable text and controls stay whole at every viewport: headlines, wordmarks, labels, numbers, cards' text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, and no other element covers 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 (the ticker, horizontally scrollable rows) 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.

7. Signature Design Concept

"PROUD YORK" — a Scher poster pasted on a subway wall.

The public entry is a full-viewport poster. The words PROUD YORK are set in Anton at clamp(72px, 15vw, 220px), stacked on three flush-left lines, filling roughly 70% of the first screen height, bone-white on black. The word YORK sits on a hot-red block (#E8231A) that bleeds off the right edge of the viewport — the type is the skyline, and the red block is the building it stands on.

A bone ticker band runs across the lower third with NYC place-names in uppercase Archivo, moving continuously. A single rectangular red CTA slab — ENTER THE CITY — sits under the left edge of the headline, its 3px inner offset border snapping on hover. Five colour-coded borough wayfinding blocks form the bottom rail, each wiping its colour across in 180ms on hover.

There is no centred headline, no subtext paragraph, no blue button, no gradient. The composition is asymmetric, flush-left, ragged-right, and reads as a piece of New York street culture pasted on a wall. Every element in this concept is an accepted content, state, or control — the concept only recomposes them.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the stacked Anton wordmark "PROUD YORK", with "YORK" reversed out of a hot-red block bleeding off the right edge.
• Input → transformation → outcome thesis: as the Landing page loads, the hero words rise 24px into place in 80ms steps, flush-left, until the three-line wordmark locks into its poster position; the bone ticker band then runs continuously across the lower third at ~60px/s, and the red ENTER THE CITY slab and the five borough blocks settle as the bottom rail. The outcome is a still, poster-like first frame that is nonetheless alive with the city's motion.
• Motion vocabulary: staggered word reveals (24px rise, 80ms steps); a continuous red/bone ticker of NYC place-names at ~60px/s; a 180ms colour wipe on borough-block hover; a colour-block wipe (clip-path inset) revealing each section on scroll. Nothing bounces, nothing floats, no parallax on text.
• Composed first frame: black ground; "PROUD YORK" filling roughly 70% of the first screen height in bone-white Anton; "YORK" on a hot-red block bleeding off the right edge; the bone ticker band across the lower third; the red CTA slab under the left edge of the headline; five colour-coded borough blocks along the bottom rail.
• Reduced-motion state: the ticker becomes a horizontally scrollable row in which every item can be brought fully into view, and all reveals become instant static states. The poster composition is unchanged.

9. Non-Functional Requirements

NFR-1 — Readable text and controls stay whole. Headlines, wordmarks, labels, numbers, cards' text, and controls 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 covers 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. Provenance: explicit (creative direction).

NFR-2 — Moving and scrollable content. Marquees, tickers, carousels, and horizontally scrollable rows may cross the viewport or container edge by design; they are judged by whether they actually move or scroll and whether every item becomes fully readable as it passes, never by the item cut at the edge in a still frame. Provenance: explicit (creative direction).

NFR-3 — Reduced motion. With prefers-reduced-motion, provide a usable static arrangement: wrap items into rows or allow horizontal scrolling so each item can be brought fully into view. A scrollable row need not show every item fully at once. Provenance: explicit (creative direction).

NFR-4 — No rounded or soft surfaces. Zero border-radius on cards, buttons, images, and inputs; no pills, no soft drop shadows, no glassmorphism or frosted panels. Provenance: explicit (creative direction).

NFR-5 — Colour contrast discipline. Red and yellow never sit as text on each other; they are always colour blocks behind bone text or black text. Provenance: explicit (creative direction).

NFR-6 — Focus visibility. The signal yellow #F2C400 serves as the focus ring. Provenance: explicit (creative direction).

NFR-7 — Anonymous access. The Landing surface is publicly reachable with no identity, account, or session requirement. Provenance: required_inference (Planning Scope access contract).

NFR-8 — No trademarked character illustration. No literal Spider-Man clip art or trademarked character illustration appears anywhere in the experience. Provenance: explicit (creative direction).

NFR-9 — Forbidden template look. The generic indigo/blue-on-white SaaS template is forbidden for this project; blue–indigo primary accents (#0057FF, #2563EB, #6366F1 and neighbours) are excluded. Provenance: explicit (creative direction).

NFR-10 — Font discipline. Inter, Roboto, Arial, Helvetica, and system-ui are not used for headings or body. Provenance: explicit (creative direction).

10. Tech Stack

• Frontend: React — a single-page custom web experience rendering the Landing poster surface. [Default — not specified by user]
• Styling: CSS with custom properties for the poster tokens (colour, type scale, spacing rhythm), clamp() for the poster type scale, and clip-path for the colour-block section wipes. [Default — not specified by user]
• Fonts: Anton (headings) and Archivo (body, micro-labels), self-hosted or served via a font CDN. Provenance: explicit (creative direction).
• Backend: none required for the current scope — the Landing content is authored, not user-generated, and no accepted behavior creates durable state. [Default — not specified by user]
• Storage: none required for the current scope. [Default — not specified by user]
• Deployment: static hosting of the built frontend. [Default — not specified by user]

11. Assumptions and Constraints

Assumptions

• A1 — The project is delivered as a single first-party custom web experience with one anonymous, publicly reachable surface (Landing). [Assumption — derived from the Planning Scope page contract.]
• A2 — No identity, account, or session continuity is needed, because no accepted behavior creates durable actor-specific state, a commitment, an entitlement, or a value transfer bound to a particular participant. [Assumption — derived from the access contract.]
• A3 — The Landing content is authored by the creator rather than supplied by visitors, so there is no empty-collection state. [Assumption.]
• A4 — The ticker's place-name list includes at least Coney Island, Hell's Kitchen, Queensboro, and 42nd St, and may include further NYC place-names. [Assumption — the direction names these as examples.]

Constraints

• C1 — The project is a Spider-Man project set in and themed around New York City. Provenance: explicit.
• C2 — The visual and interaction language follows the Paula Scher poster direction: Anton headings, Archivo body, the specified palette, hard edges, diagonal bands, and the specified motion vocabulary. Provenance: explicit.
• C3 — Readable text and controls stay whole at every viewport; the readability rule takes precedence over any direction, requirement, brief, or finding that would crop, clip, cover, or run them off an edge. Provenance: explicit.
• C4 — No literal Spider-Man clip art or trademarked character illustration. Provenance: explicit.
• C5 — No rounded corners, pill buttons, soft drop shadows, gradient blobs, glassmorphism, or frosted panels. Provenance: explicit.
• C6 — No centred headline + subtext + blue button hero; no blue–indigo primary accents. Provenance: explicit.
• C7 — No Inter, Roboto, Arial, Helvetica, or system-ui for headings or body. Provenance: explicit.
• C8 — No identical hover-lift card grids; no 3D renders; no stock people; no clip art. Provenance: explicit.
• C9 — No parallax on text; nothing bounces, nothing floats. Provenance: explicit.
• C10 — The Landing surface is anonymous and publicly reachable; no protected destination exists in the current scope. Provenance: required_inference (Planning Scope access contract).

12. Glossary

• proud-york — The project name for this Spider-Man project set in New York City.
• Landing — The single anonymous, publicly reachable page that presents the Spider-Man-themed New York City experience.
• Poster hero — The full-viewport entry composition: the stacked Anton "PROUD YORK" wordmark, the red block behind "YORK", and the ENTER THE CITY slab.
• Ticker band — The bone band crossing the lower third of the hero, carrying uppercase NYC place-names in continuous motion at ~60px/s.
• Borough rail — The bottom rail of five hard-edged colour-coded blocks (Manhattan, Brooklyn, Queens, Bronx, Staten Island) that acts as both navigation and section index.
• Diagonal band — The −7° colour transition between poster sections, carrying a section number in Archivo 600 micro-caps.
• Colour-block wipe — The clip-path: inset reveal that brings each section in on scroll.
• Duotone halftone cutout — High-contrast red/black or bone/black halftone New York photography, cropped hard to the grid and bled off one edge.
• Web-line graphic — A single stylised decoration of thin bone strokes crossing a colour block, never crossing readable type.
• Micro-label — Archivo 600 uppercase text at 11–12px with 0.14em tracking, used for borough names, section numbers, and coordinates.
• Reduced motion — The prefers-reduced-motion state in which the ticker becomes a horizontally scrollable row and all reveals become instant static states.