Joist

Joist is a site for a general contractor or remodeling company: kitchens and bathrooms, additions, ADUs and garage conversions, basements and whole-home renovations. It is warm and architectural, built from one picture: a new timber house frame against a blue-violet evening sky, the low sun streaming through the studs. The home page opens on that frame across the whole screen, the sun flickering between the studs in a short film, with the phone number and an estimate button right on it. Behind every page faint studs stand at a steady rhythm, catching the low sun; the colours are twilight indigo, sunset apricot and chalk-line blue on sawn pine. The demo is a fictional business, Halvorsen Build Co.

Joist 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, projects, guides, 404	Pages → the page’s own entry
Costs (site visit, typical budgets, how a build runs, booking, retainers and gift consults, questions)	Pages → Costs page
Contact (estimate form, towns, map, hours, details, questions)	Pages → Contact page
Services (icon, stamp colour, budget from, time on site, what’s included, who it’s good for, questions, photo)	Content → Services
Projects (where, when, scope, crew, time on site, budget, two photos, the schedule, story)	Content → Projects
Guides (one can be for members only)	Content → Guides
Name, phone, address, license, navigation, header button, profiles	Pages → Site settings
Buttons, labels, chat, emails, game texts	Content → Interface texts
Privacy, terms, warranty	Pages → Legal

In headlines, words wrapped in *stars* are set in the accent with a chalk line under them that is snapped as they scroll into view, as in “Built square. *Built to last.*”

The opening

The home page’s first section fills the whole screen on every device. Its texts are yours: the small line, the headline, the lead, two buttons (make the first one your phone number as a tel: link and it gets a phone icon) and up to three facts on the tape measure at its foot (wider screens). The picture is one or two files:

• Photo: 16:9 and at least 1920 pixels wide, a view of your work in good light. It shows at once and is what search engines and slow phones see. Set Photo focus to the part that should stay in view on a narrow screen (e.g. 50% 55%).
• Film (optional): a short silent MP4 loop of the same view in public/media/ (1–2 MB, 1280 wide), e.g. /media/hero.mp4. It starts loading only after the page has, fades in over the photo and pauses when you scroll past. Leave it empty to show the photo only. Visitors who prefer reduced motion or save data see the photo.

The text sits on its own plate of dusk, blurred at the edges, that keeps the white text readable even over a white frame, so the opening looks the same in both themes. On load a chalk line is snapped under the headline and the tape measure reels out along the foot.

Projects and their schedules

Each project has a finished photo, a photo of the build, the scope, the crew, the time on site and the budget, and its schedule: a list of phases, each with the week it starts in and how many weeks it takes. On the project’s page the schedule is a chart of timber bars along the weeks; on the cards it is a thin strip of the same bars. The newest project is shown large on the home page.

Services

Each service carries a grade stamp in the corner of its photo, like the ink stamp on a stud: the service’s drawing and its number, in one of the three colours (twilight, sunset or chalk). Service and project photos are raised from the bottom like a wall being stood up as they scroll into view.

Costs, booking and payments

The costs page holds your site visit on a sunset price tag with its small print (distance, design retainer, contract, payments), up to four typical budgets as ranges (mark one as the one most people ask for), how a build runs beside a house that frames itself stud by stud as you scroll (also on the home page), booking a site visit with Cal.com, and design retainers and gift consults you take with Stripe or Lemon Squeezy: each one gets a one-time price id. Without keys, the booking shows a preview of the calendar and the payment buttons explain how to switch them on.

The map of the area

The map is drawn from OpenStreetMap in your colours, with a pin on your office and a ring for the area you cover. It is part of the page (no embed, no cookies) and follows the theme and your accent. To draw your own, put your office’s coordinates in map.config.json and run pnpm map -- fetch. detail: "area" (the default in Joist) draws the main roads, railways, water and woods of a whole district, and Contact page → Map → Radius sets the ring; detail: "streets" draws the streets and buildings round one address instead.

Integrations

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

Feature	Where	Service
Book a site visit	Costs page, loads on click; a preview of the calendar until connected	Cal.com
Design retainers and gift consults	Costs page (one-time prices)	Stripe or Lemon Squeezy
Renovation notes by email	Home and guides pages, with a welcome email	Supabase or Mailchimp
Members-only guides	A guide marked members only shows its text after signing in	Clerk
Estimate form	Contact page; messages go to the email in Site settings	Resend
AI chat	On every page, answers about services, budgets, projects, permits and areas; never gives structural, electrical or gas advice to act on	Claude or OpenAI
Search	⌘K or the search button: services, projects, guides, costs, contact	built in, or Algolia
Analytics	Every page; Google Analytics only after consent	Plausible, Umami, PostHog, Google Analytics
Photos	Served from your Cloudinary account when it is set	Cloudinary

Sections

The home page is built from these sections, in any order: Opening (the photo and film), Services (cards with a grade stamp), Projects (the newest large with its schedule, then cards), How a build runs (beside a house that frames itself), Numbers (on a tape measure, on a blue-hour band), The area on a map, Guides, Renovation notes by email (a blue-hour panel) and Closing call (a blue-hour band with the last sun through the studs and a photo). With reduced motion nothing moves: the house stands framed, every line in place.

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (twilight indigo: buttons, links, marked words, the timber bars and the blue-hour bands), the second (sunset apricot: the call button over the photo, the tape measures, the light on the studs, fills with dark text) and the third (chalk-line blue: the lines under marked words and the current page, small fills with dark text). The accent is darkened until white text on it is readable, the sunset and chalk are lightened until dark text on them is; a color that can’t get there stops the build with a message. Brand also sets the fonts and the corners (square, like sawn timber, or slightly rounded). The site opens on the pine day theme even when the visitor’s system is dark; the toggle switches to blue hour, and the browser remembers the choice. The opening and the blue-hour bands look the same in both.

Languages

Joist is ready for more languages: see Languages.

The 404 page

A small game, Take-off: the drawings show a block of timber modules from the front and from the side, as the tallest stack in each column and in each row. Stack modules on the site plan (tap a lot to add a storey, right-click or long press to take one off, or the arrow keys, 0–5 and Enter) until your build casts both elevations, then call the inspector. Your build is drawn in 3D beside the plan and your elevations over the drawings, so a line that is short or too tall shows. Any build that matches passes, and fewer modules score more: 100 points times the fewest possible over yours. Three sites, bigger each time; 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, services, projects and guides for AI assistants, in every language.
• Pages carry JSON-LD: the business as a GeneralContractor with the areas it serves and its typical budgets, services as Services with the budget they start from, projects as CreativeWorks, how a build runs as a HowTo, questions as a FAQPage, and each guide as a BlogPosting.

Commands

pnpm dev                     # local site, editor at /keystatic
pnpm build                   # production build
pnpm map -- fetch            # draw the map round map.config.json from OpenStreetMap
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).