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.
The current delivery is a first-party, publicly reachable website with two pages:
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:
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.
Not applicable — no reference directive in this project declares content_source.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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):
| Role | Hex | Use |
|---|---|---|
| Background | #0E1113 | Graphite-titanium ground for the whole page |
| Surface | #171B1E | Slightly lifted brushed-steel panels |
| Text | #EDEAE4 | Warm off-white body and headline text — never pure white |
| Primary | #C9A227 | Champagne-amber instrument accent: membership CTA, active plan, live metric |
| Accent | #2FB3A0 | Teal secondary instrument signal: "in range / completed" states and small data marks only |
| Muted | #8A9095 | Labels, units and secondary copy |
| Texture | #1B2024 | Barely-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:
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.
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.
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.
Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: dimensional_css
Landing Hero Motion Brief
cubic-bezier(0.22, 0.61, 0.36, 1) — never bouncy.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.
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.
clamp()-based display sizing, and CSS 3D transforms plus conic-gradient rings for the hero dial.Kubernetes is not required for this deployment.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No comments yet. Be the first!