Kerf

Kerf is a site for craftspeople and small trade businesses (joiners, carpenters, cabinet makers, stonemasons, upholsterers, restorers), set like a joiner’s workshop drawing: grid paper, photos pinned up with masking tape, dimension lines that draw themselves, pencil notes and a title block in the footer. It has your services (each with its own page, a “from” price and an optional deposit), finished work with the timber and a cut list, how a commission goes along a tape measure, a journal, and a contact page for quotes and measure-up visits.

Kerf 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)
Services, work, process, journal, contact, 404	Pages → the page’s own entry
Services (what you make, prices, lead times)	Content → Services
Work (finished jobs)	Content → Work
Journal posts	Content → Journal
Business name, email, phone, workshop address, area, title block, navigation, header button, profiles	Pages → Site settings
Buttons, labels, chat, search, emails, game texts	Content → Interface texts
Privacy, terms	Pages → Legal

Services marked Featured come first, then by Order. Each has a kind (“Fitted furniture”, “Repairs”), a price as shown (“from £9,500”) and what it is for, a lead time, what’s included, a color for its swatch, a photo and an optional dimension drawn over it.

Work is sorted by the date it was fitted. Each job has a number (“Job 0418”), a kind (the work page filters by it, so keep the kinds short and consistent), where it is, the timber and finish, its time on the bench, a cover photo with an optional dimension and a pencil note, a detail photo with its caption, and a cut list (part, size, quantity), shown as a table.

In headlines, words wrapped in *stars* get a pencil underline, as in “Made to *measure*”.

Dimension lines

Photos can carry sizes like a drawing: the hero has a width and a height, services and jobs a width (in millimetres, written as you’d write them on a drawing, e.g. “3 600”). In browsers with scroll-driven animations the lines draw out from the size as the photo scrolls into view; other browsers, and visitors who prefer reduced motion, see them drawn. Leave a size empty to hide its line. They’re decoration: the facts that matter are also in the text.

The process and the tape measure

Pages → Process page → Steps holds three to eight steps, each with a title, a line of text and how long it takes. They sit along a tape measure (across the page on large screens, down the left edge on phones) that pulls out of its case as the steps scroll by. The home page shows the same steps with its How a commission goes section. The process page also has a photo of the workshop with your story, what to prepare before the visit, your materials and the guarantee.

Quotes, visits and deposits

The contact page has a quote form, booking a measure-up visit with Cal.com and a deposit (Pages → Contact page → Pay a deposit) for accepted quotes that aren’t one of your services, such as repairs. Services can have their own deposit: with a Deposit as shown and a Stripe Price id (one-time) on the service, its page shows a deposit button that takes it with Stripe Checkout.

The contact page also shows an illustrated map of your area with the workshop’s pin and a circle for the area you cover (both placed in percent). Add your latitude and longitude (Pages → Contact page → Map) and it also offers directions (Google Maps, in a new tab) and a live OpenStreetMap, which loads only when the visitor opens it.

Integrations

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

Feature	Where	Service
Deposits	Service pages with a Stripe Price id, and the contact page	Stripe
Quote form	Contact page; messages go to the email in Site settings	Resend
Book a measure-up	Contact and process pages, loads on click	Cal.com
Newsletter	Home and journal pages, with a welcome email	Supabase
Ask the workshop	Chat on every page, answers from your services, prices, process, questions, work and journal	Claude
Search	⌘K or the search button: services, work, journal, process, contact	built in, or Algolia
Analytics	Every page; Google Analytics only after consent	Plausible, Umami, Google Analytics

After a deposit is paid, the Stripe webhook (/api/stripe/webhook) emails the customer; add your own steps there, such as putting the job in your calendar.

Sections

The home page is built from these sections, in any order: Hero (a pinned photo with its dimensions and a pencil note, and a strip of facts), Services, Selected work, How a commission goes (the tape measure), Numbers, Latest from the journal, Newsletter sign-up and Closing call to action (a blueprint with a drawn cabinet).

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent is the pencil (buttons, dimension lines, underlines, ticks), the second the tape measure (the tape, the newsletter panel, selected states) and the third the blueprint (a cool fill; its hue also tints the night theme). Buttons are darkened until their white text is readable, the second and third are lightened until graphite text on them is; a color that can’t get there stops the build with a message. The paper, links and the night theme (a blueprint, chalk on deep blue) are derived from them. Brand also sets the fonts (text, headings, and the mono font for sizes and labels) and the corners (square like a drawing sheet, or slightly rounded).

Languages

Kerf is ready for more languages: see Languages.

The 404 page

A small game, Mark the cut: a plank on the bench and an order (“Cut at 640 mm”). Mark the cut by eye (click or tap the plank, or move the pencil with the arrow keys and press Enter); the tape then pulls out and shows how many millimetres off you were. Ten planks, the first three with marks at the quarters; the lowest total wins, and the best 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/), including what makes the look.
• /llms.txt lists your pages, services, work and journal for AI assistants, in every language.
• Pages carry JSON-LD: the business with its area, each service with its starting price, the process as steps, the questions, each job and each post.

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