Docket

Docket is a site for a law firm: small and mid-size firms, solo lawyers, notaries, mediators and legal clinics. It is set like a legal document on pleading paper (line numbers and a double rule in the margin, section marks, footnotes, exhibit stickers on photos). The home page opens with a memo to the visitor whose redactions lift one by one as you scroll, until the senior partner’s signature writes itself and a RECEIVED stamp lands. The demo is a fictional firm, Halden & Rowe.

Docket comes in two variants, chosen when you create the site: files/Sanity (static pages, any host) and EmDash (--cms emdash, rendered on request on Cloudflare). The pages are the same in both.

Pages and their content

Page	Edit it in
Home	Pages → Home page (a list of sections)
Practice areas, people, how we work, insights, contact, 404	Pages → the page’s own entry
Practice areas (who for, steps, fee, questions)	Content → Practice areas
People (role, admitted, languages, areas, biography)	Content → People
Insights	Content → Insights
Name, address, regulatory statement, navigation, header button, profiles	Pages → Site settings
Buttons, labels, document labels, disclaimer, chat, emails, game texts	Content → Interface texts
Privacy, terms, complaints	Pages → Legal

In headlines, words wrapped in *stars* are set in italic and highlighted as they scroll into view, as in “Legal help, with *nothing in the small print*”.

The memo

The first section of the home page (The memo) holds a memorandum to the visitor: to, from, re, your reference, and two to seven lines. Each line has a part that is blacked out at first and revealed as the visitor scrolls: keep them short, one promise each. The signer’s name is drawn as a signature (each name gets its own). With reduced motion the memo stands revealed and signed.

Regulation and fees

What your regulator requires on every page (who regulates you, your number) goes in Site settings → Regulatory statement and appears in the footer. The complaints procedure is a legal page. The demo marks everything a firm must state in square brackets; replace them before you publish. Don’t publish case results or testimonials your rules don’t allow. Fees appear on each practice area and in the Fees section of the home page, with a numbered footnote for VAT and third-party costs.

Integrations

Everything works without keys; each feature switches on with its variables in .env.example.

Feature	Where	Service
Paid first consultation	Contact page (a one-time Price id)	Stripe
Book a first consultation	Contact page, loads on click; a preview of the calendar until connected	Cal.com
The Brief (newsletter)	Home and insights pages, with a welcome email	Supabase
Enquiry form	Contact page; messages go to the email in Site settings	Resend
AI chat	On every page, answers about the firm, fees and how you work; never gives legal advice	Claude
Search	⌘K or the search button: practice areas, people, insights, how we work, contact	built in, or Algolia
Analytics	Every page; Google Analytics only after consent	Plausible, Umami, Google Analytics

Sections

The home page is built from these sections, in any order: The memo, Practice areas (a drawer of case files: folders rise as you point at them), How we work (the steps, untied from their red tape as you scroll on wide screens), Fees, People (exhibits that fan out), A statement (a pull quote with a photo), Latest insights, Newsletter sign-up and Closing call.

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (oxblood: buttons, the margin rule, stamps and the red ribbon), the second (the manila folder: fills and the highlighter) and the third (the folder tab). Buttons are darkened until their ivory text is readable, the second and third are lightened until ink text on them is; a color that can’t get there stops the build with a message. Brand also sets the fonts (text, headings, and the typewriter face for labels, references and stamps) and the corners.

Languages

Docket is ready for more languages: see Languages.

The 404 page

A small game, Balance the scales: a claim’s weight sits on the left pan; load numbered exhibits onto the right pan (tap them, or press 1-6) until the scales level. Five cases against the clock; the best score is kept in the visitor’s browser.

AI assistants and search engines

• AGENTS.md describes the project for coding assistants (Claude Code reads it through CLAUDE.md, Cursor through .cursor/rules/).
• /llms.txt lists your pages, practice areas, people and insights for AI assistants, in every language.
• Pages carry JSON-LD: the firm as a LegalService, practice areas as Services with their fee, people as Persons, how you work as a HowTo, questions as a FAQPage, and each insight.

Commands

pnpm dev                     # local site, editor at /keystatic
pnpm build                   # production build
pnpm cms sanity schema|seed  # move content to Sanity (see Content → Sanity)

In the EmDash variant: npm run dev, npm run deploy (Cloudflare) and npm run emdash:schema (after changing the content model).