Lull owner's guide
Everything from the download to your own palette, read from the files this theme ships.
- 1.0.0
- version
- 12
- pages
- 44
- components
- 85 × 2 modes
- tokens
- 4
- workflows
unzip lull-1.0.0.zip
cd lull-1.0.0
bun install
bun devThe download is a complete Next.js project, not a folder of snippets. It carries 12 routes, the token file, 44 components and the agent kit.
See the priceInstall
Three ways in: the zip, the shadcn registry, or your agent over MCP.
The artifact is versioned and immutable, so the file you get is lull-1.0.0.zip. Unzip it, run the four commands above, and the site is on localhost:3000.
The link arrives with your license, and stays valid for every future version.
Every theme is a registry item the real shadcn CLI installs. Files land under src/tailthemes/lull/, mirroring the tree below.
Lull is paid, so the request has to carry your license key. Put it in TAILTHEMES_LICENSE_KEY in your .env.local, then add this to components.json. The CLI expands the variable and sends the key as a header, so it never enters a URL.
{
"registries": {
"@tailthemes": {
"url": "https://tailthemes.com/r/{name}.json",
"headers": {
"Authorization": "Bearer ${TAILTHEMES_LICENSE_KEY}"
}
}
}
}bunx shadcn add @tailthemes/lullAn all-access key works on every slug. A single-theme key works on the theme it was bought for.
A registry item is JSON, so image assets cannot travel with it. Themes that import images need the zip as well.
Point any MCP client at https://tailthemes.com/api/mcp and your agent can read the manifest, both token tables and AGENTS.md before it touches a file.
the four toolsWhat unzips
One directory, laid out the way you would lay it out yourself.
every file
Three of these do the work: src/theme.css holds every design decision, AGENTS.md is the contract your agent reads first, and .claude/skills/ holds the 4 workflows it can run.
Screenshots are not in the download. They are generated by the publish pipeline and live on the listing, not in your project.
Using it
Every page is a plain component, and the tokens are scoped to one class.
- /Every room, measured6 sections
- /roomsRooms, and how loud they are6 sections
- /rooms/at-8Rooms at 08:006 sections
- /rooms/at-13Rooms at 13:006 sections
- /rooms/at-16Rooms at 16:006 sections
- /rooms/at-19Rooms at 19:006 sections
- /membershipsMemberships, priced by quiet5 sections
- /officesPrivate offices, with prices6 sections
- /meeting-roomsMeeting rooms4 sections
- /visitBook a tour5 sections
- /house-rulesHouse rules and hours7 sections
- /componentsLull's parts2 sections
Tokens are declared on .tt-lull as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-lull"> and everything inside picks them up.
Dark mode is a dark class on <html>. There is no second stylesheet and no dark: utility in the components.
The HTML edition
The same site again, with no framework under it.
Everything under html/ is a second, independently authored edition of the theme. html/dist/ is 12 compiled routes with local fonts and vanilla JavaScript — copy it to any static host and it is live, with no build step and no Node on the server. html/src/ is the Nunjucks source those routes compile from.
bun run build:html recompiles html/dist/ after you change the source or the tokens. bun run preview:html serves the compiled edition locally. Both ship in the download's package.json, backed by the two files in scripts/.
One token file drives both editions, so a rebrand made in src/theme.css reaches the HTML edition the next time you run the build — dist/ carries compiled CSS and never updates by itself.
The two editions are kept in step by the publish gate: every route in the manifest must have a compiled counterpart before a version ships, so the 12 pages you saw above exist in both.
Making it yours
Tokens are the API: change the values, never the names.
- Edit the values. All 85 tokens live in src/theme.css, in a light block and a dark one. Nothing in src/components/ carries a colour.
- Watch it land. Open /components. The styleguide reads every swatch, type step and radius live, so you see what the change did to the whole system at once.
- Re-check contrast. Run the check-quality workflow. The palette ships verified to WCAG AA in both modes and a rebrand should keep it there.
- .claude/skills/add-page
1. A page is composition.
- .claude/skills/add-section
1. One file, one section: src/components/<name>.tsx.
- .claude/skills/check-quality
Run from the project root, in this order.
- .claude/skills/rebrand
Run from the project root.
Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/lull/ your copy has the project root instead.
For your agent
The theme brought its own rules, so nothing has to be reverse-engineered.
AGENTS.md is 808 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.
# Lull — agent rules
Lull is a coworking operator's website for Next.js and Tailwind v4, in light and
dark, in React (`src/`) and plain HTML (`html/src/`). Its one device is **the
sound line**: every room is measured with a meter and hung on one decibel axis,
so a visitor can choose a seat by how loud it is, and each plan is priced by how
far into the quiet it lets you sit. Offices carry real prices and dated
vacancies, meeting rooms carry rates and a request form, tours are asked for at
a real hour, and the access hours are written once. **It ships no backend**:
both forms post to `NEXT_PUBLIC_TOUR_ENDPOINT` (§ Endpoints) and until that is
set every receipt opens "Not sent".
Read this file before changing anything. The rules are short because the theme
is narrow: one axis, one mulberry, one fixture that refuses to contradict itself.
**Every reading in this theme is fiction until the buyer measures their own
rooms.** Soundings does not exist and nobody held a meter in it: the 34 in the
H1, the table of readings, the door-shut figures and the corridor figures were
typed by hand to look like a real building. A site that prints those numbers, or
any number nobody measured, about a real building is telling its visitors
something false in the exact register that makes it believable. Follow § The
measurement method, or launch held to the rules (variant axis 2), which says in
words that nothing has been measured yet.
## The fiction
Soundings, an independent coworking house on the top two floors of a former
department store on Broadway, Tacoma, Washington. Invented business, real
street, no house number. Phone (253) 555-0186 (the 555-0100–0199 fictional
range). USD, `America/Los_Angeles`. The places: the Reading Room (12 desks,
silent), the Commons (28 seats, low voice), six booths, the Kitchen, and three
meeting rooms named for Puget Sound islands (Ketron, Maury, Vashon); eight private
offices, A to H; Broadway outside the front door as the reference.
The fixture spine is `src/fixtures/soundings.ts`; every figure on every page is
a value written there or a derivation of one in `src/fixtures/derive.ts`. The
fixture's clock is `NOW`, Tuesday 3 November 2026, 11:40, the monthly measuring
day, so "this morning" in the H1 is true of it.The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.