Telehealth is a category that should be about ease — see a clinician faster than you'd see one in person, manage prescriptions without a parking garage. The sites in this category somehow all read like forms. Dense layouts, anxious gray, three CTAs above the fold, "HIPAA-compliant" in a thick belt at the top.
Lumenly is the second template I shipped this week. The brief was the opposite of what the category does: a telehealth landing that reads as calm.
Stack
Static HTML per page. React 18 UMD. Babel in the browser. Tailwind via CDN. Lucide for icons. No motion library — every animation is CSS keyframes or a 320ms transition.
The hero
Light theme. A soft pastel mesh-gradient background that the brain reads as "spa" not "hospital." A trust pill above the title: three avatar circles of clinicians, a star icon, "4.9 average", "12,400 patients."
The headline pairs a tight serif ("Healthcare that finally feels like") with a single italic accent word ("care.") in a soft blue. One accent word inside a long headline is a load-bearing trick — the eye rests on it, the brand color earns visibility, the rest of the headline stays readable.
Subtitle. Primary CTA: a black pill "Start care →". Secondary below it: a play-button pill "How it works" that drops a video into a modal. Below the CTAs: two trust badges, "HIPAA-secure" and "Same-day visits", with green check icons.
Trust signal stacking
A telehealth visitor has a list of objections — Will my insurance work? Is this an actual doctor? Does this comply? — that the page needs to answer before the CTA. The risk is dumping all of them into the hero and turning it into a checklist.
The pattern I picked: stack the strongest two visibly (the trust pill above the title, the badges below the CTA), keep the longer list ("Board-certified clinicians", "Same-day prescriptions", "In-network with major insurers") in the section directly below the hero. The visitor who needs more reassurance scrolls 200 pixels to get it. The visitor who's ready clicks the CTA.
The animation budget
Every animation is gentle. A 320ms transition on hover, a 700ms cross-fade on the lifestyle photo strip, a soft logo-pop on the brand mark. No parallax. No clip-path. No GSAP timeline.
Why: the category is people dealing with their health. The motion budget is the part of the page that signals "I am respectful of your attention." Cinematic motion reads as marketing; calm motion reads as a tool.
Reveal animation
Originally translateY(24px) at 0.7s. I cut it in the same QA pass to translateY(8px) at 0.45s — the lighter motion matches the rest of the page's restraint.
Page list
Lumenly.html, About.html, Pricing.html, Patients.html, Clinicians.html, Insurance.html, Conditions.html, Booking.html, FAQ.html, Privacy.html. Ten pages. The thoughtfulness goes into the booking flow on Booking.html — three steps, each one fits in the viewport on mobile, no scrolling required to complete a step.
What I would change
The trust pill at the top of the hero overflows at viewport widths below 360px (older Android, iPhone SE in landscape). A future pass would either reduce the pill content on the smallest viewports or wrap it into two lines. v1 ships clean down to 375; below that it clips one avatar.