social-logs-marketplace

byOracle Oracle

Create a website where people can get social media logins like facebook ticktoc and the rest it should have a button that allows me as the owner of the website to add login they should not de any demo

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for social-logs-marketplace

1. Introduction

social-logs-marketplace is a website where people can get social media logins — Facebook, TikTok, and the rest of the major platforms — published by a single site owner. The product intent is a public, browse-and-retrieve surface for social media login entries, paired with one unmistakable owner control that adds a new login entry to the site.

The audience is twofold:

  • Visitors — people who come to the site to obtain the social media logins offered there. They browse what the owner has published and retrieve the login information they came for.
  • The Site Owner — the operator of the website, who is the only person who adds login entries. Their recurring responsibility is publishing new social media login entries (Facebook, TikTok, and others) so those entries become available on the site.

A binding constraint runs through the whole product: there is no demo content. No demo logins, no seeded accounts, no placeholder credentials, no sample data. Every published entry exists only because the owner added it.

Page 1 of 32

2. System Overview

social-logs-marketplace is a first-party web application with four destinations:

DestinationWho it servesPurpose
LandingVisitor (anonymous)Public entry explaining that the site offers social media logins such as Facebook and TikTok, and routing visitors to the published logins.
LoginSite OwnerIdentity access surface: self-service enrollment on first use and returning verification, so the owner can reach the protected add-login control.
LoginsVisitorVisitor-facing browse and retrieval of the social media logins offered on the site.
Add LoginSite Owner (role-restricted)The owner's dedicated add-login button and the creation of new social media login entries that become available on the site.

Actors. Two accepted human personas: the Site Owner (explicit — the user identifies as the website owner and asks for a button that lets them add logins) and the Visitor (the non-owner who comes to get social media logins). The application backend is a non-persona system actor that stores and serves published login entries.

Accepted behavior. Visitors reach the site, see that social media logins are offered, browse the published entries, and retrieve the login information for an entry. The owner enrolls and verifies identity, then uses the add-login button to publish a new entry, which immediately becomes available on the site.

Ownership. All four destinations are application-owned custom pages. Identity is application-owned: the owner's durable published entries and the protected add-login control must remain bound to the correct person, so the owner establishes identity on first use and verifies it on return. The Login page is anonymously reachable (it is the access boundary itself); the Add Login page is role-restricted to the verified owner.

Page 2 of 32

Narrow exclusions. No demo logins, no demo data, no seeded accounts, no placeholder credentials. No invitation or provisioning boundary is established, so owner enrollment is self-service. No differentiated permissions beyond owner-versus-visitor are established by the source.

2a. Product Interpretation and Delivery Boundary

The site is delivered as a first-party web application with its own backend that stores published login entries durably. Visitors need no account and no identity to browse or retrieve logins — the Logins page is openly reachable. The owner's work is the only protected part of the product: because published entries are durable and must remain bound to the correct owner, the owner establishes identity on first use (self-service enrollment, since no invitation or provisioning boundary exists) and verifies identity on return. The Login page is the anonymous entry boundary for that identity work; the Add Login destination stays unavailable until identity is established.

Everything described in this document is current. No future-horizon capabilities were accepted by the source, and none are proposed here. The product does not include demo content at any horizon — this is a permanent constraint on the current product, not a staging choice.

2b. Source Content Inventory

No reference directive in this project declares content_source authority, so no source content inventory is included. All factual content in this document derives from the authoritative user requirement thread and the accepted Planning Scope.

2c. Page Content and Component Coverage

Page 3 of 32

Landing

  • Information and state. A public, anonymous entry surface. It states that the site offers social media logins such as Facebook and TikTok and the rest, and routes visitors to the published logins. It shows no login entries themselves and no demo content of any kind.
  • Primary action. "Browse logins" — routes the visitor to the Logins page.
  • Supporting action. "Owner add login" — routes the owner toward the identity boundary that leads to the protected add-login control.
  • Domain entities. None owned here; the page references the platform names (Facebook, TikTok, Instagram, X, and the rest) as descriptive content only.
  • Component responsibilities. Full-bleed hero field carrying the wordmark and headline; a platform-name ticker band; the two routing controls; a footer band repeating the platform ticker.
  • States.
    • Loading: static content; no data fetch required for the hero or routing controls.
    • Empty: not applicable — the page never lists entries, so an empty published set does not change it.
    • Success: visitor reads the offer and selects a routing control.
    • Error: if the Logins destination cannot be reached, the routing control surfaces a retry affordance rather than failing silently.
    • Recovery: retry the routing action; the page itself remains fully usable.
Page 4 of 32

Login

  • Information and state. The anonymous identity-access boundary for the Site Owner. It supports first-use self-service enrollment and returning verification. It is reachable without an existing identity — it cannot require the access it exists to establish.
  • Primary action. Submit enrollment details on first use, or submit verification credentials on return.
  • Supporting action. Switch between the enrollment and returning-verification modes.
  • Domain entities. Owner identity record (application-owned): the credential material and the binding that ties published entries to this owner.
  • Component responsibilities. Enrollment form; returning-verification form; mode switch; inline validation and error messaging; post-success routing to the protected add-login destination.
  • States.
    • Loading: submission in progress — controls disabled with a visible pending indicator.
    • Empty: first visit with no existing identity — the enrollment mode is presented.
    • Success: identity established or verified; the owner is routed to the Add Login destination.
    • Error: invalid or incomplete enrollment details, or failed verification — a specific, non-destructive message is shown and entered values are preserved where safe.
    • Recovery: correct the flagged input and resubmit; the owner may switch modes if they already have an identity.
Page 5 of 32

Logins

  • Information and state. The visitor-facing browse and retrieval surface for the social media logins offered on the site. It lists only entries the owner has actually published. When the owner has published nothing, it shows a truthful empty state — never demo or placeholder entries.
  • Primary action. Retrieve the login information for a chosen entry.
  • Supporting action. Browse and scan the published entries; identify an entry by its platform and identifying details.
  • Domain entities. Published login entry: platform (Facebook, TikTok, and the rest), identifying handle or account label, the login information itself, and the publication state.
  • Component responsibilities. Entry list/grid; per-entry platform identification; per-entry retrieval control; empty state; error state.
  • States.
    • Loading: entries are being fetched — a visible loading state occupies the list region.
    • Empty: no entries have been published yet — a clear message that no logins are available yet, with no fabricated entries.
    • Success: entries render; the visitor retrieves the login information for an entry.
    • Error: the entry list fails to load — an error message with a retry control replaces the list region.
    • Recovery: retry the fetch; a failed single-entry retrieval can be retried without reloading the whole list.
Page 6 of 32

Add Login

  • Information and state. The Site Owner's protected destination, role-restricted to the verified owner. It owns the dedicated add-login button and the creation of new social media login entries that become available on the site. It is unreachable until identity is established.
  • Primary action. The add-login button — publishes a new social media login entry.
  • Supporting action. Enter the platform, the identifying handle or account label, and the login information for the new entry; review the entry before publishing.
  • Domain entities. Published login entry (created here); owner identity binding (the entry is attributed to the verified owner).
  • Component responsibilities. Add-login form panel; platform selection covering Facebook, TikTok, and the rest; credential input fields; the add-login/publish button; validation messaging; confirmation of the newly published entry.
  • States.
    • Loading: publication in progress — the add-login button shows a pending state and prevents duplicate submission.
    • Empty: no entry drafted yet — the form is presented ready for input.
    • Success: the entry is published and confirmed as available on the site; the form resets for the next entry.
    • Error: missing or invalid required fields, or a failed publication — a specific message is shown and the entered values are preserved so the owner does not retype them.
    • Recovery: correct the flagged field and press the add-login button again; a failed publication can be retried without re-entering the entry.
    • Access failure: an unverified or non-owner request is routed to the Login boundary rather than exposing the form.
Page 7 of 32

3. Functional Requirements

FR-1 — Public offer of social media logins (explicit) As a Visitor, I should be able to arrive at the site and understand that it offers social media logins such as Facebook, TikTok, and the rest, so that I know this is where I can get them.

  • Trigger/input: the visitor opens the site.
  • Observable result: the Landing page states the offer and presents a route to the published logins.
  • Access state: anonymous; no identity required.
  • Failure/recovery: if the routing control cannot reach the Logins destination, a retry affordance is shown.
  • Continuation: the visitor proceeds to the Logins page.

FR-2 — Browse published logins (explicit) As a Visitor, I should be able to browse the social media logins offered on the site, so that I can find the one I want.

  • Trigger/input: the visitor opens the Logins page.
  • Observable result: the published login entries are listed with their platform and identifying details.
  • Access state: anonymous; no identity required.
  • Failure/recovery: if the list fails to load, an error message with a retry control replaces the list region.
  • Continuation: the visitor selects an entry to retrieve.
Page 8 of 32

FR-3 — Retrieve login information (explicit) As a Visitor, I should be able to retrieve the login information for a published entry, so that I obtain the login I came for.

  • Trigger/input: the visitor selects the retrieval control on a specific entry.
  • Observable result: the login information for that entry is presented to the visitor.
  • Access state: anonymous; no identity required.
  • Failure/recovery: a failed retrieval can be retried on the same entry without reloading the list.
  • Continuation: the visitor retrieves further entries or leaves the site.

FR-4 — Truthful empty state with no demo content (explicit) As a Visitor, I should see a truthful empty state when no logins have been published, so that I am never shown demo logins or placeholder credentials.

  • Trigger/input: the visitor opens the Logins page while no entries have been published.
  • Observable result: a clear message that no logins are available yet; no fabricated entries appear.
  • Access state: anonymous.
  • Failure/recovery: not applicable — this is the correct state, not a failure.
  • Continuation: the visitor may return later once the owner has published entries.
Page 9 of 32

FR-5 — Owner self-service enrollment (required_inference) As a Site Owner, I should be able to establish my identity on first use, so that I can reach the protected add-login control and have my published entries bound to me.

  • Trigger/input: the owner opens the Login page with no existing identity and submits enrollment details.
  • Observable result: an application-owned identity is established and the owner is routed to the Add Login destination.
  • Access state: the Login page is anonymously reachable; it cannot require the access it establishes.
  • Failure/recovery: invalid or incomplete details produce a specific message and preserve entered values; the owner corrects and resubmits.
  • Continuation: the owner proceeds to add a login.

FR-6 — Owner returning verification (required_inference) As a Site Owner, I should be able to verify my identity on return, so that I can reach the protected add-login destination again.

  • Trigger/input: the owner opens the Login page with an existing identity and submits verification credentials.
  • Observable result: the owner is verified and routed to the Add Login destination.
  • Access state: anonymous entry boundary; protected state remains unavailable until verification succeeds.
  • Failure/recovery: failed verification shows a specific message without discarding the attempt context; the owner may retry or switch to enrollment mode if they already have an identity.
  • Continuation: the owner proceeds to add a login.
Page 10 of 32

FR-7 — Dedicated add-login button (explicit) As a Site Owner, I should have a button that lets me add a login, so that publishing a new entry is one obvious, unmissable action.

  • Trigger/input: the verified owner opens the Add Login destination.
  • Observable result: the add-login button is present and is the primary control of the destination.
  • Access state: role-restricted to the verified owner; unverified or non-owner requests are routed to the Login boundary.
  • Failure/recovery: if the destination cannot be reached, the owner is returned to the Login boundary with a message.
  • Continuation: the owner uses the button to publish an entry.

FR-8 — Publish a new social media login entry (explicit) As a Site Owner, I should be able to add a new social media login entry covering Facebook, TikTok, and the rest, so that the entry becomes available on the site.

  • Trigger/input: the owner enters the platform, the identifying handle or account label, and the login information, then presses the add-login button.
  • Observable result: the entry is published and confirmed as available on the site; the form resets for the next entry.
  • Access state: role-restricted to the verified owner.
  • Failure/recovery: missing or invalid required fields, or a failed publication, produce a specific message and preserve the entered values so the owner can correct and retry without retyping.
  • Continuation: the owner adds another entry or leaves; the published entry is now visible to visitors on the Logins page.
Page 11 of 32

FR-9 — Published entries are durable and owner-bound (required_inference) As a Site Owner, I should have my published entries persist and remain attributed to me, so that the site's offering survives across sessions and stays correct.

  • Trigger/input: the owner publishes an entry.
  • Observable result: the entry is stored durably and remains available to visitors until the owner changes it.
  • Access state: the durable store is application-owned; only the verified owner can create entries.
  • Failure/recovery: a failed write is reported to the owner as a publication error with a retry path; no partial entry is presented to visitors.
  • Continuation: the entry appears on the Logins page for visitors.

FR-10 — No demo logins or demo data are seeded (explicit) As a Site Owner, I should have the site start with no demo logins and no demo data, so that every entry on the site is one I actually added.

  • Trigger/input: the site is deployed and first opened.
  • Observable result: the published set is empty until the owner adds an entry; no seeded accounts or placeholder credentials exist anywhere in the product.
  • Access state: applies to all destinations.
  • Failure/recovery: not applicable — this is a permanent product constraint.
  • Continuation: the owner's first published entry is the first entry the site ever shows.

4. User Personas

Page 12 of 32

Site Owner

Product context. The Site Owner is the person who runs social-logs-marketplace. They are the sole publisher of the site's content: every social media login entry that appears on the site exists because they added it. They are a lone operator, not part of a team, and the source establishes no invitation, provisioning, or delegated-role boundary — so they enroll themselves on first use.

Primary goal. To publish new social media login entries — Facebook, TikTok, and the rest — quickly and without ambiguity, so that the site's offering grows and stays current.

Distinct accepted responsibilities.

  • Establishing their own identity on first use (self-service enrollment) and verifying it on return.
  • Using the dedicated add-login button to create a new entry.
  • Supplying the entry's platform, identifying handle or account label, and login information.
  • Confirming that the newly published entry is available on the site.

Relevant inputs and decisions. Which platform the entry belongs to; the identifying handle or account label; the login information itself; whether the entry is complete enough to publish. The owner decides when to add an entry and what it contains — no other actor can do this.

Interactions with other accepted participants. The owner's work is the direct source of what the Visitor sees. The owner never interacts with a visitor directly; the handoff is through the published entry appearing on the Logins page. The owner's identity work is the only protected interaction in the product, and it exists solely to keep the add-login control and the published entries bound to the right person.

Page 13 of 32

Observable success. The add-login button publishes the entry, the owner sees confirmation that it is available on the site, and the entry subsequently appears to visitors on the Logins page. Failure is observable too: a rejected or failed publication shows a specific message and preserves what the owner typed.

What makes this role different. The owner is the only actor who creates state. The Visitor only reads and retrieves. The owner's work is protected and durable; the Visitor's work is anonymous and ephemeral.

Page 14 of 32

Visitor

Product context. The Visitor is a person who comes to social-logs-marketplace because they want social media logins. They arrive anonymously, with no account and no identity requirement, and they judge the site by what the owner has actually published.

Primary goal. To obtain the social media login they came for — the login information for a specific entry among those offered.

Distinct accepted responsibilities.

  • Understanding, on arrival, that the site offers social media logins such as Facebook and TikTok.
  • Browsing the published entries and identifying the one they want by platform and identifying details.
  • Retrieving the login information for that entry.

Relevant inputs and decisions. Which platform and which entry they want; whether the retrieved information is what they were looking for. The Visitor makes a selection decision; they do not create, edit, or publish anything.

Interactions with other accepted participants. The Visitor is the recipient of the Site Owner's published work. They see the result of the owner's add-login action and nothing else about the owner's identity or process. When the owner has published nothing, the Visitor sees a truthful empty state rather than fabricated content.

Observable success. The Visitor finds a relevant entry and the login information for it is presented to them. Failure is observable: if the list or a retrieval fails, the Visitor sees an error with a retry path rather than a dead end.

Page 15 of 32

What makes this role different. The Visitor's entire journey is anonymous and read-only. They never establish identity, never reach a protected destination, and never affect the site's state — their success depends entirely on what the owner has published.

5. Core User Flows

Page 16 of 32

Flow A — Visitor obtains a social media login

  1. Starting context. The Visitor is anonymous and has no account. They open social-logs-marketplace.
  2. Landing. The Landing page states that the site offers social media logins such as Facebook and TikTok and the rest. The Visitor reads the offer.
  3. Selection. The Visitor selects Browse logins and is routed to the Logins page.
  4. Browsing. The Logins page lists the entries the Site Owner has published, each identified by its platform and identifying details. The Visitor scans the list.
    • If nothing has been published: the Visitor sees a truthful empty state stating that no logins are available yet. No demo or placeholder entries appear. The Visitor may return later. (Flow ends here.)
    • If the list fails to load: an error message with a retry control replaces the list region. The Visitor retries. (Recovery, then continue at step 4.)
  5. Retrieval. The Visitor selects the retrieval control on the entry they want. The login information for that entry is presented to them.
    • If retrieval fails: the Visitor retries on the same entry without reloading the list. (Recovery, then continue at step 5.)
  6. Observable result. The Visitor has the login information they came for.
  7. Next step. The Visitor retrieves another entry or leaves the site.
Page 17 of 32

Flow B — Site Owner enrolls on first use and publishes the first login

  1. Starting context. The Site Owner has no existing identity on the site. The published set is empty — no demo logins or demo data exist.
  2. Entry. The owner selects Owner add login from the Landing page and arrives at the Login boundary.
  3. Enrollment. Because no identity exists yet, the Login page presents the enrollment mode. The owner submits their enrollment details.
    • If the details are invalid or incomplete: a specific message is shown and the entered values are preserved. The owner corrects the flagged input and resubmits. (Recovery, then continue at step 3.)
  4. Observable result of enrollment. The owner's application-owned identity is established and bound to their future published entries. The owner is routed to the Add Login destination.
  5. Add Login. The Add Login destination presents the add-login form and its primary add-login button. The owner enters the platform (Facebook, TikTok, or another), the identifying handle or account label, and the login information.
  6. Commitment. The owner presses the add-login button.
    • If required fields are missing or invalid, or publication fails: a specific message is shown and the entered values are preserved. The owner corrects the flagged field and presses the button again without retyping the entry. (Recovery, then continue at step 6.)
  7. Observable result of publication. The entry is published and confirmed as available on the site. The form resets for the next entry.
  8. Participant handoff. The published entry is now part of the site's offering and appears on the Logins page, where the Visitor can browse and retrieve it (Flow A, step 4).
  9. Next step. The owner adds another entry or leaves the site.
Page 18 of 32

Flow C — Site Owner returns and adds another login

  1. Starting context. The Site Owner has an existing identity and previously published entries. They return to the site.
  2. Entry. The owner selects Owner add login from the Landing page and arrives at the Login boundary.
  3. Verification. The Login page presents the returning-verification mode. The owner submits their verification credentials.
    • If verification fails: a specific message is shown without discarding the attempt context. The owner retries, or switches to enrollment mode if they already have an identity. (Recovery, then continue at step 3.)
  4. Observable result of verification. The owner is verified and routed to the Add Login destination. Until verification succeeds, the protected add-login state remains unavailable.
  5. Add Login. The owner enters the platform, identifying handle or account label, and login information for the new entry.
  6. Commitment. The owner presses the add-login button.
    • If publication fails: a specific message is shown and the entered values are preserved for retry. (Recovery, then continue at step 6.)
  7. Observable result. The new entry is published and confirmed as available on the site, alongside the owner's previously published entries.
  8. Participant handoff. The new entry is immediately browsable and retrievable by Visitors on the Logins page.
  9. Next step. The owner adds another entry or leaves the site.
Page 19 of 32

Flow D — Protected destination is requested without verified identity

  1. Starting context. A request reaches the Add Login destination without a verified owner identity — either an unverified owner or a non-owner.
  2. Observable result. The protected add-login form is not exposed. The request is routed to the Login boundary.
  3. Next step. A Site Owner may enroll or verify (Flow B or Flow C). A Visitor has no path to this destination and continues with Flow A.
Page 20 of 32

6. Visuals, Colors and Theme

The visual direction is Saturated drop-culture maximalism after Jessica Walsh — a loud, confident, slightly transgressive marketplace surface, not a trust-and-compliance fintech look. The headline idea: the type is the hero image, and the owner's add-login control is the loudest thing on the site.

Color tokens (light mode).

RoleHexUsage
Background#FF4FA3Dominant hot-pink ground — large flat colour fields, never white-first
Surface#FFF3E4Cream readable surfaces: cards, forms, the add-login panel, table rows
Text#141014Near-black ink for all type
Primary#141014Primary button fill (black pill with acid text, inverts on hover)
Accent#E8FF3AAcid lime — the single hot accent: ticker bands, the owner's add-login CTA, price tags, focus rings, active nav pill
Muted#FFB4D6Bubblegum support for dividers, disabled states, secondary chips
Tertiary block#FF7A2FTangerine — third colour-block in section headers and platform badges only, never body text

Body copy is #141014 on #FFF3E4 (contrast > 15:1). Accent lime is only ever used as a fill behind black text or as a 3px rule — never as text on pink.

Typography.

Page 21 of 32
  • Headings: Archivo Black — uppercase or sentence case, extremely tight leading (0.86–0.92), negative tracking at large sizes, pushed to viewport-spanning scale. No italic, no gradient text.
  • Body: Space Grotesk.
  • Scale (1.5 modular): hero clamp(56px, 11vw, 168px) / section clamp(34px, 5.5vw, 76px) / card title 28px / body 17px–19px / label 13px uppercase, letterspaced 0.14em. Mobile hero floor is 56px so the wordmark and headline never clip at 375px.

Shape language. Hard colour fields with sticker logic on top: 0-radius full-bleed bands for sections; 28px-radius cream cards with a 3px solid #141014 offset shadow (no blur); pill buttons; circular platform badges; organic blob cut-outs as section dividers. Rotated sticker chips (−3deg / +4deg) overlap card corners. Nothing glassy, nothing blurred, nothing a soft gradient blob.

Layout. Asymmetric colour-blocked stack. Nav is a thin black bar with the wordmark left and a lime Owner pill right. Hero is a full-bleed pink field with a stacked Archivo Black headline occupying 9 of 12 columns, a rotated NEW DROPS sticker, and a black pill CTA pinned bottom-left. The Logins page is a dense but loud grid: cream cards on pink, each card a platform badge, handle, price tag and a Reveal pill; the grid intentionally breaks rhythm with one oversized featured card spanning two columns. Add Login is a single tall cream panel on a pink field, centred, max 560px, with the publish button as a full-width black pill that inverts to lime on hover. Footer is a lime band with a scrolling platform ticker.

Page 22 of 32

Imagery. No photography of people. Imagery is built from typography, flat colour fields, platform logos rendered as chunky monochrome sticker badges, halftone-dotted shapes, and a few surreal 3D props (a glossy pink padlock, a lime key, a floating login card) rendered flat and bright. Occasional high-contrast cut-out of a phone silhouette with a colour-block screen. Everything staged, witty, saturated — never a stock photo of a person at a laptop.

Explicitly avoided. Any white or near-white page ground; blue, indigo or violet anywhere as primary or accent (no #2563EB, #4F46E5, #6366F1, #7C3AED); Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins or system-ui for headings or body; a centred hero with headline + subtext + button and a gradient blob; glassmorphism, frosted panels, soft blurred shadows, gradient-blob decoration; a grid of identical hover-lift cards with no rhythm break; stock photography of people, laptops or offices; demo logins, seeded accounts or placeholder credentials.

Page 23 of 32

7. Signature Design Concept

"LOGINS, ON TAP." — a poster, not a SaaS hero.

The public entry is a full-bleed hot pink #FF4FA3 field with no white anywhere on the first screen. A stacked Archivo Black headline in #141014 spans 9 of 12 columns at clamp(56px, 11vw, 168px), broken across three lines with tight 0.88 leading — the third line filled acid lime #E8FF3A. A rotated cream sticker chip reading FACEBOOK · TIKTOK · IG · X sits at the headline's top-right, overlapping it. Bottom-left: a black pill CTA Browse logins with lime text, and beside it a smaller outlined pill Owner add login. The bottom edge carries a continuous lime ticker band of platform names scrolling right-to-left.

The composition is deliberately a poster: no centred stack, no subtext paragraph, no blue button, no gradient blob. The headline is the hero image. The two routing controls are the only interactive elements on the first screen, and they map exactly to the two accepted journeys — the Visitor's browse path and the Owner's add-login path. The Owner add login pill is the visual seed of the owner's starring control: the same black-pill-inverts-to-lime treatment reappears as the full-width publish button on the Add Login page, so the owner's single loudest action is recognisable from the first screen onward.

This concept recomposes only accepted content, states and controls: the offer statement, the two routes, the platform names, and the owner's add-login action. It introduces no new behaviour, page, or destination.

Page 24 of 32

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

  • Focal subject. The stacked Archivo Black headline on the flat hot-pink field, with the rotated platform sticker chip overlapping it and the lime platform ticker running along the base.
  • Input → transformation → outcome thesis. On load, the three headline lines rise and settle into their stacked position while the sticker chip rotates into place; the lime ticker then begins its continuous right-to-left run. On hover of Browse logins or Owner add login, the pill inverts colour with a hard snap. The outcome is a first frame that reads as a poster slapping down, with the two accepted routes immediately legible and the platform offer continuously visible in the ticker.
  • Motion vocabulary. Continuous marquee tickers; hard 120ms snaps rather than eased drifts; colour inversion on hover; rotated sticker chips settling at −3deg / +4deg; no blur, no glass, no soft gradient motion.
  • Composed first frame. Pink field, three-line headline with the third line lime, sticker chip at the headline's top-right, two pills bottom-left, lime ticker band along the bottom edge — all readable and inside the viewport at 375px, 768px and 1280px.
  • Reduced-motion state. Under prefers-reduced-motion, the tickers become static wrapped rows so every platform name is fully readable, and all wipes and snaps become instant cuts. The first frame remains complete and legible with no motion at all.
Page 25 of 32

Site-wide motion. Marquee tickers of platform names run continuously across the hero base and footer. Cards scale 1.03 with a hard 120ms snap on hover and their offset shadow shifts from 3px to 6px. Reveal flips a login card to show credentials with a 240ms vertical wipe. The owner's add-login button inverts colour on hover. Under prefers-reduced-motion, tickers become static wrapped rows and all wipes become instant cuts.

Page 26 of 32

9. Non-Functional Requirements

NFR-1 — No demo content anywhere (explicit) The product must not include demo logins, demo data, seeded accounts, or placeholder credentials in any environment, at any time. Published entries exist only after the Site Owner adds them. Rationale: explicit hard constraint in the authoritative user evidence; also restated in the creative direction's avoid list.

NFR-2 — Durable published state (required_inference) Published login entries must persist durably and remain attributed to the verified Site Owner across sessions. Rationale: the owner's recurring responsibility is publishing entries that become available on the site; without durable storage the accepted outcome cannot hold.

NFR-3 — Protected owner destination (required_inference) The Add Login destination must be reachable only by a verified Site Owner. Unverified or non-owner requests must be routed to the Login boundary without exposing the add-login form. Rationale: the add-login control is the owner's alone, and the durable entries it creates must remain bound to the correct person.

NFR-4 — Anonymous visitor access (explicit) Visitors must be able to browse and retrieve published logins without establishing an identity. Rationale: the source describes the site as a place where "people can get social media logins" with no account requirement stated for that audience.

Page 27 of 32

NFR-5 — Readable text and controls at every viewport (explicit) Headlines, wordmarks, labels, numbers, card text and controls must stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling to fit, with no other element covering any part of them. Moving and scrollable content (tickers, marquees) may cross the viewport edge by design, provided every item becomes fully readable as it passes; under prefers-reduced-motion, items must wrap into rows or be horizontally scrollable so each can be brought fully into view. Rationale: explicit readability constraint supplied with the creative direction.

NFR-6 — Reduced-motion support (explicit) Under prefers-reduced-motion, tickers must become static wrapped rows and all wipes must become instant cuts, while the page remains fully usable. Rationale: explicit motion constraint in the creative direction.

NFR-7 — Truthful error and recovery states (required_inference) Every data-dependent surface (the Logins list, single-entry retrieval, publication) must present a specific error message and a retry path rather than failing silently or discarding the user's input. Rationale: required to make the accepted browse, retrieve, and publish lifecycles usable when a request fails.

Page 28 of 32

10. Tech Stack

  • Frontend: React — a single-page application serving the Landing, Login, Logins, and Add Login destinations.
  • Backend: Python / FastAPI — one shared backend process providing the identity endpoints (enrollment, verification), the published-login read endpoints, and the owner-only create endpoint. The backend is extended with routes and modules for these domain features rather than split into separate services.
  • Storage: a relational database for the owner identity record and the published login entries, providing the durable, owner-bound state required by NFR-2.
  • Packaging and local orchestration: Docker and docker-compose.yml — the frontend, the FastAPI backend, and the database as the runnable service inventory. No separate queue worker or additional service is required by the accepted workflows.
  • Kubernetes: not required by the accepted scope; deployment does not demand it.

No technology choices were specified by the user beyond the product itself; the stack above is the minimal set needed to deliver the accepted behavior.

Page 29 of 32

11. Assumptions and Constraints

Constraints (binding).

  1. The site must not include any demo content — no demo logins and no demo data. (explicit)
  2. Adding logins is performed by the Site Owner via the add-login button. (explicit)
  3. The site offers social media logins including Facebook, TikTok, and the rest. (explicit)
  4. The visual direction — palette, typography, shape language, layout, motion, and imagery — is authoritative for the presentation of every destination. (explicit)
  5. The generic indigo/blue-on-white SaaS template is forbidden for this project. (explicit)

Assumptions (narrow, labeled).

Page 30 of 32
  1. Self-service owner enrollment. No invitation or provisioning boundary is established by the source, so the Site Owner establishes identity on first use through self-service enrollment on the Login page. (required_inference)
  2. Application-owned identity. Because published entries are durable and must remain bound to the correct owner, identity is application-owned rather than delegated to a provider. (required_inference)
  3. No differentiated permissions beyond owner-versus-visitor. The source establishes only that the owner adds logins and visitors get them; no additional roles, role-based visibility, or permission tiers are assumed.
  4. The Login page is anonymously reachable. It is the access boundary itself and cannot require the access it establishes; protected state remains unavailable until identity is established. (required_inference)
  5. Entry fields. A published login entry carries at minimum its platform, an identifying handle or account label, and the login information. These are the fields needed for a visitor to identify and retrieve an entry. (required_inference)
  6. No future-horizon capabilities. No future requirements were accepted by the source; everything in this document is current.
Page 31 of 32

12. Glossary

  • Site Owner — the operator of social-logs-marketplace; the only actor who adds login entries. Establishes identity on first use and verifies it on return.
  • Visitor — an anonymous person who comes to the site to obtain social media logins. Browses and retrieves published entries; never establishes identity.
  • Login entry (published login) — a social media login record published by the Site Owner, comprising its platform, an identifying handle or account label, and the login information. Exists only after the owner adds it.
  • Add-login button — the Site Owner's dedicated control on the Add Login destination that publishes a new login entry.
  • Landing — the anonymous public entry surface stating the site's offer and routing visitors to the published logins.
  • Login — the anonymous identity-access boundary supporting first-use self-service enrollment and returning verification for the Site Owner.
  • Logins — the visitor-facing browse and retrieval surface for published login entries.
  • Add Login — the role-restricted destination owning the add-login button and the creation of new entries.
  • Demo content — fabricated logins, seeded accounts, placeholder credentials, or sample data. Prohibited throughout the product.
  • Retrieval (Reveal) — the visitor action that presents the login information for a chosen entry.
  • Published set — the collection of login entries the Site Owner has added; empty until the owner's first publication.
Page 32 of 32

No completed page designs yet.

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

Landing: Select Owner add login
Login: Arrive at identity boundary
Login: 1. Submit enrollment details
Login: 2. Correct flagged details
Login: 3. Submit verification credentials
Login: 4. Retry verification
Login: 5. Switch to verification mode
Login: 6. Switch to enrollment mode
Add Login: 1. Enter entry details
Add Login: 2. Press add-login button
Add Login: 3. Correct flagged fields
Add Login: 4. Confirm published entry
Add Login: 5. Start another entry

No completed page designs yet.

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

Landing: Select Owner add login
Login: Arrive at identity boundary
Login: 1. Submit enrollment details
Login: 2. Correct flagged details
Login: 3. Submit verification credentials
Login: 4. Retry verification
Login: 5. Switch to verification mode
Login: 6. Switch to enrollment mode
Add Login: 1. Enter entry details
Add Login: 2. Press add-login button
Add Login: 3. Correct flagged fields
Add Login: 4. Confirm published entry
Add Login: 5. Start another entry