math-science-homework is a web application that helps students with math and science homework. A student brings a homework problem — algebra, chemistry, physics, or similar — and the app returns a step-by-step explanation of how the problem is solved, so the student understands the method rather than only receiving a final answer.
The product intent is comprehension, not answer delivery. The app exists so that a student working alone at night on an algebra, chemistry, or physics problem can follow a legible, ordered method: the problem statement and its given data stay visible while the numbered solution steps advance, and each step is labelled, sequenced, and checkable.
The audience is any student — not only the original requester. Any student can create their own account, return later, and resume getting homework help. The product is delivered as a first-party web application with application-owned identity, a public landing surface, a self-service identity surface, and a protected homework-help workspace.
math-science-homework is a browser-delivered web application. It has three current pages:
Actors. The only active human actor is the Student. The application itself owns identity, session continuity, problem intake, and the generation and presentation of step-by-step explanations. There are no other human roles, no instructors, no administrators, and no differentiated permission tiers: every signed-in student has the same access to the same product behavior over their own work.
Accepted behavior. A student can (a) learn what the app is from the public entry, (b) create their own account, (c) verify their identity on return, (d) submit a math or science homework problem, (e) receive a step-by-step explanation that shows the method, and (f) keep the problem statement, given data, and units in view while working through the steps.
Exclusions. This document does not add grading, class rosters, teacher dashboards, social or sharing features, cross-device sync, payment, or content-authoring tools. Nothing in the accepted requirement thread asks for them.
Delivery. The product is a first-party web application. The student interacts with custom pages owned by the application; there is no provider-owned or external-only surface in the current scope, and no headless-only delivery.
Access ownership. Identity is application-owned. The Landing page is anonymously reachable and carries no protected state. The Login page is anonymously reachable because a student who has no account yet must be able to create one, and a returning student who is not yet verified must be able to verify — a protected destination cannot own the interaction that establishes access to itself. Homework Help is protected: it requires a verified student identity, because a student's submitted problems and their step-by-step explanations are durable, student-specific work that must remain bound to the correct student and be resumable on return.
Current vs. future. Everything described in sections 2 through 5 is current. No future-horizon requirements were accepted in the authoritative thread; section 11 records the narrow assumptions that hold the current scope together.
No reference directive in this project declares content_source authority, so no source content inventory is included.
FR-1 — Understand what the app is before signing in As a Student, I should be able to read what math-science-homework does, who it is for, and how it helps me, before I create an account, so that I can decide whether to use it.
explicit (product purpose and audience) with required_inference for the anonymous public entry surface.FR-2 — Create my own account As a Student, I should be able to create my own account, so that I can begin using the product without needing an invitation or an administrator.
required_inference (indispensable prerequisite for the accepted current journey; self-service chosen because the audience is any student and no source establishes invitation, provisioning, or deployment bootstrap).FR-3 — Verify my identity to resume homework help As a returning Student, I should be able to verify my identity, so that I can get back to my homework help.
required_inference (indispensable for resuming durable, student-specific work).FR-4 — Submit a math or science homework problem As a Student, I should be able to submit a math or science homework problem, so that I can get help with the assignment I am working on.
explicit.FR-5 — Receive a step-by-step explanation, not just an answer As a Student, I should receive a step-by-step explanation of my problem, so that I understand the steps and can complete the problem myself rather than only copying a final answer.
explicit.FR-6 — Keep the question in view while working through the method As a Student, I should keep the problem statement, its given data, and its units in view while I move through the solution steps, so that I never lose sight of what I am solving.
explicit (the app must help the student understand the steps of a problem) with required_inference for the pinned-rail mechanics that make the method followable.FR-7 — Mark a step to check As a Student, I should be able to mark a step as one to check, so that I can flag the part of the method I am unsure about and come back to it.
explicit (the creative direction's accepted "check this" category signal) — the check affordance is part of the accepted presentation of a solution.FR-8 — Start another problem As a Student, I should be able to start another problem, so that I can keep working through my homework without leaving the product.
required_inference (continuation of the accepted core journey).Product context. The Student is any student — the requester and every other student like them — working on math and science homework, typically alone, often at night, on algebra, chemistry, or physics problems. They are frequently confused and sometimes anxious about the material, and they need clarity and authority rather than playfulness. They arrive with a specific problem in front of them and a deadline behind it.
Primary goal. To understand the steps of the problem in front of them well enough to complete the assignment themselves — not merely to obtain a final answer to copy.
Distinct accepted responsibilities.
Relevant inputs and decisions. The problem statement and its given data; the subject category (math or science); which step they are unsure about; whether to retry a problem that failed to produce an explanation or to edit and resubmit it.
Interactions with other accepted participants. The Student is the only active human actor. Their work is mediated entirely by the application: the application owns their identity, holds their submitted problem, produces the step-by-step explanation, and presents the method. There is no instructor, grader, or peer in the current scope.
Observable success. The Student reaches a numbered, rule-separated explanation whose steps they can follow, with the original problem statement, given data, and units still visible beside it, and they can complete the problem themselves. On return, they verify their identity and get back to their homework help.
What makes this role distinct. The Student is simultaneously the requester of help and the person who must do the understanding. Every accepted behavior is shaped by that: the product must show method rather than output, must keep the question visible while the method advances, and must let the student flag the part they are unsure of — none of which would be true of a role that only wanted answers or that was accountable for someone else's learning.
The creative direction is authoritative for this section. Muse: Josef Müller-Brockmann; headline: Swiss geometric rigour for the blackboard of the web.
Mode. Light mode only.
Colour tokens by role.
| Token | Hex | Role |
|---|---|---|
--bg | #F4F2ED | Warm paper-white ground; the page background |
--surface | #FFFFFF | True white solution cards — the only raised surface |
--text | #111111 | All type and rules |
--primary | #111111 | Primary actions and rules |
--accent | #E1341E | Vermilion — the single signal colour: active step, submit action, current-line underline, the unknown in a diagram |
--muted | #8A867C | Metadata, units, timestamps |
--cat-math | #1B4FD8 | Math category chip only |
--cat-science | #0F8A5F | Science category chip only |
--cat-check | #E8B21A | "Check this" chip only |
The category colours appear only as 4px category tabs and step-number chips — never as large fills. No gradients anywhere. The generic indigo/blue-on-white SaaS template is forbidden for this project; blue is only the math category chip.
Typography. Headings and body both in Archivo.
-0.02em.0.14em tracking.clamp() so display steps down to 40 / 32px on mobile.Shape language. Hard edges, zero border-radius on every container, button, and input. Geometry is the content: circles, quarter-circles, and ruled rectangles drawn in black hairline or solid vermilion. Rules are 1px at full column width. The only thick element is the 6px vermilion bar marking the active step. Everything aligns to a visible 12-column grid with 24px gutters, and grid lines are sometimes printed faintly on the surface.
Layout. A strict 12-column modular grid, asymmetric: a 3-column left rail holds the problem statement, units, and given data; the 9-column right field holds the numbered solution steps. Step blocks are separated by full-bleed 1px rules, not cards. On the landing page the grid is exposed and labelled in the margin ("col 1–3: the problem", "col 4–12: the method"). Mobile collapses to a single column with the step-number chip pinned to the left edge of each step.
Spacing rhythm. 24px gutters; full-bleed 1px rules as the primary separator; generous vertical rhythm between step blocks so each reads as a sheet of paper on a desk.
Imagery style. No photography, no illustration. Imagery is diagrammatic: axis-and-vector line drawings, free-body diagrams, molecule skeletons, unit-circle arcs, and periodic-table cells drawn as pure geometry in black with one vermilion element showing the unknown. Every diagram is cropped to the grid and flush-left with the text it explains.
Readable text and controls. Headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, with no other element covering any part of them. Imagery, decoration, and motion may be cropped, bled, rotated, overlapped, or cut as the direction asks, provided they cover no readable text or control.
The poster that is also a worked solution.
The public entry is a full-viewport asymmetric composition on warm paper-white (#F4F2ED), built on the exposed 12-column grid.
clamp(40px, 9vw, 88px), flush-left, tight tracking, reading "SHOW ME / THE STEPS." The second line is indented to column 5, so the two lines bracket the white space between them — the gap is part of the composition, not leftover margin.The concept recomposes only accepted content and controls: the problem statement, the given data, the method preview, the category chips, and the entry action. It introduces no new behavior, page, or destination.
Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: flat
Landing Hero Motion Brief.
prefers-reduced-motion, the composition renders as a static poster: no slide-in, no wipe, no scroll-linked pinning. The method preview wraps into rows so every step is fully readable, and the entry control remains reachable and whole.No user-requested 3D/WebGL scene exists for this project, and the direction's hero dimensionality is flat, so no Canvas/R3F/Drei hero is required.
explicit (creative direction). Rationale: a student reading a worked solution on a phone at night must be able to read every step and reach every control.prefers-reduced-motion, the product provides a usable static arrangement: step blocks appear without slide-in, the active-step bar does not wipe, scroll-linked pinning is disabled, and any row of items wraps or scrolls so each item can be brought fully into view. Provenance: explicit (creative direction). Rationale: motion is presentational here, never load-bearing.explicit (creative direction). Rationale: the grid is the shape.required_inference. Rationale: the accepted journey requires a returning student to resume their homework help, which is only meaningful if the work remains bound to the correct participant.explicit boundary (no accepted requirement asks for it; the only persistence skill offered is explicitly local and states "No authentication or cross-device sync"). Rationale: keeps the current scope honest.explicit (creative direction's motion vocabulary). Rationale: the student should be able to begin reading the method as it arrives.No technology choices were specified by the user. The following are coherent defaults for the accepted scope, labeled as defaults.
[Default — not specified by user][Default — not specified by user][Default — not specified by user][Default — not specified by user]docker-compose.yml for the frontend, backend, and database. [Default — not specified by user][Default — not specified by user]required_inference.required_inference.#E1341E, the single signal colour: active step, submit action, current-line underline, and the unknown in a diagram.No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No comments yet. Be the first!