Tome theme · Classes, camps and preschools
Roster. Built to bring families to a first class.
For businesses that run classes on a timetable and sell a term of them: gymnastics, dance, swim and martial arts schools, camps and preschools. The person reading is usually a parent on a phone, so the page answers their questions in order: is there a class for my child's age, when is it, who teaches it, and is it safe. Then it makes the first step small, a free trial class, before it asks for a term.
- Palettes
- 4, each light and dark
- Price
- In the Craft Library and every paid plan, or $199 once with its packs
- Demo
- Kip & Tumble, a fictional gymnastics and tumbling gym, whose trial form doesn't book anything
Palettes
Four palettes. Pick the one that suits your classes.
Every palette as the whole home page, side by side. Scroll inside any of them to see it top to bottom. Under the colors, the sections stay the same.
Captured from the demo at 1440px. Kip & Tumble, a fictional gymnastics and tumbling gym.
All four are daylight pages: sections alternate between the page color and a tint, with no dark bands. In every palette the only filled button is the trial, and the accent marks the level stripe, the selected day on a phone and the section labels. Each palette also has a derived dark mode.
The sections
What each section does for the front desk.
These are crops from the demo gym, in Chalk. Each section answers a question parents usually ask the front desk: is there a class for my child's age, when is it, what does it cost, and how do we start?
Start with your child's age
The first screen asks two questions, answered with a tap: how old the child is, and whether they've done this before. The answer appears in place as one card. It says back what the parent told it, names the class to start in with its level ("Level 1 of 5 · 45 minutes · 1 coach to 8"), lists this week's times, shows how many spots are left when you've entered a number, and carries the trial button. Its link to the timetable arrives already filtered to that age, and without JavaScript the card shows a default answer.
The week, in one frame
The timetable is your class data, not a pasted image or a PDF. The week sits in one framed panel with the filters for age and level, the term dates and any break, then a column for each day, every class card the same height. One "Try it" button is filled, on the soonest class with room for the age shown, and it moves when the filter changes. A day with no classes for that age keeps its column and says so, and a class already finished today stays readable and says "Finished". On a phone the week becomes a day strip that stays in view, with today selected. "Print this week" prints the week, and each class can go into a calendar for the whole term, skipping the break.
Where does my child start?
The pathway sets out your classes by age band, then by level. Each level card carries the level stripe, who the class is for, what a child can do to move up and this week's times. The stripe has one segment for each level in the track, filled up to this one, and it always sits beside the words, so a level looks the same on the finder, the timetable and the pathway. Tap an age band to see its levels; without JavaScript every band shows. On a program page the same data becomes a ladder with "You're here" and a look at the next level up.
Fees, with the free trial first
The free trial and the term fee sit side by side, and the trial is marked by weight instead of a badge: it sits forward on its own card with the only filled button, while the term card sits flat on the tint. The term price changes with a classes-a-week picker and says what each class works out to ("14 weeks · $17 a class" in the demo), then what's included and what isn't. Sibling discounts, make-up classes and how to stop sit in one line beside the cards. On a phone the trial card comes first and the picker sits above a single price card.
Come try a class
Every page ends on the trial form, beside a coach's portrait and a line from them, directions and your front-desk hours. The header and the phone bar follow those hours: while you're open, "Call us, open till 7" sits beside "Book a free trial" and the phone bar shows Call; once you close, the call drops out and the promise under the form changes from "We'll call or email today, before 7." to "We'll reply by 10am tomorrow." The phone bar's other button names the next class with room, such as "Try Tuesday 4:30".
That's what a visitor sees. Here's what you get to build it.
What's in the package, and what it's built from.
Navbar 1 with your name on the left, the links, the hours-aware call and one filled "Book a free trial". It sits on the page and takes a hairline once you scroll. On a phone a bottom bar carries Call (only while you're open) and the next class with room. Footer 7 holds your front-desk hours, address and parent links as text rows, with the small print ruled off below, and no call-to-action band above it.
Chalk, Lane, Camp and Sprout. All four are light pages, each with a derived dark mode for a site that wants one.
Bricolage Grotesque, a friendly grotesque, for headings and single big numbers such as a coach-to-child ratio. Atkinson Hyperlegible Next, built to be read easily, for everything a parent reads, taps or checks, with every time, age, price and date in even-width figures so "4:30" and "11:00" line up down a column. Labels are in sentence case, not capitals, and italic is kept for a quoted parent. Both ship inside the package under the SIL Open Font License, so the site makes no third-party font request.
The class finder hero, the Safe Hands strip and panel, the framed timetable, the pathway and the Little movers cards, coaches with their credentials, Your first class, parent quotes, the term fees, the grouped FAQ with its side card, and the closing trial band.
Filters by age band and level, and a link can arrive already filtered. A class can show spots left, "Waitlist open" or "Class full", but only from a number you enter with an expiry date: once it expires the line disappears, it never animates or counts down, and a class with no number still takes a trial. Each class has an "Add to calendar" file that repeats weekly to the end of term and skips breaks, there's one for the whole term under the week, and the print sheet fits the week on paper.
One page per class level. On a wide screen the facts a parent checks (ages, coach-to-child ratio, class length, what to wear, the term, the price) run down the left margin, the description sits in a reading column, and a card on the right stays in view with the next three sessions from your timetable, the trial button and the named lead coach. Below come that level's times for this week and next, its place on the ladder, Your first class, the FAQ and the trial form. On a phone the facts become a list under the heading, and the bottom bar offers the next class.
A strip under the hero for three to five lines a parent can check, and a panel further down with your coach-to-child ratios as large numbers, what you check for every coach and how drop-off and pick-up work, set out as policy, and a ledger of credentials with the issuer, what each covers, its dates and a link to verify it, plus the date the policy was last reviewed. A strip line tied to a credential type hides when no current credential of that type is on file. In the demo every credential, ratio and policy is labeled "Sample".
Your name, phone or email, the child's first name and age (age, not date of birth), the class (with "Not sure yet"), and the days that suit. It sends a request to your front desk; Roster has no booking engine, and each class's "Try it" button can link to the enrollment system you already use instead. With Tome Forms, part of the CRM & Marketing plan ($400 a year), the finder and the "Try it" buttons open the form with the class and age chosen and a line saying so; without it, the same form runs on Payload's Form Builder and the parent picks the class.
Sections rise and fade in once as they arrive, the level stripe fills once to the real level when it comes into view, and buttons give a small spring when pressed. With reduced motion turned on, nothing rises, the stripe is drawn at its level from the start and presses don't move. An optional paper grain on Sprout.
Five, from the Local Blocks pack, which is free with any theme: Class Finder, Class Schedule, Class Pathway, Credentials and Price List (term fees). They read your classes from one timetable kept in Tome Local, so the finder, the timetable, the pathway, the program pages and the phone bar always agree. They need Local Blocks 0.6.0 and @wabbit/tome-local 0.3.0 or later, with its class schedules switched on; both are free.
What it's built from
A theme owns no blocks of its own. It restyles blocks from the Tome packs below.
| On the page | Block | Pack | With the theme |
|---|---|---|---|
| Hero, program page hero | Class Finder | Local Blocks | Free |
| Safe Hands strip and panel | Credentials | Local Blocks | Free |
| Timetable, a level's times | Class Schedule | Local Blocks | Free |
| Pathway, Little movers, level ladder | Class Pathway | Local Blocks | Free |
| Fees | Price List (term-fee variant) | Local Blocks | Free |
| Parent quotes, FAQ | Testimonial, FAQ | Marketing Starter | Free |
| Coaches, closing trial band | Team Roster, Contact (estimate variant) | Agency Essentials | Included |
| Program facts and next-step card | Info Panel | Editorial Blocks | Included |
| Your first class | Phase Ledger | Dossier Blocks | Included |
Buying the theme includes Agency Essentials, Editorial Blocks and Dossier Blocks, and the Local Blocks pack comes free with it, so you can build the pages exactly the way the demo has them. The theme also restyles any other Tome block you add.
Two ways in
Install it yourself, or have us set it up.
Developers and agencies install it themselves; business owners usually want it set up. It's the same theme either way.
Install it yourself · developers and agencies
The Craft Library
Every theme and every paid block pack, Roster included, for $250 a year.
Or just Roster, $199 once
It includes the packs the demo is built from (Agency Essentials, Editorial Blocks, Dossier Blocks and the Local Blocks pack). Each purchase covers one production site, and staging and development copies are unlimited. The purchase adds it to your account, and you install it from our registry with the token on your account page.
# after purchase: registry token from your account page
pnpm add @wabbit/tome-theme-roster
// app/layout.tsx
import '@wabbit/tome-ui/tokens.css'
import '@wabbit/tome-theme-roster/styles.css'
import '@wabbit/tome-theme-roster/fonts.css'
<!-- pick the palette on the html element -->
<html data-tome-theme="roster" data-tome-palette="sprout">Set it up for me · business owners
We set it up
We install Roster on a new site and replace Kip & Tumble with your business: your classes, levels and age bands entered once as your timetable; your term dates, breaks and fees; your coaches; your front-desk hours; and your own photos. Your real credentials, ratios and policies go in as you hold them, with links to verify them, and every Sample label comes off. If you already enroll through a booking system, each class's button can go there. You get a written proposal with the price before any work starts, and it says which way the trial form is set up.
Runs on
What it runs on.
- Payload
- 3.67 or later
- Next.js and React
- Next.js 15 or later, React 19
- @wabbit/tome-ui
- 0.20.0 or later, below 1.0
- @wabbit/tome-core
- 1.23.0 or later, below 2.0. Only needed to list the theme in the admin's theme switcher.
- Package
- @wabbit/tome-theme-roster 0.1.0, a preview release
- Fonts
- Self-hosted from the package, SIL Open Font License
- License
- One production site per purchase. Staging and development copies are unlimited.
Tell us about your business.
Pick a palette and tell us what the business does. We'll reply with questions or a written proposal for setting up Roster with your details.
Installing it yourself?
The Craft Library includes Roster, every other theme and every paid pack for $250 a year. Or buy Roster alone for $199 once, with the packs it needs, for one production site.
Set up Roster for my business