The design system
Jade
Clinical calm — evidence-led, botanical, quietly precise. The complete creative direction: how a Jade designer thinks, then every component in that voice.
Evidence-led · Botanical · Physician-run
Philosophy
Before color, before type — the feeling.
Evidence you can see. Confidence without theater.
Feels like Apple Health ject.us A beautiful lab Eucalyptus Clean daylight Kinfolk Modern clinic Board-certified calm
Never Cold hospital Kelly-green pharma Doctor-with-tablet stock Sterile operatory Neon Hype
Evidence over theater. Daylight over drama. Design principles
The guardrails every decision answers to.
Always ✓ Rigorous 12-col grid✓ Thin-line icons in rings✓ Data shown plainly✓ Warm-white, not stark✓ Sage as calm blocks✓ Credentials forwardNever ✕ Cold operatory imagery✕ Saturated green✕ Gradients✕ Glassmorphism✕ Orange CTAs✕ Decorative flourishPhotography direction
The single biggest lever.
Shoot Bright clear skin Warm cropped equipment Airy natural-wood interiors Plants Daylight Hands at work
Avoid Gloved hands on grey Operatory Stock doctor Blue LEDs Oversaturation Syringe close-ups
Bright and clean, warmed slightly — never blue-clinical. Equipment cropped tight and lit like a still-life, not a hospital.
Motion language
Not what animates — how it moves.
Jade moves with precision — nothing wasted.
Crisp fade with a short slide; a count-up on the stats. Measured, calm, exact. No bounce, no drift.
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 Calm, precise, evidence-based, plainspoken.
"Natural results, carefully planned."
Never says "Amazing." Fluffy-spa language. Overpromising. Anything a physician wouldn't sign off on.
System rules
Corners · shadow · grid · texture · shapes.
Corners Functional. Small rectangles, 4–6px. Nothing decorative; every corner earns its place.
Shadow & elevation Near-flat. Structure comes from the grid and hairlines, not elevation.
Texture A faint measurement grid; warm-white ground. Precise, never gritty or glossy.
Recurring shapes The rectangle, the thin rule, the ring-badge, the stat figure.
Grid & spacing 1180px container · 12 columns · generous margins. Scale 8 / 16 / 24 / 40 / 64 / 96.
Accessibility Contrast clears WCAG AA. Body ≥ 15px. Tap targets ≥ 44px. Reduced-motion honored.
Why choose Jade
You're picking a perception, not a palette.
Best for Not ideal for Physician-led clinics · dermatology · results-first brands · trust-forward, science-minded clientele Fashion-beauty brands · TikTok clinics · decorative or playful positioning · vibe-over-substance
Jade is how a physician-led clinic builds trust.
Reference board
The visual source of truth — botanical treatment moments, clean daylight, sage and stone. Clinical calm, never neon wellness. Curate to ~12.
8 shown — green treatment moments, botanicals, clean interiors. The through-line: daylight, evidence, calm — never spa-cliché or neon green.
Palette
Clean whites, sage neutrals, deep jade. Clinical calm — never neon wellness green.
Typography kit
Choose the pairing. Never Fraunces, never a tracked-caps eyebrow.
Pairing A · Evidence serif
Natural results, carefully planned.
Every plan is measured, mapped, and reviewed — evidence you can see.
Spectral + Manrope
Pairing B · Carved roman
Calm, clinical, kind.
A modern clinic voice — precise without being cold.
Marcellus + Karla
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.
Jade marble Botanical Herbal Imagery
Curation & art direction.
Art direction: botanicals and clean daylight over decoration. Neutral-cool grade, specimen-like framing, the double-border frame 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)
Natural results, carefully planned. Evidence-led aesthetics — measured, mapped, and reviewed at every step.
Book an assessment Hero — full-bleed, overlaid
Hero — asymmetric typographic
Calm, clinical , kind. A modern clinic that treats skin like science and people like people.
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.
Measured · Natural · Evidence · Calm · Precise · Measured · Natural · Evidence · Calm · Precise ·
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 result is the one no one can point to. The Jade philosophy
The page — one continuous composition
How the components relate. Rhythm, not a parts bin.
Natural results, carefully planned. Evidence-led aesthetics — measured, mapped, and reviewed at every step.
Book an assessment
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. Elena Voss MD · Board-certified · 14 yrs
"I aim for you on your best day — refreshed, not done."
The best result is the one no one can point to.
Signature moments
The visual signatures that repeat until they become Jade.
Material library
Jade 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 Jade — light, material, quiet Whitespace the material; never fill it Typography big-serif vs tiny-caps scale jump Material sage, stone, pale wood, glass Color the quietest lever — one earthy accent Buttons last — sharp, hairline, silent Emotional progression
How a visitor should feel, scroll by scroll.
Arrival → Clarity → Credibility → Trust → Assurance → Decision
Before → After
The same clinic, ordinary and then Jade — 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
Jade
Meridian
About Treatments Team Visit
Book
Natural results, carefully planned. Evidence-led aesthetics — measured, mapped, reviewed.
Book an assessment