Tome theme · Parks, venues and districts

Grounds. Built to show what's on, and where.

For places people travel to and then have to find their way around: sports parks and athletic complexes, fairgrounds, event venues, market halls and mixed-use districts. Most of the people on the site are visitors, and most of the money comes from the few who book. Grounds answers the visitors first: what's on today, where it is and where to park, from your own event records and a plan of your grounds. Then it asks the tournament director, the party host and the prospective tenant to book, on a desk that asks each of them only the questions their booking needs.

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
Windlass Park, a fictional sports park in the fictional Brannock County, and Kilnworks, a fictional riverside market district; nobody answers their booking desks
Grounds home page in Pennant
Kilnworks home page on a phone, in Marquee

Palettes

Four palettes. Pick the one that suits your grounds.

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.

Grounds home page in Pennant
PennantA cool white ground, navy-black ink, an indigo sign and a coral accent. The default. A good fit for event venues and wedding barns, arenas and rinks, fairgrounds and campus visitor pages.
Grounds home page in Trailhead
TrailheadA warm paper ground, olive-black ink, a bronze sign like routed wood and a trail-blaze blue. A good fit for sports parks and athletic complexes, trails and campgrounds, golf courses, farms and outdoor attractions. The Windlass Park demo opens in it.
Grounds home page in Lido
LidoA pale aqua ground, a bright aqua sign with ink lettering and a violet accent, and the one palette whose plates and buttons carry a thin ink edge. A good fit for marinas and waterfronts, pools and splash parks, gardens and riverside quarters.
Grounds home page in Marquee
MarqueeA blush ground, deep red-brown ink, a claret sign and a moss accent. A good fit for historic and mixed-use districts, market halls, theaters and downtown venues. The Kilnworks demo opens in it.

Captured from the demo at 1440px. Windlass Park, a sports park, and Kilnworks, a market district; both fictional.

Grounds gives color two jobs, the way signage does. The sign color fills the things you act on or look for: buttons, key plates and the closing band. The accent is punctuation only: the live dot on "Live now", the marker for the current page, the small square that opens each section, and the focus ring. Every state also changes shape or weight, so nothing depends on color alone, and errors aren't red in any palette: a field with a problem gets a heavier ink border, a "!" plate and a sentence saying what to fix. In Lido the aqua is too light to stand on the page by itself, so its plates and primary buttons carry a 1.5px ink edge. All four palettes are light designs, each with a derived dark mode.

The sections

What each section does on a busy day.

These are crops from the two demos, in Pennant. Each section answers something a visitor or a booker wants to know: what's on, where is it, where do I park, what's coming, and how do I book it?

  1. The arrival, and four ways in

    The arrival, and four ways in

    The home page opens on a wide photograph of the whole place. Beside it, on a panel in the sign color, sit the name, one line about the place and four doors: in the park demo "Here for a game", "Book a field", "Programs" and "Getting here", and in the district "Shops and food", "Events", "Book a space" and "Leasing". Each door is a link to the band or page that answers it. The photographer's credit is a small chip on the picture, and nothing else is ever set on a photograph. When something is closed, a short alert sits above the header on every page ("Lot A is closed for resurfacing until Monday.") with a link to what to do instead. A visitor can dismiss it for the visit, and it ends by itself at the time you set. In the district, the line under the hero says whether the place is open now and when it closes, from your hours. On a phone, Directions and Book stay in a bar at the bottom of the screen.

  2. Today, by time and place

    Today, by time and place

    Under the arrival is the Today Board: everything on today, read from your own event records in your own time zone. Closures lead ("Field 5 closed · Until 3:30 PM"), then what's on now, then what's next by start time, and finished events move to the end in a quieter color. Each row has the time, what it is, a line about it and where it is, with that place's key plate as a link: tap "3 Field 3" and the page scrolls to Field 3 in the list and lights its marker on the plan. The chips say "Live now", "Starts 4:30 PM" or "Finished", and they change when the start or end time passes, by the clock, never by a status someone typed. A screen reader hears each change once, when it happens. On a day with nothing true to say, the board doesn't print filler: it steps aside and the gate-hours line stands in. "Full schedule" opens the day with the next six days beside it.

  3. Everything on the grounds, and where it is

    Everything on the grounds, and where it is

    Every place a visitor might look for is a row in one list, grouped the way people ask (fields and courts, indoor spaces and the lawn, food, restrooms and first aid, parking), with a row of chips to jump between the groups. Each row carries its key plate, its name, a line about it and whether it's open now and when it closes, from the hours you set for it; a closure shows its note instead, and goes back to the hours when it ends. Bookable places carry "Book this", which opens the booking desk with that place already chosen. Beside the list sits your site plan, drawn as an illustration and labeled "Illustrative plan", with a marker for every row, and the marker for the row in view lights up as a visitor scrolls. On a phone the plan becomes a short card at the top of the band, and "Show on plan" opens it full screen with zoom and the key. The list is the plan's text alternative, so a screen reader gets everything, and without script every marker and row is a plain link.

  4. What's coming, with one event up front

    What's coming, with one event up front

    Upcoming leads with the next big event: its photograph, its days and type, a line on what it is, and buttons to the event page and to register when the event has a registration link. A dated list follows, each row with its place's key plate, a type tag ("Clinic", "League", "Market") and "9 spots left" where the event has a capacity. Every event has its own page with the date and time, where it is (the place lit on a small plan), what to bring, where to park for that event, who's hosting, how many places are taken, an "Add to calendar" file and the next event at the same place.

  5. Programs, and the spaces to book

    Programs, and the spaces to book

    Programs run by season, each as a card with a photograph, a line of ages, sport, days and length ("Ages 4 to 6 · Soccer · Saturday mornings · 8 weeks"), what it is, when the next season starts and the key plate of where it plays. A card links to your registration page when you give it one. Grounds lists programs and doesn't run a class timetable; Roster is the theme for that. In the district the same card holds the spaces to book (Kiln Hall, the Yard, the loading dock and the whole Landing), each with what it holds, what it's best for and "Check a date", which opens the desk set to that space.

  6. In a district, which doors are open

    In a district, which doors are open

    The district set adds a tenant board: every shop, studio and kitchen with its photograph, its rating, a few tags ("Patio", "Step-free") and whether it's open now, from that tenant's own hours. Visitors filter by type or by what's open now, sort by rating or by what closes soonest, and see how many are showing, and each card links to its door on the plan. Under the board, a rail of the week's offers shows each one with its tenant, what it is and when it ends, and a leasing bar invites a prospective tenant to book a tour.

  7. Come by, or book it

    Come by, or book it

    Every home page ends on one band in the sign color, with your site plan drawn faintly behind it. Getting here comes first: Directions and Call, the address, where to park, the gate hours from your schedule and the access notes. Beside it is the booking desk. A visitor picks what they're booking (a field or court, a tournament, a party or the Event Lawn in the park demo; Kiln Hall, the Yard, the dock, the whole Landing, a leasing tour or a market stall in the district) and the form asks only the questions that type needs: a date and a time window for a field, teams and referees for a tournament, the guest count and the room for a party. The answers are checked in the browser and again on the server, with a plain sentence beside each field that needs fixing, and lead times and capacity limits are enforced. With scripts off the form still posts, the server checks it and returns the same errors, and a question that depends on an earlier answer appears after one more post. The confirmation repeats what was asked for (the type, the date, the place, the size and the visitor's first name) and says what happens next. Nothing is charged, and the line under the button is the reply time you promise.

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 your place's mark and name at the left, the links beside them, and Directions (outline) and Book (filled) always at the right. On a phone it's your name and a "Menu" button, and Directions and Book move to a bar at the bottom of the screen. Footer 7 sits in its own tinted zone in four columns (hours by schedule; how to find you, with the parking; access, with a link to the plan drawing; and a phone number), then the small print and the photo-credit line, with no call-to-action band above it.

Palettes

Pennant, Trailhead, Lido and Marquee, all light designs, each with a derived dark mode in which the band becomes the page and the sign becomes a light plate with dark lettering.

Type

Overpass, drawn from the lettering on US highway signs, for headings, key plates and big numbers, and Figtree for reading and for the meta voice: labels, times and field numbers in sentence case at a semibold weight, never in spaced capitals. Every time and every column of figures uses even-width digits, so "9:30" sits over "12:45" and a schedule lines up; big numbers use proportional ones. Body text sits inside a 600px measure. Both families ship inside the package under the SIL Open Font License, so the site makes no third-party font request.

The key plate

One small square in the sign color, carrying a number, a letter or a short name ("3", "FH", "Hall"), marks a place wherever it appears: on the plan, in the list, on the Today Board, on Upcoming rows, on program cards and on the event page. A plate is a link to that place on the plan. The same key ties an event to its place, so the board and the plan always point at the same field.

The Today Board

A board layout of Org Blocks' Event List. It reads today's events from the Organization engine in your time zone and orders them closures first, then live, upcoming and finished. One function works out each chip from the start and end times, on the server and again in the browser, so the two can't disagree; a row with no end time never says "Live now". A closure is an event with its own type, so it starts and ends on the board like anything else. Without script, the server's chips stand.

The alert

Marketing Starter's banner, made dismissible. You set its words, its link, a key and an end time. A dismissal is remembered in the visitor's browser for the visit; a new key shows it again; a browser that blocks storage shows it every time; after its end time it doesn't render. It doesn't show on the booking confirmations.

The grounds and the plan

Local Facilities, from the free Local Blocks pack. Your places are rows on the block (name, key, plate, group, hours, access notes, a status with a note and an end time, a photo, and whether it can be booked), and the plan is an image you supply with a marker position for each row, labeled "Illustrative plan". A closed status ends at the time you set and the row goes back to its hours. This release has no pannable street map, and places live on the block rather than as pages of their own; both are on the follow-on list.

Upcoming and the event page

Org Blocks' Event List in its filed layout, with the first event set as a lead. The event page itself is a route in the demo's starter over the Organization engine's event, with added fields for a summary, what to bring, parking, the host, a registration link and a lead photo (see "What the demo adds").

Programs and spaces

Org Blocks' Division Card, with the key plate and its plan link. A card takes a registration link when you have one.

The tenant board

For a district, the Directory engine and its Directory Blocks: each tenant is a listing with its own hours, open-now state, rating, tags and photo, plus a rail of offers with end dates. A listing needs a market, an address, a time zone and a listing type, and the engine brings moderation, claims and tiers built for a public directory, so a district on it takes more setting up than a list does. A small place that only needs names and a line each can use Dossier Blocks' Zone Directory instead, without per-tenant hours or open-now.

The booking desk

A Tome Forms form inside Agency Essentials' Contact block, one step, with a "What are you booking?" question and rules that show and require the other questions by type and by answer. Forms checks the rules again on the server, and Tome Intake takes the request and routes it by type to the person who answers it. Lead times (a tournament needs 21 days' notice in the demo) and caps such as a room's seated limit are checked at the same step. The confirmation page is the requester's receipt; Intake can also email them a copy once your site sends email, and the demo's confirmation doesn't promise one. The desk takes no money: deposits and tickets aren't in this release.

What the demo adds as code you can copy

These live in the demo's starter, not in the packs: the Today page and its six day pages, the event page, the two desks' form definitions with their rules and messages, the routing function, the confirmation page that echoes a request, the event fields above, and the daily job that keeps the demo's dates on today. A real site keeps the shapes and changes the values.

The five engines

Grounds runs on five Tome engines. Organization holds the events the Today Board and Upcoming read. Directory, with its Directory Blocks, holds a district's tenants, their hours, ratings and offers. Forms draws the booking desk and checks it, and Intake routes each request. Buying the theme includes all five for your first year on one site. From the second year, three plans keep their updates coming: the Community plan ($400 a year) for Organization, the Directory plan ($400 a year) for Directory and its blocks, and the CRM & Marketing plan ($400 a year) for Forms and Intake. You only need the plans for the engines you keep using: a park with no tenant board never needs Directory. If an engine's plan lapses, the site you've built keeps running on the version you have; 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 all three plans.

Where the edges are

If your business is classes on a weekly timetable, Roster is the theme; Grounds lists programs and links out to registration. A restaurant inside a district can have its own Table site, and Grounds lists it as a tenant.

Motion

Bands rise and fade in once as they arrive. The plan's marker follows the list as you scroll, and a plate link lands with a short flash on its marker. Chips and states never animate, nothing counts up and nothing scrolls by itself. With reduced motion turned on, nothing moves and the landing is instant; 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 alertBanner (dismissible)Marketing StarterFree
The arrival and its four doorsHigh Impact Hero (venue)Marketing StarterFree
Today Board, Upcoming, "Next at this place"Event List (board, filed)Org BlocksIncluded, reads the Organization engine
Programs, spaces to bookDivision Card (entry)Org BlocksIncluded
The grounds and the plan, the event page's locatorLocal Facilities (plan, locator)Local BlocksFree
The open line, getting hereLocal Live Status, Local LogisticsLocal BlocksFree
The place in numbersStat (sourced)Agency EssentialsIncluded
The booking desk's card, the leasing bar, "Still have a question?"Contact (estimate)Agency EssentialsIncluded
Section openers, the closing band's grid, the board's hint lineSection Header, Layout Grid, Text BlockExtrasIncluded
A short tenant list without the Directory engineZone DirectoryDossier BlocksIncluded
VoicesTestimonialMarketing StarterFree
Before you comeFAQMarketing StarterFree
Tenant board, offers railDirectory Listing Grid, Directory Promotions RailDirectory BlocksIncluded for the first year, reads the Directory engine
The booking desk's formFormTome FormsIncluded for the first year, posts to Tome Intake

Buying the theme includes Org 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 demos have them. Local Blocks, Marketing Starter and Content Writer are 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, Grounds included, for $250 a year. The five engines Grounds runs on come with the Community, Directory and CRM & Marketing plans, not the library.

Or just Grounds, $199 once

It includes the packs the demo is built from (Org 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 Community, Directory and CRM & Marketing 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-grounds

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

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

Set it up for me · business owners

We set it up

We install Grounds on a new site and replace Windlass Park or Kilnworks with your place: every field, room, unit and lot as a row with its key plate, hours and access notes, and a marker for each on your site plan; your events and closures, so the Today Board is true from the first day; your programs with their registration links; your tenants and their hours, if you have them; and the booking desk's types and questions, each routed to the person who answers it. The demo's invented events, quotes, ratings and offers 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 tenants need the Directory engine or a simple list.

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-grounds 0.1.1, a preview release
Engines
Organization, Directory, Directory Blocks, Forms and Intake. Included for the first year on one site, then the Community, Directory and CRM & Marketing plans.
Blocks
Org Blocks 0.9.0, Local Blocks 0.7.0, Marketing Starter 0.44.0 and Tome Chrome 0.27.0 or later (the board, the plan, the four doors and the phone bar's second button), with Organization 0.18.0 and Forms 0.10.0 or later (the event fields and the no-script desk).
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 Grounds with your details.

Installing it yourself?

The Craft Library includes Grounds, every other theme and every paid pack for $250 a year. Or buy Grounds 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 Grounds 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.