System Requirements Document for culinary-arts-berkelanarasa

1. Introduction

BerkelanaRasa is a culinary-arts news website built as a midterm assignment for a Cyber Media course group project. The site is titled "BerkelanaRasa" and carries the tagline "setiap sajian punya cerita" ("every dish has a story"). Its purpose is to present culinary-arts journalism organized into five editorial news channels:

1. Superfoods/Healthy Foods
2. Homemade Delicacies
3. Local Heroes
4. Culinary Trends
5. Kitchen Tips

The audience is twofold: curious readers who browse and read culinary stories organized by channel, and the project's own group of content contributors — Cyber Media students who prepare and supply the news content and sections for the site. The logo and the remaining content/news sections are still being finished by other group members and will follow later; the site must therefore look authored and intentional while it is still being completed.

2. System Overview

BerkelanaRasa is delivered as a first-party web application with a public reading surface and a protected content-management surface. Anonymous visitors land on a poster-style entry page, move into the five-channel news structure, and read individual articles. Content contributors enroll themselves, verify on return, and manage the culinary news content — including continuing to add the remaining sections that other group members are still finishing.

Actors

• Site Visitor / Reader — anonymous reader who browses the five channels and reads published articles.
• Content Contributor / Group Member — authenticated member of the Cyber Media course group who prepares, creates, edits, and publishes culinary content under the correct channel.

Accepted behavior

• A public entry surface presenting the title, tagline, and the five-channel structure.
• A channel browsing surface covering exactly the five supplied channels.
• An article reading surface for an individual culinary news article selected from a channel.
• Self-service first-use enrollment and returning verification for content contributors.
• A protected content-management surface for supplied culinary news content and the remaining group-member contributions.
• A protected content editor for creating or editing contributor content and assigning it to the correct culinary channel before publication.

Ownership and exclusions

All current surfaces are first-party application surfaces. No provider-owned, external-only, or headless delivery is established by the source. The logo and the remaining content/news sections are not yet available and are explicitly deferred to other group members; this document does not invent their content, and no adjacent capability (comments, ratings, newsletters, search, social sharing, analytics dashboards, or account administration) is introduced.

2a. Product Interpretation and Delivery Boundary

BerkelanaRasa is a small editorial magazine site, not a platform. Its current delivery boundary is: a public, anonymously readable five-channel culinary news structure, plus a protected contributor workspace where the group's own members prepare and publish that content. Readers never need an account. Contributors need one because their drafts, edits, and channel assignments are durable, private, and must remain bound to the correct person across sessions and across the group's staggered delivery of sections.

The logo and the remaining news sections are explicitly future work owned by other group members. The current system must present the five channels and any already-supplied content truthfully, and must be able to accept the remaining sections as they arrive — without this document specifying what those sections contain.

2b. Source Content Inventory

Not applicable. No reference directive in this project declares a content_source, so no verified factual inventory is reproduced here. The only source-supplied content facts are the site title, the tagline, and the five channel names, all preserved above and throughout this document.

2c. Page Content and Component Coverage

Landing

• Information/state: The site title "BerkelanaRasa" and the tagline "setiap sajian punya cerita" as the primary artwork; a five-block channel legend naming all five channels; a scroll cue; the site's culinary-arts framing.
• Primary action: Enter the site's content — a single black rectangular control reading "MASUK KE DAPUR →" leading to the Channels surface.
• Supporting actions: Select any of the five channel blocks in the legend to go directly to that channel; reach Sign Up or Login for contributor access.
• Domain entities: Site identity (title, tagline), Channel (five named channels).
• Component responsibilities: Full-viewport poster hero carrying the wordmark and tagline; five flat colour-coded channel blocks (one colour per channel, black type on top); black header bar with the wordmark and a channel-name ticker; footer panel.
• States: Loading — static poster content renders immediately, no data dependency. Empty — not applicable; the title, tagline, and five channel names are fixed source content. Success — hero and legend render at 375px, 768px, and 1280px with all readable text and the control fully inside the viewport. Error — if the channel list cannot be fetched, the five source-named channels still render from the fixed list. Recovery — retry the channel fetch; the entry control remains usable.

Sign Up

• Information/state: First-use enrollment form for a content contributor; explanation that an account is needed to prepare and publish content.
• Primary action: Submit enrollment to create the contributor's own account.
• Supporting actions: Move to Login if the contributor already has an account; return to Landing.
• Domain entities: Contributor account (identity, credentials).
• Component responsibilities: Enrollment form with labeled fields and inline validation; submit control; link to Login.
• States: Loading — submit control shows an in-progress state and is not double-submittable. Empty — blank form with no errors. Success — account created and the contributor proceeds to the protected Content surface. Error — invalid or already-used identity, or a failed submission, shows a specific message with the entered values preserved. Recovery — correct the flagged field and resubmit, or switch to Login.

Login

• Information/state: Returning verification form for a content contributor.
• Primary action: Submit credentials to resume protected content work.
• Supporting actions: Move to Sign Up if the contributor has no account; return to Landing.
• Domain entities: Contributor account (identity, credentials, session).
• Component responsibilities: Verification form with labeled fields; submit control; link to Sign Up.
• States: Loading — submit control shows an in-progress state. Empty — blank form with no errors. Success — verified and forwarded to the protected Content surface. Error — unrecognized credentials show a specific, non-revealing message with the identity field preserved. Recovery — re-enter credentials and resubmit, or switch to Sign Up.

Channels

• Information/state: The five culinary news channels — Superfoods/Healthy Foods, Homemade Delicacies, Local Heroes, Culinary Trends, Kitchen Tips — each with its own flat colour code and its latest published headlines.
• Primary action: Select a channel to see its articles, or select a headline to open that article.
• Supporting actions: Return to Landing; reach Sign Up or Login for contributor access.
• Domain entities: Channel (name, colour code, position 01–05), Article (headline, channel, date, read-time).
• Component responsibilities: Numbered channel bands (01–05) with oversized channel names and latest headlines; hairline-ruled article grid with tabular numerals for dates and read-times.
• States: Loading — channel bands render with their fixed names and colours while headlines load. Empty — a channel with no published articles yet shows its band and name with an explicit "belum ada artikel" state rather than a blank gap. Success — all five channels and their published headlines render. Error — a failed headline fetch shows a retry affordance per band while channel names remain. Recovery — retry the fetch; channel navigation stays usable.

Article

• Information/state: A single published culinary news article: headline, channel tag, dateline, read-time, body, and its channel's colour code.
• Primary action: Read the article.
• Supporting actions: Return to the article's channel; move to another channel; reach Sign Up or Login for contributor access.
• Domain entities: Article (headline, body, channel, dateline, read-time), Channel.
• Component responsibilities: Article header with channel tag and metadata; body column; channel-coloured rules; inverted pull-quote panel; footer.
• States: Loading — header and metadata skeleton while the body loads. Empty — not applicable for a selected article; an unavailable article is an error state. Success — full article renders with its channel identity. Error — an article that does not exist or is not published shows a clear not-found message with a link back to its channel. Recovery — return to the channel and choose another article.

Content

• Information/state: The contributor's protected workspace listing supplied culinary news content and the remaining group-member contributions, with each item's channel assignment and publication state.
• Primary action: Open an item in the Content Editor to create or edit it.
• Supporting actions: Start a new content item; filter or scan by channel; sign out.
• Domain entities: Content item (title, channel, publication state, author), Channel.
• Component responsibilities: Content list with channel tags and publication state; new-item control; channel filter; contributor identity indicator.
• States: Loading — list skeleton while content loads. Empty — no content yet shows an explicit empty state with the new-item control as the next step. Success — all of the contributor's content items render with channel and state. Error — a failed load shows a retry affordance. Recovery — retry; unsaved editor work is not lost by a list refresh.

Content Editor

• Information/state: The editing surface for one content item: title, body, channel assignment, and publication state.
• Primary action: Save the content item and assign it to the correct culinary channel before publication.
• Supporting actions: Publish or unpublish; return to Content without saving; discard changes.
• Domain entities: Content item (title, body, channel, publication state), Channel (five options).
• Component responsibilities: Title field; body field; channel selector limited to the five channels; save and publish controls; validation messaging.
• States: Loading — existing item fields populate before editing is enabled. Empty — a new item starts blank with no channel selected. Success — the item saves with its channel assignment and its state updates in Content. Error — a save failure or a missing required field (including an unassigned channel) shows a specific message and preserves the draft. Recovery — correct the flagged field and save again; the draft is never silently discarded.

3. Functional Requirements

FR-1 — Site identity and tagline (explicit) As a Site Visitor / Reader, I should see the site presented as "BerkelanaRasa" with the tagline "setiap sajian punya cerita" so that I immediately understand what the site is.

• Trigger/input: Opening the Landing surface.
• Observable result: The title and tagline render as the primary visual content of the entry surface.
• Access state: Anonymous; no identity required.
• Failure/recovery: If supporting data fails to load, the fixed title and tagline still render.
• Continuation: The visitor proceeds into the channel structure.

FR-2 — Five-channel structure (explicit) As a Site Visitor / Reader, I should see the site organized into exactly five news channels — Superfoods/Healthy Foods, Homemade Delicacies, Local Heroes, Culinary Trends, and Kitchen Tips — so that I can find culinary content by topic.

• Trigger/input: Opening the Landing or Channels surface.
• Observable result: All five channels are named and presented, each with its own consistent colour code.
• Access state: Anonymous; no identity required.
• Failure/recovery: If channel data cannot be fetched, the five source-named channels still render.
• Continuation: The visitor selects a channel.

FR-3 — Browse a channel's articles (required_inference) As a Site Visitor / Reader, I should open a channel and see its published articles so that I can choose what to read.

• Trigger/input: Selecting one of the five channels.
• Observable result: The channel's published headlines render with dates and read-times.
• Access state: Anonymous; no identity required.
• Failure/recovery: A failed headline fetch shows a retry affordance while the channel name and colour remain.
• Continuation: The visitor opens an article, or moves to another channel.

FR-4 — Read a published article (required_inference) As a Site Visitor / Reader, I should open an article and read it in full so that I get the culinary story I selected.

• Trigger/input: Selecting a headline from a channel.
• Observable result: The article renders with its headline, channel tag, dateline, read-time, and body.
• Access state: Anonymous; no identity required.
• Failure/recovery: An unavailable or unpublished article shows a clear not-found message with a link back to its channel.
• Continuation: The reader returns to the channel or moves to another channel.

FR-5 — Content available before reading (required_inference) As a Site Visitor / Reader, I should only encounter channel and article content that has actually been published, so that I never see unfinished drafts.

• Trigger/input: Any read of a channel or article.
• Observable result: Only published content appears on the public surfaces; unpublished items remain invisible to readers.
• Access state: Anonymous; no identity required.
• Failure/recovery: If publication state cannot be resolved, the item is withheld rather than shown.
• Continuation: The reader browses other published content.

FR-6 — First-use enrollment (required_inference) As a Content Contributor / Group Member, I should be able to enroll myself on first use so that I can begin preparing content for the site.

• Trigger/input: Submitting the enrollment form on Sign Up.
• Observable result: A contributor account is created and bound to me, and I reach the protected Content surface.
• Access state: Anonymous entry; the enrollment interaction itself is reachable without an existing account.
• Failure/recovery: Invalid or already-used identity, or a failed submission, shows a specific message with my entered values preserved so I can correct and resubmit.
• Continuation: I proceed to create or edit content.

FR-7 — Returning verification (required_inference) As a Content Contributor / Group Member, I should verify myself on return so that I can resume my protected content work.

• Trigger/input: Submitting credentials on Login.
• Observable result: I am verified and forwarded to the protected Content surface with my own content intact.
• Access state: Anonymous entry to the verification interaction; protected content remains unavailable until verification succeeds.
• Failure/recovery: Unrecognized credentials show a specific, non-revealing message with my identity field preserved so I can retry.
• Continuation: I resume editing or publishing.

FR-8 — Manage supplied culinary news content (required_inference) As a Content Contributor / Group Member, I should see and manage the culinary news content supplied for the site so that I can keep the site's content current.

• Trigger/input: Opening the protected Content surface.
• Observable result: My content items render with their channel assignment and publication state.
• Access state: Protected; requires verified contributor identity.
• Failure/recovery: A failed load shows a retry affordance without discarding unsaved editor work.
• Continuation: I open an item in the Content Editor.

FR-9 — Create or edit content and assign its channel (required_inference) As a Content Contributor / Group Member, I should create or edit a content item and assign it to the correct culinary channel before publication so that it appears under the right channel on the site.

• Trigger/input: Editing title and body and selecting one of the five channels in the Content Editor, then saving.
• Observable result: The item saves with its channel assignment and its state updates in Content.
• Access state: Protected; requires verified contributor identity.
• Failure/recovery: A save failure or a missing required field — including an unassigned channel — shows a specific message and preserves the draft.
• Continuation: I publish the item, or return to Content.

FR-10 — Continue adding the remaining group-member contributions (required_inference) As a Content Contributor / Group Member, I should be able to keep adding the remaining content and news sections as other group members finish their work, so that the site can be completed incrementally.

• Trigger/input: Creating a new content item in the Content Editor as new material arrives.
• Observable result: Newly added items appear in Content and, once published, under their assigned channel.
• Access state: Protected; requires verified contributor identity.
• Failure/recovery: A failed save preserves the draft so the contribution is not lost.
• Continuation: The item is published and becomes readable.

FR-11 — Deferred logo and remaining sections (explicit) As a Content Contributor / Group Member, I should be able to work with the site while the logo and the remaining content/news sections are still being finished by other group members, so that the site is usable before all assets arrive.

• Trigger/input: Using any surface before the logo and remaining sections are delivered.
• Observable result: The site presents its title, tagline, and five channels as authored content without depending on the pending logo or pending sections.
• Access state: Applies to both anonymous and protected surfaces.
• Failure/recovery: A channel with no published articles yet shows an explicit empty state rather than a blank gap.
• Continuation: The pending assets and sections are added later through the Content Editor.

4. User Personas

Site Visitor / Reader

Product context. A curious reader who arrives at BerkelanaRasa with no account and no prior relationship with the site. They may come from a shared link, a class presentation, or a search, and they judge the site in seconds.

Primary goal. Find and read culinary-arts content organized by channel.

Distinct accepted responsibilities. Browsing the five channels, choosing a channel, selecting a headline, and reading a published article in full. The reader never creates, edits, or publishes anything, and never needs an account.

Relevant inputs or decisions. Which of the five channels to open; which headline to read; whether to continue to another channel or article.

Interactions with other accepted participants. The reader is the audience for the Content Contributor's published work. The reader never interacts with the contributor directly; the contributor's channel assignment is what makes the reader's navigation coherent.

Observable success. The reader opens a channel, sees its published headlines, opens an article, and reads it with its channel identity and metadata intact.

Content Contributor / Group Member

Product context. A member of the Cyber Media course group project who prepares and supplies the news content and sections for BerkelanaRasa — including the logo and the remaining news sections still being finished by other group members. Their work is staggered across the group, so the site must accept contributions as they arrive.

Primary goal. Have their contributed culinary content published under the correct channel on BerkelanaRasa.

Distinct accepted responsibilities. Enrolling on first use; verifying on return; viewing and managing the supplied culinary news content; creating or editing a content item; assigning it to the correct one of the five channels before publication; and continuing to add the remaining group-member contributions as they are finished.

Relevant inputs or decisions. The content item's title and body; which of the five channels it belongs to; whether it is ready to publish; whether a draft is complete enough to save.

Interactions with other accepted participants. The contributor produces the content that the Site Visitor / Reader consumes. Multiple group members contribute to the same body of content, so each contributor's own items must remain bound to them and their channel assignments must remain correct for readers.

Observable success. A saved item carries the right channel, appears in the contributor's Content list with its state, and — once published — is readable by a visitor under that channel.

5. Core User Flows

Flow A — A visitor discovers the site and enters the channels

1. The Site Visitor / Reader opens BerkelanaRasa and lands on Landing.
2. The visitor sees "BerkelanaRasa" and "setiap sajian punya cerita" as the page's primary artwork, plus the five-block channel legend naming Superfoods/Healthy Foods, Homemade Delicacies, Local Heroes, Culinary Trends, and Kitchen Tips.
3. The visitor either selects one of the five channel blocks directly, or uses the black "MASUK KE DAPUR →" control to enter the content structure.
4. Observable result: the visitor arrives at Channels (or directly at the chosen channel) with all five channels named and colour-coded.
5. Next step: the visitor chooses a channel to browse.

Flow B — A visitor browses a channel and reads an article

1. On Channels, the Site Visitor / Reader scans the numbered channel bands (01–05) and their latest published headlines.
2. The visitor selects a channel — for example, Local Heroes.
3. Observable result: the channel's published headlines render with dates and read-times in a hairline-ruled grid. If that channel has no published articles yet, it shows an explicit "belum ada artikel" state instead of a blank gap.
4. The visitor selects a headline.
5. Observable result: Article renders the headline, channel tag, dateline, read-time, and body, carrying that channel's colour code.
6. Failure/recovery: if the article is unavailable or unpublished, the visitor sees a clear not-found message with a link back to the channel, and can choose another headline.
7. Next step: the visitor returns to the channel or moves to another channel and repeats from step 2.

Flow C — A contributor enrolls on first use

1. A Content Contributor / Group Member opens Sign Up from Landing, Channels, or Article.
2. The contributor fills in the enrollment form and submits.
3. Observable result: the account is created and bound to that contributor, and they arrive at the protected Content surface.
4. Failure/recovery: if the identity is invalid or already in use, or the submission fails, the form shows a specific message and preserves the entered values so the contributor can correct and resubmit — or switch to Login if they already have an account.
5. Next step: the contributor creates their first content item (Flow E).

Flow D — A returning contributor verifies and resumes

1. A Content Contributor / Group Member opens Login.
2. The contributor submits their credentials.
3. Observable result: they are verified and forwarded to Content, where their own items and their channel assignments and publication states are intact.
4. Failure/recovery: unrecognized credentials show a specific, non-revealing message with the identity field preserved; the contributor retries, or switches to Sign Up.
5. Next step: the contributor resumes editing or publishing (Flow E or Flow F).

Flow E — A contributor creates content and assigns its channel

1. From Content, the Content Contributor / Group Member starts a new content item.
2. Content Editor opens with blank title and body fields and no channel selected.
3. The contributor writes the title and body, then selects the correct channel from the five available options.
4. The contributor saves.
5. Observable result: the item saves with its channel assignment and its state updates in the Content list.
6. Failure/recovery: if a required field is missing — including an unassigned channel — or the save fails, the editor shows a specific message and preserves the draft so nothing is lost; the contributor corrects the field and saves again.
7. Next step: the contributor publishes the item (Flow F), or returns to Content.

Flow F — A contributor publishes and the reader receives the result

1. In Content Editor, the Content Contributor / Group Member reviews the saved item and its channel assignment.
2. The contributor publishes the item.
3. Observable result: the item's state updates in Content, and the item becomes readable on the public surfaces under its assigned channel.
4. Participant handoff: the Site Visitor / Reader now encounters that item as a headline in the assigned channel on Channels and can open it on Article (Flow B).
5. Failure/recovery: if publication fails, the item remains unpublished and the contributor sees a specific message; the draft is preserved and can be retried.
6. Next step: the contributor returns to Content to continue with the next item.

Flow G — The group continues adding the remaining sections

1. As other group members finish their work, a Content Contributor / Group Member returns via Login (Flow D).
2. From Content, the contributor starts a new item for the newly finished material.
3. In Content Editor, the contributor enters the content and assigns it to the correct one of the five channels.
4. The contributor saves and publishes.
5. Observable result: the new contribution appears in Content and, once published, under its channel for readers.
6. Failure/recovery: a failed save preserves the draft; the contributor retries without re-entering the work.
7. Next step: the contributor repeats as further sections arrive. The logo and remaining sections are added the same way when they are delivered.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. Its muse is Paula Scher, and its headline idea is typography as architecture: the culinary map, painted loud — the words themselves are the artwork, so the site looks finished and intentional even while the logo and photography are still pending.

Colour tokens (light mode)

Channel colour-coding (flat blocks, black type on top, one colour per channel)

Typography

• Headings: Anton — condensed wood-type display, ALL CAPS, tight leading 0.86–0.92, slight negative tracking.
• Secondary display and channel names: Archivo 800 uppercase, 0.12em tracking — the "label" voice against Anton's "shout."
• Body: Archivo 400.
• Scale: 1.333 modular, fluid — hero wordmark clamp(56px, 13vw, 168px); hero tagline clamp(20px, 3.4vw, 40px) Archivo 800 caps; section headlines clamp(34px, 5.5vw, 72px) Anton; article H1 clamp(32px, 5vw, 64px) Anton; H2 28px Archivo 700; body 17px/1.65 Archivo 400; metadata 13px Archivo 600 caps 0.14em tracking; tabular numerals for dates and read-times.

Shape language. Hard edges only — zero border radius anywhere. Black 2px rules and 4px frame borders, flat colour rectangles butting directly against each other with no gaps, diagonal colour bands at section transitions, and type that bleeds off the right edge of its own container. No shadows, no rounded cards, no soft blobs.

Spacing rhythm. Poster grid: a 12-column asymmetric layout where type blocks and colour fields overlap by design. Full-bleed channel bands run edge to edge. Article lists are dense two-column newspaper grids separated by black hairlines rather than card gaps. Every section opens with a black rule and a numbered label (01–05).

Imagery style. Typography is the image. Where photography exists it appears as high-contrast duotone cutouts (food shot reduced to black plus one channel colour), hard-cropped to the grid and bled off an edge. Until the group's photos arrive, each channel gets a generated poster tile: a flat colour field with the channel name in Anton and a simple black pictogram (leaf, pot, star, trend arrow, whisk) drawn as thick 3px strokes.

Contrast. Body text is always black on paper or black on a coloured block; black blocks pair with paper-white type. Contrast stays above 7:1. No blue, indigo, or violet appears anywhere in the palette.

7. Signature Design Concept

The wordmark as a full-width cropped poster.

The public entry is a full-viewport poster, not a SaaS hero. The warm paper ground #F4EFE6 fills the screen. BERKELANARASA is set in Anton at clamp(56px, 13vw, 168px), flush left, occupying the full width and deliberately running to the right viewport edge so the final "A" is cropped by the frame — the word is the artwork, and the site reads as finished with zero assets. Beneath it, a red #E23A1E horizontal bar spans the full width carrying SETIAP SAJIAN PUNYA CERITA in Archivo 800 caps, paper-white, breaking onto two lines at 375px.

To the right of the wordmark's lower half sits a stack of five flat channel blocks — red, amber, teal, green, black — each labelled with its channel number and name in caps, sized like a printed legend. This legend is the site's wayfinding system: each channel's colour follows it everywhere as band backgrounds, rule colours, and article tags.

There is no centred column and no button-and-subtext stack. The only control is a black rectangle reading MASUK KE DAPUR → pinned to the bottom-left of the hero, with the scroll cue as a rotated vertical label on the right edge.

Readability guarantee. The wordmark's crop is carried by the type's own frame on desktop only; at 375px the wordmark wraps to two stacked lines with no letter ever clipped, and at every viewport (375px, 768px, 1280px) the wordmark, tagline, channel labels, and the entry control stay entirely inside the viewport and their container. Where the direction asks for a cropped or bleeding gesture, it is carried by imagery and decoration — never by readable text or a control.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The wordmark "BERKELANARASA" set in Anton at viewport scale, with the red tagline bar beneath it and the five-block channel legend to the right of its lower half.
• Input → transformation → outcome thesis: As the entry surface loads, the tagline's words rise from behind a black mask, staggered 60ms apart, while the five channel blocks settle into their printed-legend stack — so the visitor's first act of reading is the animation, and the outcome is a fully composed poster with the "MASUK KE DAPUR →" control ready at the bottom-left.
• Motion vocabulary: Staggered word reveals from behind black masks; one continuous typographic marquee of the five channel names in the black header bar, pausing on hover; colour-block wipes when a channel band enters the viewport; diagonal 6-degree colour-band wipes carrying the next channel's colour across section seams; hover on an article row inverting it to black with paper-white type. No bounce, no blur, no floating, no parallax on text.
• Composed first frame: Paper ground, the wordmark already at full size and flush left, the red tagline bar in place, the five channel blocks stacked as a legend, and the black entry control pinned bottom-left — a complete poster before any motion begins.
• Reduced-motion state: Under prefers-reduced-motion, the marquee becomes a static wrapped row of the same five channel names, the staggered word reveals and colour-block wipes resolve immediately to their final composed state, and every item remains fully readable. No readable text or control is ever moved under the cursor.

9. Non-Functional Requirements

• NFR-1 — Responsive readability (explicit, from the creative direction's readability rule): Headlines, the wordmark, labels, numbers, 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.
• NFR-2 — Contrast (explicit, from the creative direction): Body text is black on paper or black on a coloured block; black blocks pair with paper-white type. Contrast ratio stays above 7:1.
• NFR-3 — Reduced motion (explicit, from the creative direction): With prefers-reduced-motion, moving and scrollable content provides a usable static arrangement — items wrap into rows or scroll horizontally so each can be brought fully into view.
• NFR-4 — Protected content isolation (required_inference): Unpublished content is never exposed on the public reading surfaces; only published items are readable.
• NFR-5 — Contributor continuity (required_inference): A contributor's content items, channel assignments, and publication states remain bound to that contributor across sessions, so staggered group contributions are not lost or misattributed.
• NFR-6 — Draft preservation (required_inference): A failed save or a validation error in the Content Editor never silently discards the contributor's draft.
• NFR-7 — Incremental delivery (explicit): The site remains fully usable while the logo and the remaining content/news sections are still pending from other group members.

10. Tech Stack

• Frontend: React — a single-page web application serving the public reading surfaces and the protected contributor workspace.
• Backend: Python / FastAPI — one shared backend process providing the content, channel, and contributor-identity APIs. New domain routes and modules extend this existing backend rather than introducing separate services.
• Storage: A relational database for contributors, channels, and content items with their channel assignments and publication states.
• Packaging: Docker with docker-compose.yml as the inventory of runnable services — the frontend and the single backend, with the database as its dependency.
• Styling: Plain CSS implementing the poster grid, flat colour fields, hard edges, and the motion vocabulary described in sections 6–8. No component library that would impose rounded corners, shadows, or a blue/indigo default theme.

Kubernetes is not required: the deployment is a single small web application with one backend and one database.

11. Assumptions and Constraints

• A-1 (explicit): The logo and all other content/news sections are not yet available; they will follow once other group members finish their work. This document does not specify their content.
• A-2 (explicit): The five news channels are exactly Superfoods/Healthy Foods, Homemade Delicacies, Local Heroes, Culinary Trends, and Kitchen Tips. No additional channel is introduced.
• A-3 (explicit): The site title is "BerkelanaRasa" and the tagline is "setiap sajian punya cerita."
• A-4 (required_inference): Contributors enroll themselves on first use because no invitation or provisioning boundary is established by the source.
• A-5 (required_inference): Readers are anonymous and require no account; only content contributors have protected access.
• A-6 (required_inference): The protected Content and Content Editor surfaces require a verified contributor identity; the Landing, Sign Up, Login, Channels, and Article surfaces are anonymously reachable.
• A-7 (assumption): The site is Indonesian-language in its editorial voice, consistent with the supplied title and tagline.
• A-8 (assumption): The project is a course midterm deliverable, so scope stays within the five channels and the contributor workflow; no adjacent platform capabilities are added.

12. Glossary

• BerkelanaRasa — The culinary-arts news website that is the subject of this document; titled "BerkelanaRasa" with the tagline "setiap sajian punya cerita."
• Channel — One of the five editorial news categories: Superfoods/Healthy Foods, Homemade Delicacies, Local Heroes, Culinary Trends, Kitchen Tips. Each channel owns a flat colour code used as its wayfinding identity.
• Article — A published culinary news item belonging to exactly one channel, with a headline, body, dateline, and read-time.
• Content item — A contributor's unit of work in the Content and Content Editor surfaces: title, body, channel assignment, and publication state. It becomes an Article once published.
• Publication state — Whether a content item is published (readable on public surfaces) or unpublished (visible only to its contributor).
• Site Visitor / Reader — The anonymous persona who browses channels and reads published articles.
• Content Contributor / Group Member — The authenticated persona who prepares, creates, edits, assigns, and publishes culinary content for the site.
• Poster grid — The 12-column asymmetric layout in which type blocks and flat colour fields overlap by design, with full-bleed channel bands and hairline-ruled article grids.