Guides / Adapt a template / Jewelry
How to adapt an animated website template for a jewelry brand
To adapt an animated website template for a jewelry brand, start from Porcelain Silver Jewelry, Nuitelle Jewelry for the Hour After Dusk, Noctavel Emerald and Blackened Silver Rings or the closest fit, keep the hero film or macro photo, hide fast spinning effects that hide detail, add metal, stone and size details, and apply the jewelry style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit jewelers and jewelry brands best
Every pick has a live demo. Open it, scroll it on your phone, then edit it in Create or fetch its prompt.
Pick 1 · Pro
Porcelain Silver Jewelry
An editorial silver-ring film behind refined serif type suits a modern fine jewelry line.
Pick 2 · Pro
Nuitelle Jewelry for the Hour After Dusk
Editorial scenes rising one over another suit a collection with a strong story.
Pick 3 · Pro
Noctavel Emerald and Blackened Silver Rings
A push-in on a hand of rings suits a ring-focused or gemstone brand.
What to change for a jewelry brand
Keep
- The hero film or macro photo
- The collection grid
- Product detail pages
- The appointment form
Hide
- Fast spinning effects that hide detail
- Chapters without a product
Add
- Metal, stone and size details
- Ring size guide
- Care and warranty page
- Appraisal or custom design inquiry
Copy angles
- Describe the metal and stone precisely.
- Tell the maker story with real hands.
- Show scale on a hand or neck.
Trust elements
- Accurate material disclosures
- Return and resizing terms
- Real customer photos with permission
- Certificates for diamonds when they exist
Compliance notes to check
- FTC Jewelry Guides cover how to describe gold karat, silver, diamonds and gemstone treatments.
- Lab-grown stones should be clearly described as lab-grown.
- Back up ethical sourcing claims with documents.
General guidance only, not legal advice. Rules differ by state and change over time, so confirm the details with a licensed attorney or compliance professional before you publish.
Copy-ready adaptation prompt
Paste it into Claude, Cursor or Lovable. It is written for Porcelain Silver Jewelry and works for the other two picks if you change the name and slug. The example client is Hollis & Finch, a bridal jeweler in Nashville, Tennessee.
1. Fetch the template with the MCP
claude mcp add --transport http animatedwebs https://mcp.animatedwebs.comUse the animatedwebs MCP. Call get_template_prompt for "porcelain-silver-jewelry", then build it as a Next.js site and adapt it with the prompt below.Setup for every client is on the MCP page. Pro templates use a Prompt Pack credit or come with Pro.
2. Adapt it
Adapt the AnimatedWebs template "Porcelain Silver Jewelry" (slug: porcelain-silver-jewelry) into a website for a jewelry brand.
Example client: Hollis & Finch, a bridal jeweler in Nashville, Tennessee. Replace it with my real business details, which I will give you.
Keep:
- The hero film or macro photo
- The collection grid
- Product detail pages
- The appointment form
Hide:
- Fast spinning effects that hide detail
- Chapters without a product
Add:
- Metal, stone and size details
- Ring size guide
- Care and warranty page
- Appraisal or custom design inquiry
Copy angles:
- Describe the metal and stone precisely.
- Tell the maker story with real hands.
- Show scale on a hand or neck.
Trust elements to include only if I can supply them:
- Accurate material disclosures
- Return and resizing terms
- Real customer photos with permission
- Certificates for diamonds when they exist
Style: use the CSS variables and fonts from the Jewelry style pack. Motion intensity: Low. Let the stones glitter and the page stay quiet. Slow reveals only.
Rules:
- Keep the template's motion, and respect prefers-reduced-motion.
- Make it mobile first and keep the main action visible on a phone.
- Never invent testimonials, statistics, licenses or credentials. Use clearly marked TODO placeholders instead.
- Add the legal pages and notices this business type usually needs, and flag anything I should confirm with a licensed professional.Jewelry style pack
Refined, quiet and luminous. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Indigo
#3b4cff
Accent
Pale Indigo
#e7e7ee
Surface
Bone White
#f6f6f8
Background
Graphite
#14141a
Text
Type pairing (Google Fonts)
- Display Cormorant GaramondSpecimen ↗
- Body Work SansSpecimen ↗
Motion intensity: Low
Let the stones glitter and the page stay quiet. Slow reveals only.
The CSS export includes the Google Fonts import and motion variables.
# Jewelry style pack, Style Reference > Refined, quiet and luminous **Theme:** light · **Template:** Jewelry style pack (https://animatedwebs.com/guides/adapt/jewelry) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Indigo | `#3b4cff` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Pale Indigo | `#e7e7ee` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Bone White | `#f6f6f8` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Graphite | `#14141a` | `--color-ink` | Headlines and body copy: the primary typographic colour | ## Typography - **Display:** Cormorant Garamond, Cormorant Garamond 600 - **Body:** Work Sans, Work Sans 400 ## Motion - Intensity: Low. Reveal on load, no scroll scrubbing, no parallax. - Let the stones glitter and the page stay quiet. Slow reveals only. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Indigo (`#3b4cff`) for primary actions, links and highlights only - Let the hero motion carry the page; type and buttons sit on a scrim above it - Respect prefers-reduced-motion: no pinning or scrubbing, show final states ### Don't - Don't fill large sections with the accent colour; it is a signal, not a surface - Don't add typefaces beyond Cormorant Garamond + Work Sans
Questions
Which template is best for a jewelry brand?+
Start with the first of the three picks on this page, then compare the other two. Each has a live demo you can scroll, and all three can be edited in Create.
What should a jewelry brand site keep, hide and add?+
Keep the hero film or macro photo and the collection grid. Hide fast spinning effects that hide detail. Add metal, stone and size details and ring size guide.
Does this page give legal advice?+
No. The compliance notes are general reminders of topics to check. Laws differ by state, so confirm the details with a licensed attorney or compliance professional before you publish.
How do I use the style pack?+
Copy or download the CSS variables, the Tailwind theme or the DESIGN.md snippet, and give it to your AI builder with the adaptation prompt so the colors, fonts and motion stay consistent.