Bezel

Bezel is a site for an independent jeweller and goldsmith: bespoke engagement rings and wedding bands, jewellery designers, ring makers, repair and remodelling workshops. It is set at a jeweller’s bench after dark: deep ink with a faint engine-turned pattern and a pool of lamp light, sapphire, platinum and emerald, a fine high-contrast serif and a glass pill nav. The first screen is the template’s signature: a ring made as you scroll, with the headline, the rating, one line, Book a consultation and Call over it from the first frame. The demo is a fictional workshop, Wren & Vale.

Bezel 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)
Collections (the collections in order, notices after buying, a panel leading to bespoke)	Pages → Collections page
Pieces (a page each: story, metal, stones, sizes, making time, specification, buy or deposit, questions, photo)	Content → Pieces
Bespoke (steps with their weeks, price guide, Cal.com booking, the design deposit, enquiry form, questions)	Pages → Bespoke page
Workshop (story, makers, what you stand by, photos)	Pages → Workshop page
Repairs (services with prices and times, how it works, enquiry form, questions)	Pages → Repairs page
Guides	Content → Guides (one can be members-only)
Visit (map, hours, getting here, message form, questions)	Pages → Visit page
Name, phone, address, rating, opening hours, navigation, profiles	Pages → Site settings
Buttons, labels, chat, emails, game texts	Content → Interface texts
Privacy, terms, commissions and returns	Pages → Legal

In headlines, words wrapped in *stars* are set in italic over a fine platinum line that draws along under them, as in “Rings made *by hand*”.

The opening: a ring made as you scroll

The hero pins four photos of the same piece, taken from the same spot, while you scroll through four steps: a platinum bar glowing under the torch, the shank forged and still hot (burned in behind a hot seam, with sparks and heat), the mount polished (revealed behind a cool seam, a sheen sliding round it and a dimension line drawing itself) and the stone set (revealed from the stone outward, a loupe circle drawing round it and a glint crossing it). Each step has a readout beside the piece; a number at its start counts up as the step plays (“1768 °C”, “17.5 mm”, “1.02 ct”), other text appears as it is (“Pt 950”). The steps sit in a glass card with a progress line. The headline and buttons never move.

To use your own photos, take four from a tripod: the piece in the middle, a little below centre, the top of the frame dark so the headline reads. Phones get a strip from the middle of each photo, so the piece must be there. Without scroll-driven animations or with reduced motion, the opening shows the finished piece as a still frame and the four steps sit in a row below it.

Pieces, buying and the deposit

Each piece belongs to a collection (named as in the collections page’s list) and is either made to order in the buyer’s size or in the showroom (one of one). A showroom piece gets a Buy button: give it a Stripe Price id (or a Lemon Squeezy variant id). A made-to-order piece offers the design deposit from the bespoke page. Without keys the buttons explain how to switch payments on. Pieces are published for search engines as schema.org Products with an Offer.

Booking and enquiries

Book a design consultation with Cal.com (it loads on click; until it’s connected the page shows a preview of the calendar with your times). Commission and repair enquiries and messages from the visit page arrive in your inbox.

The map

The visit page and the home section “Find us” show a map of the streets round the workshop, drawn from OpenStreetMap in your colors, with a pin, your address and directions links. It is part of the page (no embed, no cookies) and follows the theme and your accent. To draw your own, put your coordinates in map.config.json and run pnpm map -- fetch.

Integrations

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

Feature	Where	Service
Design consultations	Bespoke page, loads on click; a preview of the calendar until connected	Cal.com
Pieces and the design deposit	Piece pages and the bespoke page (one-time prices)	Stripe or Lemon Squeezy
Newsletter (new pieces first)	Home and guides pages, with a welcome email	Supabase or Mailchimp
Commission and repair enquiries, messages	Bespoke, repairs and visit pages; to the email in Site settings	Resend
AI chat	Every page; answers about pieces, prices, sizes, the process, repairs and hours; never values a piece	Claude or OpenAI
Members-only guide	Guides	Clerk
Search	⌘K or the search button: pieces, pages, guides	built in, or Algolia
Analytics	Every page; Google Analytics only after consent	Plausible, Umami, Google Analytics, PostHog
Photos	Production builds	Cloudinary (optional)

Sections

The home page is built from these sections, in any order: Hero (the ring made as you scroll), Pieces, Bespoke (the steps on a timeline beside a photo), Numbers (struck like hallmarks), The workshop (a quote and a photo with a loupe of clear light drifting across it), Guides, Newsletter (an emerald band), Find us (the map and the hours) and Closing call (a photo beside the headline, dark in both themes).

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (sapphire: Book buttons, links, marks), the second (platinum: stars, small capitals, hairlines) and the third (emerald: the showroom badge, members, the deposit card, the newsletter). Buttons and the emerald fill are darkened until their white text is readable, platinum is adjusted for each theme; a color that can’t get there stops the build with a message. Brand also sets the fonts and the corners. The fire, metal and gold of the effects use material colours, so they stay true whatever accent you pick. The site opens in its dark theme even when the visitor’s system is light; the toggle switches to the day (pale stone and ink) and the browser remembers it.

Languages

Bezel is ready for more languages: see Languages.

The 404 page

A small game, Engrave it: the inside of a gold band turns under the graver and an inscription rides towards its point. Type each letter (or digit) as it gets there; spaces and signs cut themselves. A wrong key, or a key with nothing under the point, scratches the band and costs a point; a letter that slips past is lost. On a phone, tap the band for the keyboard. Three bands, each longer and turning faster; the inscriptions are in Interface texts. 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, pieces and guides for AI assistants, in every language.
• Pages carry JSON-LD: the workshop as a JewelryStore (price range, hours), pieces as Products with an Offer, repairs and the deposit as offers, 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).