plasma-hola

byYojan Garcia

Hola

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for plasma-hola

1. Introduction

plasma-hola is a freelance services marketplace in the spirit of Fiverr: a place where independent sellers publish the services they offer as listings, and buyers browse, search, evaluate, and order those services. The product's intent is to let a person sell their craft — design, writing, video, code, voice, and similar work — as a purchasable gig, and to let a buyer find the right maker and commission the work through the platform, receiving the finished deliverable there.

The audience is two-sided. Freelance service sellers want a marketplace presence where their skill is presented as a listing they can sell. Buyers want to browse a roster of makers, compare what is offered, and place an order for the service that fits their need.

The storefront is also intended to be publishable on Fiverr: the catalogue it presents is a curated selection of the best-selling digital products and services (deliverables that are produced and handed over digitally — design files, writing, video edits, code, voice-over, templates, and similar digital work), so that the same store can be listed and sold on Fiverr as well as operated first-party. The best-selling digital products the store offers are researched and curated by the product itself rather than left to the visitor to guess.

This document is the System Requirements Document for plasma-hola, written for Yojan Garcia (MX).

Page 1 of 30

2. System Overview

plasma-hola is delivered as a first-party web application with application-owned identity. It consists of:

  • A React frontend that renders the public entry surface, identity surfaces, the buyer-facing browse and service-detail surfaces, and the protected buyer and seller workspaces.
  • A shared FastAPI backend that serves all application APIs and domain modules: identity and session, service listings, orders, and delivery.
  • A MariaDB database holding application-owned persistent data: accounts and roles, published listings, orders, and delivered work.
  • A curated best-seller catalogue maintained inside the shared backend: the researched set of best-selling digital products and services that the store presents and sells, each backed by a published service listing.

Two active human personas use the product: the Freelance service seller and the Buyer. A single account may act in either role; the seller role is established so that listing and order management become accessible.

Accepted current behavior:

Page 2 of 30
  • Sellers publish service listings (with description and price) that buyers can purchase.
  • Buyers browse and search service listings.
  • Buyers place orders for a service listing.
  • Sellers receive and manage orders for their listings.
  • Sellers deliver completed work to buyers through the platform.
  • Buyers and sellers enroll self-service and return via login.
  • The store presents a curated catalogue of best-selling digital products and services, researched and selected by the product, and every catalogue entry is sellable as a published service listing.
  • The store is publishable on Fiverr: its catalogue, listing copy, and digital deliverables are structured so the same store can be listed and sold on Fiverr.

Access ownership: the Landing, Sign Up, Login, and Browse Services surfaces are anonymously reachable. Service Details, My Orders, My Gigs, and Seller Orders are role-restricted and require an established identity; the seller-owned surfaces require the seller role.

Removed from scope

  • None. No concept was explicitly removed by the user.
Page 3 of 30

2a. Product Interpretation and Delivery Boundary

plasma-hola is a two-sided marketplace, not a portfolio site and not a checkout funnel. Its center of gravity is the listing: a seller's service presented as a feature, and a buyer's path from browsing to a placed order to received work.

Delivery is first-party and application-owned. Identity is established inside the product through self-service Sign Up and returning Login; there is no provider-owned or external identity surface. All durable state — accounts, roles, listings, orders, and deliveries — lives in the application's own database behind the shared backend.

The current horizon covers the full sell-and-buy loop: enroll, publish a listing, browse and search, order, manage the order as seller, deliver the work, and receive it as buyer. Nothing beyond that loop is committed here. Payment processing, messaging, reviews, and dispute resolution are not part of the accepted current scope and are not implemented as current behavior.

The store's merchandise is digital. Every listing in the catalogue is a digital product or digital service whose deliverable is handed over through the platform as digital content — no physical shipping, inventory, or logistics are part of the product. The catalogue is not an open-ended dump of everything a seller might offer: it is a curated selection of the best-selling digital products and services, researched and chosen by the product, and presented as the store's featured merchandise. The same catalogue and its listing copy are written so the store can be published and sold on Fiverr.

2c. Page Content and Component Coverage

Page 4 of 30

Landing

  • Information/state: Anonymous public entry. Explains the marketplace, who it serves (sellers who want to sell their craft, buyers who want to commission work), and what it does. Presents the editorial hero headline, a search entry point, category words, and a promoted listing feature.
  • Primary actions: Enter a search query and submit it to reach Browse Services; follow a category word into Browse Services; navigate to Sign Up or Login.
  • Supporting actions: Open a promoted listing to reach Service Details.
  • Domain entities: Service listing (title, seller name, price, thumbnail, category, digital deliverable type); curated best-seller catalogue entry (rank, digital product name, why it sells).
  • Component responsibilities: Hero headline block; hard-edged black search bar with vermilion caret; hairline rule and uppercase category text-links; editorial index of listings with one promoted full-bleed feature; a numbered best-selling digital products section presenting the curated catalogue with rank, product name, and price; identity entry links.
  • States: Loading — listing feature and index show skeleton rows. Empty — no published listings yet: the index area shows a quiet editorial note and the search bar remains usable. Success — listings render as an editorial index. Error — listing fetch fails: an inline message with a retry control; the hero and identity links remain usable. Recovery — retry re-fetches the index.
Page 5 of 30

Sign Up

  • Information/state: Anonymous self-service enrollment for both buyers and sellers. Collects the account credentials and the choice of role (buyer or seller).
  • Primary actions: Submit enrollment to create the account and establish the session; choose the seller role when the intent is to sell.
  • Supporting actions: Navigate to Login if already enrolled.
  • Domain entities: Account (identity, role).
  • Component responsibilities: Enrollment form with sharp-cornered fields; role selection; inline validation; submit control.
  • States: Loading — submit disabled with progress indication. Empty — initial blank form. Success — account created, session established, and the user is taken to the destination matching the chosen role (seller → My Gigs; buyer → Browse Services). Error — invalid or already-used credentials: inline field-level message, form preserved. Recovery — correct the field and resubmit.
Page 6 of 30

Login

  • Information/state: Anonymous returning verification for both buyers and sellers.
  • Primary actions: Submit credentials to establish the session and reach the protected records for the account's role.
  • Supporting actions: Navigate to Sign Up if not yet enrolled.
  • Domain entities: Account (identity, role).
  • Component responsibilities: Credential form; inline validation; submit control.
  • States: Loading — submit disabled with progress indication. Empty — initial blank form. Success — session established; seller lands on My Gigs, buyer lands on My Orders. Error — credentials rejected: inline message, form preserved. Recovery — re-enter and resubmit.
Page 7 of 30

Browse Services

  • Information/state: Anonymous and signed-in browse and search over published service listings. Shows the editorial index of listings with title, seller name, tabular price, and cropped thumbnail, plus one promoted feature.
  • Primary actions: Enter or refine a search query; open a listing to reach Service Details.
  • Supporting actions: Follow a category word to filter the index.
  • Domain entities: Service listing (title, description excerpt, seller name, price, category, thumbnail).
  • Component responsibilities: Search bar; category text-links; editorial index rows; promoted feature block; result count.
  • States: Loading — skeleton index rows. Empty — no listings match the query: editorial note with a control to clear the query. Success — matching listings render. Error — fetch fails: inline message with retry. Recovery — retry or clear the query.
Page 8 of 30

Service Details

  • Information/state: Role-restricted to signed-in buyers. Focused view of one published listing: title, full description, price, seller name, and the order control.
  • Primary actions: Place an order for this listing.
  • Supporting actions: Return to Browse Services.
  • Domain entities: Service listing; Order (created on placement).
  • Component responsibilities: Listing feature block; price figure; seller attribution; order control; confirmation of placement.
  • States: Loading — listing skeleton. Empty — listing unavailable or unpublished: message with a link back to Browse Services. Success — order placed: confirmation with a link to My Orders. Error — order placement fails: inline message, order control restored. Recovery — retry placement.

My Orders

  • Information/state: Role-restricted to signed-in buyers. Durable list of the buyer's orders with the listing title, seller name, price, order status, and any delivered work.
  • Primary actions: Open an order to view its status and delivered work.
  • Supporting actions: Return to Browse Services to place another order.
  • Domain entities: Order (status, listing reference, seller, price, delivery).
  • Component responsibilities: Order index rows; status labels; delivered-work view.
  • States: Loading — skeleton rows. Empty — no orders yet: editorial note with a link to Browse Services. Success — orders render with status and delivery. Error — fetch fails: inline message with retry. Recovery — retry.
Page 9 of 30

My Gigs

  • Information/state: Role-restricted to signed-in sellers. The seller's own service listings with title, description, price, and published state.
  • Primary actions: Create a new listing with description and price; edit an existing listing; publish a listing so buyers can purchase it.
  • Supporting actions: Unpublish a listing.
  • Domain entities: Service listing (title, description, price, published state, owner, digital deliverable type); curated best-seller catalogue entry (rank, digital product name, why it sells).
  • Component responsibilities: Listing editor form; listing index with published state; publish/unpublish controls.
  • States: Loading — skeleton rows. Empty — no listings yet: prompt to create the first listing. Success — listing saved and, when published, visible in Browse Services. Error — save or publish fails: inline message, form values preserved. Recovery — correct and resubmit.
Page 10 of 30

Seller Orders

  • Information/state: Role-restricted to signed-in sellers. Incoming orders for the seller's listings with buyer reference, listing title, price, order status, and the delivery control.
  • Primary actions: Open an incoming order; deliver completed work to the buyer through the platform.
  • Supporting actions: View the order's listing.
  • Domain entities: Order (status, buyer reference, listing, delivery).
  • Component responsibilities: Incoming order index; status labels; delivery form (deliverable content or reference); delivery confirmation.
  • States: Loading — skeleton rows. Empty — no incoming orders yet: editorial note. Success — delivery recorded and the order marked delivered; the buyer sees it in My Orders. Error — delivery submission fails: inline message, entered content preserved. Recovery — resubmit.
Page 11 of 30

3. Functional Requirements

FR-1 — Marketplace for selling services (explicit) As a Freelance service seller, I should be able to offer my services for sale on the marketplace, so that buyers can purchase them.

  • Trigger/input: seller creates and publishes a listing.
  • Observable result: the listing appears in Browse Services and is purchasable.
  • Access: seller role required.
  • Failure/recovery: publish failure surfaces an inline message and preserves the listing draft.
  • Continuation: the seller manages incoming orders in Seller Orders.

FR-2 — Publish service listings (explicit) As a Freelance service seller, I should be able to publish a service listing with a description and price, so that buyers can purchase it.

  • Trigger/input: title, description, and price entered in My Gigs.
  • Observable result: the listing is saved and, when published, visible to buyers.
  • Access: seller role required.
  • Failure/recovery: save or publish failure surfaces an inline message with values preserved.
  • Continuation: the seller can edit or unpublish the listing.
Page 12 of 30

FR-3 — Browse and search listings (explicit) As a Buyer, I should be able to browse and search service listings, so that I can find a service that fits my need.

  • Trigger/input: a search query or category selection.
  • Observable result: a matching editorial index of published listings.
  • Access: anonymous or signed in.
  • Failure/recovery: fetch failure shows an inline message with retry; an empty result offers a clear-query control.
  • Continuation: the buyer opens a listing in Service Details.

FR-4 — Place an order (explicit) As a Buyer, I should be able to place an order for a service listing, so that the seller performs the work for me.

  • Trigger/input: the order control on Service Details.
  • Observable result: an order is created and bound to the buyer and the listing; the buyer sees it in My Orders.
  • Access: signed-in buyer.
  • Failure/recovery: placement failure surfaces an inline message and restores the order control.
  • Continuation: the buyer tracks the order in My Orders.

FR-5 — Receive and manage orders (explicit) As a Freelance service seller, I should be able to receive and manage orders for my listings, so that I can fulfill them.

  • Trigger/input: a buyer places an order.
  • Observable result: the order appears in Seller Orders with buyer reference, listing, price, and status.
  • Access: seller role required.
  • Failure/recovery: fetch failure shows an inline message with retry.
  • Continuation: the seller delivers the work.
Page 13 of 30

FR-6 — Deliver completed work (explicit) As a Freelance service seller, I should be able to deliver completed work to the buyer through the platform, so that the buyer receives what they ordered.

  • Trigger/input: the seller submits the deliverable on the order in Seller Orders.
  • Observable result: the order is marked delivered and the buyer sees the delivered work in My Orders.
  • Access: seller role required.
  • Failure/recovery: submission failure surfaces an inline message with entered content preserved.
  • Continuation: the buyer views the delivered work.

FR-7 — Receive delivered work (required_inference) As a Buyer, I should be able to see the work delivered for my order, so that the order is complete from my side.

  • Trigger/input: the seller delivers the work.
  • Observable result: the delivered work is visible on the order in My Orders with a delivered status.
  • Access: signed-in buyer.
  • Failure/recovery: fetch failure shows an inline message with retry.
  • Continuation: the buyer may return to Browse Services for another order.
Page 14 of 30

FR-8 — Self-service enrollment (required_inference) As a Buyer or Freelance service seller, I should be able to enroll myself with a role, so that I can begin using the marketplace.

  • Trigger/input: credentials and role choice on Sign Up.
  • Observable result: an account is created and a session established.
  • Access: anonymous.
  • Failure/recovery: invalid or already-used credentials show inline field messages with the form preserved.
  • Continuation: the user lands on the destination matching the chosen role.

FR-9 — Returning verification (required_inference) As a Buyer or Freelance service seller, I should be able to log in, so that I can reach my durable records.

  • Trigger/input: credentials on Login.
  • Observable result: a session is established and the user reaches the protected records for their role.
  • Access: anonymous.
  • Failure/recovery: rejected credentials show an inline message with the form preserved.
  • Continuation: seller → My Gigs; buyer → My Orders.

FR-10 — Seller role establishment (required_inference) As a Freelance service seller, I should have the seller role established on my account, so that I can access listing and order management.

  • Trigger/input: role chosen at Sign Up.
  • Observable result: My Gigs and Seller Orders become accessible to the account.
  • Access: seller role required for those surfaces.
  • Failure/recovery: an account without the seller role is directed to enroll as a seller rather than shown seller surfaces.
  • Continuation: the seller creates their first listing.
Page 15 of 30

FR-11 — Curated best-selling digital products catalogue (explicit) As a Buyer or Freelance service seller, I should be able to see the store's curated selection of best-selling digital products and services, so that I know what the store sells and what is most in demand.

  • Trigger/input: the store's catalogue is researched and curated by the product; the visitor opens Landing or Browse Services.
  • Observable result: the catalogue is presented as a ranked editorial selection of best-selling digital products and services, each entry naming the digital product, its category, and its price, and each entry backed by a published service listing that can be opened and ordered.
  • Access: anonymous or signed in for viewing; ordering follows the existing Service Details access rule.
  • Failure/recovery: catalogue fetch failure shows an inline message with retry; an empty catalogue shows a quiet editorial note and the search bar remains usable.
  • Continuation: the visitor opens a catalogue entry's listing in Service Details, or searches the index.

FR-12 — Digital-only merchandise (explicit) As a Freelance service seller, I should be able to sell only digital products and digital services, so that the store's catalogue stays a digital store.

  • Trigger/input: the seller creates or edits a listing in My Gigs.
  • Observable result: every listing carries a digital deliverable type and its deliverable is handed over as digital content through the platform; no physical shipping, inventory, or logistics are involved.
  • Access: seller role required.
  • Failure/recovery: a listing that is not a digital product or digital service is rejected with an inline message and the entered values are preserved.
  • Continuation: the seller publishes the digital listing and it appears in the catalogue and in Browse Services.
Page 16 of 30

4. User Personas

Freelance service seller

  • Product context: An independent maker who sells a craft — design, writing, video, code, voice, or similar work — and wants a marketplace presence where that skill is presented as a listing they can sell.
  • Primary goal: Turn their skill into published listings that buyers purchase, and fulfill the resulting orders so they earn from the work.
  • Distinct responsibilities: Creates and edits service listings with description and price; publishes them so buyers can purchase; receives incoming orders for those listings; manages order status; delivers completed work to the buyer through the platform.
  • Relevant inputs/decisions: Listing title, description, and price; whether a listing is published or unpublished; when the work is complete enough to deliver.
  • Interactions with other participants: The Buyer places orders against the seller's listings and receives the seller's delivery. The seller's published listings are what the Buyer browses, and the seller's digital listings are what populate the store's curated best-seller catalogue.
  • Observable success: The listing is live and purchasable in Browse Services; incoming orders appear in Seller Orders; a delivery is recorded and visible to the buyer.
Page 17 of 30

Buyer

  • Product context: A person with a need that a freelance service can fulfill, browsing a roster of makers rather than a product catalogue.
  • Primary goal: Find a service that fits the need and commission it, then receive the finished work.
  • Distinct responsibilities: Searches and browses published listings; evaluates a listing's description and price; places an order; tracks the order and receives the delivered work.
  • Relevant inputs/decisions: Search query or category; which listing to order; when to place the order.
  • Interactions with other participants: The Buyer's order is received and fulfilled by the Freelance service seller, who delivers the work back through the platform. The Buyer discovers what to buy through the store's curated best-selling digital products catalogue.
  • Observable success: The order appears in My Orders with its status, and the delivered work is visible there.

5. Core User Flows

Page 18 of 30

Flow A — Seller enrolls and publishes a listing

  1. The Freelance service seller opens Landing anonymously and follows the Sign Up link.
  2. On Sign Up, the seller enters credentials and chooses the seller role, then submits.
  3. The account is created and the session established; the seller lands on My Gigs.
  4. On My Gigs, the seller creates a listing: title, description, and price.
  5. The seller publishes the listing. Observable result: the listing is saved and becomes visible in Browse Services.
  6. Continuation: the seller may edit or unpublish the listing, and waits for incoming orders.
  • Failure/recovery: If save or publish fails, an inline message appears and the entered values are preserved so the seller can correct and resubmit.
Page 19 of 30

Flow B — Buyer finds a service and places an order

  1. The Buyer opens Landing (or Browse Services directly) and enters a query in the search bar, or follows a category word.
  2. Browse Services returns the matching editorial index of published listings with title, seller name, price, and thumbnail.
  3. The Buyer opens a listing to reach Service Details.
  4. On Service Details, the Buyer reviews the description, price, and seller, then uses the order control to place the order.
  5. Observable result: an order is created and bound to the Buyer and the listing; a confirmation links to My Orders.
  6. Continuation: the Buyer tracks the order in My Orders.
  • Failure/recovery: If the search returns nothing, the Buyer clears the query and searches again. If order placement fails, an inline message appears and the order control is restored for retry.

Flow C — Seller receives and fulfills an order

  1. The Freelance service seller logs in on Login and lands on My Gigs, then opens Seller Orders.
  2. Seller Orders lists incoming orders with buyer reference, listing title, price, and status.
  3. The seller opens the order and performs the work.
  4. The seller submits the deliverable through the delivery control on the order.
  5. Observable result: the order is marked delivered and the delivery is recorded against the order.
  6. Continuation: the seller returns to Seller Orders to manage further orders.
  • Failure/recovery: If delivery submission fails, an inline message appears and the entered content is preserved for resubmission.
Page 20 of 30

Flow D — Buyer receives delivered work

  1. The Buyer logs in on Login and lands on My Orders.
  2. My Orders lists the Buyer's orders with listing title, seller name, price, and status.
  3. The Buyer opens the delivered order.
  4. Observable result: the delivered work is visible on the order with a delivered status.
  5. Continuation: the Buyer returns to Browse Services to place another order.
  • Failure/recovery: If the order list fails to load, an inline message with retry is shown; retry re-fetches the list.

Flow E — Returning seller logs in

  1. The Freelance service seller opens Login anonymously.
  2. The seller submits credentials.
  3. Observable result: the session is established and the seller lands on My Gigs.
  4. Continuation: the seller manages listings or opens Seller Orders.
  • Failure/recovery: Rejected credentials show an inline message with the form preserved for re-entry.
Page 21 of 30

Flow F — Visitor explores the best-selling digital catalogue

  1. The visitor opens Landing anonymously and reads the numbered best-selling digital products section.
  2. The section presents the curated catalogue as a ranked editorial selection: rank, digital product name, category, and tabular price, each entry backed by a published listing.
  3. The visitor follows a catalogue entry to Service Details for that listing, or enters a query in the search bar to reach Browse Services.
  4. Observable result: the catalogue entry's listing is open with its description, price, and seller, ready to order.
  5. Continuation: the visitor signs up or logs in to place the order, following Flow B.
  • Failure/recovery: If the catalogue fails to load, an inline message with retry is shown and the hero, search bar, and identity links remain usable; retry re-fetches the catalogue.
Page 22 of 30

6. Visuals Colors and Theme

Muse and headline: Tobias van Schneider — editorial minimalism with swagger. Headline register: Hire the hand behind the work.

Mode: Light mode only.

Colour tokens (exact hex, by role):

RoleHexUsage
Background (paper)#F4F0E8Warm off-white ground, ~70% of surface
Surface#FFFFFFListing cards and form fields only — read as mounted prints
Text / primary#111111Type, rules, full-bleed type blocks, solid buttons
Accent#E4372BSingle CTA per screen, category labels, price figures, accent rule — never more than one accent element per viewport
Muted#8A857BMetadata, timestamps, helper copy

No blue anywhere. No gradients.

Typography:

  • Headings: Bodoni Moda — high-contrast display serif, weight 500–700, tight leading 0.92–1.0, tracking -0.02em at display sizes, sentence case, mixed roman and italic for emphasis words, occasional single italic word in vermilion.
  • Body: Archivo — 1.6 leading; body sizes 17/16/15px; micro-labels 11px uppercase with 0.12em tracking; tabular numerals for prices and ratings.
  • Type scale (1.5 editorial modular): hero display clamp(44px, 11vw, 148px); section display clamp(32px, 5.5vw, 72px); listing title 28/22/20px.
Page 23 of 30

Shape language: Sharp corners everywhere — 0px radius on cards, inputs, and buttons. Hairline 1px rules in #111111 at 20–30% opacity. Full-bleed black type blocks with hard edges. Images cropped to strict rectangles in a 12-column asymmetric grid, some bleeding off the right edge. Buttons are solid black rectangles with white type; the accent appears only as a thin underline or a 3px left rule.

Layout: Asymmetric editorial grid — 12 columns on desktop with a 2-column left margin gutter for section numbers and labels, collapsing to a single column at 375px. Sections alternate between warm-paper quiet spreads and full-bleed near-black type spreads. Listings are a staggered editorial index — rows of large title, seller name, price, and a cropped thumbnail — not a uniform card grid; one listing is always promoted to a full-width feature with oversized type. Vertical rhythm: 120–160px section gaps on desktop, 64px on mobile.

Imagery: Large-scale editorial photography of makers at work — hands, tools, screens, workbenches — warm and slightly grainy, monochrome or near-monochrome with one colour frame. Seller portraits cropped tight and printed large. Work samples as full-bleed rectangular crops bleeding off one edge. No 3D blobs, no stock smiling teams, no icon illustration beyond small typographic glyphs.

Accessibility of text and controls: Headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit; no other element covers any part of them. Imagery and decoration may crop, bleed, overlap, or rotate freely as long as they cover no readable text or control.

Page 24 of 30

7. Signature Design Concept

The public entry is a full-width editorial spread on warm paper #F4F0E8. A single oversized Bodoni Moda headline — "Hire the hand behind the work." — is set at clamp(44px, 11vw, 148px) in near-black #111111, spanning all 12 columns and wrapping to three lines, with the word hand in italic vermilion #E4372B. To its right, a tall rectangular seller photograph bleeds off the top and right edge of the viewport, cropped tight to hands at a workbench.

Beneath the headline sits a hard-edged black search bar with white type and a vermilion caret reading "What do you need made?", followed by a thin rule and a row of category words in small uppercase Archivo — Design, Writing, Video, Code, Voice — each a text link with a vermilion underline on hover. No centred stack, no gradient, no floating cards.

Below the fold, the first published listings appear as the editorial index: staggered full-width rows of large serif title, seller name in uppercase Archivo 11px, tabular price, and a cropped thumbnail, with one listing promoted to a full-bleed black feature block. Section openers are numbered in the left gutter (01, 02, 03) in 11px uppercase Archivo with a 1px rule running to the column edge, alternating paper and near-black full-bleed spreads.

Page 25 of 30

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

  • Focal subject: The oversized Bodoni Moda headline "Hire the hand behind the work." beside a tall seller photograph cropped to hands at a workbench, bleeding off the top and right edge.
  • Input → transformation → outcome thesis: On load, each headline line rises 16px and fades in, staggered by 60ms, resolving to the final editorial spread; the photograph crossfades in over 400–600ms. The search bar and category row settle last. The outcome is a composed, still spread — no bounce, no lift, no parallax blobs.
  • Motion vocabulary: Section-entry crossfades of 400–600ms; staggered type reveals (16px rise, 60ms stagger); listing hover swaps the thumbnail with a 300ms crossfade and slides a vermilion underline beneath the title; focus states use the same underline plus a 2px black outline so keyboard users see the same gesture.
  • Composed first frame: Warm paper ground; headline lines at final position; photograph in place; black search bar with vermilion caret; hairline rule and uppercase category links.
  • Reduced-motion state: All reveals resolve instantly to the final state; hover swaps become a static second image or none; the underline gesture remains as a static state.
Page 26 of 30

9. Non-Functional Requirements

  • Identity and session continuity (required_inference): Accounts and sessions are application-owned so that buyers and sellers can privately own and resume their durable orders and listings. Sessions must bind orders and deliveries to the correct participant.
  • Role-restricted access (required_inference): Service Details, My Orders, My Gigs, and Seller Orders require an established identity; My Gigs and Seller Orders additionally require the seller role. Landing, Sign Up, Login, and Browse Services are anonymously reachable.
  • Durable state (required_inference): Accounts, roles, listings, orders, and deliveries persist in MariaDB across sessions.
  • Readable text and controls (explicit): All readable text and controls remain whole and inside the viewport and their container at 375px, 768px, and 1280px; imagery and decoration may crop or bleed but never cover readable text or controls.
  • Reduced motion (explicit): With prefers-reduced-motion, all reveals resolve instantly and hover swaps become static; the interface remains fully usable.
  • Palette discipline (explicit): No blue or indigo anywhere; no gradients; no more than one vermilion accent element per viewport.
  • Typography discipline (explicit): Headings use Bodoni Moda and body uses Archivo; Inter, Roboto, Arial, Helvetica, Poppins, and system-ui are not used for headings or body.
  • Digital-only catalogue (explicit): Every catalogue entry and listing is a digital product or digital service; no physical goods, shipping, inventory, or logistics are modeled.
  • Fiverr publishability (explicit): The catalogue, listing copy, and digital deliverables are structured so the store can be published and sold on Fiverr; Fiverr is used only as a feature and structure reference and no Fiverr names, copy, assets, or facts are carried into the product.
Page 27 of 30

10. Tech Stack

  • Frontend: React application UI.
  • Backend: Shared FastAPI process serving all application APIs and domain modules (identity, listings, orders, delivery).
  • Database: MariaDB for application-owned persistent data.
  • Infrastructure: Docker / docker-compose for the frontend, backend, and database services. The curated best-seller catalogue is served by the existing shared backend; no additional service is introduced for it.
Page 28 of 30

11. Assumptions and Constraints

  • A-1 (required_inference): A single account may act as either buyer or seller; the seller role is chosen at Sign Up and unlocks My Gigs and Seller Orders.
  • A-2 (required_inference): Order placement creates a durable order bound to the buyer and the listing; delivery is recorded against that order and is visible to both participants.
  • A-3 (explicit): Payment processing, messaging, reviews, and dispute resolution are not part of the accepted current scope.
  • A-4 (explicit): The visual direction is authoritative for palette, typography, layout, shape, imagery, and motion; the catalogue fills only unspecified details.
  • A-5 (explicit): Fiverr is used only as a feature and structure reference; no Fiverr names, copy, assets, or facts are carried into the product.
  • A-6 (explicit): The store sells digital products and digital services only; the best-selling catalogue is researched and curated by the product and is presented as the store's featured merchandise.
  • A-7 (explicit): The store is intended to be published on Fiverr; its catalogue and listing copy are written to be publishable there, while the first-party application remains the operating surface.
Page 29 of 30

12. Glossary

  • Service listing (gig): A seller's published offer of a service, with title, description, price, and published state.
  • Order: A buyer's purchase of a service listing, bound to the buyer and the listing, with a status and any delivered work.
  • Delivery: The completed work a seller submits against an order through the platform.
  • Seller role: The account role that unlocks listing management (My Gigs) and order management (Seller Orders).
  • Editorial index: The staggered listing presentation of large serif title, seller name, tabular price, and cropped thumbnail, with one listing promoted to a full-bleed feature.
  • Vermilion: The single hot accent #E4372B used for one CTA per screen, category labels, price figures, and accent rules.
  • Digital product: A product or service whose deliverable is produced and handed over as digital content (design files, writing, video edits, code, voice-over, templates, and similar), with no physical shipping.
  • Best-seller catalogue: The product-curated, ranked selection of best-selling digital products and services that the store presents and sells, each entry backed by a published service listing.
Page 30 of 30

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Enter search query
Browse Services: 1. Review matching listings
Browse Services: 2. Clear query and search again
Browse Services: 3. Follow category word
Service Details: Review description and price
Service Details: 1. Place order
Service Details: 2. Retry order placement
My Orders: Track placed order
Landing: Follow Login link
Login: 1. Submit credentials
Login: 2. Re-enter rejected credentials
My Orders: 1. Open delivered order
My Orders: View delivered work
My Orders: 2. Retry order list fetch
Browse Services: Place another order

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Enter search query
Browse Services: 1. Review matching listings
Browse Services: 2. Clear query and search again
Browse Services: 3. Follow category word
Service Details: Review description and price
Service Details: 1. Place order
Service Details: 2. Retry order placement
My Orders: Track placed order
Landing: Follow Login link
Login: 1. Submit credentials
Login: 2. Re-enter rejected credentials
My Orders: 1. Open delivered order
My Orders: View delivered work
My Orders: 2. Retry order list fetch
Browse Services: Place another order