System Requirements Document for cafe-coffee

1. Introduction

cafe-coffee is a public, single-page cafe website. Its purpose is to present a neighbourhood specialty cafe to prospective visitors by doing two things in one continuous scroll experience:

1. Showcase the coffee process in the hero section through motion or scroll animation — the bean-to-cup ritual (bean → grind → bloom → pour → cup) is dramatised as choreographed, scroll-linked motion.
2. Showcase the vibe of the cafe in the remaining sections — the room's warmth, colour, atmosphere, and daily character.

The audience is design-curious urban coffee drinkers and casual drop-ins who arrive on the public site, scroll through the animated brew sequence, absorb the cafe's atmosphere, and decide the cafe is worth visiting. The site is anonymous and public; there is no account, no ordering flow, and no transactional capability in scope.

2. System Overview

cafe-coffee is delivered as a single public web page (the Landing page) with no authentication and no application-owned identity. A visitor arrives anonymously, and the entire experience is a scroll-driven narrative:

• Hero zone — an oversized editorial headline ("SLOW / POUR") with a glossy pink 3D cup and a coffee stream whose length and droplet position are scrubbed by scroll progress through the first viewport. A step label above the headline ticks through the five process stages (01 BEAN → 02 GRIND → 03 BLOOM → 04 POUR → 05 CUP) as the visitor scrolls.
• Process sequence — five wide capsule rows, each with a lime step numeral in a pink pill, that swell open on scroll with the crema imagery inside growing together.
• Vibe gallery — an asymmetric gallery of curved photo tiles at varied sizes conveying the room's atmosphere.
• Chant marquee — a slow horizontal marquee of the cafe's chant ("SLOW POUR · WARM ROOM · GOOD PEOPLE ·") in pink display type, pausing on hover.
• Visit block — hours and visit information on a full-bleed pink field with cream type and a lime capsule call-to-action, its top boundary a wide organic curve swelling into the cream gallery above.

Actors. The only active human actor is the Cafe Visitor (anonymous, public). No system, provider, or external service performs a persona-facing capability; all behavior is first-party presentation on the Landing page.

Narrow exclusions. The coffee-process showcase is confined to the hero section; the rest of the site conveys the cafe's vibe. There is no online ordering, no reservation system, no menu-management, no user accounts, and no e-commerce in the current scope.

2a. Product Interpretation and Delivery Boundary

The product is a presentation-only public website. Delivery is first-party custom UI owned by the application, served anonymously with no access gate. The visitor's only interaction is scrolling, hovering, and reading; the only commitment the site asks for is the decision to visit the cafe, expressed through the "Visit us" call-to-action and the hours/visit information block.

Current horizon: the Landing page with its hero coffee-process animation and vibe sections, exactly as described above.

Future horizon: none stated by the user. No ordering, booking, loyalty, or account features are accepted for any horizon and none are introduced here.

Because the site is anonymous and stateless, no identity establishment, verification, or session continuity is required or inferred. The "Visit us" action is a navigational/attention cue within the page, not a transactional commitment that would require identity.

2b. Source Content Inventory

Not applicable — no reference directive declares a content_source.

2c. Page Content and Component Coverage

Landing

The single public page. Anonymous access, no identity required. It is a vertically scrolling, full-bleed colour-field composition.

Information and state

• Hero headline: "SLOW / POUR" — two-line oversized display type; "POUR" in bubblegum pink; a thin lime rule running from the baseline out to the viewport edge.
• Small uppercase label above the headline: "01 — BEAN TO CUP", which ticks through 01 BEAN → 02 GRIND → 03 BLOOM → 04 POUR → 05 CUP as scroll progresses.
• Glossy pink 3D cup on the right, cropped by the top edge, with a cream-and-pink coffee stream that grows downward with scroll and a droplet separating at the lip.
• A single pink capsule "Visit us" button beneath the type, fully inside the container at 375px.
• Five process steps as wide capsule rows, each with a lime step numeral in a pink pill and a crema image that grows with the row on scroll.
• Asymmetric vibe gallery of curved photo tiles at varied sizes (warm documentary room photography: window light, terrazzo counter, hands on a portafilter; macro latte-art swirls as abstract curves).
• Chant marquee: "SLOW POUR · WARM ROOM · GOOD PEOPLE ·" in pink display type, pausing on hover.
• Visit block: hours and visit information on a full-bleed pink field with cream type and a lime capsule CTA, top boundary a wide organic curve.

Primary actions

• Scroll through the hero to scrub the pour and advance the process step label.
• Scroll through the process rows to swell them open.
• Hover the marquee to pause it.
• Read the visit block and use the lime capsule CTA / "Visit us" button as the attention cue to visit.

Supporting actions

• Read the vibe gallery imagery and captions.
• Read process step descriptions.

Domain entities

• Coffee process step (number, name, description, crema image).
• Vibe gallery tile (image, optional caption).
• Chant phrase.
• Visit information (hours, location/visit details).

Component responsibilities

• Hero composition: display type stack, lime rule, step label, 3D cup, scroll-scrubbed stream and droplet, "Visit us" capsule.
• Process sequence: five capsule rows with lime numerals in pink pills and growing crema imagery.
• Vibe gallery: curved photo tiles at varied sizes in an asymmetric grid.
• Chant marquee: horizontally moving pink display text, pause on hover.
• Visit block: pink field, cream type, lime capsule CTA, organic curved top boundary.

States

• Loading: imagery and 3D renders load progressively; text and layout render immediately so readable content is never blocked.
• Empty: not applicable — all content is authored and static; no data-driven empty state exists.
• Success: the visitor scrolls the full page; the pour completes to a finished stream and the step label reaches "05 CUP"; all sections are readable.
• Error/recovery: if an image or render fails to load, the layout holds its space and text remains readable; the page remains fully usable without motion.
• Reduced motion: with prefers-reduced-motion, the pour renders as a static finished stream, all process rows appear in place, and the marquee provides a usable static arrangement (wrapped or horizontally scrollable so each item can be brought fully into view).

3. Functional Requirements

FR-1 — Hero coffee-process showcase with motion/scroll animation (explicit) As a Cafe Visitor, I should see the coffee process showcased in the hero section through motion or scroll animation, so that I understand how the coffee is made as an engaging, choreographed sequence.

• Trigger/input: the visitor loads the Landing page and scrolls through the first viewport.
• Observable result: the coffee stream's length and droplet position are driven by scroll progress; the cup rotates a few degrees; the step label above the headline ticks 01 BEAN → 02 GRIND → 03 BLOOM → 04 POUR → 05 CUP.
• Access state: anonymous, public.
• Failure/recovery: with reduced motion, the pour renders as a static finished stream and labels remain readable.
• Continuation: the visitor continues scrolling into the process sequence and vibe sections.

FR-2 — Remaining sections showcase the cafe's vibe (explicit) As a Cafe Visitor, I should see the remaining sections of the site convey the cafe's vibe, so that I get a feel for the cafe's atmosphere and character.

• Trigger/input: the visitor scrolls past the hero.
• Observable result: the process sequence, asymmetric vibe gallery, chant marquee, and visit block present the room's warmth and colour.
• Access state: anonymous, public.
• Failure/recovery: if imagery fails, text and layout remain readable.
• Continuation: the visitor reaches the visit block and decides whether to visit.

FR-3 — Coffee-process showcase confined to the hero (explicit constraint) As a Cafe Visitor, I should encounter the coffee-process showcase only in the hero section, with the rest of the site devoted to the cafe's vibe, so that the page has a clear narrative structure.

• Observable result: process animation and step labels appear in the hero; subsequent sections present vibe content (gallery, chant, visit) rather than further process animation.
• Access state: anonymous, public.

FR-4 — Scroll-linked pour and step-label progression (explicit, from creative direction) As a Cafe Visitor, I should see the coffee stream grow downward as I scroll and a droplet separate at the lip, with the step label advancing, so that scrolling feels like participating in the pour.

• Trigger/input: scroll progress through the first viewport.
• Observable result: stream height and droplet position track scroll; step label advances through the five stages.
• Failure/recovery: reduced motion shows the finished stream statically.
• Continuation: the sequence resolves at "05 CUP" as the visitor leaves the hero.

FR-5 — Process rows swell open on scroll (explicit, from creative direction) As a Cafe Visitor, I should see each of the five process rows swell open on scroll with its crema image growing together, so that each step is revealed as a tactile moment.

• Trigger/input: scroll into each row.
• Observable result: row height and inner crema image grow together (scale 0.96→1, 600ms cubic-bezier(0.22,1,0.36,1)).
• Failure/recovery: reduced motion shows rows in place at full size.
• Continuation: the visitor proceeds to the gallery.

FR-6 — Chant marquee with hover pause (explicit, from creative direction) As a Cafe Visitor, I should see a slow horizontal marquee of the cafe's chant ("SLOW POUR · WARM ROOM · GOOD PEOPLE ·") that pauses on hover, so that the cafe's character is felt rhythmically.

• Trigger/input: the marquee is in view; hover pauses it.
• Observable result: the chant scrolls horizontally in pink display type; hovering pauses it.
• Failure/recovery: reduced motion provides a usable static arrangement where each item can be brought fully into view.
• Continuation: the visitor reaches the visit block.

FR-7 — Visit block with hours and call-to-action (explicit, from creative direction) As a Cafe Visitor, I should see a visit block on a full-bleed pink field with cream type, hours/visit information, and a lime capsule CTA, so that I know when and how to visit.

• Trigger/input: the visitor scrolls to the end of the page.
• Observable result: hours and visit information are readable; the lime capsule CTA and the hero "Visit us" button serve as the attention cue to visit.
• Access state: anonymous, public.
• Failure/recovery: text remains readable if decorative elements fail.
• Continuation: the visitor decides to visit the cafe.

FR-8 — Readable text and controls at every viewport (explicit constraint) As a Cafe Visitor, I should see all headlines, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, so that nothing readable is cropped or covered.

• Observable result: text wraps or scales (e.g., clamp() with a mobile floor of 44px for the hero headline) to fit; imagery and decoration may bleed or overlap but never cover readable text or controls.
• Failure/recovery: at narrow widths the hero headline stacks whole ("POUR" on its own line) rather than clipping.

FR-9 — Reduced-motion usable static arrangement (explicit constraint) As a Cafe Visitor who prefers reduced motion, I should get a usable static arrangement — the pour as a finished stream, rows in place, and marquee items reachable — so that the site remains fully usable without animation.

• Observable result: prefers-reduced-motion yields static pour, in-place rows, and wrapped or horizontally scrollable marquee items.

4. User Personas

Cafe Visitor

Product context. A design-curious urban coffee drinker or casual drop-in who has landed on the cafe's public website, likely from a search, a link, or word of mouth. They are anonymous — no account, no login — and are evaluating the cafe on feel as much as on facts.

Primary goal. Decide whether the cafe is worth visiting, by understanding how the coffee is made and getting a genuine sense of the room's atmosphere.

Distinct accepted responsibilities.

• Scroll through the hero's animated coffee-process sequence, reading the step labels as they advance from bean to cup.
• Scroll through the five process rows and absorb each step as it swells open.
• Browse the asymmetric vibe gallery to feel the room's warmth and colour.
• Read the chant marquee and the visit block to learn hours and visit details.
• Use the "Visit us" / lime capsule CTA as the cue to act on the decision to visit.

Relevant inputs or decisions. The visitor's inputs are scroll position and hover; their decision is whether the cafe is worth visiting. They make no commitment that requires identity.

Interactions with other accepted participants. None — the Cafe Visitor is the sole active human actor; there is no counterparty, recipient, or beneficiary whose state changes.

Observable success. The visitor scrolls the full page, the pour completes to a finished stream, the step label reaches "05 CUP", all sections are readable at their viewport, and they leave with a clear sense of the cafe's vibe and when to visit.

What makes this role different. The visitor is a pure audience: they consume a choreographed narrative and form an impression. They do not transact, register, or manage anything, so their success is measured by comprehension and atmosphere rather than by a completed operation.

5. Core User Flows

Flow A — Cafe Visitor experiences the hero coffee-process animation

1. The Cafe Visitor opens the Landing page anonymously at 375px, 768px, or 1280px.
2. The hero renders: the small uppercase label "01 — BEAN TO CUP" above the oversized two-line "SLOW / POUR" headline ("POUR" in bubblegum pink), a thin lime rule running to the viewport edge, and the glossy pink 3D cup cropped by the top edge on the right.
3. The visitor begins scrolling. The coffee stream grows downward and a droplet separates at the lip; the cup rotates a few degrees; the step label ticks 01 BEAN → 02 GRIND → 03 BLOOM → 04 POUR → 05 CUP.
4. The visitor reaches the end of the first viewport; the pour resolves at "05 CUP".
5. Failure/recovery: if the visitor prefers reduced motion, the pour renders as a static finished stream and all labels remain readable; the visitor continues normally.
6. Continuation: the visitor scrolls into the process sequence.

Flow B — Cafe Visitor reads the process sequence

1. Continuing from the hero, the visitor scrolls into the five wide capsule rows.
2. Each row swells open on scroll (scale 0.96→1, 600ms cubic-bezier(0.22,1,0.36,1)), its lime step numeral in a pink pill and its crema image growing together.
3. The visitor reads each step's description.
4. Failure/recovery: with reduced motion, rows appear in place at full size.
5. Continuation: the visitor scrolls into the vibe gallery.

Flow C — Cafe Visitor absorbs the cafe's vibe

1. The visitor scrolls into the asymmetric vibe gallery of curved photo tiles at varied sizes — window light, terrazzo counter, hands on a portafilter, macro latte-art swirls.
2. The visitor continues to the chant marquee ("SLOW POUR · WARM ROOM · GOOD PEOPLE ·") in pink display type; hovering pauses it.
3. Failure/recovery: with reduced motion, the marquee provides a usable static arrangement where each item can be brought fully into view.
4. Continuation: the visitor scrolls to the visit block.

Flow D — Cafe Visitor decides to visit

1. The visitor reaches the visit block on a full-bleed pink field with cream type, its top boundary a wide organic curve swelling into the cream gallery above.
2. The visitor reads the hours and visit information.
3. The visitor uses the lime capsule CTA (or recalls the hero "Visit us" capsule) as the cue to visit the cafe.
4. Observable result: the visitor has a clear sense of the cafe's vibe and when to visit, and decides whether the cafe is worth visiting.

6. Visuals Colors and Theme

Muse and headline. Karim Rashid — Sensual pop minimalism, poured hot. Coffee as a glossy, pleasurable ritual, not a monastic one.

Mode. Light mode only.

Colour tokens (exact hex by role)

• Background (warm cream ground): #FFF4EA
• Surface (soft card/blush): #FFE3D2
• Text (espresso ink, ~14:1 contrast): #241016
• Primary (bubblegum pink — large colour fields, capsule buttons, pour stream): #F53D7A
• Accent (lime — single hot counter-accent: process step numbers, underline, "order" pill): #C6F24E
• Muted: #8A6A6F

Proportions. Roughly 55% cream, 25% pink, 12% peach, 5% ink, 3% lime. No gradients on text. No blue anywhere.

Typography

• Headings: Unbounded at 600–700 for display, very large and soft-cornered, tight leading (0.92), slight negative tracking on the biggest sizes; lowercase or sentence case, never all-caps for headlines.
• Body and labels: Quicksand 500/600 with 1.7 line-height.
• Small labels: Quicksand 700, letterspaced 0.14em, uppercase — the only caps on the page.
• Scale (1.4 modular): display clamp(44px, 9vw, 132px) / section h2 clamp(32px, 5vw, 64px) / h3 24px / body 17px / label 12px. Mobile hero headline floor 44px so "POUR" stacks whole; desktop ceiling 132px spanning the viewport.

Shape language. Capsules and blobs everywhere: pill buttons, fully rounded cards (radius 28–48px), curved section boundaries that swell between pink and cream fields, glossy highlight arcs on the 3D cup and bean. Hard edges are forbidden except the thin lime process rule. Shapes overlap deliberately — the pour stream crosses a curved section seam.

Layout. Full-bleed colour fields stacked as a liquid column. Hero is a two-zone composition: oversized stacked display type on the left two-thirds over a cream field, a glossy pink 3D cup and pour on the right bleeding off the top edge. Below: a vertically scrolling five-step process sequence of wide capsule rows with lime step numbers; then an asymmetric vibe gallery of curved photo tiles at varied sizes; then a marquee of the cafe's daily chant; then hours/visit block on a solid pink field with cream type. Single column at 375px, two-zone split at 768px, full asymmetric grid at 1280px. All text and controls stay inside the container at every breakpoint.

Imagery style. Glossy 3D renders of a pink ceramic cup, a crema surface, an espresso puck, and a single bean, on cream or pink grounds with soft contact shadows; macro latte-art swirls treated as abstract curves; warm documentary photos of the room (window light, terrazzo counter, hands on a portafilter) cropped into curved capsules. No stock smiling-people hero, no flat clip-art.

Avoid. Blue–indigo accents or any #0057FF/#2563EB-family colour; Inter, Roboto, Poppins, Arial or system-ui type; centred headline + subtext + blue button hero or gradient-blob backdrop; grid of identical hover-lift cards; sharp-cornered rectangles or hairline-bordered panels; stock photography of people smiling at laptops; flat 2D bean icons used as decoration; autoplaying video that cannot be paused or reduced. The generic indigo/blue-on-white SaaS template is forbidden.

7. Signature Design Concept

"The Pour That Answers the Scroll."

The first screen is not a centred SaaS hero: it is a left-weighted editorial stack of enormous Unbounded display type — "SLOW / POUR" — set at clamp(44px, 9vw, 132px) in espresso ink on cream, with the word "POUR" set in bubblegum pink and a thin lime rule running from the baseline out to the viewport edge. The right third is dominated by a glossy pink 3D cup rendered in CSS 3D perspective, cropped by the top edge, with a cream-and-pink coffee stream that grows downward as the visitor scrolls, a droplet separating at the lip. A small uppercase Quicksand label "01 — BEAN TO CUP" sits above the headline; a single pink capsule "Visit us" button sits beneath the type, fully inside the container at 375px. No subtext paragraph, no gradient blob.

The signature gesture is the scroll-scrubbed pour: the coffee stream's height and droplet position are tied to hero scroll progress, and the step label above the headline ticks 01 BEAN → 02 GRIND → 03 BLOOM → 04 POUR → 05 CUP as it moves. The 3D cup overlaps the type's negative space rather than the letters, so readable text stays whole while the imagery carries the gesture. This concept recomposes only accepted content and controls — the headline, step label, cup, stream, and "Visit us" capsule — and introduces no new behaviour or destination.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject. The glossy pink CSS-3D cup on the right, cropped by the top edge, with the cream-and-pink coffee stream and separating droplet.
• Input → transformation → outcome thesis. Scroll progress through the first viewport → the stream's length and droplet position advance, the cup rotates a few degrees, and the step label ticks through the five stages → the pour resolves at "05 CUP" as the visitor leaves the hero, having watched the bean-to-cup ritual as a single liquid sequence.
• Motion vocabulary. Scroll-linked stream growth and droplet separation; slight cup rotation; step-label swap; soft liquid morph on process rows (scale 0.96→1, 600ms cubic-bezier(0.22,1,0.36,1)); slow pink marquee pausing on hover.
• Composed first frame. Cream field; "SLOW / POUR" stacked left in espresso ink with "POUR" in bubblegum pink; lime hairline rule running off the right edge; "01 — BEAN TO CUP" label above; glossy pink cup bleeding off the top-right; pink "Visit us" capsule beneath the type, fully inside the container at 375px.
• Reduced-motion state. The pour renders as a static finished stream, all rows appear in place, and the marquee provides a usable static arrangement (wrapped or horizontally scrollable so each item can be brought fully into view).

9. Non-Functional Requirements

• NFR-1 — Readable text and controls at every viewport (explicit): headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (e.g., clamp() with its mobile size) to fit; no other element covers any part of them. Imagery, decoration, and motion may be cropped, bled, rotated, overlapped, or cut as the direction asks, as long as they cover no readable text or control. Rationale: the direction's bold overlaps must never compromise legibility.
• NFR-2 — Moving and scrollable content (explicit): marquees, tickers, carousels, and horizontally scrollable rows may cross the viewport or container edge by design; each item must become fully readable as it passes. With prefers-reduced-motion, provide a usable static arrangement (wrap items into rows or allow horizontal scrolling so each item can be brought fully into view). A scrollable row need not show every item fully at once, including in reduced-motion mode; overflow-x: auto/scroll with items that fit when brought into view is valid. Rationale: motion is the product's core gesture and must remain accessible.
• NFR-3 — Reduced-motion support (explicit): with prefers-reduced-motion, the pour renders as a static finished stream and all rows appear in place. Rationale: accessibility of the signature animation.
• NFR-4 — No autoplaying unpausable video (explicit): no autoplaying video that cannot be paused or reduced. Rationale: the direction forbids it; motion must be controllable.
• NFR-5 — Contrast (explicit, from direction): espresso ink #241016 on cream #FFF4EA at ~14:1 contrast for all body text. Rationale: legibility of the warm palette.
• NFR-6 — No blue (explicit): no blue–indigo accents or any #0057FF/#2563EB-family colour anywhere. Rationale: brand identity constraint.
• NFR-7 — Anonymous public access (explicit, from planning scope): the Landing page requires no account or identity; no authentication, session, or account-management capability is in scope. Rationale: the site is a public presentation surface.

10. Tech Stack

• Frontend: React (single-page public site) with CSS 3D transforms and SVG/CSS for the scroll-linked pour; scroll-progress driven animation (e.g., CSS scroll-driven animations or a lightweight scroll listener) and prefers-reduced-motion media queries.
• Styling: CSS with the token palette, Unbounded and Quicksand web fonts, and clamp() type scale.
• Backend: none required — the site is presentation-only with authored static content; no server-side behavior is accepted.
• Storage: none required.
• Deployment: static hosting of the built frontend; no Docker/Kubernetes services are needed for the accepted scope.

(These are the minimal items needed for the accepted scope; no source-specified technology was provided, so this is a labeled default.) [Default — not specified by user]

11. Assumptions and Constraints

• A-1 (explicit constraint): The coffee-process showcase is confined to the hero section; the rest of the site conveys the cafe's vibe.
• A-2 (explicit): The site is a single public Landing page with anonymous access; no accounts, ordering, reservations, or e-commerce are in scope.
• A-3 (required inference): The Cafe Visitor is the sole active human actor; no counterparty or beneficiary state changes, so no participant handoff is required.
• A-4 (required inference): The "Visit us" capsule and lime CTA are attention cues within the page, not transactional commitments; no identity is needed to act on them.
• A-5 (explicit, from direction): The palette, fonts, shape language, layout, motion, and imagery follow the supplied creative direction; the catalogue fills only unspecified details.
• A-6 (explicit): No blue anywhere; no Inter/Roboto/Poppins/Arial/system-ui type; no centred SaaS hero or gradient-blob backdrop.
• A-7 (default): Content (process step descriptions, gallery captions, chant, hours) is authored static copy; no CMS or dynamic data source is accepted.

12. Glossary

• Hero section — the first viewport of the Landing page, containing the "SLOW / POUR" headline, step label, 3D cup, scroll-scrubbed pour, and "Visit us" capsule.
• Coffee process — the five-stage bean-to-cup ritual: 01 BEAN, 02 GRIND, 03 BLOOM, 04 POUR, 05 CUP.
• Scroll-scrubbed pour — the coffee stream whose length and droplet position are driven by scroll progress through the hero.
• Process sequence — the five wide capsule rows below the hero, each with a lime step numeral in a pink pill and a crema image that grows on scroll.
• Vibe gallery — the asymmetric gallery of curved photo tiles conveying the cafe's atmosphere.
• Chant marquee — the slow horizontal marquee of "SLOW POUR · WARM ROOM · GOOD PEOPLE ·" that pauses on hover.
• Visit block — the full-bleed pink field with cream type, hours/visit information, and a lime capsule CTA, with an organic curved top boundary.
• Capsule — the pill-shaped button/card form language (fully rounded, radius 28–48px).
• Reduced motion — the prefers-reduced-motion state in which the pour is static, rows are in place, and marquee items are reachable.