System Requirements Document for uk-dept77

1. Introduction

uk-dept77 is a premium UK streetwear media and discovery website. It is built as a genuine streetwear publication — not a shop, not a corporate brochure — covering the latest streetwear drops, new collections, collaborations, trending pieces and affordable finds.

The product intent is editorial authority plus cultural cool: a publication that knows what is dropping before its readers do, framed like a premium fashion magazine and read primarily on a phone. The site must be credible enough to eventually generate revenue through affiliate links, advertising and brand partnerships, while remaining a media and discovery destination rather than a transactional store.

The audience is UK teenagers and young adults who are into modern streetwear, football-inspired fashion, trainers and emerging brands. They arrive mostly from TikTok and Instagram, on mobile, mid-scroll, with low patience and high visual literacy. The site must therefore be extremely good on mobile, image-first, fast to scan, and free of anything that reads as a generic corporate/business website.

Current content is realistic placeholder streetwear content and imagery, deliberately structured so that every image, headline, category, date and description is easy to replace later.

2. System Overview

uk-dept77 is a dark, editorial, mobile-first publication with seven public editorial destinations — Home, Latest Drops, News, Trending, Under £100, Brands and About — plus a focused Article reading destination, and a small protected editorial workspace (Content, Article Editor, Login) used by the person running the publication.

Public readers browse without any account. They land on Home, see a full-viewport featured story, then move through the Latest Drops grid, the Trending Now rail, the Under £100 grid, the Latest News list, the newsletter signup and the social media links. Every article card carries an image, headline, category, date and short description, and opens the full story on the Article destination. The category destinations (Latest Drops, News, Trending, Under £100, Brands) each present their own coverage area, and About carries the publication's identity and information.

The Editorial Publisher is the only protected actor. Editorial access is provisioned or invited rather than publicly self-enrolled: the publisher verifies on Login, then browses and maintains durable editorial records in Content and creates or edits reusable stories — image, headline, category, date and short description — in Article Editor. Published records flow back out to the public destinations, which is what makes placeholder content genuinely replaceable without rework.

2a. Product Interpretation and Delivery Boundary

Delivery is a first-party web application owned and operated by the publication. All seven editorial pages, the Article reading destination, and the protected editorial workspace are application-owned custom UI. There is no provider-owned or external-only surface in the current scope, and no headless-only delivery.

Access is split cleanly. Home, Latest Drops, News, Trending, Under £100, Brands, About and Article are publicly reachable with no account and no sign-in — this is a media site, and gating reading would contradict its purpose. Content and Article Editor are protected and role-restricted to the Editorial Publisher. Login is the anonymous entry boundary for that protected work: it is reachable without an existing session, and it is where a provisioned publisher verifies their identity before protected editorial state becomes available. Login does not own self-service account creation; editorial access is provisioned or invited by the publication.

The current horizon covers the editorial publication, its reading experience, its replaceable content model, and the publisher's ability to maintain that content. Revenue through affiliate links, advertising and brand partnerships is a stated direction for the site rather than a current transactional capability: the current build must be structured so that affiliate links, advertising placements and brand-partnership content can be added later without rework, but no affiliate programme, ad server, campaign manager or partnership workflow is part of the current scope. Likewise, newsletter signup is a current homepage capability; the downstream newsletter platform, list management and send tooling are not.

2b. Source Content Inventory

No reference directive with content_source authority was supplied. All editorial content in the current build is realistic placeholder streetwear content and imagery, structured for later replacement.

2c. Page Content and Component Coverage

Home

• Information and state: The publication's front page as a vertical sequence of distinct editorial spreads. Public, no account, no personal state. Content is drawn from the same editorial records that populate the category destinations.
• Primary actions: Open the featured story; open any Latest Drops card; scroll the Trending Now rail; open any Under £100 card; open any Latest News item; submit the newsletter signup; follow a social media link.
• Supporting actions: Move between featured stories via the hero index and arrow controls; open a category destination from the navigation; open the mobile overlay menu.
• Domain entities: Featured story, article/drop record (image, headline, category, date, short description), category, brand, price band (Under £100), newsletter signup, social link.
• Components:
  • Featured story hero — full-viewport (100svh mobile, 88vh desktop) full-bleed fashion photograph; bottom-left stacked composition of a red category tag, a 3-line oversized headline running to the grid's right margin and overlapping the image's bottom edge, a muted date line, and a single underlined 'Read the story' link; top-right '01 / 04' index with two thin arrow controls; 40% black scrim at the base for legibility.
  • Latest Drops grid — 2-up image-first cards on desktop, single column on mobile, each with image, headline, category, date and short description; section header carries the red live-drop dot and a running 'DROP 001 / 002 / 003' counter.
  • Trending Now rail — horizontal snap-scroll of 4:5 image cards on mobile, grid on desktop, same card anatomy.
  • Under £100 grid — 3-up grid of affordable-find cards with the same card anatomy.
  • Latest News list — list rows with a right-hand hairline rule, each row carrying image, headline, category, date and short description.
  • Newsletter signup block — surface-toned block with an email input and a solid red CTA.
  • Social media links — outbound links to the publication's social profiles.
  • Sticky top bar — logo left, primary nav centre, red live-drop dot on Latest Drops; shrinks to 56px on scroll and swaps its centre nav for a scrolling marquee of the latest drop headlines.
  • Mobile overlay menu — full-screen black overlay with nav items stacked in oversized display type.
• States: Loading — image slots hold their editorial crop ratio so the grid does not reflow; headline and meta text render as reserved blocks. Empty — if a section has no current records, the section header remains with a short editorial line rather than collapsing the page. Success — all sections render with current records; newsletter signup confirms inline. Error — an image that fails to load leaves its slot and headline intact; a failed newsletter submission shows an inline message and keeps the entered address. Recovery — reader can retry the newsletter submission or continue scrolling; no section failure blocks the rest of the page.

Latest Drops

• Information and state: The publication's drop coverage area. Public, no account. Lists current drop records newest-first.
• Primary actions: Open a drop story; scan the drop counter and live-drop indicator.
• Supporting actions: Move to another category destination from the navigation; open the mobile overlay menu.
• Domain entities: Drop record (image, headline, category, date, short description), drop counter, brand.
• Components: Section header with red live-drop dot and running drop counter; drop card grid with the standard card anatomy; sticky top bar; mobile overlay menu.
• States: Loading — reserved card slots. Empty — header plus a short editorial line stating no drops are listed yet. Success — drop cards render newest-first. Error — failed image leaves the slot and headline intact. Recovery — reader can continue to another destination.

News

• Information and state: The publication's streetwear news coverage area. Public, no account. Lists current news records newest-first.
• Primary actions: Open a news story.
• Supporting actions: Move to another category destination; open the mobile overlay menu.
• Domain entities: News record (image, headline, category, date, short description).
• Components: Section header; news list rows with a right-hand hairline rule and the standard card anatomy; sticky top bar; mobile overlay menu.
• States: Loading — reserved row slots. Empty — header plus a short editorial line. Success — news rows render newest-first. Error — failed image leaves the row intact. Recovery — reader can continue to another destination.

Trending

• Information and state: The publication's trending-pieces coverage area. Public, no account. Lists current trending records.
• Primary actions: Open a trending story.
• Supporting actions: Move to another category destination; open the mobile overlay menu.
• Domain entities: Trending record (image, headline, category, date, short description), piece, brand.
• Components: Section header; trending card grid with the standard card anatomy; sticky top bar; mobile overlay menu.
• States: Loading — reserved card slots. Empty — header plus a short editorial line. Success — trending cards render. Error — failed image leaves the slot and headline intact. Recovery — reader can continue to another destination.

Under £100

• Information and state: The publication's affordable-finds coverage area. Public, no account. Lists current affordable-find records.
• Primary actions: Open an affordable-find story.
• Supporting actions: Move to another category destination; open the mobile overlay menu.
• Domain entities: Affordable-find record (image, headline, category, date, short description), price band, brand.
• Components: Section header; one full-bleed red band carrying a single oversized display line; affordable-find card grid with the standard card anatomy; sticky top bar; mobile overlay menu.
• States: Loading — reserved card slots. Empty — header plus a short editorial line. Success — affordable-find cards render. Error — failed image leaves the slot and headline intact. Recovery — reader can continue to another destination.

Brands

• Information and state: The publication's brand coverage area, including emerging brands. Public, no account.
• Primary actions: Open a brand story.
• Supporting actions: Move to another category destination; open the mobile overlay menu.
• Domain entities: Brand, brand record (image, headline, category, date, short description).
• Components: Section header; brand card grid with the standard card anatomy; sticky top bar; mobile overlay menu.
• States: Loading — reserved card slots. Empty — header plus a short editorial line. Success — brand cards render. Error — failed image leaves the slot and headline intact. Recovery — reader can continue to another destination.

About

• Information and state: The publication's information and editorial identity destination. Public, no account. Static editorial copy describing what the publication covers and who it is for.
• Primary actions: Read the publication's information; follow a social media link.
• Supporting actions: Move to another destination; open the mobile overlay menu.
• Domain entities: Publication identity copy, social link.
• Components: Oversized display headline; editorial body copy; social media links; sticky top bar; mobile overlay menu.
• States: Loading — reserved text blocks. Empty — not applicable; the page carries fixed editorial copy. Success — copy renders. Error — not applicable for static copy. Recovery — reader can navigate away.

Article

• Information and state: The focused reading destination for a full story opened from any article card. Public, no account. Renders one editorial record: image, headline, category, date, short description and full story body.
• Primary actions: Read the full story; follow an outbound link where the story carries one.
• Supporting actions: Return to the originating category destination; move to another destination from the navigation.
• Domain entities: Article record (image, headline, category, date, short description, body), brand, price band where relevant.
• Components: Full-bleed lead image at the editorial crop; red category tag; oversized article headline; muted date line; story body; outbound link treatment; sticky top bar; mobile overlay menu.
• States: Loading — reserved lead-image slot and headline block. Empty — a record that cannot be found shows a short editorial not-found line with a route back to the category destinations. Success — full story renders. Error — failed lead image leaves the headline and body intact. Recovery — reader can return to the originating destination or navigate elsewhere.

Content

• Information and state: The protected publisher workspace for browsing and maintaining durable editorial records across all coverage areas. Role-restricted to the Editorial Publisher; requires a verified session.
• Primary actions: Browse editorial records across coverage areas; open a record in Article Editor; create a new record.
• Supporting actions: Filter or scan by coverage area; return to the public site.
• Domain entities: Editorial record (image, headline, category, date, short description, body), coverage area, publication status.
• Components: Workspace header with the publisher's session context; coverage-area grouping; record list with headline, category, date and status; create-new action; open-record action.
• States: Loading — reserved list rows. Empty — a coverage area with no records shows an explicit empty state with the create-new action. Success — records list across coverage areas. Error — a failed load shows an inline message and a retry. Recovery — retry the load; if the session has lapsed, the publisher is returned to Login and then back to Content.

Article Editor

• Information and state: The protected publisher workspace for creating and editing reusable stories. Role-restricted to the Editorial Publisher; requires a verified session. Owns the image, headline, category, date and short description fields that every article card depends on.
• Primary actions: Create a new story; edit an existing story; set the image, headline, category, date and short description; write the story body; save the record.
• Supporting actions: Return to Content; discard unsaved changes.
• Domain entities: Editorial record (image, headline, category, date, short description, body), image slot with documented 4:5 and 3:2 crops, category, publication status.
• Components: Image slot with crop guidance; headline field; category field; date field; short description field; story body field; save action; discard action.
• States: Loading — reserved field blocks when opening an existing record. Empty — a new record opens with empty fields and the image slot in its placeholder state. Success — the saved record is confirmed and becomes available to the public destinations. Error — a failed save keeps all entered values in place and shows an inline message. Recovery — retry the save; if the session has lapsed, the publisher is returned to Login and then back to the editor with the record.

Login

• Information and state: The anonymous entry boundary for protected editorial work. Reachable without an existing session. Verifies a provisioned or invited Editorial Publisher; it does not offer public self-enrolment.
• Primary actions: Enter credentials and verify.
• Supporting actions: None beyond verification; there is no public sign-up path.
• Domain entities: Publisher identity, session.
• Components: Credential fields; verify action; inline error region.
• States: Loading — the verify action shows a pending state. Empty — not applicable. Success — verification establishes the session and continues to the protected editorial workspace. Error — invalid credentials show an inline message without revealing which field failed. Recovery — the publisher can retry; a publisher without provisioned access has no self-service path and must be provisioned by the publication.

3. Functional Requirements

FR-1 — Public editorial reading (explicit). As a Streetwear Reader, I should be able to open Home, Latest Drops, News, Trending, Under £100, Brands and About without any account, so that I can read the publication immediately on arrival from TikTok or Instagram.

• Trigger/input: Opening any public destination.
• Observable result: The destination renders its editorial content with no sign-in prompt and no gate.
• Access state: Public, no account.
• Failure/recovery: A destination that fails to load shows an inline message and a retry; the rest of the site remains reachable.
• Continuation: The reader can move to any other public destination from the navigation.

FR-2 — Featured story on Home (explicit). As a Streetwear Reader, I should see a large featured story as the dominant element of Home, so that the publication leads with a single strong editorial statement.

• Trigger/input: Landing on Home.
• Observable result: A full-viewport featured story renders with its full-bleed photograph, red category tag, oversized headline, date line and a single 'Read the story' link.
• Access state: Public, no account.
• Failure/recovery: If the featured image fails, the headline, category, date and link remain readable over the black ground.
• Continuation: The reader can open the featured story or move to the next featured story via the hero index and arrow controls.

FR-3 — Latest Drops grid on Home (explicit). As a Streetwear Reader, I should see a Latest Drops grid on Home, so that I can scan the newest drops without leaving the front page.

• Trigger/input: Scrolling Home past the featured story.
• Observable result: A grid of drop cards renders, each with image, headline, category, date and short description, under a section header carrying the red live-drop dot and a running drop counter.
• Access state: Public, no account.
• Failure/recovery: A failed card image leaves its slot, headline and meta intact.
• Continuation: The reader can open any drop card or continue to the Trending Now section.

FR-4 — Trending Now section on Home (explicit). As a Streetwear Reader, I should see a Trending Now section on Home, so that I can see what is currently trending.

• Trigger/input: Scrolling Home past the Latest Drops grid.
• Observable result: A Trending Now section renders as a horizontal snap-scroll rail on mobile and a grid on desktop, with the standard card anatomy.
• Access state: Public, no account.
• Failure/recovery: A failed card image leaves its slot and headline intact.
• Continuation: The reader can open a trending card or continue to the Under £100 section.

FR-5 — Under £100 section on Home (explicit). As a Streetwear Reader, I should see an Under £100 section on Home, so that I can find affordable pieces alongside the headline drops.

• Trigger/input: Scrolling Home past the Trending Now section.
• Observable result: An Under £100 section renders with affordable-find cards using the standard card anatomy.
• Access state: Public, no account.
• Failure/recovery: A failed card image leaves its slot and headline intact.
• Continuation: The reader can open an affordable-find card or continue to the Latest News section.

FR-6 — Latest News on Home (explicit). As a Streetwear Reader, I should see the Latest News on Home, so that I can catch up on streetwear news from the front page.

• Trigger/input: Scrolling Home past the Under £100 section.
• Observable result: A Latest News list renders with a right-hand hairline rule, each row carrying image, headline, category, date and short description.
• Access state: Public, no account.
• Failure/recovery: A failed row image leaves the row and headline intact.
• Continuation: The reader can open a news item or continue to the newsletter signup.

FR-7 — Newsletter signup on Home (explicit). As a Streetwear Reader, I should be able to sign up to the newsletter from Home, so that I can keep up with the publication after leaving the site.

• Trigger/input: Entering an email address in the newsletter block and submitting.
• Observable result: The submission is accepted and confirmed inline.
• Access state: Public, no account.
• Failure/recovery: A failed submission shows an inline message and keeps the entered address so the reader can retry.
• Continuation: The reader can continue browsing or follow a social media link.

FR-8 — Social media links on Home (explicit). As a Streetwear Reader, I should see the publication's social media links on Home, so that I can follow the publication on the platforms I already use.

• Trigger/input: Selecting a social media link.
• Observable result: The link opens the publication's social profile.
• Access state: Public, no account.
• Failure/recovery: A link that cannot be resolved leaves the reader on Home with the rest of the page intact.
• Continuation: The reader can return to Home and continue browsing.

FR-9 — Article card anatomy (explicit). As a Streetwear Reader, I should see an image, headline, category, date and short description on every article card, so that I can judge a story before opening it.

• Trigger/input: Viewing any card on Home, Latest Drops, News, Trending, Under £100 or Brands.
• Observable result: Every card renders all five elements.
• Access state: Public, no account.
• Failure/recovery: A missing image leaves the remaining four elements readable.
• Continuation: The reader can open the card or keep scanning.

FR-10 — Category coverage destinations (explicit). As a Streetwear Reader, I should be able to open Latest Drops, News, Trending, Under £100 and Brands as their own destinations, so that I can read a coverage area in full rather than only its homepage preview.

• Trigger/input: Selecting a category destination from the navigation.
• Observable result: The destination renders its coverage area with the standard card anatomy.
• Access state: Public, no account.
• Failure/recovery: A failed load shows an inline message and a retry.
• Continuation: The reader can open a story or move to another destination.

FR-11 — Full story reading (required_inference). As a Streetwear Reader, I should be able to open a card and read the full story on its own focused destination, so that the publication's coverage is readable end to end rather than only as card summaries.

• Trigger/input: Selecting any article card.
• Observable result: The Article destination renders the full story with its lead image, category tag, headline, date and body.
• Access state: Public, no account.
• Failure/recovery: A record that cannot be found shows a short not-found line with a route back to the category destinations; a failed lead image leaves the headline and body intact.
• Continuation: The reader can return to the originating destination or move elsewhere.

FR-12 — Publication information on About (explicit). As a Streetwear Reader, I should be able to read what the publication is and who it is for on About, so that I understand the editorial identity behind the coverage.

• Trigger/input: Opening About.
• Observable result: The publication's information and editorial identity copy renders.
• Access state: Public, no account.
• Failure/recovery: Not applicable for static copy; the reader can navigate away.
• Continuation: The reader can follow a social media link or move to another destination.

FR-13 — Mobile-first reading (explicit). As a Streetwear Reader arriving from TikTok or Instagram, I should get an experience that is extremely good on mobile, so that reading the publication on a phone feels native to how I already consume content.

• Trigger/input: Opening any destination on a phone.
• Observable result: Single-column layout with 20px side padding, oversized display headlines at mobile scale, thumb-scrollable snap rails, a full-screen overlay menu, and no horizontal overflow.
• Access state: Public, no account.
• Failure/recovery: A slow image load leaves the layout stable rather than reflowing.
• Continuation: The reader can keep scrolling without losing position.

FR-14 — Replaceable placeholder content (explicit). As an Editorial Publisher, I should be able to replace placeholder streetwear content and imagery without rework, so that the publication can move from placeholder to real coverage cheaply.

• Trigger/input: Editing or creating an editorial record.
• Observable result: Every image, headline, category, date and short description is a single replaceable field on the record, and the change appears on the public destinations.
• Access state: Protected, Editorial Publisher only.
• Failure/recovery: A failed save keeps entered values in place and shows an inline message.
• Continuation: The publisher can retry the save or return to Content.

FR-15 — Provisioned editorial access (required_inference). As an Editorial Publisher, I should be provisioned or invited into editorial access rather than self-enrolling, so that control of the publication's content stays with the publication.

• Trigger/input: The publication provisions or invites the publisher.
• Observable result: The publisher holds credentials that Login will verify; no public self-enrolment path exists.
• Access state: Anonymous entry at Login; protected state only after verification.
• Failure/recovery: A publisher without provisioned access has no self-service path and must be provisioned by the publication.
• Continuation: The publisher verifies on Login and continues to the protected editorial workspace.

FR-16 — Returning verification (required_inference). As an Editorial Publisher, I should verify my identity on Login before reaching protected editorial state, so that durable publication content stays bound to the correct person.

• Trigger/input: Entering credentials on Login and verifying.
• Observable result: A verified session is established and the publisher continues to the protected editorial workspace.
• Access state: Login is anonymously reachable; Content and Article Editor remain unavailable until verification succeeds.
• Failure/recovery: Invalid credentials show an inline message without revealing which field failed, and the publisher can retry.
• Continuation: After verification the publisher continues to Content or Article Editor.

FR-17 — Browse and maintain editorial records (required_inference). As an Editorial Publisher, I should be able to browse and maintain durable editorial records across all coverage areas in Content, so that the publication's coverage stays current.

• Trigger/input: Opening Content with a verified session.
• Observable result: Records list grouped by coverage area with headline, category, date and status, and each record can be opened or a new one created.
• Access state: Protected, Editorial Publisher only.
• Failure/recovery: A failed load shows an inline message and a retry; a lapsed session returns the publisher to Login and then back to Content.
• Continuation: The publisher opens a record in Article Editor or creates a new one.

FR-18 — Create and edit stories (required_inference). As an Editorial Publisher, I should