music-producer-artist

byR J

Build me a exclusive music producer website for artist and potential buyers to show case my work

Landing
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

Page 1 of 16

System Requirements Document for music-producer-artist

1. Introduction

This document specifies an exclusive music producer website for music-producer-artist. The product intent is a single, curated, first-party showcase site where the producer presents their body of work so that two external audiences — artists judging sonic fit for a possible collaboration, and potential buyers judging commercial value for a possible purchase or license — can review that work and form a decision.

The site is deliberately exclusive: it is a selective presentation of one producer's catalog, not a marketplace, not a social network, and not a multi-producer directory. Its audience is the artist and the potential buyer; its author is the producer who owns the site and the work presented on it.

Page 2 of 16

2. System Overview

The current delivery is a public, first-party, custom-UI website with two destinations:

  • Landing — the anonymous public entry surface. It establishes who the producer is, that the site is an exclusive showcase of the producer's work, and who the site serves (artists and potential buyers), and it routes visitors into the catalog.
  • Work — the dedicated showcase destination where the producer's productions are presented and where artists and potential buyers review them.

Actors:

  • Music Producer (Site Owner) — the source of the showcased work; publishes and maintains the curated catalog.
  • Artist — reviews the showcased productions to judge whether the producer's sound fits their own projects.
  • Potential Buyer — reviews the showcased productions to decide whether the work is worth purchasing or licensing.

Both destinations are publicly reachable with no access requirement; the site is a showcase, and the accepted behavior is anonymous review of published work. There is no accepted account, checkout, messaging, or collaboration-management capability in the current horizon, and none is added here.

Page 3 of 16

2a. Product Interpretation and Delivery Boundary

The product is a showcase, and its delivery boundary follows from that. The producer's work is presented on first-party pages that the producer controls; visitors arrive anonymously, read and listen, and leave with an impression of the catalog. Nothing in the accepted requirements asks the site to transact, negotiate, or mediate a relationship — those outcomes happen off-site, and the site's job ends at a well-formed, current presentation of the work.

Consequently:

  • Current — the Landing entry surface, the Work showcase destination, the producer's ability to publish and keep the catalog current, and the visitor's ability to review the work.
  • Not current — purchasing, licensing transactions, payment, contracts, messaging between visitors and the producer, visitor accounts, and any multi-producer or marketplace behavior. These are outside the accepted scope and are not implemented.
  • Future — anything the producer later accepts as a new requirement; see Section 11.

The exclusivity constraint is a presentation and curation constraint: the site presents one producer's selected work with a scarce, tasteful register. It is not an access-control constraint, and it does not restrict who may view the public showcase.

2b. Source Content Inventory

No reference directive in this project declares a content_source, so no source content inventory is included. All catalog content (track titles, metadata, credits, placements, imagery) is authored by the producer as part of maintaining the showcase and is not supplied by an external factual source.

2c. Page Content and Component Coverage

Page 4 of 16

Landing

  • Information and state presented — the producer's identity as an exclusive music producer; a statement that the site showcases the producer's work; an indication of who the site serves (artists and potential buyers); a selected-work band surfacing a subset of the catalog; a credits/placement band; a contact block.
  • Primary action — enter the catalog (navigate to Work).
  • Supporting actions — scroll through the selected-work band; open a specific showcased track from the band; read the credits/placement band; read the contact block.
  • Domain entities — Producer (name, role descriptors, availability-for-commission state), Track (title, metadata, waveform, audio), Credit/Placement (name, role).
  • Component responsibilities —
    • Hero: producer name at display scale, a full-width hairline rule, uppercase metadata pinned to the rule's ends including the availability indicator, a desaturated studio macro photograph behind the type, and the single outlined "enter the catalog" control.
    • Selected Work band: a full-bleed band presenting a curated subset of tracks with title, metadata, waveform strip, and play control.
    • Credits/placement marquee: a thin horizontal band of uppercase names with hairline separators, scrolling at a slow constant speed and pausing on hover.
    • Contact block: a poster-set block carrying the producer's contact information.
    • Sticky player bar: viewport-spanning bar with a hairline top rule, circular play control, current track title, and uppercase metadata.
  • States —
    • Loading: hero type and rule render immediately; the background photograph fades in; the selected-work band and marquee reserve their height so nothing shifts.
    • Empty: if no tracks are published yet, the selected-work band is omitted entirely and the hero's catalog control is not rendered; the credits band and contact block remain.
    • Success: hero, selected-work band, marquee, and contact block all render; the catalog control navigates to Work.
    • Error: if the background photograph fails, the hero renders on the flat near-black ground with type and rule intact; if the selected-work band's data fails, the band is omitted and the rest of the page remains usable.
    • Recovery: the visitor can still reach Work through the site's primary navigation even when the hero's catalog control is unavailable.
Page 5 of 16

Work

  • Information and state presented — the full curated catalog as a ruled editorial index: one full-width row per track carrying a hanging index number, the track title at display scale, uppercase metadata (BPM, key, year, role), a waveform strip drawn from the track's real audio data, and a play control; a single full-bleed accent colour block carrying one oversized statement; the sticky player bar reflecting the currently playing track.
  • Primary action — play a track from the index.
  • Supporting actions — scan the index by title and metadata; scrub or seek within the currently playing track via its waveform; pause and resume; move between tracks.
  • Domain entities — Track (index, title, BPM, key, year, role, audio source, waveform data), Playback state (current track, position, playing/paused), Producer statement.
  • Component responsibilities —
    • Ruled index: full-width rows separated by hairline rules, with the index number hanging in the left gutter and the title set large; rows fade and rise into place on scroll.
    • Waveform strip: thin off-white stroke rendering of the track's real audio data, with the played portion in the accent colour; the strip is the seek surface.
    • Play control: per-row control that starts that track and reflects the active track.
    • Accent statement block: one full-bleed accent-coloured band carrying a single oversized statement in black.
    • Sticky player bar: viewport-spanning bar with a hairline top rule, circular play control, current track title, and uppercase metadata; persists while the visitor scrolls the index.
  • States —
    • Loading: the index renders its rows with titles and metadata; waveform strips and audio resolve progressively; the player bar is present but idle.
    • Empty: if no tracks are published, the index area presents a single quiet line stating that the catalog is being prepared, and the accent statement block and player bar are not rendered.
    • Success: a track plays; its row shows the active state, its waveform advances in the accent colour, and the player bar shows that track's title and metadata.
    • Error: if a track's audio fails to load, that row shows an unavailable state, the play control for that row is disabled, and the rest of the index remains fully usable; if waveform data is unavailable for a track, the row renders without a waveform strip and remains playable.
    • Recovery: the visitor can select any other track immediately; playback state resets cleanly to the newly selected track.
Page 6 of 16

3. Functional Requirements

Each requirement is stated as a story point with provenance, lifecycle facts, and observable acceptance.

FR-1 — Exclusive producer showcase site (explicit) As the Music Producer (Site Owner), I should have an exclusive first-party website that presents my work, so that my catalog is showcased under my own curation rather than inside a generic portfolio or marketplace.

  • Trigger/input: the producer publishes the site and its catalog.
  • Observable result: a public site exists at the project's domain presenting the producer's work as a curated selection.
  • Access state: public; no access requirement on either destination.
  • Failure/recovery: if catalog content is unavailable, the site still presents the producer's identity and the showcase framing rather than an error page.
  • Continuation: the producer can update the catalog and the site reflects the update.

FR-2 — Showcase the producer's work (explicit) As the Music Producer (Site Owner), I should be able to publish and maintain a curated catalog of my productions — each with its title, metadata, and audio — so that visitors can review the actual work.

  • Trigger/input: the producer adds, edits, orders, or removes a production in the catalog.
  • Observable result: the production appears in the Work index with its title, metadata, waveform, and play control, and is playable.
  • Access state: the producer's authoring action is the source of the published state; visitors consume the published result publicly.
  • Failure/recovery: if a production's audio or waveform data is missing, the row still publishes with title and metadata and is marked unavailable for playback rather than breaking the index.
  • Continuation: subsequent edits are reflected on the next visit to Work.

FR-3 — Review the catalog as an artist (explicit) As an Artist, I should be able to browse and listen to the showcased productions and read each one's metadata, so that I can judge whether the producer's sound fits my own projects.

  • Trigger/input: the artist opens Work and selects a track.
  • Observable result: the track plays, its waveform advances in the accent colour, and the player bar shows its title and metadata; the artist can move to another track.
  • Access state: public; no account required.
  • Failure/recovery: if a track fails to play, the artist sees an unavailable state on that row and can immediately select another track.
  • Continuation: the artist continues through the index until they have formed a judgment about fit.

FR-4 — Review the catalog as a potential buyer (explicit) As a Potential Buyer, I should be able to examine the showcased productions and their metadata, so that I can decide whether the producer's work is worth purchasing or licensing.

  • Trigger/input: the buyer opens Work and reviews the index and individual tracks.
  • Observable result: the buyer can read each track's title, BPM, key, year, and role, play the track, and see the producer's credits and placements.
  • Access state: public; no account required.
  • Failure/recovery: if a track's audio is unavailable, the buyer can still read its metadata and evaluate the rest of the catalog.
  • Continuation: the buyer reaches a purchase/licensing decision off-site, using the contact information presented on the site.

FR-5 — Anonymous entry and orientation (required_inference) As an Artist or Potential Buyer, I should arrive at a public entry surface that tells me whose work this is, that it is an exclusive showcase, and who it is for, so that I can decide whether to enter the catalog.

  • Trigger/input: the visitor opens the site's root address.
  • Observable result: the Landing surface renders the producer's name, the showcase framing, the audience framing, and a single control that enters the catalog.
  • Access state: anonymous; no identity is established or required.
  • Failure/recovery: if the entry surface's imagery or selected-work data fails, the producer's identity, framing, and catalog navigation remain available.
  • Continuation: the visitor enters Work.

FR-6 — Playback of showcased work (required_inference) As an Artist or Potential Buyer, I should be able to play, pause, seek within, and switch between showcased tracks, so that I can actually hear the work I am evaluating.

  • Trigger/input: the visitor activates a row's play control, the player bar's play control, or a point on a waveform strip.
  • Observable result: the selected track plays; the active row and the player bar both reflect the current track; the played portion of the waveform renders in the accent colour; pausing holds position; seeking moves playback to the selected point.
  • Access state: public; no account required.
  • Failure/recovery: if playback of a track fails, the row shows an unavailable state and the visitor can select another track without losing their place in the index.
  • Continuation: playback state persists as the visitor scrolls the index, and switching tracks replaces the current track cleanly.

FR-7 — Credits and placements visibility (required_inference) As an Artist or Potential Buyer, I should be able to see the artists, labels, and placements associated with the producer's work, so that I can weigh the producer's track record alongside the music itself.

  • Trigger/input: the visitor reads the credits/placement band on Landing.
  • Observable result: the band presents the associated names with hairline separators, scrolling slowly and pausing on hover so names can be read.
  • Access state: public.
  • Failure/recovery: if no credits are published, the band is omitted and the rest of the page is unaffected.
  • Continuation: the visitor proceeds to the catalog or to the contact block.

FR-8 — Contact for commission and purchase enquiries (required_inference) As an Artist or Potential Buyer, I should be able to find how to reach the producer, so that I can act on the decision I formed while reviewing the work.

  • Trigger/input: the visitor reads the contact block on Landing.
  • Observable result: the producer's contact information is presented as a poster-set block, and the producer's availability for commission is indicated in the hero metadata.
  • Access state: public.
  • Failure/recovery: if contact details are not published, the block is omitted rather than rendered empty.
  • Continuation: the visitor contacts the producer outside the site.
Page 7 of 16

4. User Personas

Music Producer (Site Owner)

The producer is the author of the site and the sole source of the work presented on it. Their product context is curation: they are not running a storefront or a service, they are presenting a selected body of work under their own name, and the site's credibility depends on that selection being current and deliberate.

  • Primary goal: publish and maintain a curated portfolio of their music productions so that artists and potential buyers can evaluate their work.
  • Distinct responsibilities: deciding what is in the catalog and in what order; supplying each production's title, metadata, audio, and waveform data; supplying the credits and placements that establish track record; supplying the contact information and availability state; keeping all of the above current.
  • Inputs and decisions: which productions are selected, how they are ordered, what metadata accompanies each, and whether the availability-for-commission indicator is on.
  • Interactions with other participants: the producer does not interact with visitors inside the product. Their relationship to the Artist and the Potential Buyer is one-directional within the site — the producer publishes, the visitor reviews — and any resulting conversation happens outside the site.
  • Observable success: the showcased work is presented correctly and stays current, and visitors can review it without friction.

Artist

The artist is a working creative evaluating a potential collaborator. Their context is comparative: they are listening for whether this producer's sound, palette, and sensibility fit the specific project they have in mind, and they are doing that listening quickly and skeptically.

  • Primary goal: review the showcased productions and judge whether the producer's sound fits their own projects.
  • Distinct responsibilities: browsing the catalog, playing tracks, reading metadata to understand each track's character, and forming a fit judgment.
  • Inputs and decisions: which tracks to play, how long to listen, and whether the producer's sound matches the project at hand.
  • Interactions with other participants: the artist consumes what the producer published; the artist's evaluation is the outcome the producer is presenting for. The artist does not interact with the Potential Buyer inside the product.
  • Observable success: the artist can evaluate the producer's catalog and identify work relevant to them, and can find how to reach the producer if the fit is right.
Page 8 of 16

Potential Buyer

The potential buyer is evaluating commercial value — a purchase or a license. Their context is transactional and evidentiary: they are weighing the music against the producer's track record, and they need enough concrete information to justify a decision to themselves or to someone else.

  • Primary goal: review the showcased productions and determine whether the producer's work is worth purchasing or licensing.
  • Distinct responsibilities: examining the catalog, reading metadata and credits, listening to tracks, and reaching a buy/no-buy judgment.
  • Inputs and decisions: track metadata, credits and placements, the producer's availability state, and the contact route.
  • Interactions with other participants: the buyer consumes the producer's published work and track record; the buyer does not interact with the Artist inside the product.
  • Observable success: the buyer can assess the catalog and decide whether to pursue a purchase, and can find how to reach the producer to do so.

5. Core User Flows

Flow A — Artist evaluates the producer's sound

  1. The artist arrives at the site's root address with no account and no prior context.
  2. Landing renders: the producer's name at display scale, the showcase framing, the audience framing, and the availability indicator.
  3. The artist reads the hero and the selected-work band, and gets a first impression of the producer's register.
  4. The artist activates the outlined control to enter the catalog.
  5. Work renders the ruled index: each track as a full-width row with a hanging index number, title, uppercase metadata, waveform strip, and play control.
  6. The artist selects a track. It plays; the row shows its active state, the waveform's played portion turns accent-coloured, and the sticky player bar shows the track's title and metadata.
  7. The artist seeks within the track by selecting a point on its waveform, then pauses.
  8. The artist moves to another track and repeats, comparing metadata (BPM, key, year, role) across rows.
  9. Failure path: if a track's audio fails to load, that row shows an unavailable state and its play control is disabled; the artist selects another track immediately and continues.
  10. Result: the artist has heard enough of the catalog to judge fit.
  11. Next step: the artist returns to Landing, reads the credits/placement band to weigh the producer's track record, and uses the contact block to reach the producer about a collaboration.
Page 9 of 16

Flow B — Potential Buyer assesses commercial value

  1. The buyer arrives at the site's root address, referred from outside the site, with no account.
  2. Landing renders the producer's identity, the showcase framing, and the availability-for-commission indicator.
  3. The buyer reads the credits/placement band, noting the artists, labels, and placements associated with the producer's work; the band pauses on hover so names can be read.
  4. The buyer enters the catalog.
  5. Work renders the ruled index. The buyer scans titles and metadata to shortlist candidates.
  6. The buyer plays a shortlisted track; the player bar shows its title and metadata while the buyer scrolls the rest of the index.
  7. The buyer plays a second track to compare, then pauses.
  8. Failure path: if waveform data is unavailable for a track, the row renders without a waveform strip but remains playable, so the buyer's evaluation is not blocked.
  9. Result: the buyer has enough evidence — music plus track record — to judge whether the work is worth purchasing or licensing.
  10. Next step: the buyer returns to Landing and uses the contact block to pursue the purchase or license with the producer directly.

Flow C — Producer publishes and maintains the showcase

  1. The producer prepares a production for presentation: title, metadata (BPM, key, year, role), audio, and waveform data.
  2. The producer adds the production to the catalog and places it in the index order.
  3. Work reflects the addition: a new full-width row appears with the hanging index number, title, metadata, waveform strip, and play control.
  4. The producer updates the credits/placement band and the contact block on Landing as their track record and contact details change.
  5. The producer toggles the availability-for-commission indicator in the hero metadata.
  6. Failure path: if a production's audio or waveform data is not yet available, the row still publishes with title and metadata and is marked unavailable for playback, so the index is never broken by an incomplete entry.
  7. Result: the showcase is current and accurate.
  8. Next step: the producer continues to curate — reordering, replacing, or removing productions as the catalog evolves.
Page 10 of 16

Flow D — Visitor arrives and orients without entering the catalog

  1. A visitor arrives at the site's root address.
  2. Landing renders the producer's name, the showcase framing, the audience framing, the selected-work band, the credits/placement band, and the contact block.
  3. The visitor reads the page without playing anything.
  4. Failure path: if the hero's background photograph fails to load, the hero renders on the flat near-black ground with type and rule intact; if the selected-work band's data fails, the band is omitted and the rest of the page remains usable.
  5. Result: the visitor understands whose work this is, that it is an exclusive showcase, and who it serves.
  6. Next step: the visitor either enters the catalog or uses the contact block to reach the producer.
Page 11 of 16

6. Visuals Colors and Theme

The creative direction is authoritative for this section. The muse is Tobias van Schneider; the headline idea is editorial swagger for a producer's catalog: oversized type, black rooms, one hot signal.

Mode: dark mode only.

Colour tokens

RoleHexUse
Background#0B0B0CThe room. Dominant ground across both pages.
Surface#151517Track rows, player bar, panel insets.
Text#F4F1ECAll display type and body copy. Contrast ≈17:1 on background.
Primary#F4F1ECPrimary type and outlined control borders.
Accent#FF3B1FPlay state, active waveform, availability dot, hover underlines, one full-bleed block on Work.
Muted#8A8580Metadata only — BPM, key, year, role. Never body copy.
Hairline#2A2A2D1px rules dividing track rows and section bands.

Proportion: ~85% black ground, ~12% off-white type, ~3% red-orange. No gradients except a single 1px luminous edge on the player bar.

Typography

  • Headings: Playfair Display, weight 900, at enormous scale — clamp(64px, 14vw, 180px) for the producer name and page titles, tight leading 0.88–0.95, optical-size large, tracking -0.02em, mixed case with occasional italic for track titles.
  • Body and UI: Archivo, weights 400/500. Uppercase 11–12px labels with 0.16em tracking for metadata (BPM, KEY, YEAR, ROLE).
  • Prohibited: letterspaced lowercase; all-caps headlines; Inter, Roboto, Poppins, Lato, Open Sans, or system-ui for any heading or body text.
  • Type scale, 1.5 modular on a 4/8pt base: 180 / 120 / 80 / 48 / 32 / 20 / 16 / 13. Display 180–120 for hero name and page titles; 80–48 for track titles; 32–20 for section heads and pull quotes; 16 body; 13 metadata.

Shape language: sharp corners everywhere — 0px radius on cards, buttons, images, and the player. Only exceptions: the circular play button (full round) and the 2px red-orange live dot. Hairline 1px rules in #2A2A2D divide track rows and section bands; the only heavy element is the full-bleed red-orange block on Work. Buttons are rectangular with a 1px off-white border that fills solid off-white on hover, with text flipping to black.

Layout: asymmetric editorial grid — 12 columns, 96px outer margins on desktop, content intentionally offset so the hero name bleeds off the right edge and track numbers hang in the left gutter. Full-bleed sections alternate with narrow single-column reading bands. Work is a ruled list, not a card grid: each track is one full-width row with index number, title in large Playfair, metadata in uppercase Archivo, waveform strip, and play control. A sticky bottom player bar spans the viewport with a 1px top rule. Landing sequence: hero, then a single full-bleed "Selected Work" band, then a credits/placement marquee, then a contact block set as a poster.

Imagery: large-scale monochrome photography — macro shots of console faders, tape reels, patch bays, studio glass, a hand on a knob — desaturated to near-black-and-white, with red-orange only where a real LED exists in the frame. Artist portraits treated as high-contrast black-and-white editorial crops. No stock people smiling, no gradient blobs, no 3D mockups, no device frames. Waveforms are drawn from real audio data and rendered as thin off-white strokes with the played portion in red-orange.

Avoid: blue, indigo, or violet accents on white grounds; Inter/Roboto/Poppins/Lato/Open Sans/system-ui for headings or body; gradient-blob heroes, glassmorphism panels, and identical hover-lift card grids; rounded 16px+ cards and pill buttons; centred headline + subhead + CTA hero composition; stock photography of smiling people in headphones and 3D device mockups; bouncy spring animations, cursor followers, and playful emoji microcopy; full-colour imagery competing with the red-orange signal accent. The generic indigo/blue-on-white SaaS template is forbidden for this project.

Page 12 of 16

7. Signature Design Concept

The black room with one hot signal.

The public entry is a full-viewport black room. The producer's name is set in Playfair Display 900 at clamp(72px, 14vw, 200px), flush-left, cropped so the final letter runs past the right viewport edge — the name itself is the artwork, and the crop signals that the catalog continues beyond the frame. Beneath it, a single 1px off-white rule spans the viewport. Pinned to the rule's far left in 11px uppercase Archivo: PRODUCER / COMPOSER / SELECTED WORK 2016–2026. Pinned to its far right: a 2px red-orange dot and AVAILABLE FOR COMMISSION.

Behind the type, a single desaturated macro photograph of a mixing console sits at 30% opacity, full-bleed, scaling slowly from 1.04 to 1.0 over 12 seconds. There is no centred stack, no subhead paragraph, and no blue button. The only control is a rectangular outlined ENTER THE CATALOG, which scrolls to the Selected Work band.

The concept recomposes only accepted content and controls: the producer's identity, the showcase framing, the availability state, the selected-work band, and the single navigation control into Work. It introduces no new behavior, page, or destination.

Page 13 of 16

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

  • Focal subject: the producer's name at display scale, cropped past the right viewport edge, over a desaturated macro photograph of a mixing console at 30% opacity.
  • Input → transformation → outcome thesis: on load, the hero name is revealed by a 900ms clip-path wipe from the left; the background photograph scales slowly from 1.04 to 1.0 over 12 seconds. The outcome is a composed first frame in which the name, the hairline rule, and the metadata at its ends are fully legible and the single outlined control is available — the visitor's next action is to enter the catalog.
  • Motion vocabulary: slow, editorial, never bouncy. Clip-path wipe for the hero name; 600ms fade-and-rise of 12px with 60ms stagger for track rows on scroll; 240ms waveform colour swap from muted grey to red-orange on hover; a 1.4s pulse loop on the player bar's red dot while playing; 400ms black crossfade for page transitions. No parallax, no spring physics, no cursor followers.
  • Composed first frame: black ground, the producer's name flush-left and bleeding off the right edge, the 1px rule beneath it with uppercase metadata pinned to both ends, the console photograph faint behind the type, and the outlined catalog control below the rule.
  • Reduced-motion state: the clip-path wipe and the 12-second photograph scale are suppressed; the hero renders fully composed on first paint with the name, rule, metadata, and control in place. The player bar's red dot renders as a steady dot rather than a pulse, and track rows appear without the fade-and-rise. All content and controls remain available.

9. Non-Functional Requirements

  • NFR-1 — Public anonymous access (explicit, from the accepted access contract): both Landing and Work are reachable without an account. No identity establishment, sign-in, or session continuity is required for any accepted visitor behavior.
  • NFR-2 — Exclusivity of presentation (explicit): the site presents one producer's curated work. It must not present itself as a marketplace, directory, or multi-producer platform, and must not surface third-party catalog listings.
  • NFR-3 — Audio delivery fidelity (required_inference): showcased tracks must be delivered at a quality sufficient for an artist or buyer to judge the work, and playback must begin without a perceptible stall on a normal connection.
  • NFR-4 — Waveform accuracy (required_inference): waveform strips must be rendered from each track's real audio data, not from decorative or synthetic shapes, because the strip doubles as the seek surface and as the visual record of playback position.
  • NFR-5 — Responsive composition (required_inference): the asymmetric editorial grid, the display type scale, and the sticky player bar must remain legible and usable from mobile widths through wide desktop, with the hero name's right-edge bleed preserved as a compositional device rather than clipped into illegibility.
  • NFR-6 — Accessibility (required_inference): text must meet WCAG AA contrast against its ground — the specified #F4F1EC on #0B0B0C and #151517 satisfies this, and #8A8580 is restricted to metadata so it is never used for body copy. Play, pause, and seek controls must be keyboard reachable and expose their state to assistive technology. The reduced-motion state described in Section 8 must be honored.
  • NFR-7 — Content currency (explicit, from the producer's stated goal): the published catalog must reflect the producer's current selection; a production removed or replaced by the producer must not continue to appear.
Page 14 of 16

10. Tech Stack

No technology choices were specified by the user. The following are coherent defaults for this delivery.

  • Frontend: React, built as a single-page application with two routes — Landing and Work. [Default — not specified by user]
  • Styling: plain CSS with custom properties for the colour, type, and spacing tokens in Section 6; no component library, since the direction's sharp-cornered, hairline-ruled language is not served by a rounded default kit. [Default — not specified by user]
  • Audio: the browser's native audio element driven by a single shared playback controller, so the sticky player bar and the per-row controls reflect one authoritative playback state. [Default — not specified by user]
  • Waveform rendering: waveform peaks precomputed from each track's audio and rendered as an SVG or canvas stroke, with the played portion drawn in the accent colour. [Default — not specified by user]
  • Backend: Python with FastAPI, serving the published catalog — tracks, metadata, credits, contact details, and availability state — as read-only public endpoints, plus the producer's authoring operations. [Default — not specified by user]
  • Storage: a relational database for catalog entries, credits, and contact details; object storage for audio files and waveform peak data. [Default — not specified by user]
  • Packaging: Docker with docker-compose for local development and single-host deployment. [Default — not specified by user]
  • Orchestration: Kubernetes is not required for this delivery and is not included. [Default — not specified by user]
Page 15 of 16

11. Assumptions and Constraints

Constraints

  • The website is exclusive. This is an explicit hard constraint and governs curation and presentation, not access: it does not restrict who may view the public showcase.
  • The site serves artists and potential buyers as its audiences. No other audience is in scope.
  • The site showcases the producer's work. It does not transact, negotiate, or mediate relationships.

Assumptions

  • The producer is the sole author of the catalog and supplies all track content, metadata, credits, contact details, and availability state. [Assumption — not specified by user]
  • The producer's authoring of the catalog is performed outside the visitor-facing pages; the accepted page contract contains no producer-facing authoring destination, so authoring is treated as a content operation rather than a page. [Assumption — not specified by user]
  • Contact between visitors and the producer happens outside the site, using the contact information the site presents. [Assumption — not specified by user]
  • Purchasing and licensing are decisions the visitor reaches on the site but completes off it. [Assumption — not specified by user]
  • The catalog is small enough to present as a single ruled index on Work without pagination. [Assumption — not specified by user]

Future horizon (not current scope)

  • Any transactional capability — purchase, licensing, payment, or contract handling — is not current and is not implemented.
  • Any messaging or enquiry-submission capability inside the site is not current and is not implemented.
  • Any visitor account, saved collection, or personalized view is not current and is not implemented.
  • Any multi-producer, marketplace, or directory behavior is not current and is not implemented.
Page 16 of 16

12. Glossary

  • Catalog — the producer's curated set of showcased productions, presented as the ruled index on Work.
  • Track — a single showcased production, carrying an index number, title, metadata (BPM, key, year, role), audio, and waveform data.
  • Metadata — the uppercase Archivo labels accompanying a track: BPM, KEY, YEAR, ROLE.
  • Waveform strip — the thin off-white stroke rendering of a track's real audio data, with the played portion in the accent colour; it doubles as the seek surface.
  • Player bar — the sticky, viewport-spanning bar at the bottom of the site carrying the circular play control, the current track's title, and its metadata.
  • Selected Work band — the full-bleed band on Landing presenting a curated subset of the catalog.
  • Credits/placement marquee — the thin horizontal band of uppercase artist, label, and placement names scrolling slowly with hairline separators, pausing on hover.
  • Availability indicator — the red-orange dot and AVAILABLE FOR COMMISSION label pinned to the right end of the hero's hairline rule.
  • Exclusive — the constraint that the site presents one producer's selected work in a scarce, curated register, rather than operating as a marketplace, directory, or multi-producer platform.
Landing design preview
Landing: Read producer name and showcase framing
Landing: Read selected work band first impression
Landing: Enter the catalog
Landing: Reach Work via primary navigation
Work: Scan ruled index titles and metadata
Work: 1. Play a track
Work: 2. Seek via waveform and pause
Work: 3. Switch to another track
Work: 4. Select another track when row unavailable
Landing: Read credits and placement band
Landing: Use contact block to reach producer
Landing design preview
Landing: Read producer name and showcase framing
Landing: Read selected work band first impression
Landing: Enter the catalog
Landing: Reach Work via primary navigation
Work: Scan ruled index titles and metadata
Work: 1. Play a track
Work: 2. Seek via waveform and pause
Work: 3. Switch to another track
Work: 4. Select another track when row unavailable
Landing: Read credits and placement band
Landing: Use contact block to reach producer