System Requirements Document for lime-onyx

1. Introduction

lime-onyx is a public marketplace website for selling SaaS products ("сайт для продажи сааасочек"). The product intent is a крутой — visually impressive, high-quality, memorable — site where a seller publishes and maintains a catalogue of SaaS offerings and prospective buyers browse, evaluate, and purchase or sign up for those offerings.

The audience is Russian-speaking founders, indie makers, and product teams who are saturated with identical blue-on-white B2B sites. The site must therefore feel like a brand world and a product drop rather than a procurement portal, while still carrying a real checkout, a real sign-up, a real login, and a real seller editor without becoming a toy.

Two active human roles exist: the Site Visitor / Prospective SaaS Buyer, who explores the offering and completes a purchase or signup, and the Site Owner / SaaS Seller, who enrolls, signs in, and publishes and maintains the products and sales content that visitors buy.

2. System Overview

lime-onyx is delivered as a first-party web application with custom UI. It has a public, anonymously reachable storefront (Landing, Products, Product Details, Checkout) and an application-owned identity boundary (Sign Up, Login) that gates the protected seller workspace (Product Editor). The seller's product and sales content is durable, application-owned state: it is created and maintained by the seller and read by visitors, so it must remain bound to the correct seller across sessions.

The current delivery covers: a polished public entry that explains the offering and value proposition; a public browse destination for the SaaS catalogue; a focused product evaluation destination; a purchase/signup completion destination; self-service seller enrollment; returning seller verification; and a protected seller workspace for publishing and maintaining products and sales content.

Narrow exclusions: no enterprise procurement tooling, no device mockups or stock photography of people at desks, no white or near-white page ground with a blue/indigo primary, and no decorative motion on Checkout or the seller editor. These are presentation and scope boundaries, not bans on the accepted capabilities themselves.

2a. Product Interpretation and Delivery Boundary

The site is dark-first: onyx is the page ground, lime is the primary, hot pink is a sparing secondary accent, and cream is text. This is a deliberate statement against the generic indigo/blue-on-white SaaS template, which is forbidden for this project.

Delivery is first-party and application-owned. Visitors reach the storefront anonymously — no account is required to land, browse, or evaluate a product. The seller's side is different: because the seller must privately own and resume durable product and sales content, and because publishing must remain bound to the correct seller, the application owns seller identity. First-use identity establishment is self-service enrollment (no invitation or provisioning boundary is established), and returning access is verified through login. The protected seller workspace cannot own the interaction that establishes access to itself, so enrollment and login are their own anonymously reachable access surfaces.

Everything described in this document is current. No future-horizon capabilities are accepted.

2b. Source Content Inventory

Not applicable — no reference directive in this project declares content_source.

2c. Page Content and Component Coverage

Landing

• Information / state: Anonymous public entry. Full-viewport onyx ground. Headline "ПРОДАЙ СВОЙ СААС" in Unbounded 800 at clamp(56px, 11vw, 128px), split across three stacked lines filling columns 1–8 and bleeding past the right grid edge; the word "СААС" set in lime on its own line. Subline "Маркетплейс SaaS-продуктов" in cream 18px above the CTA. Columns 9–12 hold a solid lime block running from the top of the viewport to 70vh.
• Primary action: Pink pill CTA "Смотреть продукты", left-aligned under the headline, leading to Products.
• Supporting actions: Navigate to Login and Sign Up from the header; follow the marquee ticker into the products section.
• Domain entities: SaaS product (name, prop imagery), seller offering, value proposition copy.
• Component responsibilities: Hero type block (oversized stacked headline, lime last word); lime colour-block panel; 3D prop layer (glossy lime sphere + chrome squiggle) overlapping the lime block's lower-left corner and spilling onto the onyx; marquee ticker of product names on a full-width cream rule at the bottom of the viewport, travelling left, pausing on hover; header with wordmark and access links.
• States: Loading — hero type and lime block render immediately; ticker populates as product names resolve. Empty — if no products are published yet, the ticker is omitted and the hero CTA still leads to Products, which shows its own empty state. Success — hero, prop, and ticker render; CTA is reachable and legible. Error — if product names fail to load, the ticker is omitted without blocking the hero or CTA. Recovery — the ticker retries on next visit; the hero never depends on it.

Products

• Information / state: Anonymous public browse destination. Dense poster grid — 3 columns at 1280, 2 at 768, 1 at 375 — with each tile's colour ground alternating lime / onyx / pink so the page reads as a wall, not a list.
• Primary action: Open a product tile to reach Product Details.
• Supporting actions: Scan the grid; read each tile's name, price figure, and sticker.
• Domain entities: SaaS product (name, short description, price figure, sticker label such as "NEW" or "sold").
• Component responsibilities: Poster grid; product tile with 1px cream border, no shadow, coloured ground that flips to the opposite colour on hover in 180ms; rotated sticker overlapping the tile edge at -8° to -14° that rotates 6° on the same hover; price figure set in lime as display type.
• States: Loading — grid skeleton in onyx with hairline cream rules. Empty — a poster-style panel stating that no products are published yet, with a link to Landing. Success — all published products render as tiles with legible names, prices, and stickers. Error — a poster-style error panel with a retry control. Recovery — retry re-requests the catalogue; the visitor can also return to Landing.

Product Details

• Information / state: Anonymous public evaluation destination. Two-column split: sticky purchase panel in columns 1–4 against a scrolling editorial column in columns 5–12. The product's single art-directed 3D prop stands in for it, shot on a plain onyx or lime ground with a single hard light.
• Primary action: Proceed to Checkout from the sticky purchase panel.
• Supporting actions: Read the editorial description; read the price figure; return to Products.
• Domain entities: SaaS product (name, editorial description, price figure, prop imagery, availability state).
• Component responsibilities: Sticky purchase panel (product name, price in lime display type, primary CTA); scrolling editorial column (description, prop imagery); back-to-Products control.
• States: Loading — purchase panel and editorial column render as onyx blocks with hairline rules. Empty — not applicable; a product detail is only reached from a published product. Success — product name, price, description, and prop render; CTA is reachable. Error — if the product cannot be resolved, a poster-style panel explains it and offers a return to Products. Recovery — return to Products and select another tile.

Checkout

• Information / state: Anonymous public completion destination. Single narrow column at 640px max, centred, on a full-bleed lime ground with onyx fields and a 2px onyx focus rule. A purchase page that looks like a poster, not a form, while every field and button stays fully readable at 375px.
• Primary action: Complete the purchase or signup for the chosen SaaS product.
• Supporting actions: Review the selected product and price; correct field input; return to Product Details.
• Domain entities: Selected SaaS product, price figure, buyer contact and payment details as entered, order/signup confirmation.
• Component responsibilities: Order summary block (product name, price in onyx display type on lime); onyx form fields with 1px cream rule becoming a 2px onyx rule on focus; submit pill; confirmation panel.
• States: Loading — summary renders from the selected product; submit is disabled until required fields are valid. Empty — if no product is selected, a panel directs the visitor back to Products. Success — a confirmation panel states the completed purchase or signup and the next step. Error — inline field errors on the onyx fields, plus a panel-level error if submission fails, with the entered values preserved. Recovery — correct the flagged fields and resubmit; the selected product is never lost. No decorative motion here — only 120ms functional transitions on focus and step changes.

Sign Up

• Information / state: Anonymous, self-service seller enrollment surface. Onyx ground, onyx rectangles with 1px cream rules for fields, lime pill submit.
• Primary action: Establish the seller's identity and begin using the application.
• Supporting actions: Move to Login if already enrolled; return to Landing.
• Domain entities: Seller identity (credential and profile details as entered).
• Component responsibilities: Enrollment form; validation messaging; link to Login.
• States: Loading — form renders; submit disabled until required fields are valid. Empty — not applicable. Success — enrollment completes and the seller proceeds to the protected Product Editor. Error — inline field errors, plus a panel-level error if enrollment fails, with entered values preserved. Recovery — correct the flagged fields and resubmit; if the identity already exists, the seller is directed to Login.

Product Editor

• Information / state: Protected seller workspace. Two-pane workspace: left rail of product rows, right pane of fields, both on onyx with lime rules. Access is restricted to the authenticated seller.
• Primary action: Publish and maintain the SaaS products and sales content shown on the site.
• Supporting actions: Select a product row from the left rail; edit its fields in the right pane; save changes; create a new product; review the current published state.
• Domain entities: SaaS product (name, description, price figure, sticker label, prop imagery reference, published state), seller offering.
• Component responsibilities: Left product rail (rows, selection state, new-product control); right field pane (onyx fields with 1px cream rule becoming a 2px lime rule on focus); save/publish control; per-field validation messaging.
• States: Loading — both panes render as onyx blocks with lime rules. Empty — the left rail shows a first-product prompt and the right pane shows an empty field set ready for the first product. Success — saved changes are reflected in the rail and become visible on the public Products and Product Details surfaces. Error — inline field errors, plus a panel-level error if saving fails, with unsaved values preserved. Recovery — correct the flagged fields and save again; unsaved edits are not discarded. No decorative motion here — only 120ms functional transitions on focus and step changes.

Login

• Information / state: Anonymous returning-verification surface. Onyx ground, onyx rectangles with 1px cream rules for fields, lime pill submit.
• Primary action: Verify the returning seller's identity and resume control of the durable product and sales content.
• Supporting actions: Move to Sign Up if not yet enrolled; return to Landing.
• Domain entities: Seller identity (credential as entered).
• Component responsibilities: Verification form; validation messaging; link to Sign Up.
• States: Loading — form renders; submit disabled until required fields are valid. Empty — not applicable. Success — verification completes and the seller proceeds to the protected Product Editor. Error — inline field errors, plus a panel-level error if verification fails, with the entered identifier preserved. Recovery — correct the flagged fields and resubmit; if no identity exists, the seller is directed to Sign Up.

3. Functional Requirements

FR-1 — Public entry that presents the offering (explicit) As a Site Visitor / Prospective SaaS Buyer, I should land on a polished public entry that explains the SaaS offering, its audience, and its value proposition, so that I immediately understand what is being sold and why it is worth my attention.

• Trigger/input: Anonymous navigation to the site root.
• Observable result: The Landing surface renders the hero headline, subline, and a CTA leading to Products.
• Access state: Anonymous; no identity required.
• Failure/recovery: If supporting content fails to load, the hero and CTA still render; the visitor can proceed to Products.
• Continuation: The visitor follows the CTA to Products.

FR-2 — Browse the SaaS catalogue (explicit) As a Site Visitor / Prospective SaaS Buyer, I should browse the SaaS products offered for sale, so that I can see what is available and find something that fits.

• Trigger/input: Opening Products from the Landing CTA or the header.
• Observable result: A poster grid of published products renders with names, price figures, and stickers.
• Access state: Anonymous; no identity required.
• Failure/recovery: If the catalogue fails to load, an error panel with retry is shown; the visitor can return to Landing.
• Continuation: The visitor selects a tile to open Product Details.

FR-3 — Evaluate a chosen SaaS product (explicit) As a Site Visitor / Prospective SaaS Buyer, I should open a focused product destination and evaluate a chosen SaaS product before taking a purchase or signup action, so that I can decide with enough information.

• Trigger/input: Selecting a product tile on Products.
• Observable result: Product Details renders the product name, price, editorial description, and its art-directed prop, with a sticky purchase panel.
• Access state: Anonymous; no identity required.
• Failure/recovery: If the product cannot be resolved, a panel explains it and offers a return to Products.
• Continuation: The visitor proceeds to Checkout or returns to Products.

FR-4 — Complete a purchase or signup (explicit) As a Site Visitor / Prospective SaaS Buyer, I should complete the purchase or signup for my chosen SaaS product, so that I acquire what I came for.

• Trigger/input: Proceeding to Checkout from the Product Details purchase panel and submitting the form.
• Observable result: A confirmation panel states the completed purchase or signup and the next step.
• Access state: Anonymous; no identity required to complete the acquisition.
• Failure/recovery: Inline field errors and a panel-level error on submission failure, with entered values preserved; the visitor corrects and resubmits without losing the selected product.
• Continuation: The visitor receives confirmation and the stated next step.

FR-5 — Self-service seller enrollment (required_inference) As a Site Owner / SaaS Seller, I should complete self-service enrollment before first managing my SaaS offering, so that I can begin publishing products.

• Trigger/input: Opening Sign Up and submitting the enrollment form.
• Observable result: Enrollment completes and the seller reaches the protected Product Editor.
• Access state: Sign Up is anonymously reachable; the Product Editor remains unavailable until enrollment completes.
• Failure/recovery: Inline field errors and a panel-level error on failure, with entered values preserved; if the identity already exists, the seller is directed to Login.
• Continuation: The seller proceeds to the Product Editor to publish the first product.

FR-6 — Returning seller verification (required_inference) As a Site Owner / SaaS Seller, I should verify through Login when returning to manage durable product and sales content, so that I can resume control of my offering.

• Trigger/input: Opening Login and submitting the verification form.
• Observable result: Verification completes and the seller reaches the protected Product Editor with their existing products intact.
• Access state: Login is anonymously reachable; the Product Editor remains unavailable until verification completes.
• Failure/recovery: Inline field errors and a panel-level error on failure, with the entered identifier preserved; if no identity exists, the seller is directed to Sign Up.
• Continuation: The seller resumes editing and publishing.

FR-7 — Authorized publishing and maintenance of products (required_inference) As a Site Owner / SaaS Seller, I should have authorized access to publish and maintain the products presented to visitors, so that the live site reflects my current offering.

• Trigger/input: Selecting a product row in the Product Editor rail, editing fields in the right pane, and saving.
• Observable result: Saved changes are reflected in the rail and become visible on the public Products and Product Details surfaces.
• Access state: Restricted to the authenticated seller; the workspace is not reachable anonymously.
• Failure/recovery: Inline field errors and a panel-level error on save failure, with unsaved values preserved; the seller corrects and saves again.
• Continuation: The seller continues maintaining the catalogue or leaves the workspace.

FR-8 — Visually impressive presentation (explicit) As a Site Visitor / Prospective SaaS Buyer and as a Site Owner / SaaS Seller, I should experience a site that is крутой — visually impressive and high-quality in presentation — so that the marketplace feels like a brand world rather than a template.

• Trigger/input: Any visit to any surface.
• Observable result: The dark-first onyx ground, lime primary, hot pink accent, cream text, Unbounded/Manrope typography, hard-edged colour fields, and sticker gestures are consistently applied; readable text and controls stay whole at 375px, 768px, and 1280px.
• Access state: Applies to all surfaces, anonymous and protected.
• Failure/recovery: Under prefers-reduced-motion, the marquee stops and wraps into rows; no readable text or control is ever cropped, covered, or run off an edge.
• Continuation: The visitor or seller continues their task without presentation interfering with it.

4. User Personas

Site Visitor / Prospective SaaS Buyer

Product context. This person lands on lime-onyx from a link, a post, or word of mouth. They are Russian-speaking founders, indie makers, or product-team members who are used to evaluating software and are tired of identical blue-on-white B2B sites. They arrive with no account and no obligation.

Primary goal. Find a SaaS product that fits their need and complete the purchase or signup.

Distinct accepted responsibilities. Exploring the offering; browsing what is available; evaluating a chosen product; taking a purchase or signup action. Their work is selection under uncertainty — they must be able to compare and judge quickly, and the site's presentation is part of the judgement.

Relevant inputs or decisions. Which tile to open; whether the editorial description and price justify proceeding; whether to complete the purchase or signup or return to browsing.

Interactions with other accepted participants. The visitor is the counterparty to the Site Owner / SaaS Seller: the products and sales content they read are the seller's published work, and their purchase or signup is the outcome the seller is trying to produce. The visitor never interacts with the seller directly in this delivery — the handoff is through the published catalogue and the completed acquisition.

Observable success. They reach a product that fits, complete the purchase or signup, and receive a confirmation with a clear next step.

Site Owner / SaaS Seller

Product context. This person runs the SaaS-selling business. They need a cool, credible site that presents and sells their SaaS products, and they are the only role that creates and maintains the durable content the site is built on.

Primary goal. A live site that converts visitors into buyers.

Distinct accepted responsibilities. Enrolling for the first time; verifying on return; publishing and maintaining the products and sales content shown to visitors. Their work is custodianship of durable state — unlike the visitor, they must be able to leave and come back and find their catalogue exactly as they left it, and their edits must remain bound to them.

Relevant inputs or decisions. Which product to create or edit; what name, description, price figure, sticker label, and prop imagery to publish; when a change is ready to go live.

Interactions with other accepted participants. The seller's published products and sales content are what the Site Visitor / Prospective SaaS Buyer browses and evaluates; the seller's success is measured by the visitor's completed purchase or signup. The seller does not see or act on individual visitor sessions in this delivery.

Observable success. Their products appear correctly on the public Products and Product Details surfaces, and visitors complete purchases or signups.

5. Core User Flows

Flow A — Visitor discovers, evaluates, and buys

1. Starting context: The visitor is anonymous, on the open web, with no account.
2. The visitor lands on Landing. The hero renders the stacked headline "ПРОДАЙ СВОЙ СААС" with "СААС" in lime, the subline "Маркетплейс SaaS-продуктов", and the pink pill CTA "Смотреть продукты". A marquee of product names travels left along the cream rule at the bottom of the viewport.
3. The visitor reads the value proposition and clicks "Смотреть продукты".
4. Observable result: Products renders the poster grid of published SaaS products, each tile on an alternating lime / onyx / pink ground with a name, a lime price figure, and a rotated sticker.
5. The visitor hovers a tile; its ground flips to the opposite colour in 180ms and its sticker rotates 6°. The visitor selects a tile.
6. Observable result: Product Details renders the product's name, price, editorial description, and its art-directed 3D prop, with the sticky purchase panel in columns 1–4.
7. The visitor reads the editorial column and decides the product fits, then clicks the purchase CTA in the sticky panel.
8. Observable result: Checkout renders on a full-bleed lime ground with onyx fields, showing the selected product and price in the order summary.
9. The visitor fills the onyx fields; each field's 1px cream rule becomes a 2px onyx rule on focus. The visitor submits.
10. Observable result: A confirmation panel states the completed purchase or signup and the next step.
11. Failure/recovery: If a field is invalid, an inline error appears on that field and the entered values are preserved; the visitor corrects it and resubmits. If submission fails, a panel-level error appears and the selected product is never lost.
12. Continuation: The visitor follows the stated next step to use the acquired SaaS product.

Flow B — Visitor browses without buying

1. Starting context: The visitor is anonymous and undecided.
2. The visitor lands on Landing and clicks "Смотреть продукты".
3. Observable result: Products renders the poster grid.
4. The visitor opens several tiles in turn, reading each Product Details editorial column and price.
5. Failure/recovery: If a product cannot be resolved, a panel explains it and offers a return to Products; the visitor returns and selects another tile.
6. Continuation: The visitor leaves the site without purchasing, or returns later to the same public surfaces — no account is required either way.

Flow C — Seller enrolls and publishes the first product

1. Starting context: The seller has no identity on lime-onyx and has not yet published anything.
2. The seller opens Sign Up from the Landing header.
3. The seller fills the enrollment form — onyx rectangles with 1px cream rules — and submits the lime pill.
4. Observable result: Enrollment completes and the seller reaches the protected Product Editor.
5. Failure/recovery: If a field is invalid, an inline error appears and entered values are preserved. If enrollment fails because the identity already exists, the seller is directed to Login instead.
6. In the Product Editor, the left rail shows a first-product prompt and the right pane shows an empty field set. The seller creates a product, entering its name, description, price figure, sticker label, and prop imagery reference.
7. The seller saves. Observable result: The product appears in the left rail and becomes visible on the public Products and Product Details surfaces.
8. Failure/recovery: If saving fails, a panel-level error appears and unsaved values are preserved; the seller corrects the flagged fields and saves again.
9. Continuation: The seller continues adding products or leaves the workspace.

Flow D — Seller returns and maintains the catalogue

1. Starting context: The seller has an existing identity and a published catalogue, and is returning in a new session.
2. The seller opens Login.
3. The seller submits the verification form. Observable result: Verification completes and the seller reaches the protected Product Editor with their existing products intact in the left rail.
4. Failure/recovery: If verification fails, an inline error appears and the entered identifier is preserved; if no identity exists, the seller is directed to Sign Up.
5. The seller selects a product row, edits its fields in the right pane — each field's 1px cream rule becomes a 2px lime rule on focus — and saves.
6. Observable result: The change is reflected in the rail and on the public Products and Product Details surfaces.
7. Failure/recovery: If saving fails, a panel-level error appears and unsaved values are preserved; the seller corrects and saves again.
8. Continuation: The seller leaves the workspace; the published state persists for the next visitor.

Flow E — Visitor's purchase reaches the seller's outcome

1. Starting context: The seller has published a product (Flow C or D); the visitor is anonymous on the public storefront.
2. The visitor completes Flow A through Checkout.
3. Observable result for the visitor: A confirmation panel states the completed purchase or signup.
4. Observable result for the seller: The seller's published offering is the thing that was acquired; the seller's success condition — a live site that converts visitors into buyers — is met by this completed acquisition.
5. Continuation: The seller maintains the catalogue so further visitors can repeat this flow.

6. Visuals Colors and Theme

Muse: Jessica Walsh. Headline idea: Saturated maximalism for a SaaS marketplace — lime, onyx, and no apologies.

The site is dark-first. Onyx is the page ground, lime is the primary, hot pink is a sparing secondary accent, and cream is text — never pure white, so contrast stays readable at body size on onyx (roughly 16:1).

Colour tokens (dark mode):

Proportion: ~70% onyx/cream, ~20% lime, ~10% pink. Lime never sits on cream as small text; it is used as ground, fill, or large display type.

Typography: Headings Unbounded at weight 700–800, tight tracking (-0.02em), sentence case for headlines and all-caps for micro-labels. Headlines are oversized and stacked; the display size is the layout. Body and UI Manrope at 400/500/600, 16–18px with 1.6 line-height, and at 600 for buttons and labels with slight positive tracking on caps.

Type scale (1.333 modular): 128 / 96 / 64 / 40 / 28 / 18 / 16. Hero display clamp(56px, 11vw, 128px); section heads clamp(40px, 6vw, 72px); card titles 28px; body 17px; labels 13px caps.

Shape language: Hard-edged colour fields with a few deliberately soft intruders. Full-bleed rectangular blocks; 0px corners on panels and cards; 2px hairline rules in cream at 12% opacity. Buttons are pills (999px) in lime with black text, and they squash slightly on press. Sticker elements — a rotated pink "NEW", a lime starburst, a chunky tag — overlap panel edges at -8° to -14°. Product cards use a 1px cream border and no shadow; instead each card sits on a coloured ground that flips on hover. Form fields are onyx rectangles with a 1px cream rule that becomes a 2px lime rule on focus.

Spacing rhythm: Asymmetric 12-column grid, 24px gutter, generous 48–80px page margins.

Imagery style: Surreal art-directed 3D props rather than screenshots — a glossy lime sphere resting on a matte onyx cube, a chrome squiggle, a stack of pink discs, a floating cursor rendered as a physical object. Each SaaS product gets one prop that stands in for it, shot on a plain onyx or lime ground with a single hard light. No device mockups, no stock people, no gradient blobs. Photography, where used, is high-contrast and colour-graded toward lime/onyx.

Forbidden: White or near-white page ground with a blue/indigo primary; centred hero with gradient blob; identical hover-lift cards with soft shadows and 16px radii; Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, or system-ui for headings or body; device mockups and stock photography of people at desks; lime as small body text on cream or onyx; decorative motion on Checkout and the seller editor; rotating, cropping, or overlapping any headline, label, price, form field, or button.

7. Signature Design Concept

The Drop Poster. The public entry is composed as a single full-viewport poster rather than a centred marketing stack.

• Onyx ground, full viewport. The headline "ПРОДАЙ СВОЙ СААС" is set in Unbounded 800 at clamp(56px, 11vw, 128px), split across three stacked lines that fill columns 1–8 and bleed past the right edge of the grid. The word "СААС" is set in lime on its own line — the type is the layout, not a label on it.
• The lime block. Columns 9–12 hold a solid lime block running from the top of the viewport to 70vh. A glossy 3D lime sphere and a chrome squiggle overlap its lower-left corner and spill onto the onyx ground, carrying the gesture with imagery rather than with type.
• The CTA. A single pink pill "Смотреть продукты" sits under the headline, left-aligned, with the subline "Маркетплейс SaaS-продуктов" in cream 18px above it.
• The ticker. A thin cream rule runs the full width at the bottom of the viewport with a marquee of product names travelling left, pausing on hover.

No centred stack, no gradient, no blue. The concept recomposes only accepted content — the headline, the subline, the CTA to Products, the product names, and the prop imagery — and introduces no new behaviour, page, or destination.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The oversized stacked headline "ПРОДАЙ СВОЙ СААС" with "СААС" in lime, and the glossy lime sphere with chrome squiggle overlapping the lime block's lower-left corner.
• Input → transformation → outcome thesis: On load, the headline words scale in from 0.92 with a 60ms stagger, resolving the poster's type into place; the lime block and its overlapping 3D prop settle as the type lands; the marquee of product names then begins travelling left along the cream rule. The outcome is a composed first frame that reads as a drop poster, with the pink CTA "Смотреть продукты" fully legible and immediately actionable.
• Motion vocabulary: Expressive and bouncy, but never gratuitous. Entrance stagger at 60ms per word; hover flips on product tiles at 180ms with a 6° sticker rotation; the marquee runs continuously, pausing on hover.
• Composed first frame: On the onyx ground, the three stacked headline lines fill columns 1–8 with "СААС" in lime; the lime block occupies columns 9–12 from the top of the viewport to 70vh; the glossy lime sphere and chrome squiggle overlap its lower-left corner and spill onto the onyx; the cream subline and pink pill CTA sit left-aligned beneath the headline; the cream rule with the product-name marquee runs across the bottom.
• Reduced-motion state: Under prefers-reduced-motion, the marquee stops entirely and wraps into rows of whole product names; entrance stagger is removed and the headline renders in its final position; hover flips and sticker rotations are suppressed. Checkout and the seller editor use no decorative motion in any mode — only 120ms functional transitions on focus and step changes.

9. Non-Functional Requirements

NFR-1 — Readable text and controls stay whole (explicit) Headlines, wordmarks, labels, numbers, cards' text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Rationale: the creative direction's readability rule takes precedence over any cropping gesture for readable text and controls.

NFR-2 — Moving content remains readable (explicit) Marquees, tickers, carousels, and horizontally scrollable rows may cross the viewport or container edge by design; every item must become fully readable as it passes. Under prefers-reduced-motion they stop and show whole items, wrapping into rows or sitting in a horizontally scrollable row (overflow-x: auto). Rationale: motion is a signature move, but it must never hide content.

NFR-3 — Responsive poster grid (explicit) The Products grid renders 3 columns at 1280, 2 at 768, and 1 at 375. Checkout is a single narrow column at 640px max, centred. Rationale: the layout is part of the accepted presentation.

NFR-4 — Functional surfaces stay functional (explicit) Checkout and the seller editor use no decorative motion — only 120ms functional transitions on focus and step changes. Rationale: these surfaces carry real purchase and publishing work.

NFR-5 — Durable seller-owned state (required_inference) Published products and sales content persist across sessions and remain bound to the seller who published them. Rationale: the seller must be able to leave and resume control of the durable offering, and visitors must read the seller's current published state.

NFR-6 — Anonymous storefront access (explicit) Landing, Products, Product Details, and Checkout are reachable without an account. Rationale: the visitor's accepted journey requires no identity.

NFR-7 — Protected seller workspace (required_inference) The Product Editor is not reachable anonymously; access requires a verified seller identity. Rationale: publishing must remain bound to the correct seller.

NFR-8 — Contrast (explicit) Cream text on the onyx ground holds roughly 16:1 contrast; lime is never used as small body text on cream or onyx. Rationale: the palette must stay readable at body size.

10. Tech Stack

• Frontend: React (web application with custom UI).
• Backend: Python / FastAPI, required for the durable product and sales content, seller identity, and the purchase/signup completion path.
• Storage: A persistent datastore for SaaS products, sales content, seller identities, and completed acquisitions.
• Containerization: Docker / docker-compose for local and deployment packaging.

[Default — not specified by user] for the specific datastore engine and container orchestration; Kubernetes is not required by any accepted constraint.

11. Assumptions and Constraints

• A-1 (assumption) The site's content language is Russian, matching the brief and the audience described in the creative direction.
• A-2 (assumption) The seller's prop imagery is referenced per product; the site does not provide an image-generation capability.
• A-3 (constraint) The generic indigo/blue-on-white SaaS template is forbidden for this project.
• A-4 (constraint) No device mockups, laptop-frame screenshots, or stock photography of people at desks.
• A-5 (constraint) No decorative motion on Checkout or the seller editor.
• A-6 (constraint) Readable text and controls are never rotated, cropped, overlapped, or run off an edge; the gesture is carried by imagery and colour blocks instead.
• A-7 (constraint) Lime is a ground, fill, and display colour only — never small body text on cream or onyx.
• A-8 (assumption) Self-service enrollment is the first-use identity path because no invitation or provisioning boundary is established.
• A-9 (assumption) No future-horizon capabilities are accepted; everything in this document is current.

12. Glossary

• SaaS product — a software-as-a-service offering listed on lime-onyx for sale to prospective buyers.
• Seller — the Site Owner / SaaS Seller; the role that enrolls, verifies, and publishes and maintains products and sales content.
• Visitor — the Site Visitor / Prospective SaaS Buyer; the anonymous role that browses, evaluates, and completes a purchase or signup.
• Storefront — the anonymously reachable public surfaces: Landing, Products, Product Details, Checkout.
• Product Editor — the protected seller workspace where products and sales content are published and maintained.
• Prop — the single art-directed 3D object that stands in for a SaaS product in place of a screenshot.
• Sticker — a rotated graphic element (for example a pink "NEW" or a lime starburst) overlapping a panel or tile edge at -8° to -14°.
• Ticker — the full-width marquee of product names on a cream rule between the hero and the products section.
• Onyx — the dark page ground, #0E0E0C.
• Lime — the primary accent, #C6FF3D, used as ground, fill, and display colour.