Skip to content
Loupe Open the demo

HTML template · Tailwind CSS · SCSS · vanilla JS

A jeweller’s website, ready to sell stones.

Loupe is an HTML template for bespoke jewellers, engagement-ring ateliers and diamond dealers. It shows the stone before the ring: a loupe lens on the hero, a graded diamond catalogue, a four-step ring builder and a full checkout — all working, with no framework and no jQuery.

See the four homes Try the ring builder
Home pages
4
HTML pages
23
Working tools
9
W3C errors
0

01 · Four homes

Four homes, four ideas.

Each home is built around one thing a jeweller wants to show. Pick the one closest to your shop — every inner page works with all four.

Home 01, Atelier: a diamond held in tweezers with a loupe lens Home 01 · darkAtelier A loupe lens follows the cursor and magnifies the stone ×2.4, with its grading beside it. Then today’s parcel as a dealer’s stone sheet, a ring-builder teaser and a six-week making ruler. Home 02, Daylight: a solitaire with a colour grade selector Home 02 · lightDaylight The light edition. Slide from D to J and the stone warms on the photo while the price bars follow — colour grading explained by showing it. Home 03, Heirloom: a before-and-after ring comparison Home 03 · darkHeirloom For remodelling old rings: drag between then and now, then value the old gold by stamp and weight with a live credit calculator. Home 04, Journal: a magazine masthead and cover story Home 04 · editorialJournal A magazine front page: masthead, cover story, a contents list with hover previews, stone of the week and a newsletter sign-up.

02 · What works

Not mock-ups. Working tools.

Everything below runs in the browser with plain JavaScript. Connect your own stock feed, payment provider and mailing list when you’re ready.

The ring builder on step one, choosing the shape

Ring builder

Four steps, a live price.

  • Shape, stone, metal & setting, size & engraving
  • Plan view of the cut with measurements in millimetres
  • Stone filters: carat range, colour, clarity, lab
  • Engraving preview in the chosen metal · designs saved
Open the builder →
The loose diamond catalogue with filters and a stone table

Diamond catalogue

Every stone, graded.

  • Filter by shape, carat, colour, clarity and lab
  • Switch between a dealer’s table and a photo grid
  • Stone pages with a hover magnifier and certificate data
  • “Build a ring around it” opens the builder with that stone
Open the catalogue →
The tray (cart) with an itemised docket

Cart & checkout

From tray to receipt.

  • Tray with cross-sell, gift codes and an itemised docket
  • Checkout: collect or courier, card, deposit or pay later
  • Inline validation with accessible error messages
  • Order confirmation with a six-week making tracker
Open the tray →

03 · All pages

Twenty-three pages, one system.

Same rail, same type, same grid on every page. Click any page to open it.

Shop

Account & story

Help & utility

04 · How it’s built

Clean code, easy to change.

Tailwind CSS v4
Layout and utilities, design tokens in one @theme block.
SCSS components
One partial per component, compiled into cascade layers.
Vanilla JavaScript
No jQuery, no framework. Each tool is a short, commented module.
W3C valid
All 23 pages pass the Nu HTML checker with zero errors.
Responsive
12-column grid; checked at 1440, 768 and 390 pixels.
Accessible
Skip link, focus states, labelled forms, AA contrast, reduced motion.
Free fonts
Bodoni Moda, Instrument Sans and Red Hat Mono, all SIL OFL.
Drawn, not traced
Eight stone cuts generated as SVG geometry — recolour with CSS.

Demo photographs are from Pexels and are not included in the download; every image slot ships as a grey placeholder with its size written on it.

Show the stone first.

Open the demo Choose a home

Loupe · HTML template by webkoding · 2026