Vellum — Free Fine Jewellery & Accessories Website Template
Vellum is a product-led boutique template for a fine-jewellery house, not another editorial lookbook — the featured collection grid, bestsellers rail and budget-based gift guide do the selling. It is built on a deep-emerald and antique-gold palette over a cool pearl neutral, with a delicate Cormorant Garamond display paired against Hanken Grotesk. Every interaction is hand-written vanilla JavaScript, so it drops cleanly onto a strict-CSP host with no jQuery and no icon fonts.
Features
- Full-height emerald hero with an infinite service marquee (recycled gold, insured shipping, lifetime care)
- Featured collection grid with a spanning lead tile and hover "add to bag" reveal on delicate gold-framed product cards
- Add-to-bag micro-interaction that pulses the header bag counter and confirms each add inline
- Craftsmanship "one jeweller, one piece" split with layered atelier imagery, a gold seal and a founder signature
- Materials & ethics section with four inline-SVG pillars (recycled gold, traceable stones, hallmarking, lifetime care)
- Scroll-snap bestsellers rail with prev/next controls that disable at the ends
- Auto-rotating press quotes with dot navigation, pause-on-hover and styled masthead wordmarks (no logos to license)
- Budget-based gift guide with tabbed filtering (Everyday / Occasion / Heirloom)
- Newsletter block with real front-end email validation and status messaging, plus a rich four-column footer
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1 (single-page)
- Responsive: Yes
- Style: Fine-jewellery boutique — emerald & antique gold, delicate serif, whitespace-led
How to use it
Download the ZIP, unzip it, and open index.html — there is no build step and no dependencies to install. Replace the demo text and images with your own, point any forms at your backend or a form service, and deploy the folder to any static host. Colours, fonts, and spacing live in css/style.css; the interactions are in js/main.js. Bootstrap 5 is bundled locally, so it works offline and on strict-CSP hosts.
FAQ
Is Vellum a single page?
Yes. It is one long-scroll boutique page covering the hero, featured collection, atelier story, materials and ethics, bestsellers, press, a gift guide and a newsletter — everything a jewellery brand launch needs in a single file, with no secondary page to wire up.
Do I need Node, npm or a build step?
No. Bootstrap's CSS and JS bundle are self-hosted in the template, the two display fonts load from Google Fonts, and all behaviour lives in one plain `js/main.js`. Open `index.html` and it runs.
Can I use it for a real store?
It is a front-end boutique template, so the bag counter, add-to-bag and product links are demo interactions. Wire the product cards and bag to your own commerce backend (Shopify, WooCommerce or a headless API) to take real orders.
How do I restyle it for my own brand?
Swap the photos in `img/`, edit the copy directly in `index.html`, and change the CSS custom properties at the top of `css/style.css` — the whole palette (emerald, gold, pearl) and type scale are driven from that one `:root` block. The gift guide filters on each card's `data-tier` attribute.
