System Requirements Document for omega-landing

1. Introduction

omega-landing is a single, self-contained public landing page. The product intent is deliberately minimal: present one premium, intentional first impression that explains what the offering is and gives the visitor a clear next step. There is no stated vertical, audience segment, or brand beyond the project name, so the page must feel self-assured and product-first without inventing a category.

The audience is a discerning, design-literate visitor who arrives anonymously and judges craft within seconds. The page's job is to communicate the offering and offer one clear action; it is not a multi-page site, application, or account system.

2. System Overview

omega-landing is delivered as a single public page, Landing, reachable anonymously with no sign-in. The page is a React front end served alongside a shared FastAPI backend and a MariaDB database provisioned in the scaffold. The landing page itself is static content plus presentation-layer motion; the backend and database exist as provisioned infrastructure and are not required to serve any accepted landing-page behavior beyond hosting the front end.

Actors: one active human persona, Visitor, who arrives anonymously and reads the page. There are no other human participants, no accounts, and no differentiated permissions.

Accepted behavior: a basic landing page that presents the offering and provides a clear next step. Ownership of that behavior is the single first-party page Landing.

Removed from scope

• User accounts, sign-in, and authentication
• Multi-page navigation and additional destinations
• Data collection forms, submissions, and persistence of visitor data
• E-commerce, checkout, and payments
• Blog, documentation, and content management

2a. Product Interpretation and Delivery Boundary

The entire current product is one anonymously reachable landing page. Delivery is first-party: the application owns the page, its content, and its presentation. No provider surface or external destination is part of the accepted behavior. The backend and database are provisioned infrastructure that the landing page does not depend on for any accepted visitor outcome; they remain available for future work but add no current product behavior.

Everything beyond a single landing page — accounts, additional pages, forms, commerce, content systems — is outside the current boundary and is not implemented.

2c. Page Content and Component Coverage

Landing

Information and state

• Eyebrow label OMEGA — 01 in small-caps with a single copper dot as the only accent beside it.
• Oversized display headline in Instrument Sans Light, sentence case, flush-left, occupying the left seven columns.
• One studio-lit product subject on a white continuous-curve plinth occupying the right five columns and bleeding off the right viewport edge, with one long ambient shadow.
• A full-width hairline rule closing the hero screen.
• A three-column spec strip of small-caps labels over tabular numerals, separated by 1px 8%-ink rules.
• One wide material-detail band.
• A single closing statement centred in a vast empty field with one pill call-to-action.
• One underlined link using the copper accent.

Primary action

• The single pill CTA beneath the display line at body scale (17px), which is the page's one clear next step.

Supporting actions

• The single underlined copper link, offering a secondary reading path.

Domain entities

• None. The page presents static content; no visitor data is captured, stored, or transmitted.

Component responsibilities

• Hero split: eyebrow, display headline, CTA, and product plinth with ambient shadow.
• Hairline rule: full-width divider that draws left-to-right on scroll entry.
• Spec strip: three aligned label/value pairs with tabular numerals.
• Material-detail band: one wide macro detail of a machined edge.
• Closing statement: centred text with the pill CTA.

States

• Loading: not applicable; content is static and renders with the page.
• Empty: not applicable; all content is authored.
• Success: the page renders fully with hero, spec strip, detail band, and closing statement visible.
• Error: if the front end fails to load, the browser's standard error state applies; there is no in-page error UI.
• Recovery: reloading the page restores the full landing experience.
• Reduced motion: all motion is static with a single 0ms fade; the page remains fully usable.

3. Functional Requirements

FR-1 — Present the landing page As a Visitor, I should see a single landing page that presents the offering, so that I understand what the product is.

• Provenance: explicit
• Trigger: the Visitor navigates to the site root.
• Observable result: the Landing page renders with the hero, spec strip, material-detail band, and closing statement.
• Access: anonymous; no sign-in required.
• Failure/recovery: if the page fails to load, the Visitor reloads and the full page is restored.
• Continuation: the Visitor reads the page and may use the CTA or the underlined link.

FR-2 — Provide a clear next step As a Visitor, I should see one clear call to action, so that I know where to go next.

• Provenance: explicit
• Trigger: the Visitor views the hero.
• Observable result: a single pill CTA is pinned beneath the display line at body scale.
• Access: anonymous.
• Failure/recovery: if the CTA target is unavailable, the Visitor can still read the page and use the underlined link.
• Continuation: the Visitor activates the CTA.

FR-3 — Offer a secondary reading path As a Visitor, I should see one underlined link, so that I have a secondary path to more information.

• Provenance: explicit
• Trigger: the Visitor views the page.
• Observable result: one underlined link in the copper accent is visible.
• Access: anonymous.
• Failure/recovery: if the link target is unavailable, the Visitor can still use the primary CTA.
• Continuation: the Visitor activates the link.

FR-4 — Respect reduced-motion preferences As a Visitor with reduced-motion enabled, I should see a static page, so that the page remains usable without animation.

• Provenance: required_inference (accessibility of the accepted motion direction)
• Trigger: the Visitor's system reports prefers-reduced-motion: reduce.
• Observable result: all motion is static with a single 0ms fade; content remains fully readable.
• Access: anonymous.
• Failure/recovery: not applicable; the static state is the fallback.
• Continuation: the Visitor reads the page normally.

4. User Personas

Visitor

Product context. The Visitor arrives anonymously at the site root, likely from a shared link or direct navigation, with no prior knowledge of omega-landing. They judge the page in the first few seconds and decide whether to continue.

Primary goal. Understand what the offering is and identify a clear next step.

Distinct accepted responsibilities. Reading the hero to grasp the offering, scanning the spec strip and material-detail band for supporting detail, and choosing between the primary CTA and the single underlined link.

Relevant inputs or decisions. The Visitor decides whether the page communicates enough to warrant activating the CTA or the link.

Interactions with other accepted participants. None; the Visitor is the only active human persona and the page has no other participants.

Observable success. The Visitor understands the offering and activates the CTA or the underlined link, or leaves having read the page.

5. Core User Flows

Flow 1 — Visitor arrives and reads the landing page

1. The Visitor navigates to the site root.
2. The Landing page renders: the eyebrow OMEGA — 01 with its copper dot, the oversized display headline flush-left, and the product plinth bleeding off the right edge.
3. The Visitor reads the display headline and understands the offering.
4. The Visitor scrolls; the hairline rule draws left-to-right and the spec strip fades up.
5. The Visitor reads the three-column spec strip and the material-detail band.
6. The Visitor reaches the closing statement and the pill CTA.
7. Success: the Visitor has understood the offering and can choose the CTA or the underlined link.
8. Failure/recovery: if the page fails to load, the Visitor reloads and the full page is restored.

Flow 2 — Visitor activates the primary call to action

1. The Visitor, having read the hero, focuses the pill CTA beneath the display line.
2. The CTA background shifts from ink to copper over 240ms on hover.
3. The Visitor activates the CTA.
4. Success: the Visitor proceeds to the CTA's destination.
5. Failure/recovery: if the destination is unavailable, the Visitor returns to the page and may use the underlined link instead.

Flow 3 — Visitor uses the secondary link

1. The Visitor notices the single underlined copper link.
2. The Visitor activates the link.
3. Success: the Visitor reaches the linked information.
4. Failure/recovery: if the link target is unavailable, the Visitor returns to the page and may use the primary CTA instead.

Flow 4 — Visitor with reduced motion reads the page

1. The Visitor's system reports prefers-reduced-motion: reduce.
2. The Landing page renders statically with a single 0ms fade.
3. The Visitor reads the hero, spec strip, detail band, and closing statement without animation.
4. Success: the Visitor understands the offering and can use the CTA or link.
5. Failure/recovery: not applicable; the static state is the fallback.

6. Visuals Colors and Theme

The creative direction is authoritative: Quiet precision after Jony Ive.

Palette (light mode)

• Background: #F4F4F2
• Surface: #FFFFFF
• Text: #1C1D1F
• Primary: #1C1D1F
• Accent: #C8612F (burnt copper)
• Muted: #8A8C8F
• Hairlines: #1C1D1F at 8% opacity

Aluminium-and-paper neutrals carry roughly 92% of the page. Copper is used exactly three times: the eyebrow dot, one underlined link, and the 1px focus ring. Muted is reserved for captions and hairline labels at 12px.

Typography

• Headings: Instrument Sans Light 300, tight -0.03em tracking, sentence case, leading 0.95.
• Eyebrow labels: Instrument Sans Medium 500 at 11px with +0.16em tracking, small caps.
• Body: Instrument Sans.
• Scale (1.5 modular on a 4pt baseline): display clamp(44px, 9vw, 132px), section head clamp(28px, 4vw, 48px), subhead 22px, body 17px, caption 12px.
• Numerals set tabular in the spec table.
• Weight never exceeds 500; hierarchy comes from size and space.

Shape language

• 28px radius on the hero plinth, 20px on panels, 999px on the single pill button.
• No sharp corners.
• One long ambient shadow under the hero subject: 0 40px 80px -40px rgba(28,29,31,0.18).
• Hairline 1px dividers at 8% ink replace boxes; nothing is outlined twice.

Layout

• Single column, product-first, wide margins clamp(20px, 6vw, 120px).
• Hero: display headline flush-left in a 7-column field; product plinth in the right 5 columns bleeding off the right edge.
• Below: full-width hairline rule, three-column spec strip, one wide material-detail band, and a single closing statement centred in a vast empty field with one pill CTA.
• No card grid, no feature tiles.

Imagery

• Studio-lit macro renders on plain aluminium grounds: one hero object (brushed-metal form with a single soft specular highlight), one macro detail of a machined edge, one material swatch strip.
• No stock people, no clip art, no gradient blobs.
• Where a real product render is unavailable, build the subject in CSS: a rounded aluminium form with layered radial highlights and a contact shadow.

7. Signature Design Concept

The public entry is a 12-column editorial split, not a centred SaaS hero. On the left, the eyebrow OMEGA — 01 with its copper dot sits above an oversized Instrument Sans Light display line set flush-left and allowed to run to the column edge at up to 132px, with the single pill CTA pinned directly beneath it at 17px — a 7:1 scale jump on one screen. On the right, a large soft-cornered aluminium plinth holds one studio-lit product subject that bleeds off the right viewport edge, casting a long ambient shadow. A hairline rule spans the full width beneath both, closing the screen.

The signature moves are: the oversized display headline spanning the left seven columns; the single studio-lit subject on a white continuous-curve plinth bleeding off the right edge with one long ambient shadow; the hairline-ruled spec strip of small-caps labels over tabular numerals; the copper accent used exactly three times; and the word-by-word clip reveal of the display line on load followed by each section's hairline rule drawing left-to-right as it enters view.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject: the studio-lit brushed-metal form on the white continuous-curve plinth, bleeding off the right viewport edge.
• Input → transformation → outcome thesis: on load, the hero subject rises 16px and settles while the display line reveals word-by-word via clip; on scroll, each section's hairline rule draws left-to-right and its content fades up 12px. The outcome is a page that assembles itself with quiet precision, never demanding attention.
• Motion vocabulary: slow physical easing cubic-bezier(0.22, 1, 0.36, 1) at 700–900ms; a 6px subject drift on scroll; CTA hover shifts background from ink to copper over 240ms. No bounce, no particles, no parallax beyond the 6px drift.
• Composed first frame: the eyebrow and copper dot at top left, the display line mid-reveal, the plinth and subject settled with their ambient shadow, and the hairline rule not yet drawn.
• Reduced-motion state: everything static, single fade at 0ms; the page remains fully readable and usable.

9. Non-Functional Requirements

• Responsive readability (explicit): headlines, wordmarks, labels, numbers, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling via clamp(...) to fit. No element covers readable text or controls. Imagery and decoration may bleed off edges as the direction asks.
• Reduced motion (required_inference): with prefers-reduced-motion, provide a usable static arrangement; all motion is static with a single 0ms fade.
• Accessibility (required_inference): the single copper focus ring at 1px is visible on all interactive elements; text contrast meets WCAG AA against the #F4F4F2 ground and #FFFFFF surfaces.
• Performance (required_inference): the page is static content plus presentation-layer motion; it should render its first meaningful frame without waiting on backend or database calls.
• No data collection (explicit): the page captures no visitor data and transmits none to the backend or database.

10. Tech Stack

• Frontend: React application UI, serving the single Landing page.
• Backend: shared FastAPI process for application APIs and domain modules (provisioned; not required by current landing-page behavior).
• Database: MariaDB for application-owned persistent data (provisioned; no current domain entities).
• Containerization: Docker / docker-compose for the backend, database, and frontend services.

11. Assumptions and Constraints

• Assumption: the landing page is the entire current product; no additional pages, accounts, forms, or commerce are in scope.
• Assumption: the CTA and underlined link point to destinations outside the current scope; their targets are not specified by the source.
• Assumption: the product subject is rendered in CSS where a real product render is unavailable, per the creative direction.
• Constraint: the generic indigo/blue-on-white SaaS template is forbidden.
• Constraint: only one accent colour (#C8612F) appears on the page, used exactly three times.
• Constraint: no drop shadows except the single ambient shadow under the hero subject.
• Constraint: headings never exceed weight 500.

12. Glossary

• Landing: the single public page that presents the offering and provides a clear next step.
• Visitor: the anonymous human persona who arrives at the site root and reads the page.
• Plinth: the white continuous-curve surface on which the hero product subject sits.
• Spec strip: the three-column band of small-caps labels over tabular numerals separated by hairline rules.
• CTA: the single pill call-to-action button beneath the display line.
• Hairline rule: a 1px divider at 8% ink opacity that replaces boxes and draws left-to-right on scroll entry.