Aesthetic clinics sell a feeling before they sell a treatment, and most of their websites undercut that on arrival — stock gradients, hidden prices, a contact form that answers on Tuesday. Aurelle is my answer to what a premium aesthetic clinic's site should feel like, and what should happen when a visitor has a question at midnight.
The brief I set myself
Build a site that looks like the clinic charges what it charges, and that still does the unglamorous commercial work: state prices, show the doctors, answer the awkward questions, take the booking.
Design approach
Restraint over hard-sell. The palette is deep plum with muted rose and pearl — no clinical white, no neon gradients. Italiana for display type against Outfit for body copy: editorial rather than medical. Everything sits on generous spacing, because whitespace is what reads as expensive.
A video hero, treated properly. The page opens on full-bleed treatment-room footage under a directional gradient, so the headline stays readable across the frame instead of fighting the video. The source clip was compressed from 28MB to under 1MB — a hero that takes eight seconds to load is worse than no hero at all. It respects reduced-motion and data-saver settings, falling back to a still.
Prices stated, not hidden. Six treatments, each with its own photograph and a real starting price — anti-wrinkle from AED 1,200, HydraFacial from AED 750, laser from AED 300 per area. Aesthetic clinics hide prices out of fear; hiding them is what sends a nervous first-timer to whichever competitor answers the question.
The people, before the procedures. Two named doctors with credentials and a stated philosophy, because in aesthetics the practitioner is the product.
A three-step first visit. "No pressure, no upselling" is the section's opening line, written to defuse the single biggest reason people don't book a first aesthetic consultation.
The AI concierge
An assistant embedded in the page, trained on the clinic's own treatments, prices, downtime and hours. It handles the questions people are too embarrassed to phone about — does Botox hurt, what does laser actually cost, are you open Friday — and ends the conversation by offering a consultation slot with a named doctor. Anything medical gets routed to the team rather than answered. That boundary is deliberate: an AI that guesses about a patient's skin is a liability, not a feature.
Honest-demo conventions
The build carries a visible banner marking it as a Kavora Digital demo of a fictional clinic, the reviews are labelled as samples, and search indexing is off. A portfolio piece that could be mistaken for a real practice isn't a portfolio piece — it's a problem.
Stack
Hand-coded HTML and CSS · custom scripted assistant · ffmpeg for video optimisation · Google Fonts (Italiana, Outfit) · IntersectionObserver scroll reveals, CSS conic-gradient animated borders, cursor-tracked lighting
What this demonstrates
A clinic site can look editorial and still be a conversion instrument. The whole thing is one self-contained page — fast, mobile-first, no CMS to maintain — with an assistant layer that can sit on top of a clinic's existing website without rebuilding it.
Cards or sections? How should you showcase courses on a Kajabi website?
It depends on what you want visitors to see first.
Course cards are great when you want to show the full picture at a glance – “Here are all the programs we offer.” They make the product range clear before visitors start scrolling.
Separate sections work better when each course needs more attention – its story, audience, benefits, and outcomes.
When we design Kajabi websites, we don’t use one layout for every course.
We choose the structure that makes the offer easier to understand – and easier to explore.