System Requirements Document for arctic-calculator

1. Introduction

arctic-calculator is a simple calculator delivered as a single page design. The product intent is narrow and complete: a visitor opens one page, enters numbers and arithmetic operators, sees the current entry and the computed result, and can clear the calculator to start a new calculation. There is no account, no navigation, no dashboard, and no marketing surface — the calculator itself is the entire product.

The audience is the everyday visitor who needs quick, accurate arithmetic from one self-contained page. The page is anonymous and public: anyone who reaches it can compute immediately, and nothing about the calculation is retained or tied to an identity.

This document is the System Requirements Document for arctic-calculator. It specifies the single page, its components and states, the calculator user's requirements and journeys, and the visual and interaction direction that governs how the page is built.

2. System Overview

arctic-calculator is a single-page, client-side calculator. The page presents a calculator slab containing a display panel and a keypad. The visitor enters digits and arithmetic operators, the display shows the current entry, and on evaluation the display shows the computed result. A clear control resets the calculator to a fresh state.

Actors

• Calculator user (active human persona): the anonymous visitor who performs arithmetic on the page.
• Calculator page (application-owned custom page): the single first-party surface that hosts all entry, display, evaluation, and clearing behavior.

Accepted behavior

• Digit and operator entry to build an arithmetic expression.
• Display of the current entry and the computed result.
• Clearing the calculator to start a new calculation.

Ownership and delivery

All accepted behavior lives on the one Calculator page, owned by the application and reachable anonymously. Calculation is performed in the browser; there is no server-side calculation service, no persistence, and no identity.

Exclusions

• No additional pages, routes, or navigation.
• No user accounts, sign-in, or saved history.
• No scientific, programmer, or unit-conversion modes beyond the arithmetic entry, result display, and clearing described here.

Removed from scope

• None. No concept was explicitly removed by the user.

2a. Product Interpretation and Delivery Boundary

The user asked for "a simple single page design of the calculator." That instruction is both the product scope and the delivery boundary: exactly one page, and that page is the calculator. The page is public and anonymous — a visitor lands on it and can compute immediately, with no gate, no onboarding, and no identity establishment. Because no calculation state needs to survive a visit or belong to a particular person, no application-owned identity is introduced.

Everything the product does happens on the Calculator page: entry, display, evaluation, and clearing. There is no future horizon stated by the user, and no adjacent capability (history, memory keys, conversion, sharing) is accepted. The visual direction treats the calculator as a single machined object on a quiet ground; that direction shapes presentation only and adds no behavior.

2c. Page Content and Component Coverage

Calculator

The single page of the product. It is anonymously reachable and hosts the entire calculator: a small uppercase label, a light wordmark, the calculator slab (display panel plus keypad), a closing hairline rule, and a quiet line of micro-copy. All content aligns to the slab's left edge.

Information and state

• Current entry: the digits and operators the user has entered so far, shown in the display panel.
• Computed result: the evaluated value, shown in the display panel after the user evaluates the expression.
• Result indicator: the display's hairline underline turns arctic-teal only when a result exists; otherwise it stays neutral.
• Active operator: the arithmetic operator currently in effect is the sole arctic-teal key surface.
• Fresh state: on first load and after clearing, the display shows an initial zero entry and no result.

Primary actions

• Press digit keys (0–9) to append digits to the current entry.
• Press arithmetic operator keys (add, subtract, multiply, divide) to set the operation.
• Press the equals key to evaluate the expression and show the result.
• Press the clear key to reset the calculator to the fresh state.

Supporting actions

• Press the decimal point key to begin a fractional entry.
• Press the active operator key again to change the pending operator before evaluation.

Domain entities

• Expression: the sequence of operands and operators currently being built.
• Operand: a numeric value entered by the user.
• Operator: one of add, subtract, multiply, divide.
• Result: the numeric outcome of evaluating the expression.

Component responsibilities

• Micro-label: a small uppercase "CALCULATOR" label above the wordmark, left-aligned to the slab edge.
• Wordmark: a large light wordmark naming the product, left-aligned to the slab edge.
• Calculator slab: a white squircle body with a 1px hairline edge and a soft top-light gradient, floating on the aluminium-white ground.
• Display panel: a flush inset panel at the top of the slab holding the oversized tabular numeral, flush-left, with a hairline underline that turns arctic-teal when a result exists.
• Keypad: a grid of gently recessed pill keys — graphite digit and function keys, with the active arithmetic operator as the single arctic-teal key.
• Closing rule and micro-copy: a single hairline rule below the slab and one quiet line of micro-copy, sharing the slab's left edge.

States

• Loading: the slab fades and lifts 8px into place on load (600ms, cubic-bezier(0.22,1,0.36,1)); with prefers-reduced-motion the slab appears instantly with no lift.
• Empty / fresh: display shows the initial zero entry, no result, neutral underline, no active operator highlighted.
• Entry in progress: display shows the current entry; the active operator key is teal.
• Success: display shows the computed result; the underline is arctic-teal.
• Error: if the expression cannot be evaluated (for example division by zero), the display shows an error indication instead of a numeric result; the user recovers by pressing clear and starting a new calculation.
• Recovery: pressing clear from any state returns the calculator to the fresh state.

3. Functional Requirements

FR-1 — Single-page calculator delivery (explicit) As a Calculator user, I should reach the calculator on a single page, so that I can compute without navigating anywhere else.

• Trigger: the visitor opens the product.
• Observable result: the Calculator page loads with the calculator slab, display, and keypad visible.
• Access: anonymous; no identity required.
• Failure/recovery: if the page fails to load, reloading the page restores the calculator.
• Continuation: the user proceeds to enter numbers and operators.

FR-2 — Number and operator entry (explicit) As a Calculator user, I should enter numbers and arithmetic operators, so that I can build the calculation I want.

• Trigger: the user presses digit keys, the decimal point key, and arithmetic operator keys.
• Observable result: the display shows the current entry, and the active operator key is highlighted in arctic-teal.
• Access: anonymous.
• Failure/recovery: pressing the active operator again changes the pending operator; pressing clear resets the entry.
• Continuation: the user presses equals to evaluate.

FR-3 — Display of current entry and computed result (explicit) As a Calculator user, I should see the current entry and the computed result on the page, so that I can confirm what I have entered and what the answer is.

• Trigger: any entry or evaluation action.
• Observable result: the display panel shows the current entry while entering and the computed result after evaluation; the underline turns arctic-teal when a result exists.
• Access: anonymous.
• Failure/recovery: an unevaluable expression shows an error indication; clear recovers.
• Continuation: the user reads the result or continues entering.

FR-4 — Clear to start a new calculation (explicit) As a Calculator user, I should clear the calculator, so that I can start a new calculation from a fresh state.

• Trigger: the user presses the clear key.
• Observable result: the display returns to the initial zero entry, the result and teal underline are removed, and no operator is active.
• Access: anonymous.
• Failure/recovery: clear works from any state, including after an error.
• Continuation: the user begins a new entry.

4. User Personas

Calculator user

Product context. The Calculator user is an anonymous visitor who arrives at the single page needing everyday arithmetic — a quick sum, a product, a division — and wants the answer without ceremony. They did not sign up, are not signed in, and expect nothing to be remembered after they leave.

Primary goal. Get an accurate result from one self-contained page as quickly as possible.

Distinct accepted responsibilities.

• Enter numbers and arithmetic operators to build an expression.
• Read the current entry and the computed result on the display.
• Clear the calculator to start a new calculation.

Relevant inputs and decisions. The user decides which digits and operators to enter, when to evaluate with equals, and when to clear. They read the display to confirm their entry and the result.

Interactions with other participants. The Calculator user is the only human participant. The Calculator page is the application-owned surface that responds to every action; there is no counterparty, recipient, or approver.

Observable success. The display shows the correct computed result for the entered expression, and the user can clear and begin again at any time.

5. Core User Flows

Flow 1 — Perform a calculation

1. The Calculator user opens the product and lands on the Calculator page (anonymous; no sign-in).
2. The calculator slab fades and lifts into place; the display shows the initial zero entry with a neutral underline.
3. The user presses digit keys to enter the first operand; the display shows the current entry.
4. The user presses an arithmetic operator key; that key becomes the sole arctic-teal surface, indicating the active operator.
5. The user presses digit keys to enter the second operand; the display updates.
6. The user presses equals; the display shows the computed result and the underline turns arctic-teal.
7. The user reads the result. To continue, they either enter a new operator to build on the result or press clear to start fresh.

Failure/recovery. If the expression cannot be evaluated (for example division by zero), the display shows an error indication instead of a result. The user presses clear, the calculator returns to the fresh state, and they begin a new calculation.

Flow 2 — Clear and start a new calculation

1. From any state on the Calculator page — mid-entry, after a result, or after an error — the user presses the clear key.
2. The display returns to the initial zero entry, the result and teal underline are removed, and no operator is active.
3. The user begins a new entry, following Flow 1 from step 3.

Flow 3 — Change the pending operator before evaluating

1. On the Calculator page, the user has entered a first operand and pressed an operator.
2. The user presses a different arithmetic operator key before pressing equals.
3. The newly pressed operator becomes the active arctic-teal key, replacing the previous one.
4. The user continues entering the second operand and evaluates with equals.

6. Visuals Colors and Theme

The direction is Quiet precision after Jony Ive — a calculator machined from one block of light. The calculator is the hero; there is no marketing composition.

Palette (light mode)

Contrast: #1C1E20 on #FFFFFF and #FFFFFF on #2B2F33 both pass AA.

Typography

• Headings and body: Inter Tight.
• Wordmark and section label: Light 300, tight tracking (-0.03em), sentence case.
• Numerals: tabular lining figures at 200–300 weight, so the display reads like an engraved instrument readout.
• Labels: 500 weight, 11px, uppercase, 0.14em tracking.
• Scale: 1.25 modular on a 4-pt rhythm — display numerals clamp(56px, 12vw, 128px); wordmark clamp(28px, 5vw, 44px); body 16/1.6; key glyphs clamp(20px, 3.2vw, 26px); micro-labels 11px.

Shape language

• Soft continuous-curve radii: 22–28px on the slab body, 14px on keys.
• Zero hard shadows; depth comes from a single 1px hairline and a faint 0 1px 2px rgba(28,30,32,0.06).
• Keys are gently recessed pills; the display is a flush inset panel with no border, only a hairline divider.

Layout

• Single-column, product-first: a narrow 9-column centered stage (max 520px) holds the calculator as a floating white slab on the aluminium ground, with ~14vh top margin.
• Above the slab: a small uppercase "CALCULATOR" label and a large light wordmark, left-aligned to the slab edge.
• Below the slab: a single hairline rule and a quiet line of micro-copy.
• Everything aligns to the slab's left edge — no centered headline stack, no feature grid, no cards.

Imagery

No photography and no illustration. The only "image" is the calculator itself, treated as a studio-lit object: a soft top-light gradient (white → #F4F5F6) on the slab face, a hairline edge, and an inset display panel. Optional macro detail: a 1px engraved rule and a single arctic-teal tick on the active operator key.

7. Signature Design Concept

The public entry is a single studio-lit calculator slab, not a marketing hero. The white calculator body, roughly 340px wide on desktop, sits vertically centred in a 14vh top margin on an aluminium-white field. The display panel at its top holds an oversized tabular numeral (clamp(56px, 12vw, 128px)) in graphite, flush-left, with a hairline underline that turns arctic-teal only when a result is computed. A small uppercase "CALCULATOR" label and a light 44px wordmark sit left-aligned above the slab. There is no centered headline, no subtext block, and no button — the keypad is the call to action. The only colour on screen is the single teal operator key, which reads as a lit instrument indicator against graphite keys.

Signature moves carried into the build:

• A calculator rendered as a single machined object: one white squircle slab on an aluminium-white ground with a 1px hairline edge and a soft top-light gradient, floating in a 14vh top margin — no surrounding chrome.
• An oversized flush display: tabular numerals at clamp(56px, 12vw, 128px) in graphite, flush-left inside an inset panel with a hairline underline that switches to arctic-teal #0E7C86 only when a result exists.
• A single lit operator key: every digit and function key is graphite #2B2F33, but the active arithmetic operator is the sole arctic-teal surface — the one colour event on the page.
• Left-edge alignment discipline: the "CALCULATOR" micro-label, the wordmark, the slab, and the closing hairline rule all share one left edge, so the page reads as a spec sheet for the object rather than a centered landing page.
• Keys depress 1px with a 90ms ease-out and the display cross-fades 120ms — physical, mechanical feedback with no bounce, and a reduced-motion path that goes instant.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the white calculator slab as a studio-lit object on the aluminium-white ground.
• Input → transformation → outcome thesis: on load, the slab fades and lifts 8px into place with a slow physical ease (cubic-bezier(0.22,1,0.36,1), 600ms); thereafter, each key press depresses the key 1px with a 90ms ease-out and the display value cross-fades 120ms, so the instrument responds mechanically to every entry and evaluation.
• Motion vocabulary: restrained — one purposeful reveal, mechanical key depression, display cross-fade. No bounce, no particles, no gradient drift.
• Composed first frame: the slab at rest, display showing the initial zero entry, neutral underline, no operator highlighted, micro-label and wordmark left-aligned above.
• Reduced-motion state: all transitions collapse to instant state changes; the slab appears with no lift.

9. Non-Functional Requirements

• Single page (explicit): the product is limited to one page; no additional routes or navigation exist.
• Simplicity (explicit): the design is a simple single page calculator — no modes, history, memory, or conversion features beyond entry, display, evaluation, and clearing.
• Anonymous access (required_inference): the page is publicly reachable with no identity, because no calculation state needs to persist or belong to a person.
• Client-side computation (required_inference): arithmetic is evaluated in the browser; there is no server round-trip for calculation.
• Accessibility (required_inference): text and controls remain whole and inside the viewport at 375px, 768px, and 1280px; contrast meets AA; prefers-reduced-motion collapses all transitions to instant state changes.
• Responsive typography (required_inference): display numerals, wordmark, and key glyphs use clamp(...) so they scale to fit at every viewport.

10. Tech Stack

• React — single-page front end hosting the Calculator page.
• Vite — build and dev tooling for the React app.
• CSS — plain CSS with custom properties for the palette, type scale, radii, and motion tokens; no UI framework required for a single page.
• No backend — calculation is client-side; no database, no API, no Docker services are needed for the accepted scope.

11. Assumptions and Constraints

• A-1 (explicit): The product is exactly one page; no additional pages are added.
• A-2 (explicit): The calculator supports the four basic arithmetic operations, decimal entry, evaluation, and clearing — the minimum implied by "enter numbers and arithmetic operators to compute a result."
• A-3 (required_inference): Division by zero and other unevaluable expressions surface an error indication rather than a numeric result, recoverable by clear.
• A-4 (required_inference): No calculation history, memory, or persistence is retained between visits.
• A-5 (required_inference): The page is anonymous and public; no identity establishment is introduced.
• A-6 (default — not specified by user): The React + Vite + plain CSS stack is a coherent default for a single-page client-side calculator.

12. Glossary

• Calculator page: the single application-owned page that hosts the entire product.
• Calculator slab: the white squircle body containing the display panel and keypad.
• Display panel: the flush inset panel showing the current entry or computed result.
• Current entry: the digits and operators the user has entered so far.
• Computed result: the numeric outcome of evaluating the expression.
• Active operator: the arithmetic operator currently in effect, shown as the sole arctic-teal key.
• Fresh state: the initial state on load or after clearing, showing a zero entry and no result.
• Clear: the action that resets the calculator to the fresh state.