Brand · Product Design · Full-Stack Build
RARE GEM
EXCHANGE
How we designed and built a private exchange for investment-grade gemstones — an experience that earns trust before it asks, qualifies six-figure buyers, and gives the team a pipeline to run the business from.
The Client
Rare Gem Exchange is a private exchange for investment-grade coloured gemstones and fancy-colour diamonds — Ceylon sapphires, Burmese rubies, natural pink and yellow diamonds — priced from roughly $12,900 to $145,000 a stone.
They came to us needing more than a website. They needed a digital presence that behaves like a private bank rather than a shop: high-trust, evidence-heavy, and quietly persuasive — and, behind it, a way to actually capture and act on the handful of serious buyers a brand like this lives on. We designed and built the whole system: brand expression, marketing site, catalog, concierge, and the operations layer that ties it together.
Problem Statement
How do you sell a six-figure stone to someone who will never click “add to cart”?
This market runs on trust, provenance, and discretion — not discounts or urgency. Rare Gem Exchange needed to establish institutional credibility as a young brand, capture the small number of genuinely serious buyers, and give a lean team visibility into who was inquiring — all on a self-owned stack with no CMS and no CRM. The brief, distilled: earn trust before asking, qualify the serious few, and hand the team a pipeline.
Business Challenges
What made this hard
A sale with no checkout
Six-figure stones close over private conversation, not a cart. The site had to qualify and capture, then get out of the way of a human relationship.
A credibility gap
A young brand competing with houses that have traded for a century. Credibility had to be engineered into every surface — labs, standards, provenance, documentation.
Global, multi-currency buyers
Collectors and funds across continents, each thinking in their own currency and budget band — the experience had to localise without friction.
A tiny team, no CRM
No enterprise tooling and no ops staff. Leads couldn’t vanish into an inbox — the team needed to see, read, and act on every inquiry in one place.
Who We Designed For
Three buyers, three journeys
Every decision traces back to one of three people. The concierge’s decision tree is branched around exactly these intents — buying, selling, and verifying — so each visitor meets a path written for them.
The Private Collector
Passion meets portfolio
A high-net-worth individual who buys for love of the stone as much as for long-term value. Discreet, relationship-driven, allergic to the hard sell.
Goals
- Acquire rare, verifiable stones
- Discretion and a personal relationship
- A curated view, not a catalog dump
Needs
- Provenance & certification up front
- Private viewings over “buy now”
- Calm, unhurried presentation
The Institutional Allocator
Stones as tangible assets
A fund or family office treating coloured gemstones as an inflation hedge and a store of tangible wealth — allocating at scale and answerable to a committee.
Goals
- Allocate with grading rigour
- Defensible comparables & pricing
- Documented, insurable provenance
Needs
- Dual-lab certificates & treatment status
- Side-by-side value comparison
- Escrow & secure logistics
The Seller / Consignor
Liquidating with confidence
An estate or existing owner looking to divest a stone or a collection — needing a credible valuation and a secure, dignified process.
Goals
- A credible, fair valuation
- A secure route to sale
- Guidance, not a lowball offer
Needs
- A clear valuation pathway
- Documentation guidance
- Trust that the counterparty is careful
Goals & Objectives
What success had to look like
Establish institutional credibility
Make a new brand feel as trustworthy as a century-old house — through structure, not claims.
Convert intent into qualified leads
Capture serious buyers with the context the team needs to close, and filter out tyre-kickers.
Present gems as investment assets
Give buyers the evidence to justify a six-figure decision to themselves — and to a committee.
Hand the team an operations layer
Turn a marketing site into a working pipeline the team can watch and act on daily.
The Process
From understanding to operating
Seven phases, each answering a question the last one raised — from “how does this market actually work?” to “how does the team run it every day?”
Learn the buyer’s world
We studied how high-value stones actually trade — auction houses, private banking, Swiss gem labs, museum provenance dossiers. The insight that reframed everything: at this tier, the product is trust, and the sale closes offline.
Reframe the site as a trust funnel
Not a sales funnel. We mapped three personas and their journeys, then decided the home page would spend its first four sections earning credibility — and ask for nothing until the case was made.
Keep it shallow and legible
A deliberately flat five-route map. One data module as the single source of truth for the catalog. The home page sequenced as a narrative: credibility → understanding → evidence → capture.
Prove the sequence and the density
Low-fidelity skeletons validated two bets before a single pixel of polish: that the trust-first sequence held attention, and that a lab-report level of spec density would read as rigour, not clutter.
Design the private-banking language
We built the estate aesthetic from the tokens up — the dark vault canvas, the single gold accent, the engraved serif type, the atmospheric gradients — so every future screen would inherit the same restraint.
Hand-roll everything on tokens
React + Vite on the front, Express + PostgreSQL on the back. Zero UI libraries — every element built against the design system so the brand stayed bespoke and the bundle stayed lean.
Give the business a cockpit
A real-time admin console, a lead pipeline, and full concierge transcripts — so the marketing site became a working instrument the team runs the business from.
Wireframes
Structure before surface
Before any visual polish, low-fidelity skeletons let us test the two bets the whole project rested on: that a trust-first sequence would hold attention, and that lab-report density would read as rigour. Layout first, decoration later.
- Credibility stacked above the fold — labs, standards, endorsements.
- A single capture moment, deliberately last.
- Gallery hero paired with a spec block, not marketing copy.
- Comparison and “similar” to keep serious buyers exploring.
- Stats, then a switchable table, then a transcript view.
- Designed as its own product, not a bolt-on.
Design Thinking
How we arrived at the look
We started from the buyer’s world, not from web trends. The reference points were private banking, auction-house catalogues, museum labels, and Swiss gem-lab reports — places where restraint signals seriousness. Retail e-commerce patterns (bright, promotional, dense) were the anti-brief.
That led to a single organising idea: the site should feel like a vault at night, where the stones are the only source of colour. Everything downstream — the near-black canvas, the one gold accent, the engraved type, the atmospheric gradients — follows from that image.
Design Decisions · Atmosphere
The vault, built from light
A single dark mineral photograph sits fixed behind the entire site, dimmed by a rgba(5,5,5,0.72) scrim. Fixed position means content floats over a stable, deep backdrop as you scroll — a subterranean, vault-like calm rather than a busy hero image. The scrim is doing the real work: it pushes the photograph back into atmosphere so it never competes with the stones or the type.
Over that base we layer gradients as lighting, not decoration. Warm radial glows imply a single light source catching gold; a soft top-sheen lifts each card; one gold bar is the only place colour ever runs edge to edge. Every value is low-opacity, so nothing reads as “webby.”
background.jpeg + rgba(5,5,5,.72) scrimA dark mineral photograph fixed behind everything, dimmed 72% so it reads as depth, not decoration.radial-gradient(…, rgba(216,160,122,.08), transparent)Simulates a single light source catching gold — the same warmth behind every hero.linear-gradient(160deg, #fff2, #0004)A lit top edge on cards so surfaces feel raised without a heavy border.linear-gradient(90deg, gold, gold-light)A 2px rule that marks the principle cards — the only place colour runs edge to edge.Design Decisions · System
One accent, engraved type, hard edges
A single warm gold carries every emphasis, so attention is always earned. Cinzel’s inscriptional capitals bring gravitas; wide tracking makes them monumental. Corners stay hard — 0 radius on the marketing side reads as chiselled, like a certificate or a vault door.
Trust, front-loaded — the endorsements marqueeWhat We Delivered
Four surfaces, one identity
What we built · Signature
A concierge that qualifies
The brand needed to greet six-figure buyers the way a private banker would — attentive, discreet, never pushy. We built a fully client-side, rule-based concierge (no LLM, no unpredictable output) gated behind a lead-capture form that auto-detects the visitor’s currency from their IP.
- A 16-node decision tree branched by buyer intent — buy, sell, verify
- A randomised 1.5–2.5s “thinking” pause for perceived care
- Every dead end offers a real estate representative
- The full transcript is captured for the team to read before they call back
What we built · Evidence
Detail pages that read like reports
To justify the price, we presented each stone the way a lab presents a certificate: a thumbnail-gallery hero, a three-column spec table, a value-comparison widget, and a reading mode that flips the whole page’s theme by redefining the design tokens on a single class.
- SKU, price, provenance and shipping on every stone
- “Your Gem vs. alternative” with a highlighted price delta
- Runtime light/dark — one class, not a second stylesheet
- Scroll-snap “Similar Gems” to keep buyers exploring
What we built · Discovery
A catalog that feels curated
Rather than a dense retail grid, the collection reads as a considered selection — instant search, category and carat facets, all computed client-side so browsing is fast, offline, and calm.
- Instant in-memory filtering — zero network round-trips
- Category & carat-range facets with a graceful empty state
- Staggered reveals, hover lift, and image zoom
What we built · Operations
A cockpit for the team
A standalone, password-gated console reachable only by direct URL. It polls leads and stats every five seconds and includes a read-only viewer for any lead’s full concierge conversation — so the team acts on real context, not guesses.
- Constant-time auth, header-gated endpoints
- Live 5-second polling with skeleton loaders
- Searchable lead tables and a transcript viewer
Runtime Theming
One page, two moods
The gem detail page ships a reading-mode toggle. Light mode is implemented by redefining the --rg-* tokens on a single class — the whole subtree recolours through the cascade. No duplicated stylesheet.
Dark — default tokensLight — token overrideHow We Help Them Operate
Not just a storefront — an instrument
The most valuable thing we handed over isn’t a page. It’s the pipeline behind it — the layer that turns a visitor into a captured, contextualised, actionable lead the team can work the same day.
Every lead, captured with context
Waitlist and concierge inquiries land in PostgreSQL with consent, budget, location, currency, and the full conversation — never lost in an inbox.
A live view of demand
The admin console polls every five seconds: who inquired, what they asked, what they can spend. The team reads the transcript before they ever pick up the phone.
Localised for the buyer, normalised for the team
IP-based currency detection shows buyers their own currency; the backend stores clean, comparable data with a sensible fallback.
Zero-ops resilience
Migrations self-install on boot and a 14-minute keep-alive keeps the free-tier backend warm — the first lead of the day never hits a cold start.
Challenges & Solutions
Where the problem reshaped the build
A luxury sale has no checkout.
Reframed the site around lead qualification — two capture paths plus a bot that hands off to humans.
Chatbots feel cheap and go off-message.
Chose a deterministic decision tree over an LLM — every word brand-approved, with a curated fallback.
Instant bot replies feel robotic.
Added a randomised “thinking” delay with domain phrases — perceived care at zero real latency.
Global buyers, one currency field.
IP-based currency auto-detection with a graceful AUD fallback that never overrides a manual choice.
Two moods: marketing vs. reading.
Runtime theming by token override — light mode is a single class redefining the tokens.
Free-tier backend cold starts.
A 14-minute self-ping keep-alive that resets the host’s idle timer, disabled automatically off-platform.
By the Numbers
What shipped
Responsive to the pixel
Nine bespoke breakpoints from 1024 down to 360px. Every step reduces type size, tracking, and padding together — the layout is re-composed, never merely reflowed — and every animation degrades gracefully under prefers-reduced-motion.
What We Learned
Takeaways
Constraints sharpen luxury.
A deterministic chatbot and a hand-rolled CSS system produced a more controlled, more on-brand result — not a lesser one.
Perceived experience is designable.
The fake “thinking” delay is a reminder that responsiveness and feeling considered are different goals.
Tokens are the real deliverable.
Centralising theme, type, and motion early made features like per-page light mode a few lines, not a refactor.
The back office is a product.
Treating the admin dashboard with home-page craft is what makes the whole system feel trustworthy to operate.