Solenne Dermatology

Solenne is a dermatology clinic website designed to feel like a campaign rather than a template: editorial typography, a warm “Bone & Clay” palette and considered motion — built on a single design-token file with no UI, animation or icon libraries.

Premium clinics want a site that looks bespoke and moves beautifully, but heavy animation usually costs speed, accessibility and search performance. The brief was to deliver the polish without any of those trade-offs.

Use the platform instead of libraries: CSS for motion, React’s View Transitions for page changes, and one token file for every colour, type size, space and curve. Clinic details, treatments, articles and booking behaviour all live in configuration, so the site can be launched for a new clinic quickly.

Treatments for skin, hair and scalp are organised for patients, not by medical taxonomy, with a clear consultation-first booking path. Booking can work as a demo, post to the clinic’s own system, or hand off to an external booking service.

A rounded campaign canvas that the hero portrait dissolves into, word-by-word headline entrances, glass cards with pointer-depth parallax, a rotating booking badge, sticky stacking cards and a scroll-progress hairline — all disabled under reduced-motion preferences.

Server-rendered content is never hidden before hydration and above-the-fold intros start painted, so motion never delays the largest contentful paint. In demo mode the site marks sample content, refuses to invent contact details, stays out of search engines and withholds medical structured data until real, verified information is added.

Every animation respects reduced-motion preferences, focus states are visible and the typographic scale stays readable on small screens. Lighthouse reports 100 for accessibility on the pages tested; a manual audit with assistive technology is recommended before each launch.