Guides / Adapt a template / Medical clinic
How to adapt an animated website template for a medical clinic
To adapt an animated website template for a medical clinic, start from Visitwell Patient Visit Prep Photo Story, Pearlwick Dental Tooth That Whitens and Takes an Implant, Hingeway Physio Joints That Move on Scroll or the closest fit, keep the hero with a plain promise, hide dramatic effects over clinical text, add insurance accepted, and apply the medical clinic style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit medical clinics, doctors and health practices best
Every pick has a live demo. Open it, scroll it on your phone, then edit it in Create or fetch its prompt.
Pick 1 · Pro
Visitwell Patient Visit Prep Photo Story
A patient preparing for a visit explains intake in one scroll and fits any primary care practice.
Pick 2 · Pro
Pearlwick Dental Tooth That Whitens and Takes an Implant
A glossy tooth that whitens and lines up suits a dental or orthodontic practice.
Pick 3 · Pro
Hingeway Physio Joints That Move on Scroll
An anatomical figure moving through a stretch suits physical therapy and sports medicine.
What to change for a medical clinic
Keep
- The hero with a plain promise
- Services list
- Provider bios
- Appointment request
Hide
- Dramatic effects over clinical text
- Before and after claims without consent
Add
- Insurance accepted
- New patient forms
- Telehealth information
- Office hours and parking
Copy angles
- Say who you treat and what to expect at the first visit.
- Put the phone number first.
- Use the provider's real face and credentials.
Trust elements
- License and board certification
- Real patient reviews where rules allow
- Insurance list
- Privacy notice link
Compliance notes to check
- HIPAA applies to patient information, so use forms and tools suited to it and avoid sending health details through ordinary analytics.
- Add a note that the site does not replace medical advice and that emergencies call 911.
- Testimonial and advertising rules vary by state medical or dental board.
General guidance only, not legal advice. Rules differ by state and change over time, so confirm the details with a licensed attorney or compliance professional before you publish.
Copy-ready adaptation prompt
Paste it into Claude, Cursor or Lovable. It is written for Visitwell Patient Visit Prep Photo Story and works for the other two picks if you change the name and slug. The example client is Maple Street Family Medicine in Minneapolis, Minnesota.
1. Fetch the template with the MCP
claude mcp add --transport http animatedwebs https://mcp.animatedwebs.comUse the animatedwebs MCP. Call get_template_prompt for "visitwell-patient-prep", then build it as a Next.js site and adapt it with the prompt below.Setup for every client is on the MCP page. Pro templates use a Prompt Pack credit or come with Pro.
2. Adapt it
Adapt the AnimatedWebs template "Visitwell Patient Visit Prep Photo Story" (slug: visitwell-patient-prep) into a website for a medical clinic.
Example client: Maple Street Family Medicine in Minneapolis, Minnesota. Replace it with my real business details, which I will give you.
Keep:
- The hero with a plain promise
- Services list
- Provider bios
- Appointment request
Hide:
- Dramatic effects over clinical text
- Before and after claims without consent
Add:
- Insurance accepted
- New patient forms
- Telehealth information
- Office hours and parking
Copy angles:
- Say who you treat and what to expect at the first visit.
- Put the phone number first.
- Use the provider's real face and credentials.
Trust elements to include only if I can supply them:
- License and board certification
- Real patient reviews where rules allow
- Insurance list
- Privacy notice link
Style: use the CSS variables and fonts from the Medical clinic style pack. Motion intensity: Low. Keep motion gentle and optional. Forms, hours and the phone number never move.
Rules:
- Keep the template's motion, and respect prefers-reduced-motion.
- Make it mobile first and keep the main action visible on a phone.
- Never invent testimonials, statistics, licenses or credentials. Use clearly marked TODO placeholders instead.
- Add the legal pages and notices this business type usually needs, and flag anything I should confirm with a licensed professional.Medical clinic style pack
Clean, calm and reassuring. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Cobalt
#1e7ec8
Accent
Pale Cobalt
#e0eaf4
Surface
Bone White
#f4f7fb
Background
Deep Cobalt
#10222f
Text
Type pairing (Google Fonts)
- Display DM Serif DisplaySpecimen ↗
- Body DM SansSpecimen ↗
Motion intensity: Low
Keep motion gentle and optional. Forms, hours and the phone number never move.
The CSS export includes the Google Fonts import and motion variables.
# Medical clinic style pack, Style Reference > Clean, calm and reassuring **Theme:** light · **Template:** Medical clinic style pack (https://animatedwebs.com/guides/adapt/medical-clinic) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cobalt | `#1e7ec8` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Pale Cobalt | `#e0eaf4` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Bone White | `#f4f7fb` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Deep Cobalt | `#10222f` | `--color-ink` | Headlines and body copy: the primary typographic colour | ## Typography - **Display:** DM Serif Display, DM Serif Display 400 - **Body:** DM Sans, DM Sans 400 ## Motion - Intensity: Low. Reveal on load, no scroll scrubbing, no parallax. - Keep motion gentle and optional. Forms, hours and the phone number never move. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Cobalt (`#1e7ec8`) for primary actions, links and highlights only - Let the hero motion carry the page; type and buttons sit on a scrim above it - Respect prefers-reduced-motion: no pinning or scrubbing, show final states ### Don't - Don't fill large sections with the accent colour; it is a signal, not a surface - Don't add typefaces beyond DM Serif Display + DM Sans
Questions
Which template is best for a medical clinic?+
Start with the first of the three picks on this page, then compare the other two. Each has a live demo you can scroll, and all three can be edited in Create.
What should a medical clinic site keep, hide and add?+
Keep the hero with a plain promise and services list. Hide dramatic effects over clinical text. Add insurance accepted and new patient forms.
Does this page give legal advice?+
No. The compliance notes are general reminders of topics to check. Laws differ by state, so confirm the details with a licensed attorney or compliance professional before you publish.
How do I use the style pack?+
Copy or download the CSS variables, the Tailwind theme or the DESIGN.md snippet, and give it to your AI builder with the adaptation prompt so the colors, fonts and motion stay consistent.