Tome theme · Associations, clubs and nonprofits

Commons. Built to ask for a gift and show where it went.

For organizations that belong to their members: neighborhood associations, tenant and parent groups, co-ops, community halls, clubs, alumni groups and small nonprofits. The site has two jobs, and Commons puts them on the same page. It asks for money and time, and it shows where the last money and time went. The mission comes first. Giving is a form that works on a phone in the parking lot after a meeting: any amount, one-time or monthly, and no account. Every figure on the home page cites a filed document, and a figure with no document behind it doesn't print.

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 Organization and Economy engines
Demo
Harrow Lane Neighbours, a fictional neighborhood association in the fictional town of Haverwick, with giving in Stripe test mode
Commons home page in Grove
Commons campaign page on a phone, in Civic

Palettes

Four palettes. Pick the one that suits your organization.

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.

Commons home page in Grove
GrovePale stone ground, bottle-green ink and a lantern-amber Give button. The default. A good fit for land trusts, conservation groups, historic societies and garden clubs.
Commons home page in Civic
CivicWarm white ground, charcoal ink and a clear cobalt. A good fit for neighborhood and trade associations, chambers of commerce and alumni groups.
Commons home page in Vesper
VesperWarm stone ground, plum-black ink and a deep plum. A good fit for choirs, arts societies and memorial charities.
Commons home page in Rally
RallyNewsprint ground, near-black ink and a poster red, and the one palette whose closing band fills with its color. A good fit for advocacy groups, tenant unions and mutual aid.

Captured from the demo at 1440px. Harrow Lane Neighbours, a fictional neighborhood association.

In every palette the accent fills exactly two things: the Give button and the bar of the Running Total. Everywhere else it's punctuation: rules, the record numbers, the focus ring and the hover underline. In Grove the lantern amber fills only those two, Give's label is green, and the rules, the ring and the record numbers take the green ink itself. Every accented state also changes shape or weight, so nothing depends on color alone. All four palettes are light designs, each with a derived dark mode, and every page has one dark band, the closing give-and-join section. Rally's fills with its red, in light and in dark.

The sections

What each section does for the organization.

These are crops from the demo association, in Grove. Each section answers something a member, a neighbor or a donor wants to know before they act: what does this group do, where does the money go, who decides, and how do I help?

  1. The mission first, with the total under it

    The mission first, with the total under it

    The home page opens on your mission in one sentence, with the one phrase that matters set heavy. A photograph of members at work sits beside it, with its caption and credit under the picture and never on it. Under the Give and Join buttons is the Running Total: one line that reads raised, goal, gifts and days left, over a flat bar. The bar fills once, the first time it scrolls into view, and never past the real total. The line says "gifts" because it counts gifts; it says "donors" only if your source counts people. A campaign with no goal drops the bar and the percentage and says "raised". A site with no campaign running drops the whole line, and the page closes up around the gap. Nothing pulses and nothing counts down by the second.

  2. The record in figures

    The record in figures

    One ruled strip of four numbers on a tinted band. Each cell starts with a record number and a link to the document that backs it ("No. 2026-02 · 2025 annual report, p. 4"), then the figure, then what it counts. A figure with no filed source doesn't print, so every number on the home page can be checked by anyone willing to click.

  3. Programs and events

    Programs and events

    Programs sit as entries, each with a named lead, a one-line purpose, its next date and a photograph, and the photo's side alternates down the page. Events follow as a dated list with the next meeting first, an "Add to calendar" link on each row and a spots-left chip ("12 spots left", "Waitlist open") where the event has a capacity. The events read from your Organization engine, and a row with no capacity data shows no chip.

  4. The Record

    The Record

    Minutes, annual reports, financial statements and policies appear as filed entries: a record number, the title, the type as a tinted tag, the date, the file type and size, "Next review due" where you've set one, and a Download button whose link text is unique to its row. The newest filing leads, with a thumbnail of its first page. Documents are private until your site turns on public read, a document is approved and an editor marks it public. The Record lists the same public documents for everyone, and staff and members can still read everything.

  5. A campaign, told in full

    A campaign, told in full

    A campaign page opens on the hero and a ruled strip of Raised, Goal, Gifts and Days left. The case runs in a reading column with notes in the margins: who's accountable, the last update, the budget lines with a total added up from the lines (never typed), the filed document that cites it, and the terms. Giving levels show what each amount covers at the quote's prices, and none is marked as recommended. Then come numbered updates, the terms in plain language ("keeps what it raises", what happens if you raise less, refunds) and a short FAQ.

  6. Give and join, side by side

    Give and join, side by side

    Every page ends on the one dark band. The give form has amount buttons and an "Other" button of equal size, so a gift can be any amount. One-time is selected, monthly is offered once and never selected for the donor, the fee-cover box starts unticked, and the button repeats the choice ("Give $40 a month") so the amount a donor typed is the amount charged. Payment happens on Stripe's hosted checkout, with no account. Beside it, the membership Card shows three tiers at wallet proportion: the yearly price first, the monthly equivalent, then what it covers and what it doesn't. On a phone it's one card at a time under a segmented control. A reply time and a named person sit under both.

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 organization's mark and name at the left, the links beside them, and Give (filled) and Join (outline) always at the right, in the same place on every page. It sits on the page above the content, takes a surface and a hairline once you scroll, and on a phone is your name and a "Menu" button. Footer 7 sits in its own tinted zone with your registered name, your charity or EIN number, your address, a link to the Record and privacy, and the small print, with no call-to-action band above it.

Palettes

Grove, Civic, Vesper and Rally, all light designs with a derived dark mode built from the closing band's colors. Rally's band stays red in both.

Type

Schibsted Grotesk for headings, the record line and every number, and Inclusive Sans for body text, set larger than usual inside a 600px measure for readers from teenagers to members in their eighties. Headings are sentence case and emphasis comes from weight alone: no italics and no colored words. Big numerals and record numbers use proportional figures, and a column of figures uses even-width ones, so a ledger lines up. Both families ship inside the package under the SIL Open Font License, so the site makes no third-party font request.

Section treatments

The hero with its Running Total, the record in figures, programs, the live-campaign band, updates, events, ways in, what you hold to, people and governance, the Record, the FAQ before the ask, and the closing band. An optional texture, a faint ruled sign-up sheet with row numbers, can sit behind the Ways-in band alone.

Running Total

One line and a flat bar, in three states: live, partial (no goal, so no bar and no percentage) and none (no figures, so nothing renders and the layout closes up). On a campaign page it grows into the Ledger Strip. The bar fills once and the numerals count up once, never past the real figure; with reduced motion, or without script, the final values are there at load. The figures come from a source your site supplies, because the pack ships none: a function that returns the raised amount, goal, gift count and days left for a campaign. The demo's counts the gifts in its own records, and its code is in the starter to copy. Gifts are kept, not held against a goal. An all-or-nothing pledge drive runs on Tome Crowdfund, which is part of the Commerce plan and isn't in this purchase.

Give form

Preset amounts and an "Other" field of equal weight, one-time or monthly, an optional fee-cover box and Stripe's hosted checkout, for a donor with or without an account. The amount and the total are checked on the server against the Price you set (you choose the minimum and maximum; the demo's minimum is $5), and a total that differs from the one the form showed is refused. Nothing is pre-ticked: no amount, no Monthly, no fee cover, and the form's own tests fail the build if one ever is. Fee cover is a plain percentage that you set. A donor who leaves it unticked sees no guilt copy. Monthly donors stop a gift themselves from a "Manage a monthly gift" link to Stripe's customer portal, which your site connects.

Membership Card

Each tier is a card at wallet proportion with the yearly price first, the monthly equivalent, what it covers and what it doesn't. The price printed is the economy Price itself, so the card can't disagree with the charge. The recommended tier has a heavier border all round and a visually hidden "Recommended", never a badge or an accent bar. Joining asks for an account, because a membership belongs to a person; giving never does.

The Record

A register of filed documents read from the Organization engine, newest first, with the record number, type, date, file size and a Download button. Public read is off until your site turns it on, and a document needs to be approved and marked public before anyone outside can see it. A file can only be attached to a public document while public read is on. A visitor filter by type and year isn't in this release.

Events and programs

Events are read live from the Organization engine, with spots left calculated from each event's own capacity and attendee count. Programs are entries you write in the page, each with a named lead and the next date.

Join and Give pages

Join, Give and the thank-you page are single-task flows that keep the brand header and drop the navigation and footer, so a donor isn't offered a way out of the form. Join runs in two steps, with the account first.

What the demo adds as code you can copy

These live in the demo's starter, not in the packs: the gift-totals source behind the Running Total, handlers that mark a member active when dues are paid and renewed and mark them as having left when a subscription is canceled or lapses, a US gift receipt (your legal name, EIN, the amount, the date and the line "No goods or services were provided in exchange for this contribution."), and the registration that feeds the Record. UK Gift Aid isn't covered. Check the receipt wording with your accountant before you rely on it.

Organization and Economy engines

Commons runs on two Tome engines. Organization holds your members, events, divisions and documents. Economy takes gifts and dues through Stripe. Buying the theme includes both for your first year on one site. After that, the Community plan ($400 a year) keeps Organization's updates coming, and the Commerce plan ($400 a year, set up with us) keeps Economy's. What you've built keeps running either way. The Craft Library and the Solo and Studio plans include the theme and its packs but not the engines; the Agency plan includes both.

Payments and tax

Payments go to your own Stripe account, so your organization is the merchant of record and the money never passes through us. Commons doesn't decide what's tax-deductible and doesn't file anything for you: the receipt wording, your registration number and the rules for your country are yours to set.

Volunteer sign-up

The demo's volunteer form is built with Tome Forms and posts to Tome Intake, which are part of the CRM & Marketing plan ($400 a year) and aren't included in this purchase.

Motion

The rows rise and fade in once as they arrive, the Running Total's bar fills once and its numerals count up once, and the header takes its surface as you scroll while Give and Join never move. Nothing pulses and nothing counts down. With reduced motion turned on, or without script, everything shows its final state at load.

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
Hero, live-campaign bandCampaign Hero (portrait), Campaign CountCampaign BlocksIncluded
The give formGive FormCampaign BlocksIncluded
Membership tiersMembership CardCampaign BlocksIncluded
Campaign case, giving levels, termsCampaign Case, Campaign Tiers, Campaign TermsCampaign BlocksIncluded
ProgramsDivision Card (entry variant)Org BlocksIncluded
EventsEvent ListOrg BlocksIncluded, reads the Organization engine
The record in figures, peopleStat (sourced variant), Team RosterAgency EssentialsIncluded
Section openers, the closing band's grid, text, what you hold toSection Header, Layout Grid, Text Block, ContentExtrasIncluded
Updates, the RecordArchive (filed layout)Content WriterFree
Before you giveFAQMarketing StarterFree
Volunteer sign-upFormTome FormsNot included

Buying the theme includes Org Blocks, Campaign Blocks, Agency Essentials and Extras for good, and the Organization and Economy engines for your first year, so you can build the pages exactly the way the demo has them. Content Writer and Marketing Starter 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; organizations 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, Commons included, for $250 a year. The Organization and Economy engines Commons runs on come with the Community and Commerce plans, not the library.

Or just Commons, $199 once

It includes the packs the demo is built from (Org Blocks, Campaign Blocks, Agency Essentials and Extras). The engines it runs on (Organization and Economy) are included for your first year on one site; after that, the Community 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-commons

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

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

Set it up for me · organizations

We set it up

We install Commons on a new site and replace Harrow Lane Neighbours with your organization: your mission and programs, each with a named lead; your board and crew leads with their term dates; the documents you want in the Record, each with its record number; a campaign with its goal and budget lines; your membership tiers and giving levels; and your own Stripe account for payments. The demo's illustrative people, example figures and "Demo figures" tags come out, and your own go in as you give them to us. You get a written proposal with the price before any work starts, and it names the engines the site runs on and the plans that keep them updated.

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.21.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-commons 0.1.0, a preview release
Engines
Organization and Economy. Included for the first year on one site, then the Community plan and the Commerce plan.
Economy
0.17.1 or later (custom amounts and guest checkout).
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 Commons with your details.

Installing it yourself?

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

Set up Commons 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.