The design system
Onyx
After-dark luxury — espresso, candlelight, champagne. The complete creative direction: how an Onyx designer thinks, then every component in that voice.
Philosophy
Before color, before type — the feeling.
Rare by design. Desire, not persuasion.
Feels like Tom Ford Aman Byredo Velvet Candlelight Marble Gold foil A private atelier
Never Tech-dark blue-black Neon Glassmorphism Startup Brassy gold Discount
Candlelight over daylight. Desire over persuasion. Design principles
The guardrails every decision answers to.
Always ✓ Warm near-black (never #000)✓ Gold as a thin accent only✓ Didone serif✓ Gallery whitespace✓ Editorial photography✓ Hairline gold framesNever ✕ Pure #000 + pure #fff✕ Neon accents✕ Glass / gloss✕ Pill buttons✕ Over-gold✕ Flat evenly-lit stockPhotography direction
The single biggest lever.
Shoot Warm-graded editorial Marble & stone Statuary Candlelight Skin detail Low, directional light
Avoid Flat evenly-lit Blue-black Stock smiles Gloss Bright daylight Clinical white
Warm amber-champagne cast, shadows kept. Every image shot in low, directional light — cinematic, never flat.
Motion language
Not what animates — how it moves.
Velvet moves slowly, like a reveal.
A long fade-and-rise; a slow ken-burns on hero photography; a gold underline that draws in on hover. Cinematic, luxury-slow — never springy.
Layout DNA
The recurring skeleton, so nothing drifts.
Image left / text right, or offset — asymmetric, never centered-and-symmetrical. Lots of breathing room. A big-serif-versus-tiny-caps scale jump carries the hierarchy. Text columns stay narrow (≤ 42ch). One idea per screen.
Image left · text right · asymmetric — narrow column
Refreshed, never overdone.
A plan built around your face — quiet, considered, and entirely your own.
Full-bleed image · offset text · one idea per screen
Considered care, start to finish.
Voice
How it speaks.
Sounds like Confident, rare, exclusive — few words.
"Precision over trends."
Never says "Deal." "Sale." Exclamation. Explaining too much. Anything that chases.
System rules
Corners · shadow · grid · texture · shapes.
Corners Sharp. 0–2px. Hairline gold frames, never rounding.
Shadow & elevation Deep ambient on dark, plus a 1px gold hairline. The glow is the elevation.
Texture Film grain and a soft vignette; matte, warm. Gold foil detail, never glossy plastic.
Recurring shapes The rectangle, the gold hairline, the serif numeral, the ring seal.
Grid & spacing 1180px container · 12 columns · generous margins. Scale 8 / 16 / 24 / 40 / 64 / 96.
Accessibility Ivory-on-espresso clears WCAG AA. Body ≥ 15px, weight ≥ 300 on dark. Tap targets ≥ 44px. Reduced-motion honored.
Why choose Onyx
You're picking a perception, not a palette.
Best for Not ideal for Exclusive boutiques · destination clinics · luxury injectables · high-ticket, invitation-only positioning Value clinics · bright / playful brands · high-volume practices · anyone who competes on price
Velvet is how an exclusive boutique creates desire.
Reference board
The visual source of truth — candlelit moments, dark stone, warm brass, quiet evening interiors. Private luxury, never nightclub. Curate to ~12.
10 shown — candlelight, dark stone, evening interiors. The through-line: warm darkness and restraint — never neon, never gold-foil glitz.
Palette
Espresso grounds, champagne accents, ivory type. After-dark luxury — never gold-foil kitsch.
Typography kit
Choose the pairing. Never Fraunces, never a tracked-caps eyebrow.
Pairing A · Editorial display
Rare, by design.
Private, precise aesthetics for the discerning few — by appointment.
Playfair Display + Jost
Pairing B · Engraved
Desire, not persuasion.
Quiet opulence, spoken softly — never shouted.
Prata + Manrope
Logo directions
Three wordmark treatments for the same name.
Icon style
Thin single-weight line, sharp corners.
Background patterns
Quiet structure, used at low opacity.
Slate Candlelight Candle glow Imagery
Curation & art direction.
Art direction: candlelit warmth over daylight. Deep grade with champagne highlights, generous shadow, the thin gold hairline as the signature.
Buttons
Six treatments — sharp, editorial, no pills.
Navigation
Three concepts.
Centered editorial · stacked
Minimal · single-row left
Heroes
Distinct executions of one job.
Hero — editorial split (signature arch)
Rare, by design. Private, precise aesthetics for the discerning few — after hours, by appointment.
Request an appointment Hero — full-bleed, overlaid
Hero — asymmetric typographic
Desire, not persuasion. An atelier, not a clinic — quiet opulence, exacting standards.
Reviews — marquee
Two rows, opposite drift, slow, pause on hover. Vanilla CSS — no library, no avatars-from-a-CDN.
★★★★★
The most natural results I've had. They talked me out of more than I asked for. — Verified review
★★★★★
Felt like a real consultation, not a sales pitch. I finally trust a clinic. — Verified review
★★★★★
I look rested, not “done.” Exactly what I wanted. — Verified review
★★★★★
Honest, unhurried, and the room is beautiful. I've sent three friends. — Verified review
★★★★★
They explained everything and never upsold me. Rare. — Verified review
★★★★★
Subtle, expert, and genuinely kind. Worth every penny. — Verified review
★★★★★
The most natural results I've had. They talked me out of more than I asked for. — Verified review
★★★★★
Felt like a real consultation, not a sales pitch. I finally trust a clinic. — Verified review
★★★★★
I look rested, not “done.” Exactly what I wanted. — Verified review
★★★★★
Honest, unhurried, and the room is beautiful. I've sent three friends. — Verified review
★★★★★
They explained everything and never upsold me. Rare. — Verified review
★★★★★
Subtle, expert, and genuinely kind. Worth every penny. — Verified review
★★★★★
The most natural results I've had. They talked me out of more than I asked for. — Verified review
★★★★★
Felt like a real consultation, not a sales pitch. I finally trust a clinic. — Verified review
★★★★★
I look rested, not “done.” Exactly what I wanted. — Verified review
★★★★★
Honest, unhurried, and the room is beautiful. I've sent three friends. — Verified review
★★★★★
They explained everything and never upsold me. Rare. — Verified review
★★★★★
Subtle, expert, and genuinely kind. Worth every penny. — Verified review
★★★★★
The most natural results I've had. They talked me out of more than I asked for. — Verified review
★★★★★
Felt like a real consultation, not a sales pitch. I finally trust a clinic. — Verified review
★★★★★
I look rested, not “done.” Exactly what I wanted. — Verified review
★★★★★
Honest, unhurried, and the room is beautiful. I've sent three friends. — Verified review
★★★★★
They explained everything and never upsold me. Rare. — Verified review
★★★★★
Subtle, expert, and genuinely kind. Worth every penny. — Verified review
Editorial marquee
An oversized word-band that drifts — the fashion-house move, in serif.
Rare · Private · Precise · Opulent · Composed · Rare · Private · Precise · Opulent · Composed ·
Gallery — masonry + blur-fade
Columns masonry, each image blurs up on scroll.
Masonry + scroll blur-fade. Imagery placeholder — real client photography drops in per build.
Large testimonial
The best things are never advertised. They are discovered. The Velvet philosophy
The page — one continuous composition
How the components relate. Rhythm, not a parts bin.
Rare, by design. Private, precise aesthetics for the discerning few — after hours, by appointment.
Request an appointment
Physician-led
Every treatment
Start with what's on your mind 01 Fine lines Botox, softened, never frozen.
02 Volume Filler — cheeks, lips, jaw.
03 Texture Microneedling, peels, laser.
Your provider Dr. Adrian Cole MD · Board-certified · 16 yrs
"I aim for you on your best day — refreshed, not done."
The best things are never advertised. They are discovered.
Signature moments
The visual signatures that repeat until they become Onyx.
Material library
Onyx is materials before it is color.
Cropping language
One image, five crops.
Art-direction priority
How the aesthetic actually works — in order of what matters.
Photography half of Onyx — light, material, quiet Whitespace the material; never fill it Typography big-serif vs tiny-caps scale jump Material velvet, slate, brass, candlelight Color the quietest lever — one earthy accent Buttons last — sharp, hairline, silent Emotional progression
How a visitor should feel, scroll by scroll.
Intrigue → Atmosphere → Exclusivity → Desire → Confidence → Request
Before → After
The same clinic, ordinary and then Onyx — how the direction transforms something generic.
Typical medspa
✦ RADIANCE MEDSPA
Home Services About Blog Contact
BOOK NOW
Your Beauty, Our Passion The #1 rated medspa — look and feel your best!
BOOK NOW CALL TODAY
✦ Botox
✦ Fillers
✦ Laser
✦ Facials
✦ Weight Loss
Onyx
AURA
About Treatments Team Visit
Book
Rare, by design. Private, precise aesthetics — by appointment.
Request an appointment