fierce-start is a single-page calculator: one page, one object, one job. A person opens the page, enters numbers and operations, and reads the computed result. There is no account, no setup, no navigation, and no second screen.
The product intent is deliberately narrow. The authoritative requirement is to "build a simple single page of claculator" — a basic arithmetic calculator delivered as exactly one page. Everything in this document serves that single page and nothing beyond it.
The audience is anyone who needs quick arithmetic: a student checking homework, a shopper totalling a basket, a freelancer estimating an hourly rate, someone working out a tip. The page must work as naturally at 375px in one hand as at 1280px in one glance, and it must feel like a small desirable object rather than a clinical form.
fierce-start is delivered as a single custom page, Calculator, which is the public entry surface of the product. The page owns number entry, operation entry, computation, and result display. It is reachable directly with no access gate: there is no sign-in, no account, no invitation, and no persisted identity of any kind.
Actors. One accepted human persona exists: the Calculator User. There are no other human roles, no administrators, no reviewers, and no counterparties. No system, provider, or external service is an accepted actor in the current product; computation happens in the page itself.
Accepted behavior. The Calculator User enters digits and operators, clears or corrects the current entry, and reads the result shown in the display. The page computes basic arithmetic and shows the outcome. That is the complete current scope.
Ownership. The Calculator page is application-owned custom UI. No provider surface, no external destination, and no separate system process owns any accepted human-facing behavior.
Exclusions. The product is a single page and simple in scope. There is no multi-page navigation, no account or profile management, no saved or synced history across sessions, no scientific or programmer calculator modes, no unit conversion, no currency conversion, no graphing, and no sharing or export. Calculation history appears only as an in-page record of what has been computed during the current visit, as described in the creative direction; it is not a durable, account-bound, or cross-session feature.
fierce-start is a first-party, browser-delivered single page. The Calculator page is public and anonymous: opening it is the entire access story. Because no accepted behavior requires a person to be recognized, to resume private state, or to have a commitment or value transfer bound to them, no identity establishment, verification, or session continuity is introduced. Adding any of that would be adjacent capability the source did not accept.
The current delivery horizon contains exactly one page and the arithmetic behavior on it. Nothing in this document is deferred to a future release; the future section records only ideas that were not accepted and therefore are not built.
Not applicable. No reference directive in this project declares content_source, so no source content inventory is produced.
The single page of the product, and its public entry surface. It presents the calculator as a physical object floating on a warm pink field, with the wordmark and calculation history in a right-hand rail at desktop widths.
Information and state
Primary actions
Supporting actions
Domain entities
Component responsibilities
States
FR-1 — Open the calculator page As a Calculator User, I should open the calculator page directly and immediately see a working calculator, so that I can start arithmetic without any setup.
FR-2 — Enter digits and a decimal point As a Calculator User, I should press digit keys and a decimal point to build the number I want to calculate with, so that I can enter any value I need.
FR-3 — Enter an operator As a Calculator User, I should press an operator key to choose addition, subtraction, multiplication, or division, so that I can build the expression I want evaluated.
FR-4 — Evaluate the expression As a Calculator User, I should press the equals key to compute the result of my expression, so that I can see the answer.
FR-5 — Clear the current calculation As a Calculator User, I should press AC to clear the expression and result, so that I can start a fresh calculation.
FR-6 — Recover from an undefined operation As a Calculator User, I should see a clear error indication when my expression cannot be evaluated, so that I understand what happened and can continue.
FR-7 — Adjust the current operand with sign and percent As a Calculator User, I should press ± to change the sign of the current operand and % to convert it to a percentage, so that I can handle negative values and percentage calculations without retyping.
FR-8 — Read the expression and result As a Calculator User, I should read the expression and the large result in the display hood at any time, so that I always know what I have entered and what the answer is.
FR-9 — Review the current visit's calculation history As a Calculator User, I should see the calculations I have completed during this visit as capsule chips, so that I can refer back to a previous expression and its result.
FR-10 — Continue calculating from a result As a Calculator User, I should be able to keep calculating from a displayed result by entering a new operator or digit, so that I can chain calculations without re-entering the answer.
Product context. The Calculator User is anyone who arrives at fierce-start needing a quick answer: a student checking a homework total, a shopper adding up a basket, a freelancer working out an hourly rate, someone splitting a bill or estimating a tip. They arrive with a number problem already in mind and no patience for anything between them and the answer. They may be holding a phone in one hand at 375px or glancing at a desktop at 1280px.
Primary goal. Enter an arithmetic expression and read the correct result, quickly, on the first attempt, without setup.
Distinct accepted responsibilities. The Calculator User is the sole human actor and carries every human-facing responsibility in the product: opening the page, entering digits and a decimal point, choosing an operator, evaluating with equals, clearing with AC, adjusting the current operand with ± and %, reading the expression and result, reviewing the current visit's history chips, and continuing from a displayed result. No other human role exists, and no responsibility is delegated to a system, provider, or external service.
Relevant inputs and decisions. The user's inputs are key presses: digits, decimal point, operators, equals, AC, ±, and %. Their decisions are which operand to enter, which operator to apply, when to evaluate, and whether to clear and start over or continue from the result.
Interactions with other accepted participants. None. There is no counterparty, approver, recipient, or beneficiary in the accepted product. The only interaction is between the Calculator User and the page itself.
Observable success. The display hood shows the correct result for the entered expression, right-aligned and fully legible; the completed calculation appears as a history chip; and the user can immediately continue with a new operator or digit. Failure is visible as an error indication for an undefined operation, from which AC or a new key press restores normal entry.
Constraints carried from source. The user needs no account, no configuration, and no prior state. The page must remain usable at 375px with one-hand thumb reach and at 1280px with a single glance, and every key must be at least 64px tall.
The creative direction is authoritative for this section. The muse is Karim Rashid, and the headline idea is sensual pop minimalism for a calculator that feels like a toy you keep on your desk — a small everyday object that is optimistic, tactile, and a little indulgent, rather than a clinical tool.
Light mode
| Role | Hex | Usage |
|---|---|---|
| Background | #FFE9F2 | Warm bubblegum-pink ground covering the whole page |
| Surface | #FFFFFF | Glossy white calculator body and display hood |
| Text | #1A0E14 | Ink-plum for all readable text and digits (≈17:1 on white, ≈12:1 on pink ground) |
| Primary | #FF2E88 | Hot pink: equals key, brand mark, display hood, focus rings |
| Accent | #B7FF3C | Acid lime: operator keys (+, −, ×, ÷) and active-state glow only |
| Muted | #8A6E7A | Muted mauve: secondary labels (AC, ±, %, memory) and hairlines |
Proportion: pink ground 55%, white body 30%, pink primary 8%, lime accent 5%, ink 2%.
Prohibited: blue or indigo anywhere — no #0057FF, #2563EB, #6366F1, no bootstrap-blue buttons, no blue focus rings. Focus rings are hot pink. No gradient-blob heroes, no frosted-glass panels, no mesh gradients; the ground is a flat pink field with a dot lattice.
clamp(40px, 8vw, 76px); wordmark clamp(22px, 3vw, 34px); section label 13px; key label clamp(20px, 4.5vw, 26px); helper 14px; history rows 15px in a mono-ish face.Capsule and blob geometry throughout. The calculator body is a 44px-radius white slab with a soft 24px offset shadow in rgba(255,46,136,0.18) sitting on the pink ground. The display hood is a curved lip — a white panel whose bottom edge sweeps into a 60px concave curve, like the underside of a pebble. Every key is a full capsule (border-radius: 999px) with a 1px inner highlight along its top edge and a 2px bottom lip in a darker shade of its own fill, giving the candy-gloss read. The equals key is a wide pink capsule spanning two columns; the operator column is lime. Section boundaries on the page are drawn as large-radius arcs, never straight rules. Straight-edged rectangular keys and hairline grey dividers are prohibited.
One centred column, 375px to 1280px.
All key hit targets are at least 64px tall at every viewport, and the grid never reflows into two columns of keys.
No photography and no stock people. The imagery is the calculator itself plus glossy 3D props: three soft-shaded blob shapes in pink, lime, and white floating behind the body at 60% opacity, a curved lime swoosh echoing the display hood's lip, and a chunky 3D percent sign resting near the history panel. Props are cropped and bled off the right and bottom edges of the viewport at desktop; at 375px only the lime swoosh remains, tucked behind the body. All props sit behind the calculator body in z-order and never overlap digits, labels, or controls.
The calculator is the composition. The first screen is a flat pink colour field (#FFE9F2) with a faint dot lattice, and the calculator itself is the hero: a glossy white capsule-cornered slab, roughly 420px wide at desktop, floating left-of-centre with a soft pink offset shadow. Above the key grid, a curved white display hood shows a right-aligned expression and a large Comfortaa result at clamp(40px, 76px). To the right, a tall column carries the wordmark FIERCE-START in hot pink at clamp(22px, 34px), a single line of Quicksand helper text, and a vertical stack of capsule history chips in lime and white. Three glossy blobs and a lime swoosh bleed off the right and bottom edges behind the body.
There is no centred headline, no subtext, no blue button, and no gradient blob — the object is the composition. The gesture that carries the concept is the concave display hood sweeping into the key grid, and the candy-capsule keys with their top highlight and bottom lip, which make the grid read as moulded plastic rather than flat rectangles. This concept recomposes only accepted content, states, and controls: the expression, the result, the key grid, the wordmark, and the history chips.
Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d
cubic-bezier(0.34, 1.56, 0.64, 1) return, and a glossy highlight sweeps once across the key face; the result in the display hood then morphs with a 180ms crossfade and a 2px upward slide. Digits never scramble or roll. The outcome is that arithmetic feels like pressing a physical object.NFR-1 — Single-page delivery. The product is exactly one page. No routing, navigation, or additional screens are introduced. (Provenance: explicit — "build a simple single page of claculator"; page count constraint of 1.)
NFR-2 — Simple scope. The calculator performs basic arithmetic only. Scientific functions, programmer modes, unit or currency conversion, graphing, and sharing are out of scope. (Provenance: explicit — "the calculator is simple in scope".)
NFR-3 — No access gate. The Calculator page is publicly reachable with no sign-in, account, invitation, or configuration. (Provenance: required_inference — no accepted behavior requires identity continuity.)
NFR-4 — Responsive legibility. Readable text and controls stay whole at 375px, 768px, and 1280px: the wordmark, labels, digits, expression, result, and every key remain entirely inside the viewport and their container, wrapping or scaling with clamp() to fit, and no other element covers any part of them. Imagery, decoration, and motion may be cropped, bled, rotated, or overlapped as the creative direction asks, provided they cover no readable text or control. (Provenance: explicit — creative direction readability rule.)
NFR-5 — Touch target size. Every key is at least 64px tall at every viewport, and the key grid never reflows into two columns. (Provenance: explicit — creative direction layout rule.)
NFR-6 — Reduced motion. With prefers-reduced-motion, all transforms resolve instantly, the dot lattice stops, and history renders as a static wrapped list that remains fully readable. (Provenance: explicit — creative direction motion rule.)
NFR-7 — Colour contrast. Readable text uses ink-plum #1A0E14 on white (≈17:1) and on the pink ground (≈12:1). Focus rings are hot pink, never blue. (Provenance: explicit — creative direction palette rule.)
NFR-8 — No persistence of user data. The calculation history is scoped to the current visit and is not persisted, synced, or bound to any identity. (Provenance: required_inference — no accepted behavior requires durable storage.)
clamp() for the type scale, and border-radius: 999px capsule geometry. No CSS framework that would impose a blue-on-white default look.docker-compose.yml with a single frontend service serving the built static assets is sufficient. No additional backend, worker, or ingress service is introduced, because no accepted behavior requires server-side processing or storage.Assumptions
[Default — not specified by user] The calculator uses standard operator precedence when evaluating an expression containing more than one operator.[Default — not specified by user] The decimal point uses the . character.[Default — not specified by user] Division by zero and other undefined operations surface as an error indication in the display hood rather than a numeric result.[Default — not specified by user] The calculation history is retained for the current visit only and is cleared on reload.[Default — not specified by user] The page is delivered as a browser-based single-page application.Constraints
border-radius: 999px) with a 1px top inner highlight and a 2px darker bottom lip.#FFE9F2 colour field with a faint dot lattice that covers the whole page.prefers-reduced-motion state in which all transforms resolve instantly, the lattice stops, and history renders as a static wrapped list.
This visit — 3 calculations
Quick arithmetic, kept pretty — every calculation you finish this visit lands here.
This visit

This visit — 3 calculations
Quick arithmetic, kept pretty — every calculation you finish this visit lands here.
This visit
No comments yet. Be the first!