glacial-silver

byMenna Abd el rahman Elbana

عاوزه ابني موقع الكتروني لجيم

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for glacial-silver

1. Introduction

glacial-silver is a website for a gym. The product intent is to give the gym a credible online presence: an anonymous public entry surface that explains what the gym provides to prospective members, and a focused destination where a prospective member can express interest in joining or contact the gym.

The audience is prospective and current gym members (18–45) who train for strength, conditioning and recovery, track their progress, and want to feel like athletes rather than customers — plus the gym owner/manager who runs the gym and needs the site to present its services, schedule and pricing and to bring in new members.

The site is a marketing and contact surface. It is not a member-management, booking, payment or training-log application; no such capability is requested.

Page 1 of 26

2. System Overview

The current delivery is a first-party, publicly reachable website with two pages:

  • Landing — anonymous first impression that explains what the gym provides to prospective members and presents the gym's online offering.
  • Contact — focused destination where prospective members can express interest in joining or contact the gym.

Both pages are application-owned custom UI and are reachable without any account. No identity, sign-in, membership account, booking, payment or scheduling capability is part of the current scope.

Actors:

  • Gym Member (human persona) — browses the site's information and contacts the gym to join.
  • Gym Owner / Manager (human persona) — maintains the site's content about classes, trainers and membership plans so the published site attracts new members.
  • Gym contact inbox (non-persona recipient) — the outbound destination that receives a submitted enquiry. It is not a persona and has no product surface.
Page 2 of 26

2a. Product Interpretation and Delivery Boundary

The gym's website is delivered as a public, first-party web experience. Nothing on the current site requires an account, a login, or any stored member profile: a visitor arrives anonymously, reads what the gym offers, and — if interested — submits an enquiry through the Contact page. The enquiry leaves the site to the gym's own contact channel, which the gym owns and operates; the site does not manage, schedule, or bill memberships.

The current horizon covers the public marketing and enquiry surface only. Member accounts, online booking, payments, class scheduling and progress tracking are outside the current delivery and are not implied by the gym context. The Gym Owner / Manager's accepted responsibility is maintaining the site's content about classes, trainers and membership plans; no separate administrative application, dashboard or content-management surface is part of the current page contract, so that content responsibility is exercised on the published site's content itself rather than through an additional destination.

2b. Source Content Inventory

Not applicable — no reference directive in this project declares content_source.

2c. Page Content and Component Coverage

Page 3 of 26

Landing

  • Information / state: the gym's identity and wordmark; an oversized display headline; the gym's offering (strength, conditioning, recovery); opening hours; active member count; class schedule information; trainer information; membership plans with pricing; facility imagery. All content is public and identical for every anonymous visitor.
  • Primary actions: navigate to Contact to express interest in joining; select a membership plan (which leads to expressing interest via Contact).
  • Supporting actions: move between sections of the page via the instrument rail; read plan label/value rows; read schedule and trainer entries.
  • Domain entities: gym, offering/discipline, opening hours, member count, class slot, trainer, membership plan (name, price, included items), facility photograph.
  • Component responsibilities:
    • Instrument rail — persistent left column (desktop) carrying section numbers 01–06 in Barlow Condensed with hairline ticks and one amber marker that slides to the active section as the user scrolls; on mobile it becomes a horizontally scrollable numbered index beneath the wordmark.
    • Hero instrument cluster — large circular dial ring in brushed-steel grey with an amber needle sweeping to 78%, a teal tick for the completed segment, and three ruled readouts beneath it ("OPEN 05:30–23:00", "STRENGTH · CONDITIONING · RECOVERY", "1,240 ACTIVE MEMBERS") in tabular Barlow Condensed numerals.
    • Hero headline and CTA — oversized Barlow Condensed headline "TRAIN LIKE AN INSTRUMENT" with a single amber rule beneath the last line and the primary CTA "BOOK A TRIAL SESSION" as a chamfered rectangular button.
    • Metric readouts — every statistic (members, class slots, coach count, opening hours) set in tabular Barlow Condensed numerals at 3–6× body size with a hairline rule above and a small uppercase unit label beneath, counting up once when scrolled into view.
Page 4 of 26
  • Membership plan tables — three ruled data tables with label/value rows, hairline dividers and a chamfered amber "SELECT" control.
  • Facility turntable — a slow 12-second turntable rotation on a single macro equipment photograph (weight plate engraving) with a thin luminous highlight tracing the plate's edge.
  • Topographic texture layer — a barely-visible topographic line texture in #1B2024 behind the hero and behind data sections.
  • States:
    • Loading: no data fetch is required for the page's content; the hero dial renders its sweep on load and metric numerals count up when scrolled into view.
    • Empty: not applicable — the page presents the gym's own published content, which is authored rather than fetched.
    • Success: the visitor reads the offering, hours, schedule, trainers and plans, and can reach Contact from the hero CTA or a plan's SELECT control.
    • Error / recovery: if a macro photograph fails to load, the section keeps its ruled layout and label/value rows readable in place of the image; if motion is unavailable, the dial renders at its final value and the turntable becomes a still macro image.
    • Reduced motion: gauges render at final value, the turntable becomes a still macro image, and scroll drift is disabled rather than hidden.
Page 5 of 26

Contact

  • Information / state: the gym's contact details and the enquiry form's fields and current values; a submitted/not-submitted state for the visitor's enquiry.
  • Primary actions: submit an enquiry expressing interest in joining the gym.
  • Supporting actions: enter name, contact detail and message; correct a field after a validation failure; resubmit.
  • Domain entities: enquiry (visitor name, contact detail, message, optional plan of interest), gym contact details.
  • Component responsibilities:
    • Enquiry form — labelled fields for the visitor's name, a contact detail, and a message, with a chamfered amber submit control consistent with the Landing plan controls.
    • Validation feedback — per-field messages when a required field is missing or malformed, keeping entered values in place.
    • Submission confirmation — an observable confirmation that the enquiry was sent, with the gym's contact details remaining visible as an alternative channel.
    • Gym contact details block — the gym's own contact information, presented as ruled label/value rows.
  • States:
    • Loading: the submit control shows an in-progress state while the enquiry is being sent; fields remain readable.
    • Empty: the form renders with empty fields and no validation messages.
    • Success: a confirmation is shown that the enquiry was received, and the visitor can return to Landing or send another enquiry.
Page 6 of 26
  • Error / recovery: validation failures keep the visitor's entered values and identify the field to correct; a delivery failure shows a clear failure message and keeps the entered values so the visitor can retry or use the gym's contact details directly.
  • Reduced motion: confirmation and validation states appear without animated transitions.
Page 7 of 26

3. Functional Requirements

FR-1 — Public gym website (explicit) As a visitor, I should be able to open the gym's website and understand what the gym provides, so that I can decide whether to train there.

  • Trigger/input: the visitor opens the site's public entry.
  • Observable result: the Landing page renders the gym's identity, offering, hours, schedule, trainers and membership plans.
  • Access state: public, no account required.
  • Failure/recovery: if a media asset fails, the page's ruled text content remains readable in place.
  • Continuation: the visitor can move to Contact to express interest.

FR-2 — Learn the gym's offering (explicit) As a Gym Member, I should be able to read what the gym offers — strength, conditioning and recovery — so that I know whether it matches how I want to train.

  • Trigger/input: the visitor reads the offering content on Landing.
  • Observable result: the disciplines and their descriptions are presented as readable content.
  • Access state: public.
  • Failure/recovery: content remains readable if decorative imagery or motion is unavailable.
  • Continuation: the visitor continues to hours, schedule, trainers or plans.
Page 8 of 26

FR-3 — Read opening hours (explicit) As a Gym Member, I should be able to see the gym's opening hours, so that I can judge whether the gym fits my training schedule.

  • Trigger/input: the visitor reads the hours readout on Landing.
  • Observable result: opening hours are shown as a labelled value ("OPEN 05:30–23:00") in tabular numerals.
  • Access state: public.
  • Failure/recovery: the hours remain readable as text when motion is reduced or unavailable.
  • Continuation: the visitor continues to the schedule or plans.

FR-4 — Read the class schedule (explicit) As a Gym Member, I should be able to see the gym's class schedule, so that I can find sessions that fit my week.

  • Trigger/input: the visitor reads the schedule section on Landing.
  • Observable result: class slots are presented as ruled label/value rows with times in tabular numerals.
  • Access state: public.
  • Failure/recovery: schedule rows remain readable if imagery or motion fails.
  • Continuation: the visitor continues to trainers or plans.

FR-5 — Read trainer information (explicit) As a Gym Member, I should be able to see who the gym's trainers are, so that I can judge the quality of coaching.

  • Trigger/input: the visitor reads the trainer content on Landing.
  • Observable result: trainer entries are presented as readable content.
  • Access state: public.
  • Failure/recovery: trainer text remains readable if a portrait or decorative asset fails.
  • Continuation: the visitor continues to plans or Contact.
Page 9 of 26

FR-6 — Compare membership plans (explicit) As a Gym Member, I should be able to compare the gym's membership plans and their pricing, so that I can choose the plan that fits me.

  • Trigger/input: the visitor reads the three membership plan tables on Landing.
  • Observable result: each plan is presented as a ruled data table of label/value rows with its price and included items, with a chamfered amber SELECT control.
  • Access state: public.
  • Failure/recovery: plan rows remain readable at every viewport, with values kept inside the viewport.
  • Continuation: selecting a plan leads the visitor to express interest via Contact.

FR-7 — Express interest in joining (explicit) As a Gym Member, I should be able to express my interest in joining the gym, so that I can become a member.

  • Trigger/input: the visitor opens Contact (from the hero CTA, a plan's SELECT control, or navigation) and submits the enquiry form.
  • Observable result: the enquiry is sent to the gym's contact channel and the visitor sees a confirmation that it was received.
  • Access state: public, no account required.
  • Failure/recovery: validation failures keep entered values and identify the field to correct; a delivery failure shows a clear failure message, keeps entered values, and leaves the gym's contact details visible as an alternative channel.
  • Continuation: the visitor can return to Landing or send another enquiry.
Page 10 of 26

FR-8 — Contact the gym directly (explicit) As a Gym Member, I should be able to contact the gym directly, so that I can ask a question before joining.

  • Trigger/input: the visitor reads the gym's contact details on Contact, or uses them after a failed submission.
  • Observable result: the gym's contact details are presented as readable ruled label/value rows.
  • Access state: public.
  • Failure/recovery: the details remain readable independently of the form's state.
  • Continuation: the visitor contacts the gym through its own channel.

FR-9 — Maintain the site's content (explicit) As a Gym Owner / Manager, I should be able to maintain the site's content about classes, trainers and membership plans, so that the published site presents the gym accurately and brings in new members.

  • Trigger/input: the owner/manager updates the gym's published content (offering, hours, schedule, trainers, plans, contact details).
  • Observable result: the updated content is what visitors read on Landing and Contact.
  • Access state: the owner/manager's content responsibility is exercised on the published site's content; no separate administrative destination is part of the current page contract.
  • Failure/recovery: content that is not yet updated remains as previously published rather than rendering empty.
  • Continuation: the owner/manager reviews the published site as a visitor would.
Page 11 of 26

FR-10 — Receive and act on enquiries (required_inference) As a Gym Owner / Manager, I should receive the enquiries visitors submit, so that I can respond and convert interest into membership.

  • Trigger/input: a visitor submits the Contact enquiry form.
  • Observable result: the enquiry reaches the gym's contact channel with the visitor's name, contact detail and message.
  • Access state: the gym's own contact channel; no first-party account surface is required for this.
  • Failure/recovery: if delivery fails, the visitor is told and can retry or use the gym's contact details directly.
  • Continuation: the owner/manager responds to the enquiry through the gym's own channel.

4. User Personas

Page 12 of 26

Gym Member

Product context. A person who wants to join and use the gym. They arrive on the site anonymously, usually while deciding between gyms, and they are evaluating whether this gym's disciplines, hours, schedule, coaching and price fit how they train. They are 18–45, train for strength, conditioning and recovery, and care about measurable progress.

Primary goal. Learn about the gym's offering and become a member.

Distinct accepted responsibilities. Browsing the site's information — offering, opening hours, class schedule, trainers and membership plans — and then signing up or contacting the gym to join. This is a read-and-decide role: the member's work is comparison and commitment, not administration.

Relevant inputs or decisions. Which discipline matters to them; whether the opening hours fit their week; which class slots they could attend; which trainer they'd want; which of the three membership plans and prices they can commit to; what to write in their enquiry.

Interactions with other accepted participants. The member's enquiry is received by the Gym Owner / Manager through the gym's contact channel. The member never interacts with the owner/manager inside the site itself — the handoff is the submitted enquiry.

Observable success. The member has read the offering, hours, schedule, trainers and plans, has submitted an enquiry (or contacted the gym directly), and has seen confirmation that it was received.

Page 13 of 26

Gym Owner / Manager

Product context. The person running the gym who needs an online presence. They are not a visitor evaluating the gym — they are its operator, and the site is their shopfront.

Primary goal. Present the gym's services, schedule and pricing to attract members.

Distinct accepted responsibilities. Maintaining the site's content about classes, trainers and membership plans, and receiving the enquiries that arrive from prospective members. Their work is publishing accurate content and responding to interest — the opposite direction of flow from the member, who consumes content and produces enquiries.

Relevant inputs or decisions. What the gym currently offers; the real opening hours; the current class schedule; who the trainers are; the membership plans and their prices; the gym's contact details; how to respond to each enquiry.

Interactions with other accepted participants. The owner/manager receives enquiries submitted by Gym Members through the gym's contact channel and responds through that same channel.

Observable success. A published site that accurately presents the gym and brings in new members, and enquiries that arrive and can be answered.

5. Core User Flows

Page 14 of 26

Flow A — A prospective member evaluates the gym and expresses interest

  1. Starting context: the visitor is anonymous, on the public Landing page, with no account and no prior state on the site.
  2. The visitor reads the hero: the headline "TRAIN LIKE AN INSTRUMENT", the amber rule beneath it, and the instrument cluster's three ruled readouts — opening hours, the disciplines offered, and the active member count.
  3. The visitor reads the offering section to check whether strength, conditioning and recovery match how they train.
  4. The visitor reads the opening hours readout and the class schedule rows to find sessions that fit their week.
  5. The visitor reads the trainer entries to judge the coaching.
  6. The visitor reaches the membership plans and compares the three ruled plan tables, reading each plan's price and included items as label/value rows.
  7. Decision: the visitor chooses a plan and activates that plan's chamfered amber SELECT control, which takes them to Contact to express interest.
  8. On Contact, the visitor enters their name, a contact detail and a message, and submits the enquiry.
  9. Observable result: the visitor sees confirmation that the enquiry was received, and the gym's contact details remain visible on the page.
  10. Continuation: the visitor can return to Landing to re-read the plans, or send another enquiry.

Failure and recovery: if a required field is missing or malformed, the form keeps everything the visitor typed and identifies the field to correct; the visitor fixes it and resubmits. If the enquiry cannot be delivered, the visitor sees a clear failure message, their entered values are preserved, and the gym's contact details are still on the page so they can contact the gym directly instead.

Page 15 of 26

Flow B — A prospective member contacts the gym with a question

  1. Starting context: the visitor is anonymous and has a question before committing to a plan.
  2. From Landing, the visitor navigates to Contact (via the instrument rail or the hero CTA).
  3. The visitor reads the gym's contact details block.
  4. Decision: the visitor either submits the enquiry form with their question, or uses the gym's contact details directly through the gym's own channel.
  5. Observable result: if the form was used, the visitor sees confirmation that the enquiry was received; if the contact details were used, the visitor has the gym's details to reach it.
  6. Continuation: the visitor returns to Landing to continue comparing plans.

Flow C — The gym owner/manager maintains the site's content

  1. Starting context: the Gym Owner / Manager needs the published site to reflect the gym's current offering, hours, schedule, trainers and plans.
  2. The owner/manager updates the gym's content about classes, trainers and membership plans, along with the offering, opening hours and contact details.
  3. Observable result: the updated content is what visitors read on Landing and Contact; content not yet updated remains as previously published rather than rendering empty.
  4. Continuation: the owner/manager reviews the published site as a visitor would, checking that the offering, hours, schedule, trainers and plan tables read correctly.
Page 16 of 26

Flow D — The gym owner/manager receives and answers an enquiry

  1. Starting context: a Gym Member has submitted the Contact enquiry form.
  2. Observable result: the enquiry reaches the gym's contact channel carrying the visitor's name, contact detail and message.
  3. The owner/manager reads the enquiry and responds through the gym's own channel.
  4. Failure and recovery: if delivery of the enquiry fails, the visitor is told on Contact and can retry or use the gym's contact details directly, so interest is not silently lost.
  5. Continuation: the owner/manager continues to receive further enquiries as visitors submit them.
Page 17 of 26

6. Visuals Colors and Theme

The creative direction is authoritative for this section. Muse: MARQ by Garmin — luxury instrument aesthetic. Headline idea: precision luxury instrumentation for a gym — dark titanium, amber signal, condensed numerals.

Color tokens (dark mode):

RoleHexUse
Background#0E1113Graphite-titanium ground for the whole page
Surface#171B1ESlightly lifted brushed-steel panels
Text#EDEAE4Warm off-white body and headline text — never pure white
Primary#C9A227Champagne-amber instrument accent: membership CTA, active plan, live metric
Accent#2FB3A0Teal secondary instrument signal: "in range / completed" states and small data marks only
Muted#8A9095Labels, units and secondary copy
Texture#1B2024Barely-visible topographic line texture behind the hero and data sections

Amber and teal together never exceed roughly 8% of any screen; the ground does the work.

Typography:

Page 18 of 26
  • Headings: Barlow Condensed at 600–700 weight, uppercase for display and section titles, tight tracking (-0.01em) so letterforms pack like engraved bezel markings.
  • Body: Saira at 400/500, 16–18px, 1.6 line-height, warm off-white on graphite — never condensed for reading.
  • Scale: 1.25 modular. Condensed display sizes 128 / 88 / 56 / 44 for hero and section numerals; body 18 / 16 / 14 / 12. Mobile hero clamps to 44px, section numerals to 40px.
  • Numbers are the loudest typography on the page: metric values set in Barlow Condensed at 3–6× body size with tabular figures, so "1,240 MEMBERS" and "06:00" read like dial readouts. Tabular numerals everywhere metrics appear.

Shape language: instrument geometry — perfect circles for gauges and dial rings, 2px hairline rules, 8px corner radii on panels (no pills, no soft blobs), chamfered 45° notches on the corners of key data cards, and 1px luminous edge highlights along the top of every panel to read as brushed metal catching light. Section boundaries are straight, ruled and flush — the page is a machined face, not a collage.

Layout: a 12-column grid with an asymmetric instrument rail — a fixed left column (64px on desktop, collapsing to a top strip on mobile) carrying section numbers 01–06 in Barlow Condensed with hairline ticks. Content blocks alternate between a wide editorial column (7 cols) and a narrow data column (4 cols) of ruled label/value rows. Sections are separated by full-width hairlines with a small amber tick at the left edge. Membership plans are three ruled data tables, not floating cards. At 375px the rail becomes a horizontal scrollable index under the wordmark; all columns stack and every label/value row keeps its value inside the viewport.

Page 19 of 26

Imagery: macro photography on graphite — chalk dust on a knurled barbell, condensation on a steel bottle, a close crop of a weight plate's engraved numerals, a sweat-sheened forearm gripping a handle, and a topographic-line overlay used as a quiet background texture behind data sections. Every photograph is edge-to-edge, low-key lit with a single warm rim light, and desaturated toward titanium except where the amber accent is physically present in the shot. No stock smiling gym-goers, no clip art, no gradient blobs.

Avoid: blue or indigo accents on white; Inter, Roboto, Arial, Helvetica, Poppins or system-ui for headings or body; pill buttons, soft blob shapes, gradient-blob heroes and grids of identical hover-lift cards; cheerful stock photography of smiling gym-goers or high-saturation lifestyle imagery; bouncy or springy easing, playful micro-interactions, confetti or particle effects; centred headline + subtext + button hero composition; pure-white text on pure-black ground; rounded pricing cards and floating frosted-glass panels. The generic indigo/blue-on-white SaaS template is forbidden for this project.

Page 20 of 26

7. Signature Design Concept

The public entry is a full-bleed graphite stage split 8/4 — an instrument face, not a landing page.

The left 8 columns carry an oversized Barlow Condensed headline — "TRAIN LIKE AN INSTRUMENT" — set at clamp(44px, 11vw, 128px), uppercase, stacked in three lines that bleed to the left viewport edge, with a single amber rule running beneath the last line and the primary CTA "BOOK A TRIAL SESSION" pinned directly below it as a chamfered rectangular button, not a pill.

The right 4 columns hold a dimensional_css instrument cluster: a large circular dial ring in brushed-steel grey with an amber needle sweeping to 78%, a teal tick for the completed segment, and three ruled readouts beneath it — "OPEN 05:30–23:00", "STRENGTH · CONDITIONING · RECOVERY", "1,240 ACTIVE MEMBERS" — in tabular Barlow Condensed numerals.

Behind everything, a barely-visible topographic line texture in #1B2024. No centred headline, no subtext paragraph, no blue button, no gradient blob.

The concept recomposes only accepted content and controls: the gym's offering, hours, member count, the CTA that leads to Contact, and the instrument rail that moves between the page's sections.

Page 21 of 26

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: dimensional_css

Landing Hero Motion Brief

  • Focal subject: the hero instrument cluster — a large circular dial ring in brushed-steel grey with an amber needle and a teal completed-segment tick, sitting beside the oversized condensed headline.
  • Input → transformation → outcome thesis: on load, the amber needle sweeps from 0 to 78% and the teal tick marks the completed segment; as the visitor scrolls, the hero composition drifts a few percent like a camera moving across a machined face, and metric numerals count up once when they enter view. The outcome is that the gym's numbers read as live instrument readouts rather than static marketing copy.
  • Motion vocabulary: needle sweeps on the hero gauge; numbers counting up when a metric enters view; a slow 12-second product turntable on the equipment photograph; a scroll-linked camera-like drift that moves the hero composition a few percent as the user descends. Easing is precise and physical — cubic-bezier(0.22, 0.61, 0.36, 1) — never bouncy.
  • Composed first frame: the graphite stage split 8/4, headline stacked in three lines bleeding to the left edge with the amber rule beneath it and the chamfered CTA below, the dial ring at rest at 0% with the needle at its start position, the three ruled readouts already legible, and the topographic texture faintly present behind everything.
  • Reduced-motion state: gauges render at their final value (needle at 78%, teal tick in place), the turntable becomes a still macro image, and scroll drift is disabled rather than hidden. All content and controls remain fully readable and usable.
Page 22 of 26

9. Non-Functional Requirements

NFR-1 — Public, account-free access (explicit). Both Landing and Contact are reachable anonymously with no account, login or stored profile. Rationale: the accepted page contract assigns access_requirement: none to both pages, and no accepted journey requires identity continuity.

NFR-2 — Readable text and controls at every viewport (explicit). Headlines, wordmarks, labels, numbers, cards' 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, and no other element covers 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. Where the direction asks readable text or a control to be cropped, clipped, covered or run off an edge, it stays whole and the gesture is carried with imagery or decoration instead.

NFR-3 — Scrolling and moving content (explicit). Moving and scrollable content (marquees, tickers, carousels, horizontally scrollable rows) may cross the viewport or container edge by design; it is judged by whether it actually moves or scrolls and whether every item becomes fully readable as it passes. With prefers-reduced-motion, a usable static arrangement is provided: items wrap into rows or the row scrolls horizontally so each item can be brought fully into view. A scrollable row need not show every item fully at once, including in reduced-motion mode.

NFR-4 — Reduced-motion support (explicit). All motion respects prefers-reduced-motion: gauges render at final value, the turntable becomes a still macro image, and scroll drift is disabled rather than hidden.

Page 23 of 26

NFR-5 — Enquiry delivery integrity (required_inference). A submitted enquiry must reach the gym's contact channel carrying the visitor's name, contact detail and message, and a delivery failure must be surfaced to the visitor with their entered values preserved. Rationale: the accepted outcome of expressing interest is that the gym receives it; without this, the Contact page's purpose is unobservable.

NFR-6 — Content resilience (required_inference). If a media asset or motion feature is unavailable, the page's ruled text content — offering, hours, schedule, trainers, plan rows, contact details — remains readable in place. Rationale: the accepted information must be consumable independently of decorative assets.

10. Tech Stack

  • Frontend: React, delivering the two custom pages (Landing, Contact) as a public, account-free site.
  • Styling: CSS with the direction's tokens — Barlow Condensed and Saira webfonts, the dark-mode palette above, clamp()-based display sizing, and CSS 3D transforms plus conic-gradient rings for the hero dial.
  • Backend: Python / FastAPI, providing the enquiry submission endpoint that receives the Contact form and forwards it to the gym's contact channel.
  • Storage: none required for the current scope — the site presents authored content and forwards enquiries; no member, booking or payment records are stored.
  • Packaging: Docker / docker-compose for the frontend and backend services.

Kubernetes is not required for this deployment.

Page 24 of 26

11. Assumptions and Constraints

  • A-1 (assumption). The gym's own contact channel (an inbox or equivalent) is the destination for submitted enquiries; the site does not manage, schedule or bill memberships.
  • A-2 (assumption). The gym's content — offering, opening hours, class schedule, trainers, membership plans and prices, contact details — is supplied by the Gym Owner / Manager and is the source of what visitors read.
  • A-3 (constraint). The current page contract is exactly two pages, Landing and Contact, both publicly reachable with no account. No additional destination, dashboard or administrative surface is part of the current delivery.
  • A-4 (constraint). Member accounts, online booking, payments, class scheduling and progress tracking are outside the current scope and are not implied by the gym context.
  • A-5 (constraint). The creative direction is binding: the dark titanium palette, Barlow Condensed and Saira only, instrument geometry, ruled data tables for plans, and the listed avoidances. The generic indigo/blue-on-white SaaS template is forbidden.
  • A-6 (constraint). Amber and teal together never exceed roughly 8% of any screen; the graphite ground carries the composition.
  • A-7 (assumption). The Gym Owner / Manager's content responsibility is exercised on the published site's content; no separate first-party administrative destination exists in the current page contract.
Page 25 of 26

12. Glossary

  • Landing — the public entry page that explains what the gym provides and presents its online offering.
  • Contact — the public page where a prospective member expresses interest in joining or contacts the gym.
  • Instrument rail — the persistent left-edge (desktop) or horizontally scrollable top index (mobile) carrying section numbers 01–06 with hairline ticks and a sliding amber marker.
  • Instrument cluster — the hero's dimensional_css dial assembly: circular dial ring, amber needle, teal completed-segment tick, and three ruled readouts.
  • Metric readout — a statistic (members, class slots, coach count, opening hours) set in tabular Barlow Condensed numerals at 3–6× body size with a hairline rule above and a small uppercase unit label beneath.
  • Plan table — one of the three ruled membership plan tables with label/value rows, hairline dividers and a chamfered amber SELECT control.
  • Enquiry — the visitor's submitted expression of interest, carrying name, contact detail and message, delivered to the gym's contact channel.
  • Gym contact channel — the gym-owned destination that receives enquiries; not a persona and not a first-party product surface.
  • Tabular numerals — figures of equal width used wherever metrics appear, so values read like dial readouts.
Page 26 of 26

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: View hero readouts
Landing: Read offering
Landing: Read opening hours
Landing: Read class schedule
Landing: Read trainer info
Landing: 1. Compare membership plans
Landing: 2. Select plan
Contact: 3. View contact details
Contact: 4. Fill enquiry form
Contact: 5. Submit enquiry
Contact: 6. Correct validation error
Contact: 7. View submission confirmation
Contact: 8. Retry after delivery failure
Landing: 9. Return to landing
Contact: 10. Use contact details directly

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: View hero readouts
Landing: Read offering
Landing: Read opening hours
Landing: Read class schedule
Landing: Read trainer info
Landing: 1. Compare membership plans
Landing: 2. Select plan
Contact: 3. View contact details
Contact: 4. Fill enquiry form
Contact: 5. Submit enquiry
Contact: 6. Correct validation error
Contact: 7. View submission confirmation
Contact: 8. Retry after delivery failure
Landing: 9. Return to landing
Contact: 10. Use contact details directly