Aurelia Clinic: Measured Aesthetic Medicine Website Case Study
Aurelia is a full-stack clinic website that combines a signature quiet-luxury design system with production-grade engineering. An AI concierge powered by Claude answers questions from the clinic's own data, a custom booking flow handles real-world edge cases, and a self-hosted photography pipeline ensures visual consistency. Nothing is faked: no stock faces, fabricated results, or invented credentials. The site is backed by 374 automated checks and zero accessibility violations.
Service
Web Development
Industry
Healthcare, Aesthetic Medicine
Category
AI INTEGRATION
Built with: Next.js, React, Claude, Tailwind.
Overview
The Problem
Clinic websites typically lack differentiation, relying on stock imagery and pastel aesthetics that erase trust with careful patients
Critical patient facts such as price, appointment length, downtime and treatment duration are buried in PDFs or require a phone call
Before-and-after galleries use stock or borrowed images, which fabricate results and undermine credibility
Out-of-hours questions go unanswered or are answered by generic chatbots that invent facts and drift into medical advice
Online booking is usually a third-party widget visually disconnected from the brand and awkward on mobile devices
Clinical credentials and registration numbers are claimed without being verifiable
The Solution
A measurement-first design language with a calibrated rule that carries real clinic facts beside the content they describe, making precision visible throughout the site
Single-source content architecture where treatments, doctors and clinic facts live in one typed data file that drives pages, booking and the AI concierge simultaneously
An AI concierge built on Claude Opus 5 that answers from the clinic's own data, supports voice in and out, never gives medical advice and is incapable of inventing unpublished facts
A five-step in-brand booking flow with real scheduling logic, time holds and race condition handling, eliminating the need for third-party widgets
Honest visual placeholders for doctor portraits, before-and-after documentation and location until real assets exist, rejecting fabricated imagery entirely
Full accessibility and resilience including keyboard operation, reduced-motion support, zero layout shift, and complete rendering with JavaScript disabled
Solution Workflow
Browse
Explore
Ask
Book
Confirm
Full Technical Breakdown
Quiet-Luxury Design System
Two-surface palette of ink (#16110C) and parchment (#F4ECDD) with a single bronze accent used in three registers. All colours are tokens defined once, with contrast ratios verified for each context. Type and spacing use named scales enforced across every section, eliminating hand-typed values.
Calibrated-Rule Signature Element
A clinical measuring scale with minor ticks every 8px and bronze majors every 64px runs vertically down the margin of every page. A horizontal tape measure sits along the header bottom and slides under a fixed needle as you scroll, landing exactly where the page's rule begins, reading as one unified instrument.
Data-Driven Architecture
Treatments, doctors, clinic facts and protocols live in one typed data file. Every page, the booking flow, the concierge's knowledge and the sitemap are generated from this single source. Adding an entry updates the entire site automatically, and unpublished facts are withheld from the AI.
Claude-Powered Concierge with Safety Guardrails
A streaming chat assistant on Claude Opus 5 uses a system prompt auto-generated from the clinic's data. It never gives medical advice, redirects urgent symptoms to emergency services, and is incapable of inventing unpublished facts because unknown data reaches the model only as 'not yet published'. Prompt caching reduces latency and cost on repeat conversations.
Five-Step In-Brand Booking Flow
Treatment selection, date, available times, patient details and confirmation happen entirely within the clinic's design language. The calendar shows fully booked and closed days at a glance. Chosen times are held for 10 minutes. Race conditions are detected and handled gracefully, and the booking reference names the patient's doctor.
Photography Pipeline with Build-Time Grading
Twenty-three photographs are colour-graded at build time to match the design tokens by reading values directly from the stylesheet. A secondary script generates blurred copies for blur-up loading, preventing grey flashes. All images are self-hosted. Until real assets exist, each slot carries an engraved placeholder with its art-direction brief.
Accessibility and Resilience Engineering
Full keyboard operation including calendar arrow keys, treatment filters and draggable timeline. Every page renders complete and styled with JavaScript disabled. Reduced-motion preferences are respected sitewide. Zero axe-core accessibility violations, zero measured layout shift. Automated tests verify booking flows completed by keyboard alone and Chrome speech recognition in real browsers.
Honest Visual Language and Verified Credentials
Before-and-after results show an engraved plan of the clinic's photography studio setup and schedule, never fabricated images. Doctor portraits remain blank slots labelled 'Portrait to follow' until real images arrive. Location displays as a designed placeholder until confirmed. Registration numbers link to public regulatory registers and read 'To be confirmed' until verified.
Responsive and Performance-Optimised Delivery
Every page fits in the first screen at viewport widths of 375, 768, 1280×800, 1440 and 1920px without sideways scrolling. Route transitions complete in 0.3 to 0.5 seconds from click. The calibration entrance runs in about 1.3 seconds and never blocks interaction. Static generation and self-hosted media eliminate third-party dependencies.
Comprehensive Automated Quality Assurance
Sixteen Playwright test suites drive 374 checks in real browsers covering keyboard-only booking, speech recognition, touch drag, layout stability, margin alignment, route transitions, reduced motion, JavaScript-disabled rendering and concierge grounding against the live Claude API. All tests run against the production build.
Results
Key Features
AI Concierge Grounded in Clinic Data: A Claude-powered streaming assistant answers questions only from published clinic facts. Its system prompt is auto-generated from the same data that drives the website, so prices, timings and policies never contradict the pages. Unknown facts are withheld, forcing honest 'not yet published' responses.
Voice-Enabled Concierge with Browser-Native Recognition: Speak a question using the browser's native speech recognition, and receive replies read aloud. Voice capabilities are feature-detected per browser, so Firefox shows only what it can do. Conversations persist across page loads within a visit and are accessible from the homepage or a floating button on every page.
Calibrated-Rule Design System: A clinical measuring scale with fact annotations runs down every page margin, making treatment duration, price, downtime and review day immediately visible beside the content. A horizontal tape measure along the header aligns perfectly with the vertical rule, creating a unified instrument metaphor.
Five-Step Booking Flow with Race-Condition Handling: Treatments, dates, times, patient details and confirmation happen entirely in-brand. The flow shows a full-day schedule with booked slots greyed out. Chosen times are held for 10 minutes. If another patient books the slot first, the system detects and informs the user, allowing them to choose again.
Treatment Explorer with Live Filtering: Treatments filter by starting price, appointment length and downtime, and sort by price or duration. Every filter option comes from the treatment data itself, never invented categories. The result count updates live as you adjust filters.
Honest Imagery and Verified Credentials: Doctor portraits, before-and-after results and location remain designed placeholders until real assets exist. Registration numbers (GMC, CQC, Save Face) link directly to public regulatory registers and display as 'To be confirmed' until verified, rejecting all fabrication.
Before
Before this project, aesthetic clinic websites followed a predictable template: stock photography of generic smiling faces, pastel colour schemes that feel generic rather than authoritative, third-party booking widgets visually disconnected from the brand, and critical patient information (price, appointment length, downtime, who will treat you) hidden behind a phone call or buried in PDFs. Before-and-after galleries used stock or borrowed images, which fabricate results and erode trust with a careful patient. Out-of-hours questions either went unanswered or were handled by chatbots that invented prices, drifted into medical advice and contradicted the website's stated facts. Credentials were claimed in badges but never checkable. No clinic website demonstrated the rigour, honesty and precision that the clinic itself claims to deliver.
After
The completed Aurelia website proves that a clinic website can be both beautiful and rigorous, built to a standard most clinic sites never approach. Every fact a patient needs to weigh (price, appointment length, downtime, review day, the doctor who will treat them) is visible in the margin without scrolling. Questions are answered at any hour by an AI concierge that only knows what the clinic has published, never inventing facts or drifting into medical advice. Booking happens entirely within the clinic's visual language with real scheduling logic, time holds and transparent handling of conflicts. Nothing is fabricated: doctor portraits, before-and-after documentation and credentials all remain honest placeholders until real assets exist. The site is backed by 374 automated checks across 16 suites in real browsers, with zero accessibility violations and zero layout shift. The calibration entrance completes in about 1.3 seconds and never blocks interaction, and every page renders complete even with JavaScript disabled.
What This Proves
This work demonstrates that rigour and beauty are not opposing forces in medical design. The calibrated-rule system makes "measured, not guessed" visible throughout the interface, with real facts beside the content they describe. The AI concierge is engineered to stay inside clinical and factual boundaries, using a system prompt auto-generated from the website's own data, so it cannot contradict the pages or invent unpublished facts. The booking flow handles real-world problems such as a time being taken by another patient mid-booking, proving that complex scheduling logic can exist entirely within a brand's own design. The accessibility discipline (zero axe-core violations, full keyboard operation, complete rendering with JavaScript disabled, every page passing 374 automated checks in real browsers) shows that regulatory-grade quality does not require sacrificing design sophistication. The decision to reject fabricated imagery in favour of honest placeholders proves that trust in healthcare is built through what a website refuses to do, as much as what it does. No template ships with a calibrated-rule system, an AI concierge grounded automatically in your own data, or a booking flow that handles race conditions. This proves that a clinic website can embody the clinic's philosophy in its construction: precisely, honestly, and without overstatement.
Tech Stack
Frontend
Next.js 16 with App Router and Turbopack — Full-stack framework; static generation except concierge API
Next.js Image — Responsive, optimised, self-hosted images with blur-up loading
Design & Motion
Framer Motion — Scroll reveals and step transitions with reduced-motion states
Custom Fonts — Fraunces for display, Karla for reading, monospace for annotations
Engraved SVG Illustrations — Hand-built placeholders for portraits, location and documentation
Quality & Testing
Playwright — 16 end-to-end suites with 374 checks in real Edge, Chrome and Firefox
axe-core — Accessibility audit across every page and booking state
Scalability & Flexibility
Single-Source Content Architecture: Treatments, doctors and clinic facts live in one typed data file. Adding an entry means every page, listing, booking option, margin annotation and concierge response updates automatically from that single source.
Booking System Abstraction via Provider Interface: The booking flow talks only to a provider interface, never to a specific calendar system. Connecting the clinic's real practice-management platform or booking service means writing one provider module with no changes to the booking screens.
Automatic Concierge Grounding: The AI's system prompt is regenerated automatically from the clinic's data file every build. When the clinic confirms a fact (an address, a registration number, a treatment price), it appears on the website and in the concierge's answers simultaneously.
Design Token Reusability: Colours, type sizes and section rhythm are each defined once. A rebrand, seasonal palette shift or style update never touches component code, only the token definitions.
Photography Pipeline Ready for Real Shoots: Every image slot carries its art-direction brief. When the clinic's own photographs arrive, npm run photos grades them to the brand tokens and regenerates blur-up placeholders in seconds.
Placeholder-to-Asset Replacement: Doctor portraits, the location map and before-and-after documentation each have a designed slot awaiting the real asset. Launching with real content requires only data updates, never layout changes.
Rate Limiting Infrastructure: The concierge's rate limit currently lives in memory, simple and right for a single-instance site. Moving it to Redis is a contained change if the site grows to multiple server instances.
Voice Capability Detection: Voice input and read-aloud are feature-detected per browser, so the interface gracefully degrades in environments where speech APIs are unavailable or restricted.
Responsive Breakpoint Consistency: The design holds at every width from 320px to 1920px with no sideways scrolling. Adding new pages or components uses the same margin-alignment rules and spacing scale, maintaining visual consistency automatically.
Accessibility as Architecture: Keyboard operation, reduced-motion support and no-JavaScript rendering are built into the component library, not added page by page. Every new page inherits these capabilities.