Next session
Intro to lead, tomorrow at 7pm
With Priya. Wall 3. Cancel free until 1pm tomorrow.
This week
Mon
Climbed
Tue
Today
Wed
Booked
Thu
Fri
Booked
Coming up
All bookingsIntro to lead
Booked
Open bouldering
Booked
Five sections, ordered by how often a member opens them in a week. These boards fix structure and behaviour only. Visual style comes in step 2.
/
When am I next climbing, and is anything about to change?
/timetable
What can I book, and when is there space?
/timetable/:idInstructor, level, spaces, what to bring/timetable/:id/book/timetable/:id/waitJoin, see your place, get a text when a space opens/bookings
What have I booked, and can I change it?
/bookings/:idCheck-in code, cancellation deadline/membership
What does my plan include, and what is left?
/membership/change/membership/guests/account
Who you are to the gym.
/account/detailsName, emergency contact, waiver statusA booking opens its class. A class shows your other bookings that day. The Home headline goes straight to the next booking and its check-in code.
Sign in. Public timetable for people who are not members yet. Not found. Payment errors that say what to try next.
1. Spaces left per class in the timetable list, not only on the class. 2. A booking endpoint that returns the check-in code.
Members book on their phones, often in the changing room, so the phone gets the most care. The front desk runs a tablet; staff schedule classes on a laptop.
Bottom tab bar, five labelled tabs. The next booking and its code are never more than one tap away.
An 88 px rail. At the front desk it shows today's classes with names, in landscape.
A 248 px sidebar. Class detail opens in a right panel beside the week's timetable.
| Pattern | Phone | Tablet | Laptop and desktop |
|---|---|---|---|
| Page actions | One primary action in the header; the rest in a More menu | Primary and one secondary action in the header | All actions in the header, primary rightmost |
| Timetable | One day at a time, swipe or tap a day; spaces left on the right | Two days side by side | The whole week as columns; full classes stay visible and say so |
| Filters | Filters button opens a bottom sheet; active filters show as removable chips | Filters button opens a popover; chips below the search | Inline filter bar; every choice visible |
| Detail | Full screen with a back button | Side sheet over the timetable | Right panel beside the timetable |
| Booking | Full-screen task; tabs hidden; Exit at top left | A centred 560 px column with a step indicator; navigation hidden behind an Exit link | |
/The next session first, with its check-in code, then the week. Nothing to configure before booking again.
With Priya. Wall 3. Cancel free until 1pm tomorrow.
With Priya. Wall 3. Cancel free until 1pm tomorrow.
/timetableThe week at a glance, with spaces left on every class. Full classes stay visible and say so, rather than disappearing.
24 classes this week. You have 6 credits.
| Day | Time | Class | Level | Instructor | Spaces |
|---|---|---|---|---|---|
| Wednesday 14 October | |||||
| Wed | 6pm | Youth squad | Under 16 | Sam | 4 left |
| Wed | 7pm | Intro to lead | Beginner | Priya | Booked |
| Wed | 8pm | Technique clinic | Improver | Alex | Full |
| Thursday 15 October | |||||
| Thu | 7am | Early bouldering | All | Drop-in | 12 left |
| Thu | 7pm | Strength for climbers | All | Alex | 2 left |
/timetable/:id/bookThree steps, one decision each. The last step restates the time, the cost and the cancellation deadline before anything is booked.
Wednesday 14 October, 7pm to 8:30pm. Wall 3, with Priya.
You need to have passed the top-rope check. You did on 2 Sep.
Cancel free until 1pm on the day. After that the credit is used.
Chalk white, warm greys, one rust colour for actions, and the week drawn as a strip.
Every text colour passes WCAG AA on white (checked by the generator). Full, booked and spaces left are always words, never colour alone.
| Token | Used for | On white | |
|---|---|---|---|
| Stone #1C1917 | Text, totals rule, days climbed | 17.5 : 1 | |
| Pebble #57534E | Secondary text, captions | 7.6 : 1 | |
| Rust #9A3412 | Primary actions, links, today | 7.3 : 1 | |
| Rust tint #FBE9E2 | Selected row, current nav item | fill only | |
| Chalk #FAF7F2 | Navigation, sheets behind content | fill only | |
| Rule #E2DCD5 | Row dividers; input borders use Pebble | line only | |
| Amber #8A4B00 | Full, few spaces left | 6.8 : 1 | |
| Red #B42318 | Errors and cancellations only | 6.6 : 1 |
Availability is never green and red. "Full" is a word and an amber tag; spaces left is a number.
The one signature element. Seven days, read left to right. It appears on Home and above the timetable, full width on laptop and as five days on phone.
| Day | Class | Time | Spaces |
|---|---|---|---|
| Wed | Intro to lead | 7pm | Booked |
| Wed | Technique clinic | 8pm | Full |
/The same structure as the wireframe, now in chalk white and rust, with the week strip as the signature element.
With Priya on Wall 3. Cancel free until 1pm tomorrow.
Unused credits do not roll over. 6 will expire on 1 Nov.
| Day | Class | Time | |
|---|---|---|---|
| Wed 14 | Intro to lead | 7pm | Booked |
| Fri 16 | Open bouldering | 6pm | Booked |
| Sun 18 | Kids' club (guest) | 10am | Booked |
/timetable · /bookings/:idSpaces are a word and a number, never a colour alone. A booking ends on a code the member can show at the desk.
Wednesday 14 October at 7pm, Wall 3, with Priya.
Check-in code