Gym website prompt, timetable first

A gym sells a time slot. Everything else on the site, the equipment list, the floor, the coaches, is a reason to trust the slot. Somebody who cannot find out whether there is a class at six in the morning leaves, and no photograph of a squat rack changes that.

That makes the timetable the product page, and it goes second. Every class row carries five fields: time, class name, coach, duration, spaces remaining. The fifth is the one that turns a schedule into a decision.

Short verdict: ratio 1.778 from a 16px root with no step below body, a 56px touch floor, #FF4D1C carrying near black text at 5.9:1, and three curves. The Thanor library ships designs built to that spec.

The timetable is the product#

A class schedule is a data table that has to work on a phone held in one hand, in a corridor, by somebody who has thirty seconds. That rules out the two layouts most gym sites use.

• Not a seven column week on a phone. A grid that needs pinching is a grid nobody reads. Days become a horizontal strip of tabs, today selected by default, and the selected day is a single vertical list of rows.
• Not a booking widget in an iframe. It loads late, ignores the page's type scale and cannot be styled, so the reader sees two sites stacked.
• Not a downloadable weekly PDF, for the same reasons a menu is never a PDF.

Each row is one line at body size plus a second line in muted: 06:00 and Strength, then Dana K. / 45 min / 4 spaces. A row with zero spaces stays visible, struck through, with a standby link. Hiding a full class makes a reader think the gym is quiet.

Then the thing that separates a gym page from every other page in this set: it is often read during a session, on a phone, at arm's length, with the screen at an angle. So the type ladder has no step below body size. No fine print anywhere, which forces a useful discipline, because a fact that is not worth 16px is a fact that can be cut.

The same logic raises the touch floor. 56px minimum on every tap target rather than the usual 44px, with 16px between adjacent targets, because the thumb using this page is not always dry or steady. That one number changes the layout of the schedule, the day tabs and the price panel at once.

A scale with no fine print#

Ratio 1.778, the major seventh, from a 16px root. It is the widest ratio in these ten specifications, and five steps is the whole ladder. There is nothing under step 0, on purpose.

Step 4 appears exactly once on the whole site. A 160px figure used twice stops being emphasis and becomes a texture.

Spacing runs 8, 16, 24, 32, 56, 88, 120, 176. The 56px rung is the touch floor and it is also the height of a class row and a day tab, so the schedule is built from one value. Section padding 120px on desktop, 88px on tablet, 56px on a phone.

The accent carries #0C0C0C text and never white, which measures 3.32:1 and fails at any size. Ink on the row surface is 17.01:1, so a class row needs no second ink value.

Three curves and a page that holds still#

Three curves, and one of them exists only because the schedule is interactive.

--ease-press: cubic-bezier(0.2, 0, 0, 1);     /* 120ms */
--ease-tab:   cubic-bezier(0.5, 0, 0.5, 1);   /* 200ms */
--ease-drive: cubic-bezier(0.87, 0, 0.13, 1); /* 480ms */

--ease-press at 120ms handles every tap: the button fill darkens, the row surface lifts one value on the spacing ladder. Short and abrupt, because a page used mid workout should respond before the thumb leaves the glass.

--ease-tab at 200ms slides the underline between day tabs and cross fades the list beneath. --ease-drive at 480ms is symmetrical and hard at both ends, and it runs on section entrances, 32px up, once, at 25% of the viewport, no stagger. No stagger anywhere on this page: a staggered list of class rows makes the reader wait to read a time.

Four refusals, and the first two are the ones a model will add unprompted:

• No counting animation on the 160px figure. It is a time, not a score.
• No looping background video of a workout. It costs the schedule its place above the second screen and costs a phone its battery.
• No parallax, no scroll jacking, no pinned horizontal section. This page gets scrolled fast.
• No hover states as the only way to see a fact. Everything visible at rest, the way a professional page treats state.

Seven blocks, and an honest price panel#

Seven blocks, and two of them are unusual enough to be worth arguing for.

1. The time. One figure at step 4, one line at step 3, one wide button reading See this week. No image behind it.
2. The timetable. Day tabs, then rows. Live, this week, with spaces.
3. A first session, in four steps. What to bring, where to park, what happens in the first ten minutes, what it costs to try.
4. Price. Two options, never three, each with the joining fee, the notice period and what happens when you cancel, in plain sentences.
5. The place. Three photographs of the actual floor, and one of the changing rooms.
6. Coaches. Name, qualification, the thing they coach. No paragraph of philosophy.
7. The trial. One button, one field, and the time of the next available session.

Block 4 is the block that gets softened and should not be. A page that states the notice period plainly converts fewer visitors and keeps more members, and the people it loses were going to cancel in month two. Block 5 includes the changing rooms because that is the photograph every prospective member wants and almost no gym publishes.

Block 3 is doing quiet work too. A first visit to a gym is intimidating in specific, practical ways, and four plain sentences about parking and the first ten minutes remove more friction than a paragraph about community. Block 6 follows the same rule: a qualification is checkable and a philosophy is not, which is the distinction that makes a page read as evidence rather than as copy.

The verdict on a gym brief#

Timetable second, five fields per row, nothing under 16px, a 56px touch floor, one 160px figure, and a price panel stating the notice period. All six are about a phone in a corridor, not a laptop, and Thanor sells them resolved.

The brief to paste#

Build a gym site, dark, phone first.

TYPE: ratio 1.778 from a 16px root: 16, 28, 51, 90, 160. Nothing below
16px exists. Body and class rows 16/24 weight 500, class names 28/34,
section headings 51/54, statement 90/88, one figure 160/144, used once.

SPACE: 8, 16, 24, 32, 56, 88, 120, 176. Touch targets 56px minimum, also
the height of a class row and a day tab, 16px apart. Section padding
120 / 88 / 56.

COLOUR: page #0C0C0C, surface #181818, ink #FAFAFA, muted #8E8E8E, accent
#FF4D1C with #0C0C0C text, never white.

TIMETABLE: day tabs as a horizontal strip, today selected, then one
vertical list. Each row: time and class name at 16px, then coach,
duration and spaces remaining in muted. Full classes stay visible, struck
through, with a standby link. No iframe widget, no PDF, no seven column
grid.

MOTION: taps cubic-bezier(0.2, 0, 0, 1) 120ms. Day tabs cubic-bezier(0.5,
0, 0.5, 1) 200ms. Entrances 32px up, cubic-bezier(0.87, 0, 0.13, 1) 480ms,
once at 25% of viewport, no stagger anywhere. No counting numbers, no
background video, no parallax, no hover only facts.

BLOCKS: one time, one line, one button / the timetable / a first session
in four steps covering kit, parking, the first ten minutes and trial cost
/ price, two options, with joining fee, notice period and cancellation
stated plainly / three photographs of the floor, one of the changing rooms
/ coaches with qualifications / trial, one field, next session time.

Change the discipline and the accent, keep the touch floor. Browse the Thanor library for the design whose weight matches the room.