System Requirements Document for moon-pc

1. Introduction

moon-pc is an AI-powered PC Component Compatibility Assistant delivered as a modern, responsive React frontend. Its product intent is to let a person assemble a PC part list — CPU, Cooler, Motherboard, Memory, and Case — and immediately see whether the chosen parts work together, while a dedicated AI Hardware Assistant answers hardware fit and socket questions and two build galleries provide starting points and community inspiration.

The audience is PC builders and PC-building enthusiasts: people who choose their own parts, care about socket numbers, cooler mounting brackets, radiator clearance, and estimated price, and who want a single instrument-like surface that tells them "Compatibility: No issues found" before they buy. A second audience is the browsing visitor looking for a suggested configuration or a finished rig to copy, and a third is the builder who wants their own finished rig shown in the community gallery.

The product is a frontend experience with a global theme toggle. The default theme is dark — black ground with vibrant yellow accents for primary buttons, borders, and active states. The header toggle switch shifts the interface to a light theme — a clean white background with purplish accents, structured with Times New Roman typography at 16-point bold headings and 12-point body text.

2. System Overview

moon-pc is a single responsive React application with a persistent header that carries the global theme toggle. The application presents five surfaces: a landing Hero Section, a Main Builder Interface, a dedicated AI Hardware Assistant chat panel, a Suggested Builds grid, and a Completed Builds gallery.

The Hero Section is the public entry: a bold hero with high-quality floating images of PC components (motherboard, GPU, case fan) orbiting a central text area, a centered main heading, a primary yellow Start Building call-to-action button, and quick-start configuration cards positioned directly below.

The Main Builder Interface is a minimalist builder workspace. A prominent full-width status banner sits above the component selection list and reports system health, styled like a bright green "Compatibility: No issues found" bar. Beneath it, a structured component selection list uses clean horizontal rows for CPU, Cooler, Motherboard, Memory, and Case, each with a simple action button labeled + Choose A [Component] — yellow in dark mode, purplish in light mode.

The AI Hardware Assistant is a dedicated chat panel integrated beside the component list. It is pre-populated with a sample user query asking whether a specific CPU cooler mounting bracket fits a Thermaltake Level 20MT case, followed by a simulated AI response confirming physical clearance and socket compatibility.

The Suggested Builds section is a grid of structurally clean cards; each card displays a thumbnail image of a PC case, smaller nested component icons, a brief title, an estimated price, and a comment counter. The Completed Builds section is a secondary grid showcasing larger user-submitted photos of custom PC rigs, component lists, and upvote counters.

All card backgrounds and text colors invert seamlessly when switching between the black/yellow and white/purplish themes.

2a. Product Interpretation and Delivery Boundary

moon-pc is delivered as a first-party React frontend owned by the application. Every surface in this document — the hero entry, the builder workspace, the AI Hardware Assistant panel, the Suggested Builds grid, and the Completed Builds gallery — is application-owned custom UI. There is no source-backed provider-owned or external-only surface, and no headless delivery is requested.

The theme system is global and application-owned: one header toggle switch governs the whole interface, dark is the default, and the light theme is a full inversion of surfaces, text, and accents rather than a partial restyle. The compatibility status banner, the component selection rows, the AI Hardware Assistant transcript, and both build card grids all participate in that inversion.

The AI Hardware Assistant is presented as a chat panel with a pre-populated sample exchange and a simulated AI response. The current scope is the assistant experience as specified: the panel, its placement beside the component list, and the pre-populated query and answer about the Thermaltake Level 20MT mounting bracket. No additional assistant capability beyond what is stated is part of this document.

The build galleries are browse surfaces in the current scope: Suggested Builds presents cards with case thumbnail, nested component icons, title, estimated price, and comment counter; Completed Builds presents larger user-submitted rig photos, component lists, and upvote counters. The current scope covers the presentation of these galleries and their contents as specified.

The design reference supplied by the user — the Replit mockup URL — could not be loaded, so no structural, feature, or visual facts were verified from it. It remains a supplemental design reference only; it does not add, remove, or alter any requirement in this document. The light-theme screenshots and the design walkthrough video were not yet provided at the time of this document and likewise contribute no verified facts.

2b. Source Content Inventory

The authoritative source content for this document is the set of Replit AI prompts supplied by the user, which define the product's required content. The verified content items are:

• Product framing: "Build a modern, responsive React frontend for an AI-powered PC Component Compatibility Assistant featuring a global theme toggle."
• Theme content: default dark theme — black background with vibrant yellow accents for primary buttons, borders, and active states; header toggle switch; light theme — clean white background with purplish accents; Times New Roman typography with 16-point bold headings and 12-point body text.
• Hero content: high-quality floating images of PC components — motherboard, GPU, case fan — orbiting a central text area; a centered main heading; a primary yellow call-to-action button labeled Start Building; quick-start configuration cards positioned directly below.
• Builder content: a structured component selection list of clean horizontal rows for CPU, Cooler, Motherboard, Memory, and Case; action buttons labeled + Choose A [Component] for each respective row, yellow in dark mode and purplish in light mode.
• Status content: a prominent, full-width status banner above the component selection list indicating system health, styled similarly to a bright green Compatibility: No issues found bar.
• Assistant content: a dedicated AI Hardware Assistant chat panel beside the component list, pre-populated with a sample user query asking if a specific CPU cooler mounting bracket fits a Thermaltake Level 20MT case, followed by a simulated AI response confirming physical clearance and socket compatibility.
• Suggested Builds content: a grid of structurally clean cards, each displaying a thumbnail image of a PC case, smaller nested component icons, a brief title, an estimated price, and a comment counter.
• Completed Builds content: a secondary grid showcasing larger user-submitted photos of custom PC rigs, component lists, and upvote counters.
• Theme inversion content: all card backgrounds and text colors invert seamlessly when switching between the black/yellow and white/purplish themes.

2c. Page Content and Component Coverage

Hero Section

• Information and state: the landing entry of moon-pc. Presents the product as an AI-powered PC Component Compatibility Assistant, with a centered main heading over a central text area and floating PC component imagery — motherboard, GPU, case fan — orbiting that central text area. The global theme toggle in the header is present and reflects the current theme (dark by default).
• Primary action: the primary yellow Start Building call-to-action button, centered with the heading, which begins the builder experience.
• Supporting actions: the header theme toggle switch, which shifts the interface between the dark black/yellow theme and the light white/purplish theme; the quick-start configuration cards positioned directly below the hero, each offering a starting configuration.
• Domain entities: PC component imagery (motherboard, GPU, case fan); quick-start configuration; theme mode (dark, light).
• Component responsibilities: hero container with orbiting component imagery layer behind the central text area; centered heading block; primary CTA button; quick-start configuration card row; header theme toggle switch.
• States: loading — hero imagery and quick-start cards resolve into place; empty — not applicable, the hero is static content; success — hero renders with imagery, heading, CTA, and quick-start cards visible; error — if a component image fails to load, the hero layout and all text and controls remain intact and usable; recovery — the failed image is omitted without collapsing the hero, and the CTA and quick-start cards remain fully operable.

Main Builder Interface

• Information and state: the minimalist builder workspace. A prominent full-width status banner spans above the component selection list and indicates system health, styled like a bright green Compatibility: No issues found bar. Below it, a structured component selection list presents clean horizontal rows for CPU, Cooler, Motherboard, Memory, and Case. Each row shows its component category and its current selection state.
• Primary action: for each row, the simple action button labeled + Choose A [Component] — for example + Choose A CPU, + Choose A Cooler, + Choose A Motherboard, + Choose A Memory, + Choose A Case — which opens the choice for that row. Buttons are yellow in dark mode and purplish in light mode.
• Supporting actions: reading the full-width compatibility status banner above the list; the header theme toggle switch, which inverts the banner, rows, and buttons between the black/yellow and white/purplish themes.
• Domain entities: component category (CPU, Cooler, Motherboard, Memory, Case); chosen component per row; compatibility status (system health); theme mode.
• Component responsibilities: full-width compatibility status banner above the list; component selection list of five horizontal rows; per-row + Choose A [Component] action button; per-row selected-component display; header theme toggle switch.
• States: loading — the status banner and the five component rows resolve into place; empty — no component chosen yet in a row, so the row shows its category with the + Choose A [Component] button available; success — the status banner reads Compatibility: No issues found and each chosen row shows its selected component; error — if a row's selection cannot be applied, that row keeps its previous state and its + Choose A [Component] button remains available; recovery — the builder remains usable, the status banner continues to report system health, and the affected row can be chosen again.

AI Hardware Assistant

• Information and state: a dedicated chat panel integrated beside the component list. It is pre-populated with a sample user query asking whether a specific CPU cooler mounting bracket fits a Thermaltake Level 20MT case, followed by a simulated AI response confirming physical clearance and socket compatibility. The panel shows the exchange as a readable transcript.
• Primary action: reading the pre-populated sample query and the simulated AI response about the Thermaltake Level 20MT mounting bracket, clearance, and socket compatibility.
• Supporting actions: the header theme toggle switch, which inverts the panel's surfaces and text with the rest of the interface.
• Domain entities: chat message (user query, AI response); CPU cooler mounting bracket; Thermaltake Level 20MT case; physical clearance; socket compatibility.
• Component responsibilities: chat panel container positioned beside the component list; message list rendering the pre-populated user query and simulated AI response; message role labeling distinguishing the user query from the AI response.
• States: loading — the panel resolves into place beside the component list; empty — not applicable in the current scope, the panel is pre-populated with the sample query and simulated response; success — the sample user query and the simulated AI response confirming physical clearance and socket compatibility are both readable in the panel; error — if the panel content cannot be rendered, the component list and status banner remain fully usable; recovery — the panel area remains present beside the component list so the assistant content can be restored without disturbing the builder.

Suggested Builds

• Information and state: a section presenting a grid of structurally clean build cards. Each card displays a thumbnail image of a PC case, smaller nested component icons, a brief title, an estimated price, and a comment counter.
• Primary action: browsing the grid of suggested build cards and reading each card's case thumbnail, nested component icons, title, estimated price, and comment counter.
• Supporting actions: the header theme toggle switch, which inverts card backgrounds and text colors with the rest of the interface.
• Domain entities: suggested build; PC case thumbnail image; nested component icons; build title; estimated price; comment counter.
• Component responsibilities: section container; responsive card grid; per-card case thumbnail image; per-card nested component icon cluster; per-card title; per-card estimated price; per-card comment counter.
• States: loading — the card grid resolves into place; empty — the grid area is present with no build cards shown; success — the grid renders build cards, each with its case thumbnail, nested component icons, title, estimated price, and comment counter; error — if a card's thumbnail image fails to load, the card's title, nested component icons, estimated price, and comment counter remain readable; recovery — the affected card stays in the grid with its text content intact and the rest of the grid remains browsable.

Completed Builds

• Information and state: a secondary grid showcasing larger user-submitted photos of custom PC rigs, each accompanied by a component list and an upvote counter.
• Primary action: browsing the gallery of completed builds and reading each entry's user-submitted rig photo, component list, and upvote counter.
• Supporting actions: the header theme toggle switch, which inverts the gallery's backgrounds and text colors with the rest of the interface.
• Domain entities: completed build; user-submitted rig photo; component list; upvote counter.
• Component responsibilities: section container; secondary grid layout sized for larger photos; per-entry user-submitted rig photo; per-entry component list; per-entry upvote counter.
• States: loading — the gallery grid resolves into place; empty — the gallery area is present with no completed builds shown; success — the gallery renders completed builds, each with its larger user-submitted rig photo, component list, and upvote counter; error — if a rig photo fails to load, that entry's component list and upvote counter remain readable; recovery — the affected entry stays in the gallery with its component list and upvote counter intact and the rest of the gallery remains browsable.

3. Functional Requirements

FR-1 — Responsive React frontend for the AI-powered PC Component Compatibility Assistant (explicit) As a PC Builder, I should use a modern, responsive React frontend for the AI-powered PC Component Compatibility Assistant, so that I can work with the assistant on desktop and smaller viewports without losing any content or control.

• Trigger/input: opening moon-pc in a browser.
• Observable result: the interface renders as a modern, responsive React frontend and adapts across viewport sizes.
• Access state: no access restriction is stated for this surface.
• Failure/recovery: if a region fails to render, the remaining regions stay usable and the failed region can be restored without losing the rest of the interface.
• Continuation: the PC Builder continues into the hero, builder, assistant, or a build gallery.
• Acceptance: the frontend is React, is modern and responsive, and no content or control is lost at any supported viewport.

FR-2 — Global theme toggle with dark default (explicit) As a PC Builder, I should toggle the global theme from the header, so that I can switch the whole interface between the dark and light presentations.

• Trigger/input: operating the header toggle switch.
• Observable result: the interface shifts between the dark theme and the light theme; the default theme on load is dark.
• Access state: the toggle is present in the header on the interface.
• Failure/recovery: if the theme cannot be applied, the interface remains in its current theme and stays fully usable.
• Continuation: the chosen theme persists as the PC Builder continues through the hero, builder, assistant, and galleries.
• Acceptance: a header toggle switch exists; the default theme is dark; operating the toggle shifts the interface to the light theme and back.

FR-3 — Dark theme: black background with vibrant yellow accents (explicit) As a PC Builder, I should see the dark theme as a black background with vibrant yellow accents on primary buttons, borders, and active states, so that the default presentation matches the requested look.

• Trigger/input: the interface loading in, or being switched to, the dark theme.
• Observable result: the background is black and primary buttons, borders, and active states use vibrant yellow accents.
• Access state: applies wherever the dark theme is active.
• Failure/recovery: if an accent cannot be applied to a control, the control remains legible and operable.
• Continuation: the dark theme remains active until the toggle changes it.
• Acceptance: in dark mode the background is black and primary buttons, borders, and active states carry vibrant yellow accents.

FR-4 — Light theme: white background, purplish accents, Times New Roman typography (explicit) As a PC Builder, I should see the light theme as a clean white background with purplish accents and Times New Roman typography at 16-point bold headings and 12-point body text, so that the light presentation matches the requested look.

• Trigger/input: switching the header toggle to the light theme.
• Observable result: the background is clean white, accents are purplish, headings are Times New Roman 16-point bold, and body text is Times New Roman 12-point.
• Access state: applies wherever the light theme is active.
• Failure/recovery: if the light theme cannot be fully applied, the interface remains legible and operable in its current presentation.
• Continuation: the light theme remains active until the toggle changes it.
• Acceptance: in light mode the background is clean white, accents are purplish, headings render in Times New Roman 16-point bold, and body text renders in Times New Roman 12-point.

FR-5 — Hero section with orbiting component imagery and centered heading (explicit) As a Build Browser, I should see a bold hero section on the landing page with high-quality floating images of PC components — motherboard, GPU, and case fan — orbiting a central text area, with a centered main heading, so that the product's purpose is immediately clear.

• Trigger/input: arriving at the landing page.
• Observable result: the hero renders with floating motherboard, GPU, and case fan images orbiting the central text area, and a centered main heading.
• Access state: no access restriction is stated for the landing page.
• Failure/recovery: if a component image fails to load, the heading and the rest of the hero remain readable and usable.
• Continuation: the Build Browser proceeds to the Start Building call to action or to the quick-start configuration cards.
• Acceptance: the hero shows floating motherboard, GPU, and case fan images orbiting a central text area, with a centered main heading.

FR-6 — Primary yellow Start Building call-to-action (explicit) As a Build Browser, I should use a primary yellow Start Building call-to-action button centered in the hero, so that I can begin building from the landing page.

• Trigger/input: activating the Start Building button.
• Observable result: the builder experience is entered.
• Access state: the button is available on the landing page.
• Failure/recovery: if the action cannot be completed, the landing page remains usable and the button remains available to try again.
• Continuation: the Build Browser continues in the Main Builder Interface.
• Acceptance: a primary yellow Start Building button is centered in the hero and begins the builder experience when activated.

FR-7 — Quick-start configuration cards below the hero (explicit) As a Build Browser, I should see quick-start configuration cards positioned directly below the hero, so that I can pick a starting configuration instead of beginning from nothing.

• Trigger/input: viewing the area directly below the hero.
• Observable result: quick-start configuration cards are displayed directly below the hero.
• Access state: available on the landing page.
• Failure/recovery: if a card cannot be displayed, the remaining cards and the hero stay usable.
• Continuation: the Build Browser selects a quick-start configuration as a starting point.
• Acceptance: quick-start configuration cards appear directly below the hero.

FR-8 — Minimalist builder layout with structured component selection rows (explicit) As a PC Builder, I should use a minimalist builder layout with a structured component selection list of clean horizontal rows for CPU, Cooler, Motherboard, Memory, and Case, so that I can see and fill each part of my build in order.

• Trigger/input: entering the builder.
• Observable result: the builder presents a minimalist layout with five clean horizontal rows labeled CPU, Cooler, Motherboard, Memory, and Case.
• Access state: no access restriction is stated for the builder.
• Failure/recovery: if a row cannot be rendered, the remaining rows and the status banner stay usable.
• Continuation: the PC Builder chooses components row by row.
• Acceptance: the builder shows clean horizontal rows for CPU, Cooler, Motherboard, Memory, and Case in a minimalist layout.

FR-9 — Per-row + Choose A [Component] action buttons with theme-dependent color (explicit) As a PC Builder, I should use a simple action button labeled + Choose A [Component] on each component row — yellow in dark mode and purplish in light mode — so that I can choose the part for that row.

• Trigger/input: activating the + Choose A [Component] button on a row.
• Observable result: the choice for that component category is opened; the button is yellow in dark mode and purplish in light mode.
• Access state: available on each of the five component rows.
• Failure/recovery: if the choice cannot be opened, the row keeps its previous state and the button remains available.
• Continuation: the PC Builder selects a component for that row and continues to the next row.
• Acceptance: each of the CPU, Cooler, Motherboard, Memory, and Case rows carries a + Choose A [Component] button, colored yellow in dark mode and purplish in light mode.

FR-10 — Full-width compatibility status banner above the component list (explicit) As a PC Builder, I should see a prominent, full-width status banner above the component selection list indicating system health, styled like a bright green Compatibility: No issues found bar, so that I can tell at a glance whether my selection is sound.

• Trigger/input: viewing the builder above the component selection list.
• Observable result: a full-width banner spans above the component list, styled as a bright green bar reading Compatibility: No issues found.
• Access state: available in the builder.
• Failure/recovery: if the banner cannot be rendered, the component rows remain usable.
• Continuation: the PC Builder continues choosing components while reading the banner.
• Acceptance: a prominent full-width bright green Compatibility: No issues found banner appears above the component selection list.

FR-11 — AI Hardware Assistant chat panel beside the component list (explicit) As a PC Builder, I should use a dedicated AI Hardware Assistant chat panel integrated beside the component list, so that I can consult hardware fit and socket questions while I build.

• Trigger/input: viewing the builder beside the component list.
• Observable result: a dedicated AI Hardware Assistant chat panel is present beside the component selection list.
• Access state: no access restriction is stated for the assistant panel.
• Failure/recovery: if the panel cannot be rendered, the component list and status banner remain fully usable.
• Continuation: the PC Builder reads the assistant exchange and continues building.
• Acceptance: a dedicated AI Hardware Assistant chat panel is integrated beside the component list.

FR-12 — Pre-populated sample query about the Thermaltake Level 20MT mounting bracket (explicit) As a PC Builder, I should see the AI Hardware Assistant pre-populated with a sample user query asking whether a specific CPU cooler mounting bracket fits a Thermaltake Level 20MT case, so that I can see the kind of question the assistant handles.

• Trigger/input: opening the AI Hardware Assistant panel.
• Observable result: the panel shows a sample user query asking whether a specific CPU cooler mounting bracket fits a Thermaltake Level 20MT case.
• Access state: available in the assistant panel.
• Failure/recovery: if the sample query cannot be displayed, the panel remains present and the builder stays usable.
• Continuation: the PC Builder reads the simulated AI response that follows.
• Acceptance: the assistant panel is pre-populated with the sample user query about the CPU cooler mounting bracket and the Thermaltake Level 20MT case.

FR-13 — Simulated AI response confirming physical clearance and socket compatibility (explicit) As a PC Builder, I should see a simulated AI response following the sample query that confirms physical clearance and socket compatibility, so that I can see the assistant's answer to the mounting-bracket question.

• Trigger/input: reading the assistant panel after the pre-populated sample query.
• Observable result: a simulated AI response follows the sample query and confirms physical clearance and socket compatibility.
• Access state: available in the assistant panel.
• Failure/recovery: if the response cannot be displayed, the sample query and the builder remain usable.
• Continuation: the PC Builder continues building with the answer in view.
• Acceptance: the simulated AI response follows the sample query and confirms both physical clearance and socket compatibility.

FR-14 — Suggested Builds grid with case thumbnail, nested component icons, title, estimated price, and comment counter (explicit) As a Build Browser, I should browse a Suggested Builds section using a grid of structurally clean cards, each displaying a thumbnail image of a PC case, smaller nested component icons, a brief title, an estimated price, and a comment counter, so that I can find a starting point.

• Trigger/input: viewing the Suggested Builds section.
• Observable result: a grid of structurally clean cards renders, each with a PC case thumbnail image, smaller nested component icons, a brief title, an estimated price, and a comment counter.
• Access state: no access restriction is stated for this section.
• Failure/recovery: if a card's thumbnail fails to load, that card's title, nested component icons, estimated price, and comment counter remain readable.
• Continuation: the Build Browser picks a suggested build as a starting point.
• Acceptance: each Suggested Builds card shows a case thumbnail image, smaller nested component icons, a brief title, an estimated price, and a comment counter.

FR-15 — Completed Builds grid with user-submitted rig photos, component lists, and upvote counters (explicit) As a Build Browser, I should browse a secondary Completed Builds grid showcasing larger user-submitted photos of custom PC rigs, component lists, and upvote counters, so that I can draw inspiration from finished rigs.

• Trigger/input: viewing the Completed Builds section.
• Observable result: a secondary grid renders larger user-submitted photos of custom PC rigs, each with a component list and an upvote counter.
• Access state: no access restriction is stated for this section.
• Failure/recovery: if a rig photo fails to load, that entry's component list and upvote counter remain readable.
• Continuation: the Build Browser continues browsing the gallery or moves to the builder.
• Acceptance: the Completed Builds grid shows larger user-submitted rig photos alongside component lists and upvote counters.

FR-16 — Seamless theme inversion of card backgrounds and text colors (explicit) As a PC Builder, I should see all card backgrounds and text colors invert seamlessly when switching between the black/yellow and white/purplish themes, so that the galleries and cards stay consistent with the active theme.

• Trigger/input: operating the header theme toggle switch.
• Observable result: card backgrounds and text colors invert between the black/yellow and white/purplish themes without breaking layout or legibility.
• Access state: applies to all cards in the interface.
• Failure/recovery: if a card cannot invert, it remains legible in the current theme and the rest of the interface inverts normally.
• Continuation: the PC Builder continues browsing or building in the newly active theme.
• Acceptance: switching themes inverts card backgrounds and text colors seamlessly between the black/yellow and white/purplish themes.

FR-17 — Build Sharer contribution to the Completed Builds gallery (required_inference) As a Build Sharer, I should contribute my own finished rig to the Completed Builds gallery with photos and a component list, so that my build appears alongside other builds with an upvote counter and a comment counter.

• Trigger/input: submitting a finished rig with its photos and component list to the Completed Builds gallery.
• Observable result: the submitted build appears in the Completed Builds gallery with its user-submitted rig photo, its component list, and its upvote counter, and it is surfaced with a comment counter alongside other builds.
• Access state: no access restriction is stated for this contribution.
• Failure/recovery: if the submission cannot be completed, the gallery remains browsable and the submission can be attempted again.
• Continuation: the Build Sharer's build remains in the gallery and receives community engagement through its upvote counter and comment counter.
• Acceptance: a contributed finished rig with photos and a component list appears in the Completed Builds gallery with an upvote counter and a comment counter.

4. User Personas

PC Builder

The PC Builder is the core user of moon-pc. Their product context is the builder workspace: a minimalist layout where the parts of a machine are laid out as clean horizontal rows — CPU, Cooler, Motherboard, Memory, and Case — and where the state of the whole selection is summarized by a single full-width status banner above those rows.

Their primary goal is a component selection with no compatibility issues found. They work row by row, using the + Choose A [Component] button on each row to choose a part, and they read the bright green Compatibility: No issues found banner to know whether the selection is sound. Their distinct accepted responsibility is the assembly of the part list itself: choosing the CPU, the cooler, the motherboard, the memory, and the case, and watching the system-health banner as those choices accumulate.

Their relevant inputs and decisions are the component category they are filling, the part they choose for it, and the reading they take from the status banner. They also consult the AI Hardware Assistant panel beside the component list, where the pre-populated exchange about whether a specific CPU cooler mounting bracket fits a Thermaltake Level 20MT case — answered with a simulated AI response confirming physical clearance and socket compatibility — shows them the kind of fit and socket question the assistant addresses.

Their interaction with other accepted participants is indirect: the configurations they and other builders assemble are the material that the build galleries present, and the finished rigs shown in Completed Builds are the work of Build Sharers. Their observable success is a filled component selection with the status banner reading Compatibility: No issues found.

Build Browser

The Build Browser is the visitor who arrives without a part list and is looking for a starting point or inspiration. Their product context is the landing hero and the two build galleries: the hero with its floating motherboard, GPU, and case fan imagery orbiting a central text area, its centered heading, its primary yellow Start Building button, and the quick-start configuration cards directly below; the Suggested Builds grid of structurally clean cards; and the Completed Builds gallery of larger user-submitted rig photos.

Their primary goal is picking a build or configuration to start from. Their distinct accepted responsibility is exploration and selection: reading the quick-start configuration cards below the hero, scanning Suggested Builds cards for a case thumbnail, nested component icons, a brief title, an estimated price, and a comment counter, and browsing Completed Builds for larger user-submitted rig photos with their component lists and upvote counters.

Their relevant inputs and decisions are which configuration or build to start from, and what the card contents — price, component icons, comment counter, upvote counter — tell them about it. Their interaction with other accepted participants is that they consume the work of Build Sharers in the Completed Builds gallery and the configurations surfaced in Suggested Builds, and they may hand off into the builder that the PC Builder uses. Their observable success is choosing a build or configuration to start from.

Build Sharer

The Build Sharer is the user who contributes their own finished rig to the community gallery. Their product context is the Completed Builds section, where builds are showcased as larger user-submitted photos of custom PC rigs, each accompanied by a component list and an upvote counter, and surfaced with a comment counter alongside other builds.

Their primary goal is having their build appear in the gallery and receive community engagement. Their distinct accepted responsibility is contribution: submitting their finished rig with photos and a component list so that it is presented in the same form as the other entries — a larger rig photo, a component list, and an upvote counter.

Their relevant inputs and decisions are the photos of their finished rig and the component list that describes it. Their interaction with other accepted participants is that their submission becomes material for Build Browsers, who browse the gallery and engage with the entry through its upvote counter and comment counter. Their observable success is their build appearing in the gallery and receiving community engagement.

5. Core User Flows

Flow 1 — PC Builder assembles a component selection and reads system health

1. The PC Builder opens moon-pc. The interface loads in the default dark theme: black background with vibrant yellow accents on primary buttons, borders, and active states.
2. From the Hero Section, the PC Builder activates the primary yellow Start Building call-to-action button centered in the hero.
3. The Main Builder Interface opens in its minimalist layout. Above the component selection list, the full-width status banner spans the width, styled as a bright green Compatibility: No issues found bar.
4. The PC Builder reads the structured component selection list: clean horizontal rows for CPU, Cooler, Motherboard, Memory, and Case. Each row carries its simple action button labeled + Choose A [Component] — yellow in dark mode.
5. The PC Builder activates + Choose A CPU on the CPU row and chooses a processor. The CPU row now shows the chosen part.
6. The PC Builder repeats the same action down the list: + Choose A Cooler, + Choose A Motherboard, + Choose A Memory, and + Choose A Case, choosing a part for each row in turn.
7. As each choice lands, the PC Builder watches the full-width status banner above the list, which reports system health for the selection so far.
8. Observable result: the component selection list shows a chosen part in each of the CPU, Cooler, Motherboard, Memory, and Case rows, and the status banner reads Compatibility: No issues found.
9. Failure/recovery: if a row's choice cannot be applied, that row keeps its previous state and its + Choose A [Component] button remains available; the PC Builder chooses again for that row while the status banner continues to report system health.
10. Continuation: the PC Builder consults the AI Hardware Assistant panel beside the component list (Flow 2), or switches the header theme toggle to the light theme and continues in the white background with purplish accents and Times New Roman typography.

Flow 2 — PC Builder consults the AI Hardware Assistant about a cooler mounting bracket

1. The PC Builder is in the Main Builder Interface, with the component selection list on one side and the dedicated AI Hardware Assistant chat panel integrated beside it.
2. The PC Builder opens the assistant panel. It is already pre-populated with a sample user query asking whether a specific CPU cooler mounting bracket fits a Thermaltake Level 20MT case.
3. The PC Builder reads the simulated AI response that follows the sample query. The response confirms physical clearance and socket compatibility.
4. Observable result: the assistant panel shows the sample user query about the CPU cooler mounting bracket and the Thermaltake Level 20MT case, followed by the simulated AI response confirming physical clearance and socket compatibility.
5. Failure/recovery: if the assistant panel content cannot be rendered, the component selection list and the full-width status banner remain fully usable, and the panel area remains beside the list so the assistant content can be restored.
6. Continuation: the PC Builder returns to the component rows and continues choosing parts, with the clearance and socket answer in view.

Flow 3 — Build Browser finds a starting point from the hero and quick-start cards

1. The Build Browser arrives at the Hero Section of moon-pc. The hero presents high-quality floating images of PC components — a motherboard, a GPU, and a case fan — orbiting a central text area, with a centered main heading.
2. The Build Browser reads the centered heading and the primary yellow Start Building call-to-action button.
3. Directly below the hero, the Build Browser reads the quick-start configuration cards.
4. Observable result: the Build Browser has a set of quick-start configurations to choose from without assembling a list from nothing.
5. Failure/recovery: if a component image in the hero fails to load, the heading, the Start Building button, and the quick-start configuration cards remain intact and usable.
6. Continuation: the Build Browser either selects a quick-start configuration as a starting point, or activates Start Building to enter the Main Builder Interface and continue as a PC Builder (Flow 1).

Flow 4 — Build Browser browses Suggested Builds

1. The Build Browser opens the Suggested Builds section.
2. The section presents a grid of structurally clean cards.
3. For each card, the Build Browser reads the thumbnail image of a PC case, the smaller nested component icons, the brief title, the estimated price, and the comment counter.
4. Observable result: the Build Browser has compared suggested builds by their case thumbnail, component icons, title, estimated price, and comment counter.
5. Failure/recovery: if a card's thumbnail image fails to load, that card's title, nested component icons, estimated price, and comment counter remain readable, and the rest of the grid stays browsable.
6. Continuation: the Build Browser picks a suggested build as a starting point, or moves on to the Completed Builds gallery (Flow 5).

Flow 5 — Build Browser browses Completed Builds

1. The Build Browser opens the secondary Completed Builds grid.
2. The gallery presents larger user-submitted photos of custom PC rigs.
3. For each entry, the Build Browser reads the rig photo, the component list, and the upvote counter.
4. Observable result: the Build Browser has reviewed finished rigs by their photos, component lists, and upvote counters.
5. Failure/recovery: if a rig photo fails to load, that entry's component list and upvote counter remain readable, and the rest of the gallery stays browsable.
6. Continuation: the Build Browser draws inspiration from a completed build and moves to the Main Builder Interface to start their own selection (Flow 1).

Flow 6 — Build Sharer contributes a finished rig to Completed Builds

1. The Build Sharer has a finished custom PC rig with photos of it and a component list describing it.
2. The Build Sharer contributes the finished rig to the Completed Builds gallery with its photos and its component list.
3. Observable result: the submitted build appears in the Completed Builds gallery as a larger user-submitted photo of the custom rig, accompanied by its component list and its upvote counter, and surfaced with a comment counter alongside other builds.
4. Failure/recovery: if the submission cannot be completed, the gallery remains browsable and the Build Sharer can attempt the submission again.
5. Continuation: the Build Sharer's build remains in the gallery, where Build Browsers encounter it during Flow 5 and engage with it through its upvote counter and comment counter.

Flow 7 — Any persona switches the global theme

1. A persona — PC Builder, Build Browser, or Build Sharer — is anywhere in moon-pc, with the header theme toggle switch visible.
2. The persona operates the header toggle switch.
3. Observable result: the interface shifts from the default dark theme — black background with vibrant yellow accents on primary buttons, borders, and active states — to the light theme: a clean white background with purplish accents, Times New Roman 16-point bold headings, and Times New Roman 12-point body text. All card backgrounds and text colors invert seamlessly between the black/yellow and white/purplish themes.
4. Failure/recovery: if the theme cannot be fully applied, the interface remains legible and operable in its current presentation, and the toggle remains available.
5. Continuation: the persona continues their work — building, browsing, or contributing — in the newly active theme, and can toggle back at any time.

6. Visuals Colors and Theme

The visual direction is Precision instrument after MARQ — dark titanium ground, amber signal, condensed gauge type. The muse is MARQ by Garmin: a luxury instrument aesthetic. PC building is a spec-obsessive hobby for enthusiasts who read datasheets for fun — socket numbers, TDP, radiator clearance in millimetres. The emotional register is not "friendly SaaS"; it is the satisfaction of a rig that posts first try, plus the anxiety of a part that doesn't fit. This product is a measurement instrument, so it looks like one: dark, exact, and legible at a glance. The audience is 16–40, mostly male-skewed, desktop-first, deeply allergic to generic startup UI and to anything that looks like a template dashboard.

MARQ's language — dark titanium surfaces, ruled data rows, macro material detail, a single instrument accent, needle-sweep motion — is exactly the vocabulary of a compatibility checker. "Compatibility: No issues found" is a gauge reading, not a toast. The + Choose A Component rows are dial rows. The AI assistant is a technician's log. This muse also carries the user's explicit palette honestly: yellow becomes instrument amber on graphite rather than a bootstrap CTA, and the light theme becomes a clean white instrument face with a purplish accent, per the authoritative request.

Colour tokens — dark mode (default)

Dark theme is the default and the primary art direction: near-black #0B0B0C ground, graphite #16171A panels with 1px #2A2C31 hairlines. Vibrant yellow #FFD400 is the only signal colour — used for primary buttons, active row borders, focus rings, gauge needles and the count-up numerals, never as a large fill except the thin hazard rule and the status bar's left cap. Body text #EDEDEF on #0B0B0C (contrast ~17:1). Muted #8A8D93 for spec labels and metadata only, never for body copy.

Colour tokens — light mode (user-requested inversion)

Light theme: clean white background with purplish accents. Purple #7A3FF2 is used identically to the dark theme's amber — buttons, active borders, gauge needles.

Status green (constant in both modes)

Status bar green stays constant in both modes: #12D66B fill with #04120A text in dark, and #0FA85A fill with #FFFFFF text in light — always paired with the literal label Compatibility: No issues found so colour is never the only signal.

Typography

• Headings (dark theme): Saira Condensed 600/700, uppercase, tight 0.92 leading and 0.01em tracking — headlines read like engraving on a bezel.
• Headings (light theme, user-requested): Times New Roman, 16pt / 21px bold. Times New Roman is the requested brand font, so it is used as specified in light mode only, with the dark theme carrying the MARQ voice.
• Body: Barlow 400/500 at 16–17px with 1.6 leading, slightly wide 0.005em tracking for spec readability. In light theme, body text is Times New Roman 12pt / 16px.
• Data: prices, counts, socket names and part numbers use Barlow Condensed 600 with tabular numerals.
• Scale: 1.25 modular with a display jump — 48px mobile → 96px desktop hero, 32/40 section heads, 24 card titles, 21/16 Times New Roman in light theme, 17 body, 13 uppercase micro-labels with 0.14em tracking. Tabular numerals everywhere numbers appear.

Shape language

Instrument geometry: 2px radii on buttons and inputs (nothing pill-shaped), 4px on cards, 1px hairline rules that run the full column width like a machined seam. Circular gauge bezels (concentric 1px rings with a 2px amber arc) for the compatibility score, socket-fit and clearance meters. Ruled data rows with right-aligned values, like a watch spec sheet. Edge-to-edge component photography cropped square with a hard 1px border, never a soft drop shadow.

Layout

A 12-column grid with a hard 1px vertical rule down the page at the 8-column mark, so the builder reads as two instruments side by side. The hero is asymmetric: text block flush-left in columns 1–6, the floating component cluster occupying columns 7–12 and bleeding off the right edge. The builder puts the full-width compatibility banner directly beneath the header, then a 7-column component selection list (CPU, Cooler, Motherboard, Memory, Case as ruled rows) with the 5-column AI Hardware Assistant panel pinned to the right and sticky on desktop; at 768px and below the assistant drops below the list, and at 375px every row stacks label-over-value with the + Choose button full width. Suggested Builds is a 3/2/1 column grid of ruled cards; Completed Builds is a 2-column gallery at desktop with a component list rendered as a monospaced spec block beneath each rig photo.

Imagery

Macro, studio-lit hardware photography on the graphite ground: a CPU socket with visible pins, a radiator fin stack in raking light, a case fan's blade edge, an M.2 stick's gold contacts, a GPU backplate's brushed aluminium. No stock people, no clip art, no gradient blobs. Completed Builds use real user rig photos treated with a slight desaturation and a 1px hairline frame so they sit inside the instrument world rather than fighting it. Data graphics — clearance diagrams, socket pin maps, airflow arrows — are drawn as thin amber line art on graphite.

7. Signature Design Concept

The compatibility gauge as the hero's second subject.

The public entry is a full-viewport dark graphite field (#0B0B0C) with a faint 1px grid. The headline BUILD IT RIGHT THE FIRST TIME sits flush-left in Saira Condensed 600 uppercase, 48px at 375px growing to 96px at 1280px, set in three stacked lines that span the left six columns and are underlined by a single 2px amber rule that runs to the viewport edge. To its right, a 3D-ish cluster of floating hardware cut-outs — motherboard, GPU, case fan — arranged on an orbit path around an empty centre, each with a 1px hairline edge and a small amber corner tick, allowed to bleed off the right edge at desktop and to recede behind the headline at 375px.

Under the headline, flush-left, a solid amber #FFD400 Start Building button (2px radius, black 700 label) sits beside a live compatibility gauge: a 96px circular bezel with the needle sweeping and 0 ISSUES counting up. Directly below the fold line, three quick-start configuration cards in a ruled row, each a graphite panel with a 1px border, a component count in tabular numerals, and an estimated price. Nothing is centred; nothing floats on a gradient.

The gauge is the signature: a 96px circular bezel with concentric 1px rings, an amber needle that sweeps 0→100 on load, and tabular 0 ISSUES counting up beside it — the same gauge component reappears at 48px inside each Suggested Build card. This is the same instrument reading that the builder's full-width status banner delivers as Compatibility: No issues found: the hero shows the instrument at rest, the builder shows it live.

Supporting signature moves, all recompositions of accepted content:

• Ruled spec-sheet component rows: each of CPU, Cooler, Motherboard, Memory, Case is a full-width row with a hairline top rule, an uppercase 13px tracked label on the left, the chosen part in Barlow Condensed tabular numerals in the middle, and a right-aligned + Choose A CPU amber-outlined button that fills solid amber on selection.
• A full-width status banner that behaves like an instrument readout: solid #12D66B bar with black uppercase COMPATIBILITY: NO ISSUES FOUND, a left amber cap, and a right-side segment count 5/5 PARTS CHECKED in tabular numerals — it wipes in from the left rather than fading.
• The AI Hardware Assistant as a technician's log, not a chat bubble: monospace-style timestamped entries on graphite, USER and ASSISTANT as 11px uppercase tracked labels with amber and green ticks, the pre-populated Thermaltake Level 20MT mounting-bracket question and its clearance/socket answer rendered with an inline 1px line diagram of bracket-to-case clearance.
• Completed Builds as a gallery of hard-framed rig photos with a spec block beneath: the user's photo fills the card edge-to-edge with a 1px hairline, and under it the component list is set as a monospaced ruled table (part left, price right) with an amber upvote counter in tabular numerals — no hover-lift, just a hard image swap to a second angle.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the floating hardware cluster — motherboard, GPU, and case fan cut-outs arranged on an orbit path around an empty centre in columns 7–12 — paired with the 96px circular compatibility gauge bezel beside the Start Building button.
• Input → transformation → outcome thesis: on load, the orbit cluster settles into its path while the gauge needle sweeps from 0 to 100 once and the 0 ISSUES numeral counts up in amber beside it; the outcome is a single, complete instrument reading that states the product's promise — a build with no compatibility issues — before the visitor does anything.
• Motion vocabulary: restrained, mechanical. One purposeful loop on the hero: the compatibility gauge needle sweeps from 0 to 100 once on load with the numeral counting up in amber. Component rows get an instant 120ms amber left-border and a 1px rule that draws left-to-right on selection; the status banner's green fill wipes in from the left in 240ms with the label typing in behind it. Chat messages arrive with a 100ms slide-and-fade, no bounce. Hover on build cards swaps the case thumbnail for a second angle with a hard cut, no lift, no shadow growth.
• Composed first frame: dark graphite field with the faint 1px grid; the headline set flush-left in three stacked lines with its 2px amber underline running to the viewport edge; the hardware cluster already on its orbit path at the right; the amber Start Building button and the gauge bezel at rest at 0 with 0 ISSUES; the ruled quick-start card row below the fold line.
• Reduced-motion state: needle and counter snap to final value, banner fill appears instantly, all reveals become opacity-only. The hero remains a complete, legible static composition with the gauge at its final reading and every control fully operable.

9. Non-Functional Requirements

NFR-1 — Responsive across viewports (explicit) The frontend must be responsive. The layout adapts across viewport sizes: at 768px and below the AI Hardware Assistant panel drops below the component selection list, and at 375px every component row stacks label-over-value with the + Choose button full width. Rationale: the source explicitly requires a modern, responsive React frontend.

NFR-2 — React frontend (explicit) The frontend must be built with React. Rationale: the source explicitly specifies a React frontend.

NFR-3 — Default theme is dark (explicit) The default theme on load must be dark: black background with vibrant yellow accents for primary buttons, borders, and active states. Rationale: explicit hard constraint in the authoritative user evidence.

NFR-4 — Light theme specification (explicit) The light theme must use a clean white background with purplish accents and Times New Roman typography featuring 16-point bold headings and 12-point body text. Rationale: explicit hard constraint in the authoritative user evidence.

NFR-5 — Theme-dependent builder button color (explicit) Builder action buttons must be yellow in dark mode and purplish in light mode. Rationale: explicit hard constraint in the authoritative user evidence.

NFR-6 — Status banner styling (explicit) The compatibility status banner must be styled as a bright green bar. Rationale: explicit hard constraint in the authoritative user evidence.

NFR-7 — Pre-populated assistant chat (explicit) The AI Hardware Assistant chat must be pre-populated with a sample user query and a simulated AI response. Rationale: explicit hard constraint in the authoritative user evidence.

NFR-8 — Seamless theme inversion (explicit) All card backgrounds and text colors must invert seamlessly when switching between the black/yellow and white/purplish themes, without breaking layout or legibility. Rationale: explicit requirement in the authoritative user evidence.

NFR-9 — Readable text and controls stay whole at every viewport (required_inference) Headlines, wordmarks, labels, numbers, and cards' text and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element may cover any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut as the direction asks, as long as they cover no readable text or control. Rationale: indispensable for the responsive requirement to be usable at the stated viewports.

NFR-10 — Reduced-motion support (required_inference) With prefers-reduced-motion, the interface must provide a usable static arrangement: the gauge needle and counter snap to their final value, the status banner fill appears instantly, and all reveals become opacity-only. Rationale: indispensable for the restrained motion direction to remain usable for users who request reduced motion.

10. Tech Stack

• Frontend: React — explicitly specified by the user. The frontend must be modern and responsive.
• Typography: Saira Condensed (headings, dark theme), Barlow and Barlow Condensed (body and data, dark theme), Times New Roman (headings and body, light theme, as explicitly requested).
• Theming: a global theme system driven by the header toggle switch, with dark as the default and light as the full inversion.
• Storage, backend, and deployment: not specified by the user. No backend, database, or deployment technology is required by the current accepted scope, which is a React frontend experience. Any such choice is a presentation/technology default and must not introduce product behavior beyond the requirements above.

11. Assumptions and Constraints

Assumptions

• A-1 (required_inference) — The AI Hardware Assistant's pre-populated exchange is presented as specified: a sample user query about a specific CPU cooler mounting bracket fitting a Thermaltake Level 20MT case, followed by a simulated AI response confirming physical clearance and socket compatibility. No live model integration is assumed beyond presenting this exchange.
• A-2 (required_inference) — The build galleries present their specified card contents — Suggested Builds with case thumbnail, nested component icons, title, estimated price, and comment counter; Completed Builds with larger user-submitted rig photos, component lists, and upvote counters. The current scope covers presenting these galleries and their contents as specified.
• A-3 (required_inference) — The Build Sharer's contribution is the mechanism by which a finished rig with photos and a component list becomes an entry in the Completed Builds gallery with an upvote counter and a comment counter, as the gallery's contents require.
• A-4 (required_inference) — The design reference URL supplied by the user could not be loaded, so no structural, feature, or visual facts were verified from it. It remains a supplemental design reference only and contributes no requirement.
• A-5 (required_inference) — The light-theme screenshots and the design walkthrough video were not provided at the time of this document and contribute no verified facts.

Constraints

• C-1 (explicit) — Default theme must be dark: black background with vibrant yellow accents for primary buttons, borders, and active states.
• C-2 (explicit) — Light theme must use a clean white background with purplish accents and Times New Roman typography featuring 16-point bold headings and 12-point body text.
• C-3 (explicit) — Builder action buttons are yellow in dark mode and purplish in light mode.
• C-4 (explicit) — The compatibility status banner is styled as a bright green bar.
• C-5 (explicit) — The AI Hardware Assistant chat is pre-populated with a sample user query and a simulated AI response.
• C-6 (explicit) — The frontend is React and must be modern and responsive.
• C-7 (explicit) — The component selection list uses clean horizontal rows for CPU, Cooler, Motherboard, Memory, and Case, each with a + Choose A [Component] action button.
• C-8 (explicit) — The status banner spans full width above the component selection list.
• C-9 (explicit) — The AI Hardware Assistant chat panel is integrated beside the component list.
• C-10 (explicit) — All card backgrounds and text colors invert seamlessly when switching between the black/yellow and white/purplish themes.

12. Glossary

• moon-pc — The project name for the AI-powered PC Component Compatibility Assistant described in this document.
• PC Component Compatibility Assistant — The product: a React frontend that lets a user assemble a PC part list and see whether the chosen parts are compatible.
• Component selection list — The structured list in the Main Builder Interface with clean horizontal rows for CPU, Cooler, Motherboard, Memory, and Case.
• + Choose A [Component] — The simple action button on each component row that opens the choice for that row; yellow in dark mode, purplish in light mode.
• Compatibility status banner — The prominent, full-width banner above the component selection list that indicates system health, styled like a bright green Compatibility: No issues found bar.
• AI Hardware Assistant — The dedicated chat panel integrated beside the component list, pre-populated with a sample user query and a simulated AI response.
• Thermaltake Level 20MT — The specific PC case named in the pre-populated sample query about CPU cooler mounting bracket fit.
• CPU cooler mounting bracket — The part named in the pre-populated sample query; the simulated AI response confirms its physical clearance and socket compatibility with the Thermaltake Level 20MT case.
• Suggested Builds — The section presenting a grid of structurally clean cards, each with a PC case thumbnail image, smaller nested component icons, a brief title, an estimated price, and a comment counter.
• Completed Builds — The secondary grid showcasing larger user-submitted photos of custom PC rigs, component lists, and upvote counters.
• Quick-start configuration cards — The cards positioned directly below the hero that offer a starting configuration.

• Global theme toggle — The header toggle switch that shifts the interface between the dark theme (black background, vibrant yellow accents) and the light theme (clean white background, purplish accents).
• Dark theme — The default theme: black background with vibrant yellow accents for primary buttons, borders, and active states.
• Light theme — The alternate theme: clean white background with purplish accents, Times New Roman 16-point bold headings and 12-point body text.
• Upvote counter — The counter shown on Completed Builds entries.
• Comment counter — The counter shown on Suggested Builds cards and alongside Completed Builds entries.