System Requirements Document for storm-arc

1. Introduction

Product intent. storm-arc delivers Arc Recorder, a cloud-based multi-camera video recording and monitoring website — a clone of camcloudrecorder.com. Arc Recorder presents itself as an always-on recording instrument: cameras, timestamps, storage counters and uptime are the real content, and the interface is designed to read as a piece of equipment rather than a marketing dashboard. The site communicates and demonstrates the product's core promise — record, store, review — with millisecond-precision framing, live status instrumentation, and a titanium-dark control-room aesthetic.

Audience. Small-business owners, property managers, retail operators, and home-security hobbyists who watch their camera feeds at night and check system status on their phone in the morning. These users need to trust that footage is being captured continuously and that the system is always on.

Source basis. The authoritative requirement thread requests a clone website of camcloudrecorder.com named Arc Recorder, with the project name storm-arc. The CREATIVE DIRECTION block supplies the authoritative visual, typographic, layout, and motion language (MARQ by Garmin instrument aesthetic). No versioned final page contract was supplied (page_contract_version: 0), so the page inventory is reconciled from the accepted product domain and the creative direction's explicit layout and signature moves.

2. System Overview

Arc Recorder is a marketing and product-demonstration website for a cloud camera recording service. The site presents the recorder as a live instrument: a persistent top status bar shows a live clock, uptime counter, camera count and a pulsing amber REC indicator; the hero is dominated by a 270° instrument gauge wrapping a live camera preview; camera tiles are engraved data plates with tabular readouts; pricing and feature sections use aligned label/value rows rather than card decks.

Current delivery. A first-party, browser-delivered website. The site is publicly reachable and presents product information, live-instrument visualizations, camera-tile demonstrations, feature specifications, pricing, and contact/sign-up entry points. No application-owned user identity, account system, or authenticated area is established by the authoritative source; the site is a public product surface.

Actors.

• Visitor (active human persona) — the prospective customer browsing the site, evaluating the recorder, and initiating sign-up or contact.
• Arc Recorder platform (system actor) — the cloud recording service the site describes; it is represented on the site through live status instrumentation and camera-tile demonstrations, but the site itself does not operate the recording backend.

Accepted behavior. Present the Arc Recorder product; demonstrate live recording status through instrument gauges, a persistent status bar, and camera data plates; communicate features, storage, uptime and pricing through ruled tabular layouts; provide a primary call to action to start recording; provide a contact path.

Narrow exclusions. No blue, indigo or violet accents; no light/white page grounds; no centred hero with a filled blue button; no gradient-blob heroes, glassmorphism, floating hover-lift cards, or 3D blob renders; no playful springy micro-interactions; no stock photography of people. No account management, billing portal, or authenticated dashboard is established by the source.

2a. Product Interpretation and Delivery Boundary

Arc Recorder is delivered as a public, first-party website. All accepted content and interactions are reachable without establishing an application-owned identity. The authoritative source does not request login, registration, a customer portal, or any protected area, and the Planning Scope contract records authentication_required: false and access_mode: unspecified. Accordingly, no authentication, account creation, or session continuity is introduced.

The site's relationship to the recording platform is representational: the live clock, uptime counter, REC indicator, gauges and camera tiles are the site's own instrument presentation of the product's always-on nature. The actual cloud recording backend is a system the site describes and demonstrates, not a capability the site operates. The primary call to action ("START RECORDING") is a product entry point presented on the public site; the source does not specify a downstream authenticated flow, so none is invented.

Current boundary: public product presentation, live-instrument demonstration, feature and pricing communication, contact and start-recording entry points.

Future boundary: any authenticated customer dashboard, live camera streaming, account management, or billing is out of current scope and is not represented as a current page or capability.

2c. Page Content and Component Coverage

The page inventory is reconciled from the accepted product domain and the creative direction's explicit layout and signature moves. Each page is a distinct first-party destination with a cohesive working context.

Home

The public entry and primary product presentation surface.

• Information/state: Hero headline "EVERY FRAME. EVERY CAMERA. ALWAYS ON." stacked in four ruled lines; live data strip "CAMERAS 12 · UPTIME 99.98% · STORAGE 4.2 TB" in tabular condensed numerals; persistent top status bar with live clock, uptime counter, camera count and pulsing amber REC dot; numbered section rules (01 / 02 / 03) with small-caps labels.
• Primary actions: "START RECORDING" amber-filled rounded-rect key with thin champagne keyline; navigate to Features, Cameras, Pricing, Contact via left rail and section links.
• Supporting actions: scroll through numbered sections; hover camera tiles to trigger amber scan-line.
• Domain entities: camera, recording session, uptime, storage, timestamp.
• Component responsibilities: TopStatusBar (live clock, uptime, camera count, REC dot); HeroGauge (270° arc, 3px champagne stroke, wrapping live camera preview with 2px amber recording ring and ticking timestamp); LiveDataStrip (tabular readouts); SectionRule (full-width hairline with small-caps numeral and label); CameraTile (engraved data plate); LeftRail (72px instrument icon rail with vertical hairline).
• States: loading — gauge strokes draw once on scroll-in over 600ms with mechanical ease-out; empty — not applicable (static product presentation); success — live data strip and gauges render with ticking tabular numerals; error — if live data is unavailable, the data strip shows static placeholder values and the REC dot holds a steady (non-pulsing) amber state; recovery — values resume ticking when data is available.

Features

Specification of the recorder's capabilities in ruled tabular layout.

• Information/state: Aligned label/value rows in tabular columns; section head "FEATURES" at 32px caps; numbered section rule.
• Primary actions: read feature specifications; navigate to Pricing or Home.
• Supporting actions: hover rows for champagne scan-line.
• Domain entities: feature, capability, resolution, bitrate, retention.
• Component responsibilities: FeatureRow (label/value tabular pair); SectionRule; TopStatusBar.
• States: loading — rows fade in on scroll-in; empty — not applicable; success — all feature rows render; error — not applicable (static content); recovery — not applicable.

Cameras

Camera-tile demonstration grid showing the recorder's multi-camera monitoring surface.

• Information/state: 3-up camera grid on desktop; each tile is a data plate with timestamp, camera name, bitrate and a live ring; 2px champagne inner bezel and 1px amber outer ring when recording; corner tick marks; bottom ruled row of tabular readouts (camera name / resolution / bitrate / last event).
• Primary actions: hover a tile to sweep a 1px amber scan line top-to-bottom once; navigate to Home or Pricing.
• Supporting actions: observe live ring state per tile.
• Domain entities: camera, camera name, resolution, bitrate, last event, timestamp, recording state.
• Component responsibilities: CameraTile (engraved data plate with bezel, ring, corner ticks, ruled readout row); CameraGrid (3-up responsive grid); TopStatusBar.
• States: loading — tiles render with bezel and corner ticks, readouts populate; empty — if no cameras are configured, the grid shows a single ruled plate reading "NO CAMERAS CONFIGURED" with a champagne hairline; success — tiles show live ring and ticking timestamps; error — a tile whose feed is unavailable shows a steady grey ring and "SIGNAL LOST" in the readout row; recovery — the tile returns to the live amber ring when the feed resumes.

Pricing

Plan and cost presentation in aligned tabular rows.

• Information/state: Aligned label/value rows in tabular columns; section head "PRICING" at 32px caps; numbered section rule; storage and camera-count tiers presented as ruled data rows.
• Primary actions: select a plan; navigate to Contact or Home.
• Supporting actions: compare tiers across tabular columns.
• Domain entities: plan, tier, camera count, storage allowance, price.
• Component responsibilities: PricingRow (label/value tabular pair); PlanSelector (rounded-rect 6px key with top highlight line); SectionRule; TopStatusBar.
• States: loading — rows fade in on scroll-in; empty — not applicable; success — all tiers render; error — not applicable (static content); recovery — not applicable.

Contact

Contact and start-recording entry point.

• Information/state: Contact form fields in ruled label/value layout; section head "CONTACT" at 32px caps; numbered section rule.
• Primary actions: submit the contact form; navigate to Home or Pricing.
• Supporting actions: read contact details.
• Domain entities: name, email, message, submission.
• Component responsibilities: ContactForm (ruled label/value fields, rounded-rect 6px submit key); SectionRule; TopStatusBar.
• States: loading — submit key shows a restrained mechanical pending state; empty — form renders with empty fields; success — a ruled confirmation plate reads "MESSAGE RECEIVED" with a champagne hairline; error — invalid or missing required fields show an amber inline label beneath the field; recovery — the user corrects the field and resubmits.

3. Functional Requirements

FR-01 — Product presentation. As a Visitor, I should see the Arc Recorder product presented as an always-on cloud camera recording instrument, so that I understand what the product does. (explicit)

• Trigger: page load on Home.
• Observable result: hero headline "EVERY FRAME. EVERY CAMERA. ALWAYS ON." renders in Saira Condensed uppercase at clamp(56px, 8vw, 96px), stacked in four ruled lines with a 1px champagne rule under the first word.
• Access state: public, no identity required.
• Failure/recovery: not applicable (static content).
• Continuation: Visitor scrolls to numbered sections.

FR-02 — Persistent live status bar. As a Visitor, I should see a persistent top status bar with a live clock, uptime counter, camera count and a pulsing amber REC dot, so that the site reads as a device that is currently on. (explicit)

• Trigger: any page load.
• Observable result: top status bar runs the full viewport width, separated from content by a hairline; clock ticks every second in tabular numerals; REC dot pulses at 1.2s intervals in amber #F0A32A.
• Access state: public.
• Failure/recovery: if live data is unavailable, the REC dot holds a steady amber state and counters show static values.
• Continuation: status bar remains visible during scroll.

FR-03 — Hero instrument gauge. As a Visitor, I should see a 270° instrument gauge wrapping a live camera preview as the hero's dominant object, so that the recorder's measurement nature is immediately legible. (explicit)

• Trigger: Home page load.
• Observable result: a single large circular gauge (270° arc, 3px champagne #C9A96A stroke) wraps a real camera-tile preview with a 2px amber recording ring and a timestamp ticking in the corner; the gauge stroke draws once on scroll-in over 600ms with a mechanical ease-out.
• Access state: public.
• Failure/recovery: if the preview is unavailable, the gauge renders with a steady grey ring and the timestamp holds.
• Continuation: Visitor reads the live data strip beneath the headline.

FR-04 — Live data strip. As a Visitor, I should see a live data strip reading "CAMERAS 12 · UPTIME 99.98% · STORAGE 4.2 TB" in tabular condensed numerals with a pulsing amber REC dot at the left, so that I can read the system's operating state at a glance. (explicit)

• Trigger: Home page load.
• Observable result: data strip renders beneath the headline with tabular condensed numerals and a pulsing amber REC dot.
• Access state: public.
• Failure/recovery: static placeholder values display if live data is unavailable.
• Continuation: Visitor proceeds to the primary CTA.

FR-05 — Primary call to action. As a Visitor, I should see an amber-filled rounded-rect key labelled "START RECORDING" cut into the bottom-left of the headline block with a thin champagne keyline, so that I can initiate the product entry path. (explicit)

• Trigger: Home page load.
• Observable result: the key renders at the bottom-left of the headline block with amber #F0A32A fill and a thin champagne keyline.
• Access state: public.
• Failure/recovery: not applicable.
• Continuation: Visitor activates the key and proceeds to the product entry path.

FR-06 — Numbered section rules. As a Visitor, I should see every section open with a full-width hairline carrying a small-caps numeral (01 / 02 / 03) and a short label, so that the page scrolls like chapters of a spec sheet. (explicit)

• Trigger: scroll through any page.
• Observable result: each section is separated by a full-width hairline with a small-caps section number sitting on the rule.
• Access state: public.
• Failure/recovery: not applicable.
• Continuation: Visitor continues scrolling.

FR-07 — Camera tile data plates. As a Visitor, I should see camera tiles rendered as engraved data plates with a 2px champagne bezel, an amber outer ring when live, corner tick marks, and a bottom ruled row of tabular readouts (camera name / resolution / bitrate / last event), so that I can read each camera's state like instrument data. (explicit)

• Trigger: Cameras page load.
• Observable result: 3-up grid on desktop; each tile shows the bezel, ring, corner ticks, and ruled readout row.
• Access state: public.
• Failure/recovery: a tile whose feed is unavailable shows a steady grey ring and "SIGNAL LOST" in the readout row; the tile returns to the live amber ring when the feed resumes.
• Continuation: Visitor hovers tiles and navigates onward.

FR-08 — Amber scan-line hover. As a Visitor, I should see a 1px amber scan line sweep top-to-bottom once across any camera tile I hover, so that the interaction feels like a read head passing over tape. (explicit)

• Trigger: cursor enters a camera tile.
• Observable result: a 1px #F0A32A line sweeps top-to-bottom once.
• Access state: public.
• Failure/recovery: not applicable.
• Continuation: Visitor moves to another tile or navigates onward.

FR-09 — Feature specification rows. As a Visitor, I should read feature specifications as aligned label/value rows in tabular columns, so that I can evaluate capabilities without card-deck noise. (explicit)

• Trigger: Features page load.
• Observable result: aligned label/value rows render in tabular columns under a 32px caps section head.
• Access state: public.
• Failure/recovery: not applicable.
• Continuation: Visitor navigates to Pricing.

FR-10 — Pricing tiers. As a Visitor, I should read pricing plans as aligned label/value rows in tabular columns with storage and camera-count tiers, so that I can compare plans. (explicit)

• Trigger: Pricing page load.
• Observable result: pricing rows render in tabular columns with a plan selector key.
• Access state: public.
• Failure/recovery: not applicable.
• Continuation: Visitor selects a plan or navigates to Contact.

FR-11 — Contact submission. As a Visitor, I should submit a contact form with name, email and message, so that I can reach the Arc Recorder team. (explicit)

• Trigger: Visitor completes and submits the contact form.
• Observable result: a ruled confirmation plate reads "MESSAGE RECEIVED" with a champagne hairline.
• Access state: public.
• Failure/recovery: invalid or missing required fields show an amber inline label beneath the field; the user corrects and resubmits.
• Continuation: Visitor returns to Home or Pricing.

FR-12 — Left instrument rail navigation. As a Visitor, I should navigate between pages using a fixed 72px left rail of instrument icons separated from content by a vertical hairline, so that navigation reads as part of the equipment. (explicit)

• Trigger: any page load.
• Observable result: fixed 72px left rail renders with instrument icons and a vertical hairline.
• Access state: public.
• Failure/recovery: not applicable.
• Continuation: Visitor selects a destination.

FR-13 — Tabular timestamp ticking. As a Visitor, I should see timestamps tick every second in tabular condensed numerals, so that the interface feels like a live instrument readout. (explicit)

• Trigger: any page with a timestamp.
• Observable result: timestamps update every second in tabular numerals.
• Access state: public.
• Failure/recovery: timestamps hold if the clock source is unavailable.
• Continuation: Visitor continues reading.

4. User Personas

Visitor

Product context. The Visitor is a prospective Arc Recorder customer — a small-business owner, property manager, retail operator, or home-security hobbyist — evaluating a cloud camera recording service. They typically browse at night while watching feeds, or check status on their phone in the morning. They are not looking for a playful or corporate-neutral SaaS page; they want to feel that the recorder is a trustworthy instrument that is always on.

Primary goal. Understand what Arc Recorder does, confirm that it records continuously with millisecond precision, compare plans, and initiate the product entry path.

Distinct accepted responsibilities.

• Read the hero headline and live data strip to grasp the product's always-on promise.
• Observe the hero gauge and camera tiles to assess recording and monitoring capability.
• Read feature specifications and pricing tiers in tabular form.
• Initiate the "START RECORDING" entry path.
• Submit a contact form to reach the team.

Relevant inputs or decisions. Which plan tier matches their camera count and storage needs; whether the recorder's uptime and storage instrumentation reads as trustworthy; whether to start recording or contact the team first.

Interactions with other accepted participants. The Visitor interacts only with the Arc Recorder platform as represented on the site (live status instrumentation, camera tiles, gauges). No other human participant is involved in the accepted journeys.

Observable success. The Visitor reads the live data strip and gauges, compares pricing rows, and either activates "START RECORDING" or submits the contact form and sees the "MESSAGE RECEIVED" confirmation.

5. Core User Flows

Flow 1 — Evaluate the recorder on Home

1. Starting context: Visitor lands on the Home page on a dark titanium ground (#0E1114) with a faint topographic contour texture at 6% opacity.
2. Action: Visitor reads the hero headline "EVERY FRAME. EVERY CAMERA. ALWAYS ON." stacked in four ruled lines with a 1px champagne rule under the first word.
3. Observable result: The persistent top status bar shows a live clock ticking in tabular numerals, an uptime counter, a camera count, and a pulsing amber REC dot at 1.2s intervals.
4. Action: Visitor reads the live data strip "CAMERAS 12 · UPTIME 99.98% · STORAGE 4.2 TB" in tabular condensed numerals.
5. Observable result: The hero's 270° instrument gauge (3px champagne stroke) wraps a live camera preview with a 2px amber recording ring and a timestamp ticking in the corner; the gauge stroke draws once on scroll-in over 600ms with a mechanical ease-out.
6. Decision: Visitor decides whether to start recording or explore features and pricing.
7. Next step: Visitor activates the amber "START RECORDING" key, or scrolls to numbered sections (01 / 02 / 03) to continue evaluating.

Flow 2 — Inspect camera tiles on Cameras

1. Starting context: Visitor navigates to the Cameras page via the fixed 72px left instrument rail.
2. Action: Visitor views the 3-up camera grid on desktop.
3. Observable result: Each tile renders as an engraved data plate with a 2px champagne inner bezel, a 1px amber outer ring when recording, corner tick marks, and a bottom ruled row of tabular readouts (camera name / resolution / bitrate / last event).
4. Action: Visitor hovers a camera tile.
5. Observable result: A 1px amber #F0A32A scan line sweeps top-to-bottom once across the plate.
6. Failure/recovery: If a tile's feed is unavailable, it shows a steady grey ring and "SIGNAL LOST" in the readout row; the tile returns to the live amber ring when the feed resumes.
7. Next step: Visitor navigates to Pricing or Home.

Flow 3 — Compare plans on Pricing

1. Starting context: Visitor navigates to the Pricing page via the left rail.
2. Action: Visitor reads pricing tiers presented as aligned label/value rows in tabular columns under a 32px caps "PRICING" section head.
3. Observable result: Storage and camera-count tiers render as ruled data rows; a plan selector key (rounded-rect 6px with top highlight line) is available.
4. Decision: Visitor selects the tier matching their camera count and storage needs.
5. Next step: Visitor navigates to Contact or activates the plan selector.

Flow 4 — Contact the team

1. Starting context: Visitor navigates to the Contact page via the left rail.
2. Action: Visitor completes the contact form fields (name, email, message) in the ruled label/value layout.
3. Action: Visitor submits the form using the rounded-rect 6px submit key.
4. Observable result: A ruled confirmation plate reads "MESSAGE RECEIVED" with a champagne hairline.
5. Failure/recovery: If required fields are invalid or missing, an amber inline label appears beneath the field; the Visitor corrects the field and resubmits.
6. Next step: Visitor returns to Home or Pricing.

6. Visuals Colors and Theme

Muse and headline. MARQ by Garmin — luxury instrument aesthetic. The headline concept is "an instrument you trust": Arc Recorder reads as a precision surveillance instrument panel, not a SaaS marketing page.

Color tokens (dark mode).

Distribution: ~70% dark ground, 20% panel surface, 6% champagne, 4% amber. No blue anywhere.

Typography.

• Headings: Saira Condensed, weights 500–700, tracking +0.04em on all-caps micro-labels, tight -0.01em on large display lines. Headlines set in uppercase at hero scale clamp(56px, 8vw, 96px), reading like bezel engraving.
• Body: Archivo.
• Scale (1.25 modular): 12 / 14 / 16 / 20 / 25 / 32 / 48 / 72 / 96.
• Micro-labels: 11px caps +0.08em. Body: 16/26. Data rows: 14px tabular. Section heads: 32px caps. Hero headline: clamp(56px, 8vw, 96px).
• Numerals are always tabular; timestamps use the same condensed face at small sizes.

Shape language. Instrument bezels, not cards. Panels are rectangles with 4px radius corners and a 1px #2A3036 border; every panel carries a small engraved corner tick (a 6px L-shaped hairline) at top-left. Live camera tiles use a 2px champagne inner bezel and a 1px amber outer ring when recording. Circular gauges: storage ring, uptime ring, camera-count dial — drawn with a 3px stroke and a 270° arc, never full circles. Buttons are rounded-rectangle 6px with a subtle top highlight line, reading like physical keys. No blobs, no soft shadows, no large radii.

Layout. A fixed left rail (72px) of instrument icons with a vertical hairline separating it from content; top status bar always visible with live clock, uptime counter and REC indicator. Content is a strict 12-column grid on a ruled baseline: each section separated by a full-width hairline with a small caps section number (01 / 02 / 03) sitting on the rule. Camera grid is 3-up on desktop, each tile a data plate with timestamp, camera name, bitrate and a live ring. Pricing and feature sections use aligned label/value rows in tabular columns, not card decks. Footer is a dense ruled data block like the back of a device.

Imagery. Dark macro photography of the product's world: a camera lens element catching a single amber flare, a brushed-metal NVR faceplate, a night-time storefront with one camera watching (high-contrast, low-key). Screenshots of the recorder UI are presented as if photographed on a matte screen inside a titanium frame. Small topographic contour lines used as a background texture at 6% opacity behind hero and footer. No stock people, no flat illustration, no 3D blobs.

7. Signature Design Concept

The public entry (Home) is composed as a live instrument panel, not a marketing hero.

• Left 55%: An oversized Saira Condensed