tailthemes
all-access
docs · docket

Docket owner's guide

Everything from the download to your own palette, read from the files this theme ships.

1.1.0
version
7
pages
39
components
71 × 2 modes
tokens
4
workflows
from zip to running
unzip docket-1.1.0.zip
cd docket-1.1.0
bun install
bun dev

The download is a complete Next.js project, not a folder of snippets. It carries 7 routes, the token file, 39 components and the agent kit.

See the price

Install

Three ways in: the zip, the shadcn registry, or your agent over MCP.

the zip

The artifact is versioned and immutable, so the file you get is docket-1.1.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.

the registry

Every theme is a registry item the real shadcn CLI installs. Files land under src/tailthemes/docket/, mirroring the tree below.

bunx shadcn add https://tailthemes.com/r/docket.json

Docket 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.

over mcp

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 tools

What unzips

One directory, laid out the way you would lay it out yourself.

docket-1.1.0/
app/generated routes, one per page
globals.csstailwind, the tokens, the semantic bridge
layout.tsxapplies the theme's own faces
page.tsx/ · 8 sections
practice/page.tsx/practice · 8 sections
matters/page.tsx/matters · 5 sections
matter/page.tsx/matter · 7 sections
counsel/page.tsx/counsel · 6 sections
engagement/page.tsx/engagement · 5 sections
components/page.tsx/components · 25 sections
src/the theme, copied verbatim
app/7 pages, one file each · 7 files
assets/the imagery, and the prompts that made it · 8 files
components/25 sections, one file each, no cross-imports · 39 files
fixtures/1 file
fonts/self-hosted woff2 with their licences · 7 files
fonts.tswires the faces to the font tokens
theme.cssevery design decision: 71 tokens, both modes
.claude/workflows your agent can run
skills/rebrand · add-section · add-page · check-quality · 4 files
AGENTS.mdthe agent contract: invariants, file map, what never to touch
README.mdthe human quick start
theme.jsonthe manifest: pages, components, both token tables
package.jsongenerated, carrying this repo's exact versions
tsconfig.jsongenerated
next.config.tsgenerated
postcss.config.mjsgenerated
env.d.tsgenerated, so a fresh extract typechecks before first run
.gitignoregenerated
every file
app/generated routes, one per page
globals.csstailwind, the tokens, the semantic bridge
layout.tsxapplies the theme's own faces
page.tsx/ · 8 sections
practice/page.tsx/practice · 8 sections
matters/page.tsx/matters · 5 sections
matter/page.tsx/matter · 7 sections
counsel/page.tsx/counsel · 6 sections
engagement/page.tsx/engagement · 5 sections
components/page.tsx/components · 25 sections
src/the theme, copied verbatim
app/7 pages, one file each
components.tsx
counsel.tsx
engagement.tsx
home.tsx
matter.tsx
matters.tsx
practice.tsx
assets/the imagery, and the prompts that made it
board-fibre.jpg
counsel-dana-hollis.jpg
counsel-etienne-marceau.jpg
counsel-marcus-pike.jpg
counsel-priya-raghunathan.jpg
counsel-sofia-delgado-reyes.jpg
counsel-wren-okafor.jpg
README.md
components/25 sections, one file each, no cross-imports
ui/the shared primitives
authority.tsx
badge.tsx
board.tsx
button.tsx
caption-block.tsx
citation.tsx
container.tsx
field.tsx
ink-band.tsx
logo.tsx
mode-toggle.tsx
portrait.tsx
section-heading.tsx
type.ts
assertions.tsx
counsel-profile.tsx
counsel-roster.tsx
counsel-standard.tsx
engagement-contact.tsx
engagement-cta.tsx
engagement-form.tsx
engagement-terms.tsx
hero.tsx
matter-argument.tsx
matter-caption.tsx
matter-docket.tsx
matter-outcome.tsx
partner-statement.tsx
practice-brief.tsx
practice-doctrine.tsx
practice-index.tsx
practice-matters.tsx
practice-standard.tsx
practice-team.tsx
record-index.tsx
record-strip.tsx
record-summary.tsx
site-footer.tsx
site-header.tsx
fixtures/
hollis-pike.ts
fonts/self-hosted woff2 with their licences
CourierPrime-Bold.woff2
CourierPrime-Regular.woff2
GolosText-Variable.woff2
OFL-CourierPrime.txt
OFL-GolosText.txt
OFL-Petrona.txt
Petrona-Variable.woff2
fonts.tswires the faces to the font tokens
theme.cssevery design decision: 71 tokens, both modes
.claude/workflows your agent can run
skills/rebrand · add-section · add-page · check-quality
add-page/
SKILL.md
add-section/
SKILL.md
check-quality/
SKILL.md
rebrand/
SKILL.md
AGENTS.mdthe agent contract: invariants, file map, what never to touch
README.mdthe human quick start
theme.jsonthe manifest: pages, components, both token tables
package.jsongenerated, carrying this repo's exact versions
tsconfig.jsongenerated
next.config.tsgenerated
postcss.config.mjsgenerated
env.d.tsgenerated, so a fresh extract typechecks before first run
.gitignoregenerated

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.

the pages
  • /Hollis Pike: every claim, cited8 sections
  • /practiceCommercial disputes8 sections
  • /mattersThe record5 sections
  • /matterRowan Instruments v. Delacourt Systems7 sections
  • /counselCounsel6 sections
  • /engagementStart with the conflicts check5 sections
  • /componentsThe parts, unassembled25 sections
dropping it into an existing app

Tokens are declared on .tt-docket as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-docket"> 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.

the rebrand loop
  1. Edit the values. All 71 tokens live in src/theme.css, in a light block and a dark one. Nothing in src/components/ carries a colour.
  2. 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.
  3. 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.
the workflows that ship inside
  • .claude/skills/add-page

    Docket's routes each lead with their best device, and consecutive routes never open with the same one:

  • .claude/skills/add-section

    /coherence-pass asks one question of every block: which buyer question does it answer? ("Can they handle this dispute" / "What does it cost" / "Who actually does the work" / "What happens after I click".) If you cannot name one, the section is decoration — cut it, or give it a job.

  • .claude/skills/check-quality

    Run all of it. A green subset is not a pass.

  • .claude/skills/rebrand

    Docket is designed so a rebrand is a single-file edit. src/theme.css holds every colour, size, radius and face; no component sets one.

Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/docket/ 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 316 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.

AGENTS.md, first 40 lines
# Docket — the rules

The contract any agent works under inside `themes/docket/`. It never contradicts
`themes/CONTRACT.md`; where it looks like it might, the CONTRACT wins and this
file is the bug.

| | |
|---|---|
| **Fiction** | Hollis Pike LLP, a 14-lawyer commercial litigation and appellate boutique in Philadelphia. Domain: **legal services**. |
| **Positioning** | For the general counsel choosing outside counsel for a dispute that matters, who has already read forty firm sites saying the same four adjectives — unlike the stock attorney template, which sells trust with a gavel photograph and a five-star strip, Docket sells it with the docket. |
| **Register** | **Declarative-loud.** 1–3 display words, fragments. Sentences underneath are short and period-heavy. The H1 on `/` is three words. |
| **Motion personality** | **Deliberate.** Micro-feedback only, 120ms `ease-out`, colour and one 2px transform. No entrances, no ambient moment, no figure reveal. A filed document does not arrive; it is placed. |
| **Signature** | **The authority margin** — see below. |
| **Sanctioned deviation** | **A `--font-mono` role on a marketing theme** — see below. |
| **Imagery** | Six counsel portraits and one board texture, all generated by us. Nothing else, ever. See § Imagery. |

## The signature — the authority margin

> Every substantive claim on this site sits in a two-part row: the assertion at
> reading width, and, in a hairline-separated outer column, the authority that
> proves it — a superscript-numbered Courier citation naming court, docket,
> year and disposition, drawn from the firm's own record. **A claim with no
> authority does not get a row.**

It runs on four routes: `/` (`assertions`), `/practice` (`practice-doctrine`),
`/matter` (`matter-argument`), and in its stack form on `/` (the hero) and
`/counsel`. The rule is enforced by the type, not by discipline:
`toAuthorityRows` in `src/components/ui/authority.tsx` resolves an `Assertion`
through `matterFor()`, which throws at build time if the cited matter does not
exist. You cannot ship a claim without a filing.

**Do not** turn the margin into a sidenote component, move the citations into a
footnote block at the foot of the page, or add a row whose `ref` is prose. Any
of those deletes the signature while leaving the layout.

## The sanctioned deviation — mono on a marketing theme

`themes/CONTRACT.md` § Typeface contract reserves `--font-mono` for "a genuine
machine register" and names dev-tools, docs and dashboards as its home. A
professional-services marketing site is not that, and Docket ships it anyway.

The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.