Five rules that explain everything else.
Every color, component or text decision in this template comes from one of these principles. If a new screen contradicts them, the screen is wrong, not the principle.
Warm black carries the visual weight; gold marks what matters: a hairline, a reduced price, an emphasis border. A screen is never bathed in gold.
Availability and interaction read the same inventory value. There can never be a “Sold out” badge next to an active buy button.
No block starts at opacity:0 waiting for a scroll. Animation reinforces what is already visible; it never reveals it.
No countdown clocks or “374 people viewing this”. The only urgency shown is the one that is already true: one unit left, a reduced price.
It looks precise because the data is real, not because the design disguises it. The spec sheet borrows the language of a gemological report without pretending a certification exists.
Ivory, ink and hairlines all lean warm toward gold, just like the macro product photography, which is the best thing the site has today.
Ivory, warm black and antique gold.
Seventeen tokens, defined once in css/tokens.css. Components never use a loose hex value: always var(--token).
Surfaces
Ink
Golds
Inventory states
Third parties & elevation
Serif for the stone, sans for the interface, mono for the data.
Three families with three different jobs. Cormorant Garamond gives the editorial tone of fine jewelry; Inter carries the cart, forms and navigation; JetBrains Mono is reserved for figures: prices, carats, measurements, codes.
The Yellow Sapphire almost nobody saw.
All 12 pieces, real status
10% off your first gem
Every gem leaves the workshop with its own data sheet: item ID, dimensions, weight, color, shape, cut, enhancement and origin.
Weights loaded: Cormorant 500–700 (with italics for emphasis), Inter 400–700, JetBrains Mono 400–600, from Google Fonts. Fallbacks: Georgia, system-ui, ui-monospace. Headlines use text-wrap:balance.
Restraint, fine hairlines and nearly square corners.
A jeweler does not use heavily rounded corners. Radii are rationed: 2px for almost everything, full circle only for pills and selection chips.
| Element | Value |
|---|---|
| Content width | 1180px max · 32px side padding |
| Space between sections | 72px top and bottom |
| Catalog grid | 4 col · gap 20px → 2 col ≤920px |
| Offers grid | 3 col · gap 16px → 1 col ≤920px |
| Trust strip | 3 col separated by a 1px hairline |
| Breakpoint | 920px (layout) · 760px (sticky bar) |
| Header | sticky · ivory 95% + 8px blur |
| Radius | Used on |
|---|---|
| 2px | Buttons, cards, fields, labels |
| 3–4px | Offer card, gem frame, pop-up |
| 6px | Gift card (an object, not a container) |
| 20px | Badges, chips, amounts, payment marks |
| 50% | Cart counter, chat button |
Elevation & layers (z-index)
hairline only
0 14 30 -16 + 2px up
0 20 40 -18
0 10 26
| Layer | z-index | Component |
|---|---|---|
| Header | 50 | Sticky bar |
| Mobile sticky bar | 55 | Product + “Add” |
| Chat | 60 | Bubble and teaser |
| Cart | 70 / 71 | Overlay / side panel |
| Pop-up | 90 | Always above everything |
One accent per decision, not per button.
The primary button is black with gold text, not solid gold. Solid gold is reserved for what is truly expensive. Each screen zone has a single primary button.
| Class | Rest | Hover | Use |
|---|---|---|---|
.btn-primary | Black · bright gold text | Deep gold · ink text | Main action: add, pay, buy gift card |
.btn-secondary | Transparent · black hairline | Deep gold hairline and text | Alternative action next to a primary |
.btn-sm | Same, padding 10×16 · 11.5px | — | Mobile sticky bar |
.add-btn | Soft hairline · uppercase 10.5px | Inverts to black/gold | Product card |
:disabled | Sold-out background · faint text | No change · cursor not-allowed | Sold, empty cart |
Visible focus on all of them: 2px deep-gold outline with a 2px offset. Pressed state: moves down 1px.
The badge says what the button does.
The badge and the button read the same inventory variable: they cannot contradict each other.
Low stockBadge, price and button all come from the same state: state: "low".
Data rule
| state | Badge | Button | Image |
|---|---|---|---|
| available | Available (green) | “Add” enabled | Normal color |
| low | Low stock (amber) | “Add” enabled | Normal color |
| soldout | Sold (neutral) | “Sold” disabled | 35% grayscale |
Sold pieces are sorted to the end of the catalog, with a restock notice and similar available pieces; never a dead end.
Real catalog, real status.
Try the filters and add to cart.
Card anatomy
| Part | Specification |
|---|---|
| Image | Square (1:1), object-fit:cover, lazy-loaded except the hero. Badge anchored top-left at 10px. |
| Name | Inter 600 · 13.5px |
| Short description | Inter 11px · faint ink · color/cut/stock |
| Price | JetBrains Mono 600 · 14px; previous price struck through at 11px to its left |
| Action | .add-btn to the right of the price, aligned to the bottom of the card |
| Hover | Lifts 2px and gains a shadow; the touch equivalent is tapping “Add” directly |
| Loupe | Moving over the photo opens a 2.2× round lens that follows the pointer, like a jeweler’s loupe. On touch, press and drag; the lens sits above the finger. |
| Flags | .flag top-right: New (black and gold), On Sale (amber) and Sold (neutral, in place of the availability badge). |
Visible at rest, not after the first scroll.
The headline, price and buttons paint in the first frame, and the text sits on ivory, not on the photo.
The Yellow Sapphire almost nobody saw.
Princess cut, intense yellow tone, one of a kind. On sale now, with its full spec sheet.
On Saleloading="eager"; everything else is deferred. It is the image that defines LCP.No fake clocks.
The trust strip sums up three verifiable promises. The offer cards are the only dark block on the page: they stand out because they contrast, not because they shout.
Trust strip
Offer cards
Yellow Sapphire
$650 → $600 — while the last unit lasts.
Free over $300
Applies automatically when the cart passes the amount.
Gift box included
Every order arrives in the same packaging MV Gems already uses.
Real data, with the visual weight of a report.
This pattern does not invent a certification, but it treats the gem’s real data with the seriousness of one, for the day it exists.
Why mono and why a double rule
The JetBrains Mono fields and the double-rule frame (gold border + an inner hairline at 6px) borrow the language of a real gemological report without pretending one exists. It looks precise because the data is real, not because the design disguises it.
Field order
Item ID · Dimensions · Weight · Color · Shape · Cut · Enhancement · Origin · GIA Certified (only if applicable). At the bottom of each description go three promises with an icon: 100% Natural Gemstones, 14-Day No-Hassle Return Policy and Quick Shipping (gem, return arrow and truck).
It closes the sale for someone who does not know which gem to pick.
A loose gem is a personal purchase: the giver rarely gets the color or cut right. The gift card turns that doubt into a sale today and lets the recipient choose their own stone.
The gift card is delivered instantly by email. The code in the example is a placeholder, not a real code.
The gift card is the only object with a gradient in the system (black → deep gold): it is a physical object, not an interface surface.
All the major methods, not just PayPal.
Every method visible at first glance is one less reason to abandon the cart.
Legal notice before paying
Right before the payment is completed, the buyer confirms with a checkbox that they accept the terms and the return policy. With the box unchecked, the payment buttons stay inactive. Try it:
The small things that keep someone from leaving.
These components are shown static, and you can open them for real with the buttons.
Cart (side panel)
Welcome pop-up
10% off your first gem
Sign up and we’ll email it to you — no spam, one message when a new piece arrives.
One pop-up per visit.
Chat & mobile sticky bar
sessionStorage: once per visit. It closes with ✕, a click outside or Esc. The discount in the example is illustrative.Content doesn’t move; it only responds.
opacity:0 waiting for an IntersectionObserver. If it animates, it starts visible and is reinforced.transform, opacity.prefers-reduced-motion all transitions drop to 0.01 ms, without exception.Durations in use
| Duration | Component | Property |
|---|---|---|
| 150 ms | Navigation links, chips, gift card amounts, “Add” button | color · border · background |
| 180 ms | Buttons | background · color · border · 1px shift |
| 200 ms | Product card · cart overlay | shadow + 2px up · opacity |
| 250 ms | Cart panel · mobile sticky bar | translate |
Measured on the real CSS, not estimated.
The tables below are calculated in your browser from the tokens and the elements of this very page. WCAG 2.1 thresholds: 4.5:1 for text, 3:1 for hairlines and interface.
Contrast of real pairs
| Pair (text on background) | Where | Ratio | Threshold | Result |
|---|
Touch targets measured on this page
The rule is 44×44 px minimum. This is what each control measures:
| Control | Height | Width | Meets 44 px? |
|---|
Built in
| Visible focus | 2px deep-gold outline on buttons, chips, icons and the chat bubble |
| Labels | aria-label on cart, close, chat, email field and “Remove” per piece |
| Language | lang="en" on the document |
| Motion | prefers-reduced-motion cancels transitions |
| Alt text | Every photo carries the name of the piece |
To resolve when building: focus trap and focus return when closing the cart and the pop-up; role="dialog" and aria-modal on both; a “skip to content” link; a single <h1> per page.
Precise, warm and without extra ornament.
The tone is that of a jeweler who knows every piece: says what they know, does not promise what they cannot prove.
Do
| “Active button = piece in stock. No exceptions.” |
| “One unit, a reduced price, a verifiable condition.” |
| “Item ID, dimensions, weight, color and origin for every piece.” |
| Concrete data: 4.20 ct · 9.1 × 7.4 mm |
| Direct verbs: Add · Buy gift card · View collection |
Don’t
| Countdowns or “Last hours!” |
| “374 people viewing this” or any other invented social proof |
| “100% authentic” without a certificate to back it up |
| Empty superlatives: “the best gems in the world” |
| Testimonials without a date, product or way to verify them |
