System Requirements Document for youtube-channel

1. Introduction

This document specifies the system requirements for youtube-channel, a first-party website that serves as the home base for a YouTube channel whose niche is prophet stories for a Muslim audience. The channel's goal is to become strong and monetized — to earn revenue — and this site exists to support that outcome by giving the channel a credible, reverent public presence on the web.

The product to be built here is the app/website, not the media channel itself. The YouTube channel is the subject the site supports. The site's purpose for viewers — whether it showcases videos, takes bookings or inquiries, sells something, or collects emails — is not yet chosen; this document therefore specifies only the behavior that is settled, and treats the undecided viewer-purpose as an explicit open constraint rather than inventing a selection.

The audience for this document is the channel owner/creator (Irfan Muhammad) and any implementer building the site. The site's own audience is the Muslim viewership interested in prophet stories.

2. System Overview

The current delivery is a custom-UI website with two pages, delivered as a closed, ordered page contract:

1. Landing — the anonymous public entry surface and home base for the prophet-stories YouTube channel. It introduces what the channel is for and directs visitors toward its content and eventual viewer next step.
2. Videos — the dedicated destination for presenting the channel's prophet-story video content to its Muslim audience.

Both pages are owned by the application and are reachable with no access requirement (anonymous). No application-owned identity, account, or sign-in is established or required by the accepted scope.

The accepted human actors are the Channel Owner / Creator and the Viewer / Audience Member. The YouTube platform itself is an external, provider-owned surface: the channel, its videos, and its monetization live on YouTube, not on this site. The site presents and points to that content; it does not host, stream, or monetize the videos itself.

2a. Product Interpretation and Delivery Boundary

The site is a public, anonymous, first-party web presence for a YouTube channel about prophet stories for a Muslim audience. Its job is to be the channel's home base: to state what the channel is, to present its catalogue of prophet-story episodes, and to route visitors toward the channel's content on YouTube.

Delivery and access ownership. Both accepted pages are application-owned and publicly reachable with no access requirement. There is no accepted requirement for accounts, sign-in, or private state, and none is inferred: no accepted journey requires a human to privately own or resume durable actor-specific state, and no commitment, decision, entitlement, or value transfer is bound to a named participant. The channel's actual video delivery and monetization are provider-owned (YouTube) and remain outside this site's ownership.

Current vs. future boundary. Current scope is the two-page public site described above. The site's purpose for viewers beyond presenting the channel and its videos — taking bookings or inquiries, selling something, or collecting emails — is explicitly undecided and is not implemented here. Any such capability is a future decision, not a current requirement.

2b. Source Content Inventory

Not applicable. No reference directive in this project declares a content_source, so no source content inventory is included.

2c. Page Content and Component Coverage

Landing

• Information / state: The channel's identity and purpose — that it tells prophet stories for a Muslim audience. An oversized serif statement of what the channel is, a metadata row (episode count · languages · new episode cadence), the channel handle, an archive marker, and a small timeline diagram. A catalogue section listing the channel's prophet stories as ruled archive rows (index numeral, story name, episode count, duration).
• Primary actions: Watch the latest episode (routes the visitor to the channel's latest video on YouTube); select a catalogue row to reach that story's episodes.
• Supporting actions: Follow the channel handle reference; scan the metadata row for cadence and language coverage.
• Domain entities: Channel, Prophet Story (catalogue entry), Episode, Episode Count, Duration, Language, Cadence, Channel Handle.
• Component responsibilities:
  • Hero statement block — one oversized Cormorant Garamond statement, flush-left, with the word "Prophets" in antique gold; wraps to three lines at display scale.
  • Hero metadata row — a single 1px-ruled row of 13px uppercase Archivo metadata (episode count · languages · new episode cadence), with a bordered rectangular "Watch the latest episode" control and a thin-ringed circular gold play control at the row's right end.
  • Right-hand metadata column — separated by a full-height vertical hairline; stacked channel handle, archive marker, and a small gold timeline diagram, with generous empty space above.
  • Gold band — a full-bleed 6px antique-gold band at the bottom edge of the viewport, the only saturated element on the first screen.
  • Catalogue section — full-width ruled rows, one per prophet story: index numeral (001, 002…), story name in display serif, episode count and duration right-aligned, separated by hairlines, with a gold underline that draws under the hovered/focused row.
  • Colour plate — one full-bleed solid gold or emerald rectangle per page holding a single short quote from an episode in paper white, standing where a hero image would normally sit.
• States:
  • Loading: ruled rows fade in sequentially (300ms, 60ms stagger); with prefers-reduced-motion all rows appear instantly.
  • Empty: if no catalogue entries are available, the catalogue section shows the ruled section header with no rows and no fabricated entries.
  • Success: the hero statement, metadata row, and catalogue rows render whole and readable at 375px, 768px, and 1280px.
  • Error / recovery: if the latest-episode destination is unavailable, the "Watch the latest episode" control remains visible and readable; the visitor can still reach the channel via the handle reference. No error state invents a new capability.
  • Continuation: selecting a catalogue row or the watch control continues the visitor to the channel's content.

Videos

• Information / state: The channel's prophet-story episode catalogue as a two-column asymmetric list — wide 8-column episode rows and a 4-column sticky filter rail — using the same ruled-row logic as the Landing catalogue. Each episode row carries a 16:9 thumbnail, an episode title, and metadata (duration, date, language).
• Primary actions: Select an episode to watch it on YouTube; apply a filter from the filter rail.
• Supporting actions: Scan episode metadata; hover/focus a thumbnail to reveal its full-colour still.
• Domain entities: Episode, Episode Title, Thumbnail, Duration, Date, Language, Filter (episode category).
• Component responsibilities:
  • Episode rows — full-width ruled rows with a strict 16:9 thumbnail, episode title in display serif, and right-aligned metadata in 13px uppercase Archivo.
  • Thumbnail — desaturated monochrome by default, crossfading to full colour on hover/focus (200ms opacity crossfade), carrying a small uppercase numeral tag in the lower-left corner so the archive numbering persists into the video grid.
  • Filter rail — 4-column sticky rail of filter chips in deep emerald, echoing a colour-code alphabet; the active chip is the single active state.
  • Gold band — the page's one full-bleed gold band, repeating as the top edge of the footer.
• States:
  • Loading: ruled episode rows fade in sequentially (300ms, 60ms stagger); with prefers-reduced-motion all rows appear instantly.
  • Empty: if a filter yields no episodes, the list shows the ruled section header with no rows and no fabricated episodes.
  • Success: episode rows, thumbnails, and the filter rail render whole and readable at 375px, 768px, and 1280px, collapsing to a single column at 375px with rules intact.
  • Error / recovery: if an episode's YouTube destination is unavailable, the row and its title remain visible and readable; the visitor can still reach the channel via the handle reference.
  • Continuation: selecting an episode continues the visitor to that episode on YouTube.

3. Functional Requirements

FR-1 — Channel home base (Landing) As a Viewer / Audience Member, I should land on a public page that tells me what this channel is and points me to its content, so that I understand the channel and can start watching.

• Provenance: explicit (requirement: build a website that serves as a home base for a YouTube channel).
• Actor: Viewer / Audience Member. Trigger: visiting the site. Observable result: the Landing page renders the channel's identity, its prophet-story focus, and a route to its content. Access state: anonymous, no access requirement. Failure/recovery: if the latest-episode destination is unavailable, the page still renders and the channel handle remains available. Continuation: the visitor proceeds to the channel's content.

FR-2 — Prophet-story niche presentation As a Viewer / Audience Member, I should see that this channel's niche is prophet stories for a Muslim audience, so that I know the content matches what I came for.

• Provenance: explicit (requirement: the channel's niche/topic is prophet stories for a Muslim audience).
• Actor: Viewer / Audience Member. Trigger: visiting the Landing page. Observable result: the channel's prophet-story focus is stated in the hero statement and reflected in the catalogue of prophet stories. Access state: anonymous. Failure/recovery: not applicable to static presentation. Continuation: the visitor browses the catalogue.

FR-3 — Channel goal of strength and monetization As a Channel Owner / Creator, I should have a site that supports growing a strong, monetized channel, so that the channel can earn revenue.

• Provenance: explicit (requirement: the channel's goal is to be strong and monetized).
• Actor: Channel Owner / Creator. Trigger: operating the channel. Observable result: the site presents the channel and its catalogue credibly and routes visitors to the channel's content on YouTube, where the channel's audience and monetization live. Access state: anonymous public site; the channel's monetization is provider-owned (YouTube). Failure/recovery: not applicable to the site's presentation role. Continuation: the owner continues publishing on YouTube and the site continues to present the catalogue.

FR-4 — Undecided viewer purpose As a Channel Owner / Creator, I should not have a viewer purpose chosen for me, so that the site implements only what I have actually decided.

• Provenance: explicit (constraint: the site's purpose for viewers is undecided — showcase videos, take bookings or inquiries, sell something, or collect emails).
• Actor: Channel Owner / Creator. Trigger: deciding the site's viewer purpose. Observable result: the site implements only the settled behavior (presenting the channel and its prophet-story catalogue and routing visitors to its content); no bookings, inquiries, sales, or email collection are implemented. Access state: anonymous. Failure/recovery: not applicable. Continuation: when the owner settles the viewer purpose, it becomes a future requirement.

FR-5 — Prophet-story catalogue As a Viewer / Audience Member, I should see the channel's prophet stories listed as a catalogue, so that I can find the story I want to watch.

• Provenance: required_inference (indispensable to the accepted outcome of presenting the channel's prophet-story content to its Muslim audience).
• Actor: Viewer / Audience Member. Trigger: visiting the Landing page. Observable result: each prophet story appears as a full-width ruled archive row with index numeral, story name, episode count, and duration. Access state: anonymous. Failure/recovery: if no catalogue entries are available, the section shows its ruled header with no rows and no fabricated entries. Continuation: the visitor selects a story.

FR-6 — Watch the latest episode As a Viewer / Audience Member, I should be able to go from the site to the channel's latest episode, so that I can start watching.

• Provenance: required_inference (indispensable to the accepted outcome of directing visitors toward the channel's content).
• Actor: Viewer / Audience Member. Trigger: selecting the "Watch the latest episode" control. Observable result: the visitor is routed to the channel's latest episode on YouTube (provider-owned). Access state: anonymous. Failure/recovery: if the destination is unavailable, the control remains visible and readable and the channel handle remains available as an alternative route. Continuation: the visitor watches on YouTube.

FR-7 — Episode catalogue (Videos) As a Viewer / Audience Member, I should see the channel's prophet-story episodes in a dedicated destination, so that I can browse and choose what to watch.

• Provenance: required_inference (indispensable to the accepted outcome of presenting the channel's prophet-story video content).
• Actor: Viewer / Audience Member. Trigger: visiting the Videos page. Observable result: episode rows render with 16:9 thumbnails, episode titles, and metadata (duration, date, language). Access state: anonymous. Failure/recovery: if an episode's YouTube destination is unavailable, the row and title remain visible and readable. Continuation: the visitor selects an episode.

FR-8 — Episode selection As a Viewer / Audience Member, I should be able to select an episode and watch it, so that I can consume the prophet-story content.

• Provenance: required_inference (indispensable to the accepted outcome of consuming the showcased prophet-story videos).
• Actor: Viewer / Audience Member. Trigger: selecting an episode row. Observable result: the visitor is routed to that episode on YouTube (provider-owned). Access state: anonymous. Failure/recovery: if the destination is unavailable, the row remains visible and readable. Continuation: the visitor watches on YouTube.

FR-9 — Episode filtering As a Viewer / Audience Member, I should be able to filter the episode list, so that I can narrow the catalogue to what I want.

• Provenance: required_inference (indispensable to making the episode catalogue usable at the accepted scale).
• Actor: Viewer / Audience Member. Trigger: selecting a filter chip in the sticky filter rail. Observable result: the episode list narrows to the matching episodes; the active chip is the single active state. Access state: anonymous. Failure/recovery: if a filter yields no episodes, the list shows its ruled header with no rows and no fabricated episodes. Continuation: the visitor selects an episode or clears the filter.

FR-10 — Thumbnail reveal As a Viewer / Audience Member, I should see an episode's thumbnail come to full colour when I hover or focus it, so that I can identify the episode visually.

• Provenance: required_inference (indispensable to the accepted desaturated-thumbnail presentation being usable for identification).
• Actor: Viewer / Audience Member. Trigger: hovering or focusing a thumbnail. Observable result: the desaturated monochrome still crossfades to full colour (200ms opacity crossfade). Access state: anonymous. Failure/recovery: with prefers-reduced-motion, the still is shown without the crossfade. Continuation: the visitor selects the episode.

4. User Personas

Channel Owner / Creator

• Product context: Irfan Muhammad is building a YouTube channel whose niche is prophet stories for a Muslim audience, with the goal of a strong, monetized channel that earns revenue. This site is the channel's home base on the web — the app/website to be built here, not the media channel itself.
• Primary goal: Grow a strong, monetized channel about prophet stories for a Muslim audience, with a credible public home base that presents the channel and its catalogue and routes visitors to its content.
• Distinct accepted responsibilities: Owning the channel's content and monetization outcome; publishing and showcasing the channel's prophet-story videos; using the site to grow and monetize the audience as the site's purpose is settled. The owner is the one who decides the site's viewer purpose — showcase videos, take bookings or inquiries, sell something, or collect emails — which is currently undecided.
• Relevant inputs or decisions: The channel's prophet-story catalogue (stories, episode counts, durations); the channel handle; the episode count, languages, and new-episode cadence shown on the site; the decision about the site's viewer purpose.
• Interactions with other accepted participants: The owner's work produces the catalogue and content that the Viewer / Audience Member consumes; the owner's monetization outcome depends on the viewer audience the site helps route to the channel.
• Observable success: A channel that earns revenue, supported by a site that presents the prophet-story catalogue and routes visitors to the channel's content.

Viewer / Audience Member

• Product context: A member of the Muslim audience interested in prophet stories — the channel's target viewership and the site's visitor. They arrive at the site anonymously, with no account or sign-in.
• Primary goal: Find and watch the channel's prophet-story content.
• Distinct accepted responsibilities: Consuming the showcased prophet-story videos; browsing the catalogue of prophet stories and the episode list; selecting an episode or the latest episode to watch on YouTube; filtering the episode list; engaging with whatever the site offers viewers as its purpose is settled.
• Relevant inputs or decisions: Which prophet story or episode to watch; which filter to apply; whether to follow the channel handle reference.
• Interactions with other accepted participants: The viewer consumes the catalogue and content produced by the Channel Owner / Creator; the viewer's attention is what the owner's monetization outcome depends on.
• Observable success: Finding and watching the prophet-story content and taking the offered next step.

5. Core User Flows

Flow A — Viewer discovers the channel and starts watching (Landing)

1. The Viewer / Audience Member arrives at the Landing page anonymously, with no access requirement.
2. The page renders the hero statement — "Stories of the Prophets, told with patience" — flush-left, with the word "Prophets" in antique gold, and the 1px-ruled metadata row (episode count · languages · new episode cadence) beneath it.
3. The viewer reads the right-hand metadata column (channel handle, archive marker, timeline diagram) to understand the channel's identity and cadence.
4. The viewer selects the bordered rectangular "Watch the latest episode" control (or the thin-ringed circular gold play control at the row's right end).
5. Observable result: the viewer is routed to the channel's latest episode on YouTube (provider-owned).
6. Failure/recovery: if the destination is unavailable, the control remains visible and readable and the channel handle remains available as an alternative route.
7. Continuation: the viewer watches the episode on YouTube.

Flow B — Viewer browses the prophet-story catalogue (Landing)

1. The Viewer / Audience Member scrolls the Landing page to the catalogue section.
2. The catalogue renders each prophet story as a full-width ruled archive row — index numeral (001, 002…), story name in display serif, episode count and duration right-aligned — separated by hairlines.
3. The viewer hovers or focuses a row; a gold underline draws left-to-right beneath the active row.
4. Observable result: the viewer identifies the story they want.
5. Failure/recovery: if no catalogue entries are available, the section shows its ruled header with no rows and no fabricated entries.
6. Continuation: the viewer selects a row and proceeds to that story's episodes.

Flow C — Viewer browses and filters the episode catalogue (Videos)

1. The Viewer / Audience Member arrives at the Videos page anonymously, with no access requirement.
2. The page renders the two-column asymmetric list — wide 8-column episode rows and a 4-column sticky filter rail — with each episode row carrying a strict 16:9 thumbnail, episode title, and metadata (duration, date, language).
3. The viewer hovers or focuses a thumbnail; the desaturated monochrome still crossfades to full colour (200ms opacity crossfade), and the lower-left uppercase numeral tag keeps the archive numbering visible.
4. The viewer selects a filter chip in the sticky filter rail; the active chip is the single active state and the episode list narrows to the matching episodes.
5. Observable result: the viewer sees the narrowed episode list.
6. Failure/recovery: if a filter yields no episodes, the list shows its ruled header with no rows and no fabricated episodes; the viewer clears the filter.
7. Continuation: the viewer selects an episode.

Flow D — Viewer watches an episode (Videos)

1. The Viewer / Audience Member selects an episode row on the Videos page.
2. Observable result: the viewer is routed to that episode on YouTube (provider-owned).
3. Failure/recovery: if the destination is unavailable, the row and its title remain visible and readable.
4. Continuation: the viewer watches the episode on YouTube.

Flow E — Channel Owner / Creator maintains the channel's home base

1. The Channel Owner / Creator publishes prophet-story episodes on YouTube (provider-owned) and maintains the channel's catalogue.
2. The owner's catalogue and channel metadata are reflected on the Landing and Videos pages — the hero metadata row (episode count · languages · new episode cadence), the catalogue rows, and the episode rows.
3. Observable result: visitors see an up-to-date presentation of the channel and its prophet-story content, and are routed to the channel's content on YouTube.
4. Continuation: the owner continues publishing on YouTube and the site continues to present the catalogue; the owner's monetization outcome accrues on YouTube.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. Muse: Peter Saville. Headline idea: one code-colour carries the sacred — a single borrowed artefact, an exact spot colour, coded metadata blocks, and vast silence, treating each prophet story as a numbered artefact in an archive.

Palette (dark mode):

Proportion: 90% ink ground, 7% paper-white type, 3% gold + emerald combined.

Typography:

• Headings: Cormorant Garamond at 500–600 weight — set very large and quiet, with wide tracking on short uppercase labels and tight leading on long display lines. Episode titles in sentence case at display scale.
• Body: Archivo. Section headers as small uppercase Archivo with 0.18em tracking, like archive labels.
• Scale: 1.5 modular — 18 / 24 / 36 / 54 / 81 / 121px. Display clamp(44px, 9vw, 121px) for the hero statement; episode titles clamp(24px, 3.4vw, 40px); body 18px/1.7; metadata 13px uppercase Archivo 0.16em tracking; numerals in Archivo tabular.

Shape language: Sharp corners everywhere — zero radius on panels, images, and buttons. Structure comes from 1px hairline rules (rgba(242,239,231,0.14)) and from the exact spot-colour bands, not from cards or shadows. Buttons are rectangles with a 1px border and a 12px-tracked uppercase label; the only "soft" element is the circular play control, a perfect thin-stroked ring in gold. No blobs, no pills, no drop shadows.

Layout: Gallery-like asymmetry on a 12-column grid with wide outer margins (5vw). Landing: full-bleed dark hero holding one oversized serif statement flush-left, with a narrow right-hand metadata column (channel handle, episode count, languages) separated by a vertical hairline; below, a catalogue section where each prophet story is a full-width ruled row — index numeral, story name, episode count, duration — separated by 1px rules, not cards; one full-bleed gold band interrupts the page as a section divider. Videos: a two-column asymmetric list (wide 8-col episode rows, 4-col sticky filter rail) with the same ruled-row logic; thumbnails cropped to a strict 16:9 and desaturated until hover. Everything collapses to a single column at 375px with rules intact.

Imagery: No stock people, no illustration for its own sake. Imagery is archival and coded: desaturated monochrome stills from the episodes (candlelight, desert horizon, manuscript detail, geometric mosque tilework) cropped hard to the grid and treated as one artefact per section; scientific-diagram-like line maps of journeys and timelines in gold on ink; a single exact-colour plate (gold or emerald) used as a graphic object where a photograph would normally sit. Episode thumbnails carry a consistent lower-left Archivo-uppercase numeral tag so the catalogue reads as a numbered archive.

7. Signature Design Concept

The public entry (Landing) is composed as an archive of sacred narrative, not a hype channel:

• First screen: a near-black olive-ink field, not a centred SaaS hero. Left 8 columns hold one oversized Cormorant Garamond statement — "Stories of the Prophets, told with patience" — flush-left, clamp(44px, 9vw, 121px), wrapping to three lines, in paper white with only the word "Prophets" set in antique gold. Directly beneath it, a single 1px-ruled row of metadata (episode count · languages · new episode cadence) in 13px uppercase Archivo, with a bordered rectangular "Watch the latest episode" control and a thin-ringed circular play button at the row's right end. Right 4 columns, separated by a full-height vertical hairline: a stacked metadata block (channel handle, "archive 001", a small gold diagram of a timeline) with generous empty space above it. A full-bleed gold band, 6px tall, sits at the very bottom edge of the viewport as the only saturated element. No gradient, no blob, no floating card.
• Signature moves: the full-bleed 6px antique-gold band that cuts the page between sections and repeats as the top edge of the footer — the channel's entire identity in one stripe; the catalogue as ruled archive rows, not cards, with a gold underline that draws under the hovered row; episode thumbnails shipping desaturated monochrome and crossfading to full colour on hover/focus, each carrying a small uppercase numeral tag in the lower-left corner; one full-bleed colour plate per page — a solid gold or emerald rectangle the size of a photograph, holding a single short quote from the episode in paper white — standing where a hero image would normally sit; and a thin-ringed circular play control (never a filled blue button) paired with rectangular bordered controls, so the single interactive shape on the site is a perfect circle in gold.

This concept only recomposes accepted content, states, and controls; it introduces no new behavior, page, or destination.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the oversized Cormorant Garamond hero statement — "Stories of the Prophets, told with patience" — with the word "Prophets" in antique gold, and the 1px-ruled metadata row beneath it.
• Input → transformation → outcome thesis: as the visitor scrolls, ruled catalogue rows fade in sequentially (300ms fades, 60ms stagger), and a single slow 800ms gold underline draws left-to-right beneath the active catalogue row — the archive reveals itself in order, without spectacle.
• Motion vocabulary: very little and precise — scroll-triggered 300ms fades of ruled rows in sequence (60ms stagger), a 200ms opacity crossfade on thumbnail hover that swaps the desaturated still for full colour, and a single slow 800ms gold underline that draws left-to-right beneath the active catalogue row. No parallax, no bounce, no particles.
• Composed first frame: the near-black olive-ink field with the flush-left hero statement, the ruled metadata row with its bordered control and thin-ringed circular play button, the right-hand metadata column behind a full-height vertical hairline, and the full-bleed 6px gold band at the bottom edge of the viewport.
• Reduced-motion state: with prefers-reduced-motion, everything appears instantly and the marquee-like channel ticker becomes a static wrapped row.

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 exactly as the creative 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. With prefers-reduced-motion it stops and shows whole items: they wrap into rows, or sit in a horizontally scrollable row (overflow-x: auto) whose further items are reached by scrolling. Provenance: explicit (creative direction). Rationale: readable text and controls must remain usable at every accepted viewport.
• NFR-2 — Reduced-motion support. With prefers-reduced-motion, all scroll-triggered fades and crossfades appear instantly and the marquee-like channel ticker becomes a static wrapped row. Provenance: explicit (creative direction). Rationale: motion must not be required to read the archive.
• NFR-3 — Contrast. All readable type is warm paper white (#F2EFE7) on the ink ground, at approximately 15:1 contrast at body size. Provenance: explicit (creative direction). Rationale: legibility of the archive at body size.
• NFR-4 — Anonymous public access. Both accepted pages are reachable with no access requirement; no account, sign-in, or private state is required. Provenance: explicit (Planning Scope access contract). Rationale: no accepted journey requires identity continuity.
• NFR-5 — Provider-owned video delivery. The channel's videos and monetization are delivered and owned by YouTube; the site presents and routes to that content and does not host, stream, or monetize it. Provenance: explicit (constraint: the product to be built here is an app/website, not the media channel itself). Rationale: the YouTube channel is the subject the site supports.
• NFR-6 — No generic SaaS template. The generic indigo/blue-on-white SaaS template is forbidden for this project. Provenance: explicit (creative direction). Rationale: the project's visual identity is the Saville-derived archive language.

10. Tech Stack

• Frontend: React (custom UI, per the accepted delivery shape).
• Styling: CSS implementing the creative direction's tokens — Cormorant Garamond and Archivo typefaces, the exact palette hexes, 1px hairline rules, zero radius, and the 12-column asymmetric grid.
• Storage: Not specified by the user. The site presents the channel's catalogue and routes to YouTube; no application-owned durable state is required by the accepted scope. [Default — not specified by user]
• Backend: Not specified by the user. No accepted requirement needs a first-party backend; the channel's content and monetization are provider-owned. [Default — not specified by user]
• Deployment: Not specified by the user. [Default — not specified by user]

11. Assumptions and Constraints

Constraints (explicit):

• The product to be built here is an app/website, not the media channel itself; the YouTube channel is the subject the site supports.
• The site's purpose for viewers is undecided: showcase videos, take bookings or inquiries, sell something, or collect emails. No such capability is implemented in the current scope.
• The channel's niche/topic is prophet stories for a Muslim audience.
• The channel's goal is to be strong and monetized (earn revenue).
• The generic indigo/blue-on-white SaaS template is forbidden for this project.

Assumptions (narrow, labeled):

• The two accepted pages (Landing, Videos) are the complete current information architecture, per the versioned page contract.
• Both pages are anonymous and application-owned, per the accepted access contract.
• The channel's videos and monetization live on YouTube; the site presents and routes to them.
• The catalogue and episode metadata shown on the site reflect the channel's actual prophet-story content.

12. Glossary

• Channel — the YouTube channel about prophet stories for a Muslim audience; the subject this site supports.
• Channel Owner / Creator — the accepted persona who owns the channel's content and monetization outcome.
• Viewer / Audience Member — the accepted persona: a member of the Muslim audience interested in prophet stories who visits the site.
• Prophet Story — a catalogue entry on the site representing one prophet's story told by the channel.
• Episode — a single video in the channel's prophet-story content.
• Catalogue — the ruled archive rows listing the channel's prophet stories (Landing) and episodes (Videos).
• Archive marker — the numbered artefact label (e.g., "archive 001") that codes the channel's catalogue.
• Gold band — the full-bleed 6px antique-gold stripe that cuts the page between sections and repeats as the top edge of the footer.
• Colour plate — the full-bleed solid gold or emerald rectangle holding a single short episode quote, standing where a hero image would normally sit.
• Provider-owned — delivered and owned by YouTube, outside this site's ownership.