Tome theme · Course creators and small schools

Schoolroom. Built to teach a course, start to certificate.

For people who teach for a living and sell what they teach as courses: craft and creative teachers, professional-skills teachers, coaches and small schools with two or three instructors. Most course sites are built like funnels. Schoolroom is built like a school: the first screen says what a student will be able to do, the course page reads like a syllabus with the price stated once, the lesson player keeps the student's own notes in the margin, and a certificate at the end can be checked by anyone with its ID. The whole of it, from the home page to the student's dashboard, is one theme.

Palettes
4, each light and dark
Price
In the Craft Library and every paid plan, or $199 once with its packs and a first year of the five engines it runs on
Demo
Handbill Marketing School, a fictional school of ten marketing courses; its teachers, quotes, prices and figures are illustrative, and nothing a visitor does there is saved
Schoolroom home page in Margin
The lesson player on a phone, in Night School

Palettes

Four palettes. Pick the one that suits what you teach.

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.

Schoolroom home page in Margin
MarginWarm paper, graphite ink, graphite for the buttons, and a highlighter yellow that appears only where a student has been. The default. A good fit for creative, craft and writing courses: sketching, sewing, baking, music, writing. The Handbill demo opens in it.
Schoolroom home page in Lab
LabCool white, ink-navy-black ink and an ink-pen violet. A good fit for technical, spreadsheet, data and tool courses.
Schoolroom home page in Atelier
AtelierWarm cream, brown-black ink and a magenta accent. A good fit for design, beauty, music and performance courses.
Schoolroom home page in Night School
Night SchoolGreen-black, chalk-white ink and a chalk blue, the one palette designed dark. It opens dark and has a derived light mode. A good fit for language, math, science and test-prep teachers.

Captured from the demo at 1440px. Handbill Marketing School, a fictional school of ten marketing courses.

Schoolroom gives color two jobs and no more. The accent fills the primary action (Enroll, Buy, Continue) and the progress line; everywhere else it's punctuation. The highlight wash is the second job: a soft tint behind the lesson a student is on, a passage they marked, a reply they haven't read. It marks where the student has been and never decorates a marketing page. In Margin the accent is the graphite ink itself, so the yellow wash is the only color on the page. Every state also carries a word or an icon and a short rule at its left, so nothing depends on color alone, and passed, needs work and expired are the same three tokens in all four palettes, so "passed" means one thing whichever palette a school picks. Margin, Lab and Atelier are light designs with a derived dark mode; Night School is designed dark and derives its light.

The sections

What each section does for a student.

These are crops from the demo, in Margin. Each one answers something a student wants to know before and after they pay: what will I be able to do, what does a lesson look like, what does it cost, where was I, and can anyone check that I finished?

  1. The outcome, and a demo you can touch

    The outcome, and a demo you can touch

    The home page opens on one line in Literata that says what a student will be able to do ("Write a landing page that a stranger understands."), a short lede naming the subjects, one button to the lead course and a text link to the free one. Under it, in a raised card, sits a demo of the thing the school teaches. In Handbill it's a landing-page headline before and after, with the teacher's notes on what changed; a school can put a video or a still there instead. Without script, both states of the demo show one above the other.

  2. A course, as a launch

    A course, as a launch

    The lead course laid out like a launch: its outcomes as a typeset list on the left, and on the right the price first in large type, "One payment. No subscription.", the counted totals (modules, lessons, total time) with their "Demo figures" tag, the Enroll button, a link to the full syllabus, and the prerequisite in words: "Works best after Positioning for Small Business. You can still buy this one." Under that, the free course as the way in, with "No card." Then the only photographs on the first screens, under the heading "Where the lessons end up": one large and two small, the situations the course prepares you for (the page a customer lands on, the ad someone sees once), each with a short line. Never three equal cards.

  3. The teacher's letter

    The teacher's letter

    The teacher is a voice with a small face. A first-person letter at reading width beside a tall portrait labeled "Illustrative photo": where they've taught, how they record a lesson, what they care about most, and the free course as the way to find out whether you like how they teach. A second teacher gets a short note with a smaller portrait. There's no follower count and no hero portrait anywhere.

  4. What a lesson looks like

    What a lesson looks like

    A plain three-term list, Watch, Do and Get feedback, each a sentence or two about what the student actually does, beside two photographs of the work with captions, and one link into a sample lesson. No numbered step cards and no icons.

  5. The school's index, and its paths

    The school's index, and its paths

    Every course as a row under its subject: the name in Literata, then level, lessons, time and price in a quiet line with even-width figures, so ten prices line up. The free course and the entry course sit at the front of every subject. Under the index, the skill paths as rows: a name and the counted totals on the left, the course order with arrows on the right, and a line saying what a path is: an order to take the courses in, bought one at a time, with no bundle and no pressure to finish. Every total is added up from the courses' own numbers and says so.

  6. The Syllabus

    The Syllabus

    The course page reads like one. Outcomes first, then the outline: modules and lessons with their real lengths, "Free preview" where a lesson is open, and a locked lesson that says in words what opens it ("Opens after you finish lesson 5, Rewriting a hero headline."). Beside it, a buy box that stays put as you scroll: the price first, "One-time payment. No subscription.", the 30-day refund in one sentence, the certificate, how long access lasts, the written reply on each assignment, the counted totals, Enroll, and "Try lesson 1 free". On a free course the box says "No card needed" and the button says "Start the free course".

  7. The Margin

    The Margin

    The lesson player. The curriculum on the left with each lesson's length, a tick for done, the current row in the highlight wash and locked rows that say so; the lesson in the middle at reading width, with a quiet line above it ("Lesson 1 of 12 · 4 complete"), the video, and the transcript beside it; and on the right the student's own notes in Literata italic, the way a margin note reads. Previous and next sit under the lesson. Marking a lesson complete sweeps the wash across its row once, like a pen. Quizzes and assignments open inside the same frame: a check the student can take as often as they like with nothing scored, or a scored one with its rules stated first; and an assignment with what to submit, its status, and the teacher's written reply.

  8. The Transcript, and the certificate

    The Transcript, and the certificate

    The student's dashboard is a record they own. A rail (Overview, Courses, Grades, Certificates, Notes, Replies, Account) with counts only where something needs doing, and an overview of three things: Continue (the course, the current lesson, one button), "Since you were last here", and one "Also in progress" line. No streaks, rings, points or leaderboards anywhere. The certificate is a document: name, course, date, issuer, a verification ID and its QR mark, one hairline frame, and it prints to one landscape page. Its verification page is public and plain: valid, expired or not found, in words.

  9. Before you enroll, and the two ways out

    Before you enroll, and the two ways out

    The FAQ carries the questions a careful student asks before paying (do I need a business already, which course first, how long do I have access, what if it isn't for me, do I get feedback, is there a certificate, is it one payment), in the teacher's voice, and ends with "Still have a question? Write to me" and a stated reply time. The home page closes on the one dark band: the free course as the first path, the full index as the second.

That's what a visitor sees. Here's what you get to build it.

In the package

What's in the package, and what it's built from.

Header and footer

Navbar 1 with the school's name at the left as a wordmark, then Courses, which opens a panel listing every course under its subject with the free one called out, the skill paths, and "All courses"; then Teachers; and at the right Sign in, Start free and the mode toggle. On a phone it's the name and a Menu button, and Courses becomes an accordion. Signed in, the right side becomes "Continue: Lesson N" and an account menu. A school with one course gets Courses as a plain link. The footer sits in its own tinted zone: a line about the school, the School links (Courses, Skill paths, Teachers, Verify a certificate), the small print, Privacy and the refund policy, with no call-to-action band above it.

Palettes

Margin, Lab, Atelier and Night School. Three light designs with a derived dark mode, and Night School designed dark with a derived light mode.

Type

Literata, a serif drawn for long reading on screens, for headings, the lesson body, the prices and the italic margin voice, and Lexend for everything a student does with the interface: buttons, labels, the lesson line ("Module 1 · Lesson 1 · 12 min"), the rail. Headings sit at a regular weight, never heavy. Lexend has no even-width figures, so every column of numbers (lesson lengths, prices, grades, totals) is set in Literata's tabular figures and lines up. Running text sits inside a 600px measure, and lesson text runs a size larger than marketing text because people read a lesson for twenty minutes at a time. Both families ship inside the package under the SIL Open Font License, so the site makes no third-party font request.

The highlight

The theme's one new idea. A soft wash behind the lesson a student is on, a passage they marked, a reply they haven't read. It's how the student's own progress becomes the visual system, in place of streaks, points and confetti. In Margin it's a highlighter yellow and the only color on the page; in Lab, Atelier and Night School it's a tint of the palette's accent. The accent itself fills only the primary action and the progress line.

The outcome hero

Extras' Outcome Hero. One line, a lede, one button and one link, then a demo card that takes a built-in before-and-after toggle, a video or a still. The toggle is a small island; without script both states render one above the other with a line saying so.

The launch split

Learning Blocks' Enrollment CTA in its split layout: the course's outcomes beside a price column whose totals are counted from the course's own items at render time. The same block in its buy-box layout is the syllabus page's sticky box, and in its closing layout the two-path band. Outcomes can be switched off per block.

The teacher's letter

Learning Blocks' Instructor Card as a letter (a first-person body beside a small portrait rail) and as a one-line note for a second teacher. The portrait comes from the instructor's own record.

What a lesson looks like

Dossier Blocks' Term Ledger with its two figures, captions and a link under the rows. A definition list, not a step diagram.

The index and the paths

Learning Blocks' Course Index (courses grouped by subject as rows, two subject columns from 1600px) and Skill Path Rows (each path with its counted totals and the course order). Both read the Courses engine and count lessons, time and price from the courses themselves; neither prints a figure anyone typed.

The Syllabus

The course page is the Student app's course landing with the theme's treatment: the outline from the course's own modules and lessons with real durations, free-preview marks and prerequisite locks explained in words; the counted totals (and no total when a lesson lacks a duration); the buy box with the price first, the refund line, the certificate line and the access line, then the one action. A free course asks for no card.

The Margin

The Student app's lesson player with the theme's treatment: curriculum left, lesson at reading width, the student's notes right in the italic margin voice, Previous and Next under the lesson, the wash on the current row and a one-time sweep when a lesson is marked complete, prerequisite locks in words. The quiz renderer takes a practice mode (nothing scored, no pass line) beside the scored one, and the assignment renderer shows instructions, status, resubmission and the teacher's written reply. This release's lessons are video with the transcript as lesson text; audio lessons, a transcript with timestamps, notes anchored to a passage, saved items, voice replies and a read state for replies are on the follow-on list, each with a trigger.

The Transcript

The Student app's dashboard pieces, the overview, a flat section rail and a per-course view, all added for Schoolroom and off by default so every other school's dashboard renders as it did. "Since you were last here" is true across devices: the Courses engine keeps a student's two previous visit dates, and "New" on a reply means after the previous visit.

The certificate and its check

The Student app's certificate template in its document form (one hairline frame, a signature line, the verification ID and QR mark, one landscape page when printed) and the public verification page, which answers valid, expired or not found in words.

Checkout

A single-task page with the wordmark only: the order beside the account, the price on the button equal to the charge, an unchecked optional opt-in, no upsell, no timer, no viewer count. Pay opens Stripe's hosted card page; cancel returns to the order with everything kept; the confirmation's one action is the first lesson. A free course never asks for a card. The refund policy is a page of its own, and the buy box's refund line says the same thing it does. The card form inside the page is on the follow-on list; this release uses Stripe's.

What the demo adds as code you can copy

These live in the demo's starter, not in the packs: the route group with the marketing pages, the checkout, success and cancel pages, the dashboard routes under one rail, the verification lookup, the refund policy page, the read-only demo student, and the Handbill seed with its ten courses, three paths, two teachers, a scored quiz, a practice check and an assignment with a written reply. A real school keeps the shapes and changes the values.

The five engines

Schoolroom runs on five Tome engines. Courses holds the school itself: courses, modules and lessons, enrollments, completions, quizzes, assignments and their replies, certificates and notes. Student app renders the learner side: the player, the dashboard, the certificate and its check. Progress rides with Courses, which requires it, and holds badges and achievements; Schoolroom prints none of its totals, streaks or leaderboards. Catalog holds each course's product and price, and Economy takes the payment through Stripe and turns the order into an enrollment. Buying the theme includes all five for your first year on one site. From the second year, two plans keep their updates coming: the Learning plan ($300 a year) for Courses, Student app and Progress, and the Commerce plan ($400 a year) for Catalog and Economy. You only need the plans for the engines you keep using: a school with only free courses never needs Commerce. If an engine's plan lapses, the site you've built keeps running on the version you have, and your students keep working; what needs the plan is a fresh install of that engine, such as a new build server without a copy, or an update. The Craft Library and the Solo and Studio plans include the theme and its packs but not the engines; the Agency plan includes both plans.

Where the edges are

If you teach in a room on a timetable, Roster is the theme; Schoolroom is for coursework a student does on their own schedule. Lessons that open a set number of days after enrollment, and cohorts that start together, aren't in this release; prerequisite locks cover "finish this first". A school that teaches code gets the system monospace in code blocks until a code face is added.

Motion

Bands rise and fade in once as they arrive. In the player, nothing moves except what the student did: marking a lesson complete sweeps the wash across its row once, and the progress line steps to its new value. Nothing counts up, bounces or throws confetti, and there is no countdown anywhere. With reduced motion turned on, the wash appears without the sweep and nothing else moves; without script, nothing is hidden.

What it's built from

A theme owns no blocks of its own. It restyles blocks from the Tome packs below.

On the pageBlockPackWith the theme
The outcome and the demo cardOutcome HeroExtrasIncluded
The launch split, the buy box, the closing bandEnrollment CTA (split, buy-box, closing)Learning BlocksIncluded, reads the Courses engine
The teacher's letter and the second teacherInstructor Card (letter, one-line)Learning BlocksIncluded
What a lesson looks likeTerm LedgerDossier BlocksIncluded
The school's index, the skill pathsCourse Index, Skill Path RowsLearning BlocksIncluded, read the Courses engine
A course's lessons on a marketing page, course cardsLesson List (open), Course CardLearning BlocksIncluded, read the Courses engine
Photographs of the workGallery (offset)Agency EssentialsIncluded
Section openers, running textSection Header, Text BlockExtrasIncluded
The free-course band on the catalogMedia FeatureExtrasIncluded
Split layouts, a single imageSplit View, MediaAgency EssentialsIncluded
VoicesTestimonialMarketing StarterFree
Before you enrollFAQMarketing StarterFree
A call-to-action band, where a school adds oneCTAMarketing StarterFree

Buying the theme includes Learning Blocks, Agency Essentials, Dossier Blocks and Extras for good, and the five engines for your first year, so you can build the pages exactly the way the demo has them. Marketing Starter is free on every account. 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, Schoolroom included, for $250 a year. The five engines Schoolroom runs on come with the Learning and Commerce plans, not the library.

Or just Schoolroom, $199 once

It includes the packs the demo is built from (Learning Blocks, Agency Essentials, Dossier Blocks and Extras). The five engines it runs on are included for your first year on one site; after that, the Learning and Commerce plans keep their updates coming, and what you've built keeps running. 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-schoolroom

// app/layout.tsx
import '@wabbit/tome-ui/tokens.css'
import '@wabbit/tome-lms-ui/tokens'
import '@wabbit/tome-theme-schoolroom/styles.css'
import '@wabbit/tome-theme-schoolroom/fonts.css'

<!-- pick the palette on the html element -->
<html data-tome-theme="schoolroom" data-tome-palette="lab">
$250a year

Set it up for me · business owners

We set it up

We install Schoolroom on a new site and replace Handbill with your school: your courses with their modules and lessons, each lesson's length and which ones are free to preview, the prerequisites, the prices in your own Stripe account, your teacher's letter, your questions-before-enrolling and your refund policy as a page, and whether a course ends in a certificate. The demo's invented quotes and figures come out with their "Demo" tags, and your own go in as you give them to us. You get a written proposal with the price before any work starts. It names the engines the site runs on and the plans that keep them updated, and says whether your courses need the Commerce engines at all.

Quotedin a written proposalAsk for a proposal

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.22.0 or later, below 1.0
@wabbit/tome-core
1.25.0 or later, below 2.0. Only needed to list the theme in the admin's theme switcher.
Package
@wabbit/tome-theme-schoolroom 0.1.2, a preview release
Engines
Courses, Student app, Progress, Catalog and Economy. Included for the first year on one site, then the Learning and Commerce plans.
Blocks
Learning Blocks 0.46.0, Extras 0.46.0, Agency Essentials 0.46.0, Dossier Blocks 0.19.0, Blocks Core 0.46.0 and Tome Chrome 0.28.0 or later (the launch split, the index, the outcome hero, the gallery's offset layout, the ledger's figures, renamed blocks and the Courses panel), with Courses 0.26.0 and Student app 0.12.0 or later (the outline, the visits, the dashboard pieces and the themeable player).
Fonts
Self-hosted from the package, SIL Open Font License
License
One production site per purchase. Staging and development copies are unlimited.
Set it up for me

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 Schoolroom with your details.

Installing it yourself?

The Craft Library includes Schoolroom, every other theme and every paid pack for $250 a year. Or buy Schoolroom alone for $199 once, with the packs it needs and a first year of the five engines it runs on, for one production site.

Set up Schoolroom for my business

  1. REQUIRED
  2. REQUIRED
  3. REQUIRED
  4. REQUIRED
    Palette
  5. OPTIONAL
  6. OPTIONAL

We read every request and reply by email with questions or a written proposal. Nothing is charged until you accept a proposal.

Checking this is a real visit. The button unlocks in a moment.

Can't submit? Email hello@wabbit.com.