Meridian owner's guide
Everything from the download to your own palette, read from the files this theme ships.
- 2.2.1
- version
- 8
- pages
- 30
- components
- 54 × 2 modes
- tokens
- 4
- workflows
unzip meridian-2.2.1.zip
cd meridian-2.2.1
bun install
bun devThe download is a complete Next.js project, not a folder of snippets. It carries 8 routes, the token file, 30 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 meridian-2.2.1.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/meridian/, mirroring the tree below.
bunx shadcn add https://tailthemes.com/r/meridian.jsonMeridian is paid, so the registry answers 402 with the price, the purchase URL and both token tables. Only the source files are withheld.
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.
- /Halyard docs — queues over HTTP5 sections
- /guidesGuides — deliver your first message3 sections
- /apiAPI reference — endpoints and parameters3 sections
- /sdksSDKs — TypeScript, Python and Go clients3 sections
- /changelogChangelog — every API release, newest first3 sections
- /supportSupport — how to get help with the API3 sections
- /legalTerms and policies — agreement, retention and availability3 sections
- /componentsDesign system — every part, labelled11 sections
Tokens are declared on .tt-meridian as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-meridian"> 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.
Making it yours
Tokens are the API: change the values, never the names.
- Edit the values. All 54 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
A page is a plain exported component in src/app/. It composes sections; it fetches nothing and holds no state.
- .claude/skills/add-section
A section is one file in src/components/, self-contained, server-rendered, and composed into a page. Five steps; none of them is optional.
- .claude/skills/check-quality
Ten checks. All mechanical except the last two, which need a browser.
- .claude/skills/rebrand
Meridian's design lives in exactly one file. A rebrand is a token edit plus a name change, and then a contrast run that proves you did not break the reading surface.
Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/meridian/ 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 737 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.
# AGENTS.md — Meridian
Rules for any agent (or human) editing this theme. They are not style
suggestions; the publish gate and the skills in `.claude/skills/` assume them.
## What this theme is
A documentation surface for **Halyard**, a fictional product: durable queues
over plain HTTP. Publish with an idempotency key, lease with a visibility
timeout, extend or ack or nack, dead-letter after `max_deliveries`, replay. The
API is internally consistent across every page — if you add an endpoint, it has
to fit that model.
The design goal is legibility over hours, not impact over seconds. Every
decision below follows from that.
## The signature — **the reading edge**
> **Prose stops at a ruled line, and machine content is the only thing allowed
> past it.**
A hairline at 36rem runs the full height of every article column. Paragraphs,
ledes, callouts and the meta rule stop at it. Code blocks, parameter tables,
endpoint bars and the Wire figure cross it, because they are scanned rather than
read and a wrapped shell command is worse than a wide one. On `/` the same idea
is the hero's code panel overhanging the container's right edge.
It recurs on all eight routes — `/` (the hero's overhanging code panel),
`/guides`, `/api`, `/sdks`, `/changelog`, `/support`, `/legal` and
`/components` — it is structural rather than chromatic, and it is one border
plus one `max-width` — `.reading-edge` and `.measure`, defined adjacent in
`theme.css` so that changing one without the other is obvious.
What crosses the line is decided per surface, and the decision is always the
same question: is this read, or is it scanned?The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.