# Free jewelry website template

> Free HTML jewelry website template for goldsmiths and custom jewellers, with a price list and booking form. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Jewelry website template: one free HTML page for an independent goldsmith, with prices by piece, a five-sitting process, a stand-in ring offer for proposals, three remade-piece stories, a care price list and an appointment form. Coral, lilac and near-black panels sit on a pale grey page. An AI agent can adapt the single file.

- Page: https://8b.com/templates/oriel/
- Live demo: https://8b.com/templates/oriel/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/oriel/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/jewelry-website-template
- Download ZIP: https://8b.com/templates/oriel/jewelry-website-template.zip
- Template name in the repository: Oriel
- At a glance: One 107 KB index.html with its CSS and JavaScript inside, 12 sections, 26 Unsplash photos credited in CREDITS.md, Instrument Sans and Source Serif 4 from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

## Use it with an AI coding agent

Download the files into the project (Windows PowerShell: `curl.exe`):

```bash
curl -LO https://raw.githubusercontent.com/8bsite/jewelry-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/jewelry-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/jewelry-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/jewelry-website-template/main/CREDITS.md
```

Then give the agent this prompt:

```text
Read AGENTS.md, then edit index.html. Make it the site for <my studio: name, city, what we make and repair, starting prices, service prices, lead times, hallmarking office, makers and roles, hours, booking, legal name and company number>. Replace first the studio name, the five pieces, the five process steps, the three stories, the makers and the care prices. Keep the section ids, the classes AGENTS.md lists and each --len set to its name's character count. Ask me for missing facts; never invent hallmarks, carats, reviews, quotes or contacts.
```

Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/jewelry-website-template my-site`.

## About

Built for a bench jeweller who sells by appointment: engagement rings, wedding bands, repairs and remade family gold. A silversmith, engraver or watch repairer with a few makers can reuse the structure. Jewelry website design of this kind explains the process and the prices before anyone visits, so people arrive knowing what a commission costs. It has no shop, cart or checkout, and it is a jewellery website template for a workshop, not a store.

Vibe coding with Claude Code, Cursor or Codex goes fastest when you give the agent the facts only the workshop has: starting prices per piece, service prices, lead times, the assay office, makers and roles, hours and address. The agent should replace the prices, the five sittings, the stories and the makers first. The footer wordmark and each sitting name carry an inline --len; set it to the character count of every new name.

Pick it for a studio with a process to show and visits to book. A business that sells stock and ships it needs a shop, and the [flower shop](https://8b.com/templates/moth-marigold/) template at least shows delivery and standing orders. The weak spot is length: the pieces strip holds the screen for about four item widths of scroll, and the makers section for about 1.4 screens. Owners who do not code can use 8B's no-code builder instead.

## Design

- Palette: #eeeef1 (page background and the nav bar once it floats), #121014 (text, the pieces, makers, menu and footer grounds, the middle story card, the booking form, the small fused pills of the contact facts and the photo caption, rules in the sittings list), #e9736a (the opening panel, buttons, the free-cleaning pill, piece prices, the logo dot, the 'You' circle, the open question's plus), #8e8a75 (the sittings ground, the first story card, the empty backing of photos), #cdcae8 (the stand-in and care grounds, the third story card), #ffffff (text on dark grounds, the fused photo pills, price pills, an opened question), #5b5a63 (small text in the metal rows, care prices, the empty frames of the pieces strip), #aeacb6 (secondary text on near-black: piece lines, makers' roles, footer labels, the form status line)
- Fonts: Instrument Sans (headings in regular weight, body text, labels, buttons and form fields; a variable font whose width axis widens the sitting names and the footer wordmark, at weight 650 for those display lines), Source Serif 4 (the second line of each heading, in upright regular weight, and the italic label of the valuation button on the first screen)

A pale grey page cut into full-width bands of different grounds. Every section heading has two voices, a sans line and a serif line, stacked. Photos are tall frames, circles or pills. In the metal section round photos fuse to white pills through a curved neck; the stand-in points use the same pill with an icon, the contact facts a smaller near-black one. Sittings are a numbered list with a round photo on the right. Stories are three stacked cards.

Most bands change ground: a coral opening panel, near-black pieces and makers, khaki sittings, lilac for the stand-in offer and the care prices. The sitting names widen from narrow and light to wide and bold as they cross the reading line, and the footer wordmark stretches to fill the page.

## Sections and motion

- **Navigation** (navigation): a Menu button, the wordmark with a dot, a Price Guide button and a call button with the founder's round photo; a full-screen menu with nine links. Motion: The bar turns into a floating pill after 40 px of scroll, slides away when you scroll down and returns on scroll up; the Menu button opens a full-screen overlay and pauses smooth scrolling.
- **Every Drawer Holds A Ring Waiting To Be Made.** (opening): one big rounded coral panel: a heading in two voices, a paragraph, six badges, a valuation button and a photo of an old jewellery box with a caption pill. Motion: On load the coral panel grows from slightly smaller and its heading, paragraph, badges and button rise in turn; nothing moves on scroll.
- **What Leaves Our Bench Most Weeks** (pieces): a held screen where five tall piece frames travel sideways as one strand, curving up in the middle. Motion: Pinned: the five frames travel sideways as one strand, each riding a curve, upright and highest in the middle and lower and tilted at the edges, while its photo slides inside the frame.
- **Where Our Metal Comes From** (gold): where the metal comes from: an intro and three rows, each a round photo fused to a pill. Motion: The two heading halves slide in from opposite sides as you scroll, and each row's round photo starts smaller and tucked into its pill, then slides out to full size.
- **Five Sittings From Drawer To Hand** (bench): five numbered sittings from sketch to hand-over; each name swells wide and bold as it crosses the reading line and its photo circle grows. Motion: As each sitting crosses the reading line its name widens from narrow and light to wide and bold and its photo circle grows from about half size, then both fall back.
- **Proposing? Use A Stand-In.** (standin): a tall photo beside a pitch for a silver stand-in ring, three points and a button. Motion: The photo opens from a rounded inset to the full frame while the picture settles, the heading halves slide together and the three points settle into place.
- **Three Pieces That Came Back Different** (stories): three remade pieces as stacking cards, each with the story, a quote and a came-in and came-out photo pair. Motion: The cards are held with staggered offsets, so each new card slides over the one before, which shrinks to 92 percent.
- **Four At The Bench And A Seat For You** (studio): four makers and an empty seat for the visitor: round portraits start as a small cluster and spread into a row. Motion: Pinned for about 1.4 screens: the circles begin as a small overlapping cluster and spread into a row, then names and roles fade in.
- **Asked At The Counter** (faq): five questions and answers (native details) with a phone line. Motion: The heading halves slide in from opposite sides; the questions open with a plain click.
- **Looked After For As Long As You Wear It** (care): a care promise and eight price pills that settle from a scatter into one block. Motion: The eight pills start scattered and tilted and settle into one block as it scrolls up, the free pill first.
- **Come Round To Tanner's Wynd** (contact): address, hours, phone and email as fused pills, a shop photo and a booking form. Motion: The heading halves slide together, the three fused facts settle and the shop photo opens from a rounded inset.
- **Footer** (footer): address, hours, contacts and five links above a huge wordmark that widens as you scroll, then the legal line. Motion: The wordmark's font width runs from 75 to 100 as the footer comes up, which stretches it across the page.

## Good for

- goldsmith or custom jeweller
- jewellery repair and valuation studio
- silversmith, watchmaker or engraver with a few makers
- any craft studio that sells by appointment and shows a process

## Questions

**Is this one of the free jewellery website templates, and can I use it for clients?** Yes. It is a single index.html under the MIT license, so a freelancer doing web design for jewelers can ship it for clients at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, the fonts from Google's servers, and there is no build step or CMS. The photos are Unsplash images listed in CREDITS.md.

**Can I take online orders with it?** No. There is no cart, checkout or stock list. Pieces show a from price as plain text, and the buttons lead to the questions, the care prices, the phone link or the booking form. To sell online, point the buttons at your shop platform or choose a template built for it.

**Does the booking form send anything?** No, not as shipped. A script checks the name and email, shows a thank-you line that promises a reply within a working day, and clears the form. Without JavaScript the form posts to #. Connect Formspree or Netlify Forms, and rewrite the promise to match how you reply.

**How do I give it to an AI agent, and what must stay?** Download index.html and AGENTS.md into one folder and paste the prompt above into Claude Code, Cursor or Codex. The agent keeps the ids and the data-8b-section, data-8b-motion and data-8b-part attributes. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

**What happens on a phone, with reduced motion or without JavaScript?** On a phone the pieces strip still runs sideways, the makers and prices reflow and story cards compress. With reduced motion, entrance and scroll animations and smooth scrolling are off, while the nav bar still hides on scroll and buttons react to hover. Without JavaScript the Menu button cannot open its overlay; the questions and footer links still work.

**Can I get a site like this without editing code?** Yes, with [8B's AI website builder](https://8b.com/). You describe the site in a sentence and its engine designs a new site, its own design, not this template. Designing is free; publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.

## Before publishing

Replace: social preview image, favicon, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses).

- Price Guide button in the header lead to #care now; point them to your price list page, or keep it on the care and prices section.
- Talk To A Goldsmith button in the header lead to a tel: link to the studio phone, labelled with the founder's name now; point them to your own number and the name of the person who answers.
- Book A Free Valuation button in the first screen lead to #contact now; point them to your booking calendar URL, or keep it on the form.
- Read Our Questions button in the gold section lead to #faq now; point them to keep it, or point to a longer sourcing page.
- Ask About A Stand-In button in the proposing section lead to #contact now; point them to your enquiry form or an email link.
- Request A Time button of the Book A Visit form lead to action="#" with method post; a script checks the name and email, clears the form and shows a thank-you line, nothing is sent now; point them to your form endpoint (Formspree, Netlify Forms) or your own handler; drop the preventDefault in section-script:contact when you do.
- Email us link in the contact block and the email in the footer lead to mailto links to the studio address now; point them to your studio address.
- The booking form is a demo: with JavaScript it only checks the name and email, clears itself and shows the thank-you line; without it the form posts to #.
- The pieces section holds the screen for about four item widths of scroll and the studio section for about 1.4 screens, which is long on short laptop screens.
- On phones the stacking story cards are compressed into a smaller layout with a small came-in photo; long stories may be tight.
- gsap, ScrollTrigger and Lenis load from CDNs before the motion scripts; offline they are missing and the motion does not run.

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).