System Requirements Document for heroic-https

1. Introduction

heroic-https is a gangster story reference library. It exists so that writers working in the gangster/crime-fiction register — specifically Indonesian-language writers and curators — can assemble, browse, study, and reuse fragments of gangster story material as inspiration for their own writing.

The product intent is derived directly from the authoritative user request: "buatkan refrensi cerita gangster dari vidio YouTube dia atas" — produce gangster story references from the YouTube video referenced at https://youtu.be/uzumbLRWAMs?si=gRQEWuQ4JltercZS. The reference material must be usable as inspiration for writing gangster stories.

A hard, explicit constraint governs the whole product: the assistant cannot open YouTube links directly, so the referenced video's content is not directly accessible and must be supplied or approximated by the user. No specific characters, events, names, lines, narrative context, or domain terminology from that video could be extracted or verified. The product therefore does not claim to have ingested the video; it organizes gangster story reference material that users supply or approximate, and it marks entries derived from the inaccessible video as unverified.

Audience: Indonesian-language writers and curators of gangster/crime-fiction reference material. The register is raw, street-credible, archival, and index-card-like — a working library of "quoted" fragments, not a polished SaaS dashboard.

2. System Overview

heroic-https is a web application with application-owned identity and custom UI. It delivers:

• A public Landing surface that states plainly what the product is and that the source video could not be opened and its material must be supplied or approximated by the user.
• Self-service Sign Up and returning Login for the two accepted human roles.
• A browseable References collection of gangster story reference entries.
• A focused Reference Details view for studying and reusing an individual entry.
• A New Reference creation workspace and an Edit Reference revision workspace, both restricted to the Reference Curator role.

Actors. Two accepted human personas: Story Writer (browses and reuses reference material as writing inspiration) and Reference Curator (adds, edits, and organizes reference entries so the collection is coherent and reusable). No other human personas are in scope.

Ownership. All seven destinations are application-owned custom pages. There is no provider-owned or external-only surface in the current scope. The referenced YouTube video is an external source of intended reference material, not a product surface; because it cannot be opened directly, its content is supplied or approximated by users.

Narrow exclusions. The product does not extract, scrape, transcribe, or ingest YouTube video content. It does not claim verified knowledge of the referenced video. It does not provide story-writing, drafting, or publishing tools — it provides reference material for inspiration. It does not provide invitation, provisioning, or deployment-bootstrap enrollment paths; enrollment is self-service.

2a. Product Interpretation and Delivery Boundary

What is being delivered now. A first-party web application that organizes gangster story reference entries into a browseable, reusable library. Writers read entries and reuse them as inspiration. Curators create and revise entries. Both roles reach the library through self-service enrollment and returning login.

Delivery and access ownership. The application owns identity: users establish their own accounts through Sign Up and verify themselves through Login. Landing, Sign Up, and Login are anonymously reachable. References, Reference Details, New Reference, and Edit Reference require login. New Reference and Edit Reference are additionally restricted to the Reference Curator role, because adding or editing shared reference entries requires curator authorization to be established first. Story Writer is a read-and-reuse role over the shared collection; Reference Curator is the role that writes to it.

The source-video boundary. The referenced YouTube video is the intended origin of the reference material, but it is not directly accessible. The product therefore treats the video as an unverified external source: entries that derive from it carry an explicit "UNVERIFIED SOURCE" marking, and the Landing surface states the limitation plainly. Users supply or approximate the material. Nothing in the product pretends the video was read.

Current vs. future. Everything described in this document is current. No future-horizon capabilities are accepted; none are specified here.

2c. Page Content and Component Coverage

Landing

• Information/state: Product name set in Archivo Black caps inside literal oversized quotation marks, one word per line, with the closing quote glyph rendered at 340px in #FF4D00 bleeding off the right viewport edge and cropped. A 6px hazard-stripe band runs the full width beneath the headline. A mono subline in #8A8681 states plainly that the source video could not be opened and its material must be supplied or approximated by the user. Anonymous, no session state.
• Primary action: Rectangular orange (#FF4D00) block CTA, flush-left, 2px border, mono label — routes to Sign Up.
• Supporting action: Secondary ghost link beside the CTA — routes to Login.
• Domain entities: None persisted; the page describes the reference library concept and the source-video limitation.
• Component responsibilities: Full-bleed near-black (#0E0E0E) hero field; oversized quoted headline; hazard-stripe band; mono limitation subline; CTA block; ghost link; low-opacity halftone concrete/asphalt texture layer behind the headline; thick-line 2px orange pictograms (folder, tag, stamp) as decoration only.
• States: Loading — static content, no loading state required. Empty — not applicable. Success — page renders; CTA and ghost link are reachable. Error — not applicable. Recovery — not applicable.
• Viewport rule: Headline, subline, CTA and ghost link stay entirely inside the viewport and their containers at 375px, 768px and 1280px, wrapping or scaling via clamp(...). The oversized closing quote glyph is decoration and may bleed off the right edge; it covers no readable text or control.

Sign Up

• Information/state: Anonymous enrollment surface. Underlined inputs with mono field labels above each. States the self-service nature of enrollment.
• Primary action: Submit enrollment to establish an application-owned identity.
• Supporting action: Link to Login for users who already have an identity.
• Domain entities: User identity (email/identifier, credential, role assignment as Story Writer or Reference Curator).
• Component responsibilities: Underlined input fields with mono labels; rectangular 2px-bordered submit block with solid fill on hover; inline validation messaging; link to Login.
• States: Loading — submit control shows a pending state while enrollment is processed. Empty — pristine form with empty fields. Success — identity established; user is taken into the protected library. Error — invalid or already-used identifier, weak or mismatched credential, or submission failure; the form retains entered values and shows a specific message. Recovery — user corrects the field and resubmits, or follows the link to Login.

Login

• Information/state: Anonymous returning-verification surface. Underlined inputs with mono field labels above each.
• Primary action: Verify identity to reach the protected reference collection.
• Supporting action: Link to Sign Up for users without an identity.
• Domain entities: User identity (identifier, credential), session.
• Component responsibilities: Underlined input fields with mono labels; rectangular 2px-bordered submit block; inline error messaging; link to Sign Up.
• States: Loading — submit control shows a pending state during verification. Empty — pristine form with empty fields. Success — session established; user continues to the destination they were seeking. Error — unrecognized identifier or incorrect credential; a single non-enumerating message is shown and the form retains the identifier. Recovery — user retries, or follows the link to Sign Up.

References

• Information/state: The browseable collection of gangster story reference entries. A sticky left rail holds filter/tag navigation with mono labels and counts. The main area is a dense list of entries rendered as industrial label rows: title in Archivo Black caps, a mono source line, a #-prefixed tag chip row, and a right-aligned status stamp. A thin ticker tape of tag names scrolls across the top of the list at a slow constant rate. Exposed 12-column grid with visible hairline column rules on desktop.
• Primary action: Open an entry to study it in Reference Details.
• Supporting actions: Filter the list by tag via the left rail; clear the active filter; (Reference Curator only) start a new entry from New Reference.
• Domain entities: Reference entry (title, source line, tags, status stamp, verification status), tag, source.
• Component responsibilities: Sticky left filter/tag rail with mono labels and counts; ticker tape of tag names; entry rows with hover treatment (4px orange bar slides in from the left, title flips to #FF4D00); tag chips that invert on hover (fill orange, text black); right-aligned status stamp; hairline row rules; hazard-stripe section separators.
• States: Loading — list region shows a pending state while entries are fetched. Empty — no entries exist yet, or the active filter matches nothing; a plain mono message explains which case applies and, for curators, offers the route to New Reference. Success — entries render as label rows with tags and status stamps. Error — the collection fails to load; a mono message states the failure and offers retry. Recovery — retry reloads the list; clearing the filter restores the unfiltered collection.
• Motion: Ticker tape pauses on hover; under prefers-reduced-motion it stops and wraps into static rows of whole chips.

Reference Details

• Information/state: Two-column split — the entry text on the left, a "spec sheet" metadata panel on the right with ruled label/value rows in mono (source, timestamp, tags, verification status). Entries derived from the inaccessible video carry an acid-yellow (#E8FF00) "UNVERIFIED SOURCE" stamp. A user-supplied still frame or thumbnail, if present, is displayed desaturated with a 1px white border and a mono caption underneath.
• Primary action: Read and study the entry material for reuse as writing inspiration.
• Supporting actions: Follow the source line to its stated origin; (Reference Curator only) open Edit Reference for this entry; return to References.
• Domain entities: Reference entry (full text, source, timestamp, tags, verification status, optional still frame/thumbnail and caption).
• Component responsibilities: Entry text column at generous 1.65 leading; spec-sheet metadata panel with ruled mono rows; "UNVERIFIED SOURCE" stamp; desaturated thumbnail with 1px white border and mono caption; back navigation to References; curator-only edit affordance.
• States: Loading — entry region shows a pending state while the entry is fetched. Empty — not applicable; a details view always has a target entry. Success — entry text and spec sheet render. Error — the entry cannot be loaded (missing or unavailable); a mono message states the failure and offers a return to References. Recovery — return to References and select another entry, or retry.

New Reference

• Information/state: Full-width creation form with underlined inputs and mono field labels above each, plus a live preview panel on the right at ≥1024px. Curator-restricted. Includes the source line field, tag entry, entry text, and the verification-status control that marks an entry as derived from the inaccessible video.
• Primary action: Add the new gangster story reference entry to the collection.
• Supporting actions: Add/remove tags; mark the entry as derived from the unverified source video; cancel and return to References.
• Domain entities: Reference entry (title, source line, tags, entry text, verification status, optional still frame/thumbnail and caption).
• Component responsibilities: Underlined inputs with mono labels; tag chip editor with #-prefixed rectangular chips; verification-status control; live preview panel rendering the entry as it will appear in the list and details views; rectangular 2px-bordered submit block; cancel control.
• States: Loading — submit control shows a pending state while the entry is saved. Empty — pristine form with empty fields and an empty preview. Success — entry is added to the collection; the curator is taken to the new entry's details or back to References with the entry present. Error — validation failure (missing required field) or save failure; the form retains entered values and shows a specific message. Recovery — correct the field and resubmit; the entered content is not lost.

Edit Reference

• Information/state: Full-width revision form pre-populated with the existing entry, underlined inputs with mono field labels above each, plus a live preview panel on the right at ≥1024px. Curator-restricted.
• Primary action: Save revisions to the existing gangster story reference entry.
• Supporting actions: Add/remove tags; change the verification status; cancel and return without saving.
• Domain entities: Reference entry (title, source line, tags, entry text, verification status, optional still frame/thumbnail and caption).
• Component responsibilities: Pre-populated underlined inputs with mono labels; tag chip editor; verification-status control; live preview panel; rectangular 2px-bordered save block; cancel control.
• States: Loading — the existing entry is fetched into the form; a pending state is shown until it is populated. Empty — not applicable; the form is always pre-populated from an existing entry. Success — revisions are saved and reflected in the collection and details view. Error — the entry cannot be loaded, validation fails, or the save fails; the form retains entered values and shows a specific message. Recovery — retry the save, or cancel and return to the entry unchanged.

3. Functional Requirements

FR-1 — Provide gangster story reference material derived from the referenced YouTube video. As a Reference Curator, I should be able to add gangster story reference entries drawn from the YouTube video at https://youtu.be/uzumbLRWAMs?si=gRQEWuQ4JltercZS so that the collection contains the requested reference material.

• Provenance: explicit. Access: login + curator role. Owner: New Reference.
• Trigger/input: Curator opens New Reference and enters the entry's title, source line, tags, and entry text.
• Observable result: The entry is added to the References collection and is browseable and openable by both roles.
• Failure/recovery: If a required field is missing or the save fails, the form retains entered values and shows a specific message; the curator corrects and resubmits.
• Continuation: The curator is taken to the new entry's details or back to References with the entry present.

FR-2 — The reference material is usable as inspiration for writing gangster stories. As a Story Writer, I should be able to browse and study gangster story reference entries so that I have usable material to write from.

• Provenance: explicit. Access: login. Owner: References, Reference Details.
• Trigger/input: Writer opens References and selects an entry.
• Observable result: The entry's text, source line, tags, and verification status are displayed in a readable focused view.
• Failure/recovery: If the collection or an entry fails to load, a mono message states the failure and offers retry or a return to References.
• Continuation: The writer returns to References and selects another entry, or continues reading the current one.

FR-3 — The user must supply or approximate the referenced video's content. As a Reference Curator, I should be able to supply or approximate the source video's material myself, and mark it as unverified, so that the collection can exist without the product claiming to have read the video.

• Provenance: required_inference (from the explicit hard constraint that the assistant cannot open YouTube links directly). Access: login + curator role. Owner: New Reference, Edit Reference.
• Trigger/input: Curator enters the material they supply or approximate and sets the verification status to mark it as derived from the inaccessible video.
• Observable result: The entry carries an acid-yellow "UNVERIFIED SOURCE" stamp in the collection list and on its details spec sheet.
• Failure/recovery: If the verification status is not set, the entry is saved without the stamp; the curator can set it later through Edit Reference.
• Continuation: The marked entry is visible to both roles with its unverified status plainly shown.

FR-4 — The product states plainly that the source video could not be opened. As an anonymous visitor, I should see on the Landing surface that the source video could not be opened and its material must be supplied or approximated by the user, so that I understand the product's actual relationship to the video before enrolling.

• Provenance: required_inference (from the explicit hard constraint). Access: none. Owner: Landing.
• Trigger/input: Visitor opens Landing.
• Observable result: A mono subline in #8A8681 states the limitation plainly beneath the headline and hazard-stripe band.
• Failure/recovery: Not applicable; the statement is static content.
• Continuation: The visitor proceeds to Sign Up or Login.

FR-5 — Self-service enrollment before first use. As a Story Writer or Reference Curator, I should be able to enroll myself before first use so that I can reach the reference library.

• Provenance: required_inference. Access: none. Owner: Sign Up.
• Trigger/input: User opens Sign Up and submits an identifier and credential.
• Observable result: An application-owned identity is established and the user enters the protected library.
• Failure/recovery: Invalid or already-used identifier, weak or mismatched credential, or submission failure shows a specific message; the form retains entered values.
• Continuation: The user proceeds into References.

FR-6 — Returning verification. As a returning Story Writer or Reference Curator, I should be able to verify my identity through Login so that I can revisit the durable reference collection and continue protected work.

• Provenance: required_inference. Access: none. Owner: Login.
• Trigger/input: User opens Login and submits an identifier and credential.
• Observable result: A session is established and the user reaches the destination they were seeking.
• Failure/recovery: Unrecognized identifier or incorrect credential shows a single non-enumerating message; the form retains the identifier.
• Continuation: The user continues to References or to the protected page they requested.

FR-7 — Curator authorization before adding or editing shared reference entries. As a Reference Curator, I should have curator authorization established before I can add or edit shared reference entries, so that the shared collection is not modified without it.

• Provenance: required_inference. Access: login + curator role. Owner: New Reference, Edit Reference.
• Trigger/input: A logged-in user attempts to open New Reference or Edit Reference.
• Observable result: Curators reach the creation and revision workspaces; Story Writers do not, and the collection remains read-and-reuse for them.
• Failure/recovery: A non-curator who reaches a restricted route is returned to References with a plain mono message stating that adding or editing entries requires curator authorization.
• Continuation: The user continues browsing the collection.

FR-8 — Browse the reference collection. As a Story Writer or Reference Curator, I should be able to browse the collection of gangster story reference entries so that I can find material relevant to what I am writing.

• Provenance: required_inference. Access: login. Owner: References.
• Trigger/input: User opens References.
• Observable result: Entries render as industrial label rows with title, mono source line, #-prefixed tag chips, and a right-aligned status stamp.
• Failure/recovery: If the collection fails to load, a mono message states the failure and offers retry.
• Continuation: The user opens an entry, or filters the list.

FR-9 — Filter the collection by tag. As a Story Writer or Reference Curator, I should be able to filter the collection by tag so that I can narrow a large library to the material I need.

• Provenance: required_inference. Access: login. Owner: References.
• Trigger/input: User selects a tag in the sticky left rail.
• Observable result: The list narrows to entries carrying that tag; the rail shows mono labels and counts.
• Failure/recovery: If the filter matches nothing, a plain mono message explains that no entries carry the tag and offers to clear the filter.
• Continuation: The user opens a matching entry or clears the filter to restore the full collection.

FR-10 — Study an individual reference entry. As a Story Writer or Reference Curator, I should be able to open a focused view of an individual entry so that I can study its material and reuse it as inspiration.

• Provenance: required_inference. Access: login. Owner: Reference Details.
• Trigger/input: User selects an entry from References.
• Observable result: The entry text renders on the left at generous leading, and a spec-sheet metadata panel on the right shows ruled mono rows for source, timestamp, tags, and verification status.
• Failure/recovery: If the entry cannot be loaded, a mono message states the failure and offers a return to References.
• Continuation: The user returns to References, or (curator) opens Edit Reference.

FR-11 — Revise an existing reference entry. As a Reference Curator, I should be able to revise an existing gangster story reference entry so that the collection stays coherent and accurate.

• Provenance: required_inference. Access: login + curator role. Owner: Edit Reference.
• Trigger/input: Curator opens Edit Reference for an entry and changes its title, source line, tags, entry text, verification status, or thumbnail.
• Observable result: Revisions are saved and reflected in the collection list and the entry's details view.
• Failure/recovery: If the entry cannot be loaded, validation fails, or the save fails, the form retains entered values and shows a specific message.
• Continuation: The curator returns to the entry's details or to References.

FR-12 — Organize entries with tags. As a Reference Curator, I should be able to assign tags to entries so that the collection is organized and reusable.

• Provenance: required_inference. Access: login + curator role. Owner: New Reference, Edit Reference.
• Trigger/input: Curator adds or removes #-prefixed tag chips while creating or editing an entry.
• Observable result: The tags appear on the entry's row in References, in its details spec sheet, in the left filter rail with counts, and in the ticker tape of tag names.
• Failure/recovery: If a tag cannot be saved, the form retains the entered tags and shows a specific message.
• Continuation: The curator saves the entry; the tags become filterable for both roles.

4. User Personas

Story Writer

Product context. The Story Writer is an Indonesian-language writer working in the gangster/crime-fiction register. They come to heroic-https not to draft prose but to find raw material: fragments, quotes, source notes, and tagged evidence they can reframe into their own story. Their register is streetwise and archival; they want index-card energy, not a polished dashboard.

Primary goal. To have usable gangster story reference material and story ideas to write from.

Distinct accepted responsibilities. The Story Writer browses the reference collection, filters it by tag to narrow a large library, and opens individual entries to study their text, source line, tags, and verification status. They reuse what they read as inspiration. They do not add or edit shared reference entries — that is the curator's responsibility, and the collection is read-and-reuse for them.

Relevant inputs and decisions. They choose which tags to filter by, which entries to open, and how long to study an entry. They decide whether an entry's material is usable for what they are writing, and they read the verification status to know whether an entry derives from the inaccessible source video.

Interactions with other accepted participants. The Story Writer is the consumer of the Reference Curator's work. Every entry they read was supplied or approximated and organized by a curator. The "UNVERIFIED SOURCE" stamp is the curator's signal to them about provenance.

Observable success. The writer has read entries whose material they can use, and they can find them again by tag or by returning to the collection.

Reference Curator

Product context. The Reference Curator is the person who assembles and organizes the gangster story reference entries drawn from the source video so the material is browseable and reusable. They work in the same Indonesian-language gangster/crime-fiction register as the writer, but their job is the library, not the prose.

Primary goal. A coherent and complete collection that serves as a story reference library.

Distinct accepted responsibilities. The Curator adds new reference entries through New Reference and revises existing ones through Edit Reference. They supply or approximate the source video's material themselves, because the video cannot be opened directly, and they mark entries derived from it as unverified. They assign and remove tags so the collection is organized and filterable. They are the only role authorized to write to the shared collection.

Relevant inputs and decisions. They decide what material to include, how to phrase the source line, which tags apply, and whether an entry's verification status should carry the "UNVERIFIED SOURCE" stamp. They decide when an entry needs revision.

Interactions with other accepted participants. The Curator serves the Story Writer: the tags they assign become the writer's filter rail and ticker tape, and the verification status they set becomes the writer's provenance signal. The Curator's work is only complete when the collection is coherent enough for a writer to browse and reuse.

Observable success. Entries they add appear in the collection as label rows with tags and status stamps; revisions they save are reflected in the list and details views; the collection is browseable and filterable by tag.

5. Core User Flows

Flow A — Anonymous visitor understands the product and its source limitation (Landing)

1. An anonymous visitor opens heroic-https and lands on Landing.
2. The visitor sees the product name set in Archivo Black caps inside literal oversized quotation marks, one word per line, with the closing quote glyph bleeding off the right viewport edge, and a 6px hazard-stripe band running the full width beneath it.
3. Beneath the band, the visitor reads a mono subline in #8A8681 stating plainly that the source video could not be opened and its material must be supplied or approximated by the user.
4. The visitor decides to enroll or to log in.
5. Next step: the visitor selects the rectangular orange CTA to reach Sign Up, or the secondary ghost link to reach Login.

Flow B — Story Writer enrolls and reaches the library (Sign Up → References)

1. A new writer opens Sign Up anonymously.
2. The writer fills the underlined inputs, each with a mono field label above it, and submits.
3. Observable result: an application-owned identity is established and the writer enters the protected library at References.
4. Failure/recovery: if the identifier is invalid or already used, the credential is weak or mismatched, or submission fails, the form retains the entered values and shows a specific message. The writer corrects the field and resubmits, or follows the link to Login.
5. Next step: the writer browses the collection.

Flow C — Returning user verifies identity (Login → References)

1. A returning writer or curator opens Login anonymously.
2. They enter their identifier and credential and submit.
3. Observable result: a session is established and they reach the destination they were seeking — normally References.
4. Failure/recovery: an unrecognized identifier or incorrect credential produces a single non-enumerating message; the form retains the identifier. The user retries, or follows the link to Sign Up.
5. Next step: the user continues into the collection.

Flow D — Story Writer browses, filters, and studies an entry (References → Reference Details)

1. The logged-in writer opens References.
2. The writer sees the sticky left rail of filter/tag navigation with mono labels and counts, and the main area as a dense list of industrial label rows: Archivo Black caps title, mono source line, #-prefixed tag chips, and a right-aligned status stamp. A thin ticker tape of tag names scrolls across the top of the list at a slow constant rate.
3. The writer narrows the library by selecting a tag in the left rail.
4. Observable result: the list narrows to entries carrying that tag.
5. Failure/recovery: if the collection fails to load, a mono message states the failure and offers retry. If the filter matches nothing, a plain mono message explains that no entries carry the tag and offers to clear the filter; clearing it restores the full collection.
6. The writer hovers a row — a 4px orange bar slides in from the left and the title flips to #FF4D00 — and selects it.
7. Observable result: Reference Details opens with the entry text on the left at generous leading and a spec-sheet metadata panel on the right showing ruled mono rows for source, timestamp, tags, and verification status. If the entry derives from the inaccessible video, an acid-yellow "UNVERIFIED SOURCE" stamp is shown.
8. Failure/recovery: if the entry cannot be loaded, a mono message states the failure and offers a return to References.
9. Next step: the writer returns to References and selects another entry, or continues reading the current one and reuses its material as inspiration.

Flow E — Reference Curator adds a new reference entry (New Reference → References / Reference Details)

1. The logged-in curator opens References and starts a new entry, reaching New Reference.
2. Authorization: curator authorization is established before this workspace is reachable. A Story Writer who reaches the restricted route is returned to References with a plain mono message stating that adding or editing entries requires curator authorization.
3. The curator fills the full-width form: underlined inputs with mono field labels above each, including the title, source line, entry text, and tags. At ≥1024px a live preview panel on the right renders the entry as it will appear.
4. The curator supplies or approximates the source video's material themselves, because the video cannot be opened directly, and sets the verification status to mark the entry as derived from the inaccessible video.
5. Observable result: the entry carries an acid-yellow "UNVERIFIED SOURCE" stamp in the collection list and on its details spec sheet.
6. The curator adds #-prefixed tag chips to organize the entry.
7. The curator submits.
8. Observable result: the entry is added to the collection and is browseable and openable by both roles.
9. Failure/recovery: if a required field is missing or the save fails, the form retains the entered values and shows a specific message; the curator corrects and resubmits without losing content.
10. Next step: the curator is taken to the new entry's details or back to References with the entry present.

Flow F — Reference Curator revises an existing entry (Reference Details → Edit Reference)

1. The logged-in curator opens an entry in Reference Details and opens Edit Reference for it.
2. Authorization: curator authorization is established before this workspace is reachable; a non-curator is returned to References with the plain mono message.
3. The form loads pre-populated with the existing entry — title, source line, tags, entry text, verification status, and any thumbnail — with a live preview panel on the right at ≥1024px.
4. Failure/recovery: if the entry cannot be loaded, the form shows a specific message; the curator returns to Reference Details.
5. The curator changes what needs revising: the entry text, the source line, the tags, the verification status, or the thumbnail.
6. The curator saves.
7. Observable result: the revisions are reflected in the collection list and in the entry's details view.
8. Failure/recovery: if validation fails or the save fails, the form retains the entered values and shows a specific message; the curator retries, or cancels and returns to the entry unchanged.
9. Next step: the curator returns to the entry's details or to References.

Flow G — Reference Curator organizes the collection with tags (References)

1. The logged-in curator opens References and reviews the collection.
2. The curator opens an entry for editing and adds or removes #-prefixed tag chips.
3. Observable result: the tags appear on the entry's row in References, in its details spec sheet, in the left filter rail with counts, and in the ticker tape of tag names.
4. Failure/recovery: if a tag cannot be saved, the form retains the entered tags and shows a specific message.
5. Next step: the curator saves; the tags become filterable for both roles, and the Story Writer's filter rail and ticker tape reflect them.

6. Visuals, Colors and Theme

Muse: Virgil Abloh. Headline direction: Remixed familiarity — industrial quotation marks for a gangster story reference library.

The direction is authoritative for this section. It makes a reference collection feel like a wall of tagged evidence rather than a generic card grid, and gives the writer persona a credible street register without tipping into costume.

Color tokens (dark mode)

No gradients, no glass, no blue anywhere. Blue/indigo accents (#0057FF, #2563EB, #4F46E5) are forbidden.

Typography

• Headings: Archivo Black, all-caps, wide 0.06em tracking on labels and 0.02em on headlines, tight 0.92 line-height for display. Headlines are wrapped in literal quotation marks as a graphic device.
• Body: Archivo 400/500 at 17–18px with generous 1.65 leading for reading entries.
• Monospace: IBM Plex Mono for IDs, tags, source lines, and timestamps.
• Scale: 1.25 modular — display clamp(48px, 9vw, 128px) / h2 clamp(28px, 4vw, 48px) / h3 24px / body 18px / label 12px uppercase / mono 13px.
• Inter, Roboto, Poppins, and system-ui are forbidden for headings and body.

Shape language

Hard edges, 0px radius everywhere. Industrial framing: 2px solid borders on panels, 1px hairline rules between rows, hazard-stripe dividers (repeating-linear-gradient in orange/yellow at 45°) as section separators and as a 6px bar under the top nav. Buttons are rectangular blocks with a 2px border and a solid fill on hover; tags are rectangular chips with a leading mono # and a 1px border. No rounded corners, no soft shadows — depth comes from 1px offset borders and flat colour blocks.

Layout

Exposed 12-column grid with visible hairline column rules on desktop (1280px), collapsing to a single column at 375px and two columns at 768px. A sticky left rail holds filter/tag navigation with mono labels and counts. The main area is a dense list of reference entries rendered as label-like rows: title in Archivo Black caps, a mono source line, a tag row, and a right-aligned status stamp. Reference Details uses a two-column split — entry text left, "spec sheet" metadata panel right with ruled rows (source, timestamp, tags, verification status). New/Edit Reference is a full-width form with underlined inputs and mono field labels above each, plus a live preview panel on the right at ≥1024px.

Imagery

No photography of people, no stock. Imagery is typographic and industrial: oversized quotation-mark glyphs as graphic elements, halftone-grain concrete and asphalt textures as low-opacity background layers behind section headers, hazard-stripe bands, mono "evidence tag" labels, and simple thick-line pictograms (a folder, a tag, a stamp) drawn in 2px orange strokes. Reference entries may carry a user-supplied still frame or thumbnail, displayed desaturated with a 1px white border and a mono caption underneath.

Readability rule

Headlines, wordmarks, labels, numbers, card 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 direction asks, as long as they cover no readable text or control. Moving and scrollable content (the tag ticker tape) may cross the viewport or container edge by design and is judged by whether it actually moves and whether every item becomes fully readable as it passes.

7. Signature Design Concept

The quoted poster.

The Landing hero is a full-bleed near-black (#0E0E0E) field. The product name is set in Archivo Black caps inside literal oversized quotation marks, one word per line, spanning a 9-column measure edge-to-edge. The closing quote glyph is rendered at 340px in #FF4D00, bleeding off the right edge and cropped by the viewport. Beneath it, a single 6px hazard-stripe band runs the full width. Below the band, a mono subline in #8A8681 states plainly that the source video could not be opened and its material must be supplied or approximated by the user. The primary CTA is a rectangular orange block, flush-left, with a 2px border and a mono label; a secondary ghost link sits beside it.

The composition is a poster, not a SaaS hero: no centred stack, no gradient, no illustration. The oversized quotation marks are the product's thesis made visible — this is a library of quoted fragments, and the product says so before the user reads a single entry. The hazard-stripe band is the industrial seam between the claim and the limitation. The cropped closing quote is decoration and carries the gesture; the headline, subline, CTA, and ghost link stay whole and inside the viewport at every breakpoint.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The oversized quoted product name — Archivo Black caps inside literal quotation marks, one word per line, with the 340px closing quote glyph in #FF4D00 bleeding off the right viewport edge.
• Input → transformation → outcome thesis: On load, the headline words settle into their lines and the 6px hazard-stripe band draws across the full width; the mono limitation subline then resolves beneath it. The outcome is a composed poster — the product's claim and its source-video limitation both fully legible — with the CTA and ghost link ready. No accepted behaviour is added; the motion only composes the accepted content.
• Motion vocabulary: Snappy and mechanical, 120–180ms. Hard cuts, no bounce, no spring, no parallax drift. Page transitions are a 140ms hard cut with a brief hazard-stripe wipe.
• Composed first frame: Near-black field; the quoted headline already in place at its final position; the hazard-stripe band at full width; the mono subline legible; the orange CTA block and ghost link flush-left and whole. The closing quote glyph is cropped by the right edge as decoration.
• Reduced-motion state: Under prefers-reduced-motion, the hero renders as a static composed poster with no settling or drawing motion. The tag ticker tape on References stops and wraps into static rows of whole chips.

Motion across the product

• Reference rows: hover slides a 4px orange bar in from the left and flips the title to #FF4D00.
• Tag chips: invert on hover — fill orange, text black.
• Ticker tape: a thin tape of tag names scrolls across the top of the References list at a slow constant rate; it pauses on hover, and under prefers-reduced-motion it stops and wraps into static rows of whole chips.
• Page transitions: 140ms hard cut with a brief hazard-stripe wipe.

9. Non-Functional Requirements

NFR-1 — Source-video limitation is stated, not hidden. The product must not claim to have opened, read, transcribed, or ingested the referenced YouTube video. The Landing surface states the limitation plainly, and entries derived from the video carry an "UNVERIFIED SOURCE" stamp. Provenance: explicit hard constraint. Rationale: the assistant cannot open YouTube links directly; the video's content is not directly accessible and must be supplied or approximated by the user.

NFR-2 — No fabricated source facts. No specific characters, events, names, lines, narrative context, or domain terminology from the referenced video may be presented as verified. All such references remain unverified and generic unless further information is provided by the user. Provenance: explicit. Rationale: no source-owned video content could be extracted.

NFR-3 — Readability at every breakpoint. Headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering any part of them. Provenance: explicit design constraint. Rationale: the direction's oversized typography must not clip readable text or controls.

NFR-4 — Reduced-motion support. Under prefers-reduced-motion, the tag ticker tape stops and wraps into static rows of whole chips, and the hero renders as a static composed poster. Provenance: explicit design constraint. Rationale: moving content must remain fully readable when motion is suppressed.

NFR-5 — Accessible contrast. Body and display text at #F2F0EB on #0E0E0E yields approximately 15:1 contrast. Acid yellow #E8FF00 is never rendered as body text on the dark ground; it is reserved for large labels, hazard stripes, the "UNVERIFIED SOURCE" badge, and focus rings. Provenance: explicit design constraint. Rationale: the direction's palette must remain readable.

NFR-6 — Identity continuity. Application-owned identity is required so that the durable reference collection and curator authorization remain bound to the correct participant across sessions. Provenance: required_inference. Rationale: the collection is durable shared state, and adding or editing entries requires established curator authorization.

NFR-7 — Role-restricted write access. New Reference and Edit Reference are reachable only by users with established curator authorization. Story Writer access to the collection is read-and-reuse. Provenance: required_inference. Rationale: the shared collection must not be modified without curator authorization.

10. Tech Stack

No technology choices were specified by the user. The following are coherent defaults for the accepted delivery shape — a first-party web application with application-owned identity, custom UI, and backend integration.

• Frontend: React (web), single-page application with client-side routing across the seven accepted pages. [Default — not specified by user]
• Backend: Python with FastAPI, exposing the reference-entry and identity endpoints. [Default — not specified by user]
• Storage: A relational database for users, reference entries, tags, and entry-tag associations. [Default — not specified by user]
• Containerization: Docker with docker-compose for local and single-host deployment. [Default — not specified by user]
• Orchestration: Kubernetes is not required by any accepted requirement and is not included. [Default — not specified by user]

11. Assumptions and Constraints

Constraints (binding).

• The assistant cannot open YouTube links directly. The referenced video's content is not directly accessible and must be supplied or approximated by the user. (explicit)
• No specific factual details, characters, events, names, or lines from the referenced video are available or verified. (explicit)
• The referenced video remains an unverified external source; entries derived from it are marked "UNVERIFIED SOURCE". (explicit)
• Blue/indigo accents, rounded corners, soft drop shadows, glassmorphism, gradient-blob backgrounds, uniform hover-lift card grids, Inter/Roboto/Poppins/system-ui for headings or body, photographs of people, stock imagery, and costume "mob" clichés (fedoras, tommy guns, cigars) are excluded by the creative direction. (explicit design constraint)
• The generic indigo/blue-on-white SaaS template is forbidden for this project. (explicit design constraint)

Assumptions (narrow, labeled).

• Self-service enrollment is the enrollment path, because no invitation, provisioning, or deployment-bootstrap boundary is established. (required_inference)
• Curator authorization is established as part of the user's identity, since adding or editing shared reference entries requires it. (required_inference)
• The two accepted personas — Story Writer and Reference Curator — are the complete active human set. (from Planning Scope)
• The seven accepted pages — Landing, Sign Up, Login, References, Reference Details, New Reference, Edit Reference — are the complete information architecture. (from Planning Scope)
• Reference entries are durable shared state, so identity continuity is required to revisit them. (required_inference)
• No future-horizon capabilities are accepted; everything in this document is current. (from Planning Scope)

12. Glossary

• Reference entry — A single gangster story reference item in the collection, comprising a title, a source line, tags, entry text, a verification status, and optionally a still frame or thumbnail with a mono caption.
• Reference library / collection — The complete set of reference entries, browseable at References and filterable by tag.
• Story Writer — The accepted persona who browses, filters, and studies reference entries and reuses them as inspiration for writing gangster stories.
• Reference Curator — The accepted persona who adds, edits, and organizes reference entries, supplies or approximates the source video's material, and marks entries as unverified.
• UNVERIFIED SOURCE — The acid-yellow (#E8FF00) stamp applied to entries derived from the inaccessible YouTube video, signalling that the material was supplied or approximated rather than extracted.
• Source line — The mono-formatted line on an entry identifying where its material came from.
• Status stamp — The right-aligned marker on a reference row indicating the entry's verification status.
• Spec sheet — The ruled mono metadata panel on Reference Details and New/Edit Reference showing source, timestamp, tags, and verification status.
• Ticker tape — The thin scrolling band of tag names across the top of the References list; it pauses on hover and wraps into static rows under prefers-reduced-motion.
• Hazard-stripe band — The 6px orange/yellow 45° repeating-linear-gradient bar used as a section separator and beneath the top nav.
• Curator authorization — The established permission that allows a user to reach New Reference and Edit Reference and to write to the shared collection.