System Requirements Document for sapphire-website

1. Introduction

sapphire-website is a public website for a retail business. The product intent is a single, publicly accessible web presence that represents a retail business to the general public: a shop-front on the web that introduces the business and presents its information to any visitor, with no account required. The audience is twofold: the retail business owner, who needs the business to have a credible, tasteful public presence online, and the retail shopper or visitor, who arrives cold and wants to learn about the business and what it offers.

The scope is deliberately narrow. The authoritative requirement thread specifies only that this is a website for a retail business, that it is publicly accessible to visitors without an account, and that no further scope, features, or audience details were specified. This document therefore describes exactly one current page — the Landing page — and does not add catalogue browsing, checkout, cart, account, or administrative capabilities that the source did not request.

2. System Overview

sapphire-website is delivered as a first-party, publicly reachable website. Its current delivery shape is a custom user interface owned by the application, with a single public entry surface. There is no authenticated area, no account creation, and no provider-owned or external destination in the current scope.

The accepted actors are:

• Retail Business Owner — the person who owns the retail business and needs the business to have a working public website that presents it to its audience.
• Retail Shopper / Visitor — a member of the public who arrives at the site to learn about the business and what it offers.

The accepted behavior is: a public Landing page that introduces the retail business and presents its information to visitors without an account. The Landing page is the public entry surface and is reachable anonymously; it is the only page in the current information architecture.

Narrow exclusions: no account creation or sign-in, no shopping cart, no checkout or payment, no order management, no inventory or product administration, no customer accounts, and no private or role-restricted areas. These are excluded because the authoritative source did not request them and the explicit constraint states that no further scope, features, or audience details were specified.

2a. Product Interpretation and Delivery Boundary

The product is a public storefront website. Everything a visitor needs is available without establishing an identity: the site opens directly onto the Landing page, and the visitor can read the business's public information immediately. Because no accepted journey requires a visitor to privately own, resume, or return to durable actor-specific state, and because no commitment, decision, entitlement, or value transfer must remain bound to a particular participant, no application-owned identity is introduced. Access to the Landing page is anonymous by design and by explicit requirement.

The Retail Business Owner's relationship to the site is that of the party the site represents: the site exists so the business is discoverable and credible online. The current scope covers the public-facing presentation of that business. Any tooling for the owner to edit content, manage products, or administer the site is outside the current delivery boundary and is not described here.

Future work is kept out of the current pages and acceptance criteria; see Section 11 for the labeled future horizon.

2b. Source Content Inventory

No reference directive in this project declares content_source authority, so no source content inventory is included. The authoritative thread supplies no verified factual entities, collections, fields, values, dates, contacts, links, or media references to preserve. Business-specific facts (name, founding year, product names, prices, photography) are not present in the source and must not be invented as authoritative content; where the design direction references such elements, they are treated as presentation placeholders to be filled by the owner, not as verified facts.

2c. Page Content and Component Coverage

Landing

The Landing page is the public entry surface of the retail business website. It is reachable without an account and is the only page in the current information architecture. It introduces the retail business and presents its public information to any visitor.

Information and state

• The business's public identity: wordmark-scale display headline naming the business, set as the dominant first-screen element.
• A short uppercase kicker in muted taupe beneath the headline, carrying a brief positioning line about the business.
• The business's public information: what the business is and what it offers, presented as editorial content sections.
• A founding-year or equivalent single oversized number used as a mid-page section transition.
• Product presentation: a set of product cards, each showing a product image, product name, and price.
• A "new in" rail presenting a horizontally scrollable set of product cards.
• No visitor-specific state is held; the page renders identically for every anonymous visitor.

Primary actions

• Navigate to the business's public information sections from the first screen.
• View product cards and read product names and prices.
• Scroll the "new in" rail horizontally to reach every item.
• Follow the primary call to action presented on the first screen.

Supporting actions

• Hover a product card to reveal its second photograph via crossfade and its vermilion offset edge.
• Scroll the page to move between bone-paper sections and full-bleed ink-black bands.

Domain entities

• Business — the retail business the site represents; has a public name, a positioning line, and public descriptive information.
• Product — an item the business offers; has a name, a price, a primary image, and a secondary image.
• Product collection / "new in" set — an ordered set of products presented in the scrolling rail.

Component responsibilities

• Hero block — full-viewport first screen on bone paper; renders the three-line display headline, the vermilion hairline rule, the kicker, the primary CTA, and the bleeding editorial photograph.
• Display headline — Archivo Black, uppercase, tracking -0.03em, leading 0.88, sized with clamp(40px, 12vw, 180px); stacked in three flush-left lines spanning the viewport width.
• Primary CTA button — solid ink rectangle, 56px tall, 0px radius, no shadow.
• Kicker — Archivo 600 uppercase 12px, +0.16em tracking, muted taupe.
• Editorial photograph — tall product image occupying the right columns and bleeding past the right edge; cropped by design.
• Section band — full-bleed ink-black band carrying a single oversized white number at 180px with a vermilion rule, used as a section transition.
• Product card — white rectangle with a 1px ink border, 0px radius; contains product image, product name, and price; hover state adds a 4px hard vermilion offset edge and crossfades to the second photograph over 300ms.
• Price and label — Archivo 600 uppercase 12px, +0.16em tracking, tabular numerals, aligned to a visible 1px ink baseline rule running the full column width.
• "New in" rail — horizontally scrollable row of product cards that deliberately crosses the right edge; drifts continuously at 40s per loop; under prefers-reduced-motion it stops and wraps into whole rows.
• Product grid — 3-up at 1280px, 2-up at 768px, 1-up at 375px.

States

• Loading — the page renders its structural blocks immediately; product imagery loads progressively within its reserved frames so no layout shift occurs.
• Empty — if the business has no products to present, the product grid and "new in" rail are omitted and the page presents only the business's public information; no placeholder or dummy products are shown.
• Success — the visitor sees the business's public identity, its information, and its products, and can read every product name and price.
• Error — if a product image fails to load, the card retains its 1px ink border and reserved frame and shows the product name and price; the page remains fully usable.
• Recovery — the visitor can reload the page or continue scrolling; no visitor state is lost because none is held.

3. Functional Requirements

FR-1 — Public website for a retail business (provenance: explicit) As a Retail Business Owner, I should have a public website for my retail business so that the business is represented online.

• Trigger: the owner publishes the site.
• Observable result: the site is reachable at its public address and presents the retail business.
• Access state: public; no account required.
• Failure/recovery: if the site is unreachable, the owner restores availability; no visitor state is affected.
• Continuation: the owner can update the site's public content over time.
• Acceptance: a visitor can open the site's public address and see the retail business presented.

FR-2 — Anonymous public access (provenance: explicit) As a Retail Shopper / Visitor, I should view the business's public information without creating an account so that I can learn about the business immediately.

• Trigger: the visitor opens the site's public address.
• Observable result: the Landing page renders with the business's public information; no sign-in, registration, or identity step is presented.
• Access state: anonymous; no account, no session, no credential.
• Failure/recovery: if the page fails to load, the visitor reloads; no identity or state is required to retry.
• Continuation: the visitor reads the business's information and products.
• Acceptance: no account prompt, gate, or credential request appears anywhere in the visitor's path.

FR-3 — Business introduction on the public entry (provenance: required_inference) As a Retail Shopper / Visitor, I should see who the business is as soon as the site opens so that I know I am in the right place.

• Trigger: the visitor lands on the Landing page.
• Observable result: the first screen presents the business's wordmark-scale name, a short positioning kicker, and a primary call to action.
• Access state: anonymous.
• Failure/recovery: if the display type cannot render at the available width, it scales down via its clamp minimum and stays whole inside the viewport.
• Continuation: the visitor scrolls or activates the primary call to action.
• Acceptance: the business's name and positioning line are readable at 375px, 768px, and 1280px without being cropped or covered.

FR-4 — Presentation of the business's public information (provenance: required_inference) As a Retail Shopper / Visitor, I should read the business's public information so that I can decide whether the business is relevant to me.

• Trigger: the visitor scrolls past the first screen.
• Observable result: editorial content sections present the business's information, alternating bone-paper sections and full-bleed ink-black bands.
• Access state: anonymous.
• Failure/recovery: if a section's imagery fails, the section's text remains readable.
• Continuation: the visitor continues to the product presentation.
• Acceptance: the business's public information is readable in full at every supported viewport.

FR-5 — Product presentation with names and prices (provenance: required_inference) As a Retail Shopper / Visitor, I should see the business's products with their names and prices so that I can learn what the business offers.

• Trigger: the visitor reaches the product section.
• Observable result: product cards render in a grid — 3-up at 1280px, 2-up at 768px, 1-up at 375px — each showing a product image, name, and price.
• Access state: anonymous.
• Failure/recovery: if a product image fails to load, the card keeps its border and frame and still shows the name and price.
• Continuation: the visitor hovers a card to see the second photograph, or continues to the "new in" rail.
• Acceptance: every product's name and price is fully readable and inside its card at all supported viewports.

FR-6 — "New in" rail with full reachability (provenance: required_inference) As a Retail Shopper / Visitor, I should browse the newest items in a scrolling rail so that I can see what is new without leaving the page.

• Trigger: the visitor reaches the "new in" rail.
• Observable result: a horizontally scrollable rail of white product cards with 1px ink borders drifts continuously at 40s per loop and deliberately crosses the right edge; each card becomes fully readable as it passes.
• Access state: anonymous.
• Failure/recovery: under prefers-reduced-motion the rail stops and lays its items out as whole wrapped rows; alternatively the items sit in a horizontally scrollable row whose further items are reached by scrolling.
• Continuation: the visitor reads the items and continues down the page.
• Acceptance: every item in the rail becomes fully readable, and no readable text or control is permanently cut off or covered.

FR-7 — Product card hover state (provenance: required_inference) As a Retail Shopper / Visitor, I should see a second view of a product when I hover it so that I can inspect it more closely.

• Trigger: the visitor hovers a product card.
• Observable result: a 4px hard vermilion offset edge appears and the image crossfades to the second photograph over 300ms; there is no lift, no rounded corner, and no shadow.
• Access state: anonymous.
• Failure/recovery: if the second photograph is unavailable, the primary image remains displayed and the offset edge still appears.
• Continuation: the visitor moves to another card or continues scrolling.
• Acceptance: the hover state never obscures the product name or price.

4. User Personas

Retail Business Owner

Product context. The owner runs a retail business and needs it to exist credibly on the web. The site is the business's public face: it is what a cold visitor finds when they look the business up, and it has to read as a storefront with a point of view rather than a brochure.

Primary goal. The retail business has a working public website that presents it to its audience, so the business is discoverable and credible online.

Distinct accepted responsibilities. The owner is the party the site represents and the party accountable for the site's public-facing content. The owner's recurring responsibility is establishing and maintaining that public-facing content so the business is discoverable and credible online. The owner is not a visitor of the site in this scope, and no content-editing, product-management, or administrative interface is part of the current delivery.

Relevant inputs or decisions. What the business is called, how it positions itself, what it offers, what its products are called, what they cost, and which imagery represents them. These are the owner's inputs; the source does not specify how they reach the site, so no editing surface is claimed.

Interactions with other accepted participants. The owner's work is what the Retail Shopper / Visitor encounters. The owner's success is observable precisely through the visitor's experience: a visitor arriving cold can see the business, read about it, and see its products.

Observable success. A visitor can open the site's public address, immediately see the business's name and positioning, read its public information, and see its products with names and prices — all without an account.

Retail Shopper / Visitor

Product context. A member of the public who arrives at the retail business's website cold, typically from a search or a link, with no prior relationship to the site and no intention of creating one. They are evaluating whether this business is worth their attention.

Primary goal. Learn about the business and what it offers, and be able to view the business's public information without needing an account.

Distinct accepted responsibilities. Browsing the site's public pages to find information about the business. The visitor's work is entirely read-oriented and entirely anonymous: there is nothing to sign up for, nothing to configure, and no state to manage.

Relevant inputs or decisions. Whether the business looks credible and interesting enough to keep reading; whether a product's name and price are legible; whether to keep scrolling or leave.

Interactions with other accepted participants. The visitor is the audience for the Retail Business Owner's public presentation. Every element the visitor sees is the owner's representation of the business.

Observable success. The visitor can view the business's public information without needing an account, and can read every product name and price in full at whatever viewport they use.

5. Core User Flows

Flow 1 — Retail Shopper / Visitor arrives cold and learns about the business

1. Starting context. The visitor has no account and no prior relationship with the site. They open the site's public address.
2. Entry. The Landing page renders immediately. No sign-in, registration, or identity step appears.
3. First screen. The visitor sees the business's wordmark-scale name set as three flush-left display lines spanning the viewport, a vermilion hairline rule beneath the last line, a short uppercase kicker in muted taupe, a solid-ink primary CTA button, and a tall editorial photograph bleeding past the right edge.
4. Decision. The visitor decides whether the business looks relevant. If yes, they continue; if not, they leave. Nothing is required of them either way.
5. Reading the business. The visitor scrolls. Editorial sections alternate bone-paper and full-bleed ink-black bands; a mid-page ink band carries a single oversized white number with a vermilion rule as a section transition.
6. Product presentation. The visitor reaches the product grid — 3-up at 1280px, 2-up at 768px, 1-up at 375px. Each white card has a 1px ink border and shows a product image, name, and price.
7. Inspection. The visitor hovers a card. A 4px hard vermilion offset edge appears and the image crossfades to a second photograph over 300ms. The name and price remain fully readable.
8. New in rail. The visitor reaches the "new in" rail, which drifts continuously at 40s per loop and crosses the right edge. Each card becomes fully readable as it passes. If the visitor prefers reduced motion, the rail is stopped and its items are laid out as whole wrapped rows.
9. Observable result. The visitor has seen the business's identity, its public information, and its products with names and prices — all without an account.
10. Failure and recovery. If a product image fails to load, the card keeps its border and frame and still shows the name and price. If the page fails to load, the visitor reloads; no state is lost because none is held.
11. Continuation. The visitor continues scrolling to the end of the page, or leaves. There is no next required step and no gated destination.

Flow 2 — Retail Business Owner establishes the business's public presence

1. Starting context. The owner has a retail business and no public website presence.
2. Action. The owner establishes the site's public-facing content: the business's name, its positioning line, its public information, and its products with names, prices, and imagery.
3. Observable result. The site is publicly reachable and presents the retail business.
4. Verification. The owner opens the site's public address as an anonymous visitor would and confirms the business's name, positioning, information, and products are presented and readable at 375px, 768px, and 1280px.
5. Failure and recovery. If the site is unreachable, the owner restores availability. If content is missing or a product image fails, the affected card or section degrades gracefully — the card keeps its border and frame and still shows the name and price, and the section's text remains readable.
6. Continuation. The owner maintains the public-facing content over time so the business remains discoverable and credible online.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. Muse: Tobias van Schneider. Headline: Editorial swagger for a retail house — black-and-bone, one hot vermilion, type at poster scale.

Colour tokens (light mode)

No blue anywhere. No gradients. No glass.

Typography

• Headings: Archivo Black, uppercase, tracking -0.03em, leading 0.88, set as full-width poster lines that fill the viewport edge to edge.
• Body: Archivo 400/500 at 17–19px with 1.6 leading.
• Labels and prices: Archivo 600 uppercase 12px with +0.16em tracking; numbers use tabular figures.
• Type scale (1.5 modular): display 40 / 60 / 90 / 132 / 180; text 19 / 17 / 15 / 13.
• Display sizing: clamp(40px, 12vw, 180px) — mobile floor 40px, desktop ceiling 180px.

Shape language

• Sharp corners only — 0px radius on cards, images, buttons, and inputs.
• Hierarchy comes from hard edges, 1px ink rules, and full-bleed colour blocks rather than rounded containers.
• Buttons are solid ink or solid vermilion rectangles, 56px tall, no shadow.
• Product cards are white rectangles with a 1px #0E0E0E border and a hard 4px vermilion offset edge on hover.

Layout

• Asymmetric editorial grid: 12 columns, 24px gutters, content pinned to columns 1–7 with the right columns left as breathing room or bled imagery.
• Sections alternate bone paper and full-bleed ink-black bands.
• The hero headline spans all 12 columns and may run the full viewport width.
• Product listings: 3-up at 1280px, 2-up at 768px, 1-up at 375px, with a horizontally scrollable "new in" rail that deliberately crosses the right edge and is fully reachable by scroll.
• Vertical rhythm: 160px section gaps desktop, 72px mobile.

Imagery

• Large-scale editorial photography of product and shop interior: single objects shot on bone paper or deep shadow, generous cropping, monochrome or warm-graded, allowed to bleed off the left or right edge.
• One full-bleed black-and-white interior shot as the mid-page band.
• No stock people smiling at camera, no 3D blobs, no illustration.

Accessibility of the visual system. Readable text and controls stay whole at every viewport. Headlines, wordmarks, labels, numbers, cards' text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling 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. Where the direction asks readable text or a control to be cropped or run off an edge, the text or control is kept whole and the gesture is carried by imagery or decoration instead.

7. Signature Design Concept

The storefront sign.

The public entry is a full-viewport first screen on bone paper #F4EFE7. The dominant element is the wordmark-scale headline set in Archivo Black at clamp(40px, 12vw, 180px), stacked in three flush-left lines that span the entire viewport width and touch both edges. The type is the hero — not a headline above an image. A single vermilion #E8341C hairline rule sits under the last line.

To the right, occupying columns 8–12 and bleeding past the right edge, one tall editorial product photograph cropped at the shoulder. Beneath the type, a single solid-ink rectangular CTA button and a small uppercase kicker in muted taupe #8A8175.

There is no centred stack, no sub-headline paragraph, no blue button, and no gradient blob. The composition reads as a shop sign painted across the front of a building: the business's name at architectural scale, one object of desire beside it, and one instruction.

The concept recomposes only accepted content — the business's name, its positioning line, its primary call to action, and its product imagery. It introduces no new behavior, page, or destination.

8. Interaction Model & Motion Direction

Interaction Model: Static Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief

• Focal subject. The three-line Archivo Black headline that spans the full viewport width and is cropped by the viewport edges by design, with the tall editorial product photograph bleeding past the right edge beside it.
• Input → transformation → outcome thesis. On load, the hero headline lines rise 24px into place over 700ms with a 90ms stagger, settling flush-left and edge-to-edge; the vermilion hairline rule, the kicker, and the solid-ink CTA resolve beneath them. The outcome is a composed first frame in which the business's name reads as the storefront sign and the CTA is pinned beneath it.
• Motion vocabulary. Slow crossfades and type reveals only. No bounce, no scale-pops, no gradient drift. Product imagery swaps on hover with a 300ms crossfade to a second shot. The "new in" rail drifts continuously at 40s per loop.
• Composed first frame. Bone paper ground; three flush-left display lines touching both viewport edges; a single vermilion hairline rule under the last line; a tall editorial photograph cropped at the shoulder occupying columns 8–12 and bleeding past the right edge; a solid-ink 56px CTA and a muted-taupe uppercase kicker beneath the type.
• Reduced-motion state. prefers-reduced-motion stops the "new in" rail and lays its items out as whole wrapped rows; the hero headline appears in its final position without the rise-and-stagger reveal. All content remains fully readable and every control remains reachable.

9. Non-Functional Requirements

NFR-1 — Public accessibility without an account (provenance: explicit) The website is publicly accessible to visitors without an account. No page in the current scope may present a sign-in, registration, or credential step. Rationale: this is an explicit requirement in the authoritative thread.

NFR-2 — Readable text and controls stay whole (provenance: explicit — creative direction) Headlines, wordmarks, labels, numbers, cards' text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, and no other element covers any part of them. Rationale: the creative direction states this rule takes precedence for readable text and controls.

NFR-3 — Moving and scrollable content remains fully reachable (provenance: explicit — creative direction) Moving and scrollable content may cross the viewport or container edge by design and is judged by whether it actually moves or scrolls and whether every item becomes fully readable as it passes. With prefers-reduced-motion it stops and shows whole items, wrapping into rows or sitting in a horizontally scrollable row whose further items are reached by scrolling. Rationale: the creative direction's reachability rule for the "new in" rail.

NFR-4 — Reduced-motion support (provenance: explicit — creative direction) The site honors prefers-reduced-motion: the "new in" rail stops and wraps into whole rows, and the hero type reveal is suppressed in favor of the final composed frame. Rationale: the creative direction specifies this behavior.

NFR-5 — No blue, no gradients, no glass (provenance: explicit — creative direction) The only accent is vermilion #E8341C. No blue, indigo, or violet accent; no white or near-white dominant background; no rounded corners, pill buttons, soft drop shadows, or glassy panels; no gradient blobs, mesh gradients, or blurred colour fields. Rationale: the creative direction's explicit avoid list, and the project-wide prohibition on the generic indigo/blue-on-white SaaS template.

NFR-6 — Typography fidelity (provenance: explicit — creative direction) Headings use Archivo Black; body uses Archivo. Inter, Roboto, Helvetica, Poppins, and system-ui are not used for headings or body. Rationale: the creative direction names the typefaces and excludes the alternatives.

NFR-7 — No invented authoritative content (provenance: explicit — constraint) The source specifies no business name, founding year, product names, prices, or imagery. These are the owner's content and must not be fabricated as verified facts. Rationale: the explicit constraint that no further scope, features, or audience details were specified.

10. Tech Stack

The authoritative thread specifies no technology choices. The following are coherent defaults for a public, statically renderable retail website with the specified editorial design system.

• Frontend: React with a component-based structure for the hero block, section bands, product card, product grid, and "new in" rail. [Default — not specified by user]
• Styling: CSS with custom properties for the colour tokens, type scale, and spacing rhythm; clamp() for display sizing; media queries for the 375px / 768px / 1280px breakpoints. [Default — not specified by user]
• Fonts: Archivo Black and Archivo, self-hosted or served from a font CDN. [Default — not specified by user]
• Build and serving: a static build served over HTTPS from a public address. [Default — not specified by user]

No backend, database, authentication provider, or container orchestration is required by the current scope, because the current scope is a single anonymous public page with no durable state and no identity. These are omitted rather than defaulted, since adding them would introduce capability the source did not request.

11. Assumptions and Constraints

Constraints (explicit)

• The product is a website for a retail business; no further scope, features, or audience details were specified.
• The website is publicly accessible to visitors without an account.

Assumptions (narrow, labeled)

• The business's public content — its name, positioning line, descriptive information, products, prices, and imagery — is supplied by the Retail Business Owner. The source does not specify how it reaches the site, so no editing or administration surface is claimed in the current scope. [Assumption — not specified by user]
• The site is served at a single public address with the Landing page as its entry. [Assumption — not specified by user]
• The product set presented on the Landing page is finite and curated by the owner. [Assumption — not specified by user]

Future horizon (not current scope, not in current pages or acceptance)

• Any owner-facing content editing, product management, or administration tooling.
• Any catalogue browsing beyond the Landing page, product detail pages, search, or filtering.
• Any cart, checkout, payment, or order handling.
• Any customer accounts, sign-in, or personalized state.
• Any additional pages beyond the Landing page.

These are recorded as a labeled future horizon only. They are not current requirements, do not appear in the current information architecture, and are not part of current acceptance.

12. Glossary

• Landing — the single public entry page of sapphire-website; the public entry surface, reachable without an account.
• Retail Business Owner — the accepted persona who owns the retail business and needs it represented by a public website.
• Retail Shopper / Visitor — the accepted persona who arrives at the site cold and reads the business's public information without an account.
• Bone paper — the background colour #F4EFE7, which carries roughly 65% of every screen.
• Ink black — the primary colour #0E0E0E, used for type, rules, and full-bleed black bands.
• Vermilion — the single hot accent #E8341C, used at most three times per screen.
• Muted taupe — the colour #8A8175, used for metadata, captions, and disabled states.
• "New in" rail — the horizontally scrollable row of white product cards that deliberately crosses the right edge and drifts continuously at 40s per loop.
• Product card — a white rectangle with a 1px ink border and 0px radius, showing a product image, name, and price, with a 4px hard vermilion offset edge and a 300ms crossfade to a second photograph on hover.
• Section band — a full-bleed ink-black band carrying a single oversized white number with a vermilion rule, used as a section transition instead of a divider.
• prefers-reduced-motion — the user preference under which the "new in" rail stops and wraps into whole rows and the hero type reveal is suppressed.