medical

Medical Theme Design System

Direction

Use a calm, clean layout that makes patients feel welcome and well informed before their first visit. Put treatments, the team, opening hours, insurance and self-pay prices, what to expect at an appointment and the way to book first, and explain instead of promising.

Foundations

• Use only the markup and classes supplied by ./theme/views/.
• Use system fonts (humanist sans-serif fonts for headings) and the existing --pico-* variables.
• Keep page content within a 1280px maximum width.
• Use a white header, navy (#0F2D3A) for the footer and dark sections, teal (#0A7782) for links, buttons and heading markers, and mint (#8DD8C8) only for fills, badges and text on dark backgrounds, never for text on light backgrounds.
• Use rounded corners, pill-shaped buttons, thin borders and soft shadows; dark sections show a soft dot pattern, the hero ends in a gentle curve and headings use plus markers.

Components

• Hero: a bright photo of a consultation or the practice as background with a short, reassuring headline, a mint tag line, a curved edge at the bottom and a "Book an appointment" action.
• Treatments: cards with a photo, a short text and a link to the treatment page; treatment pages name the responsible dentist, link a matching guide and answer cost and insurance questions. Include anxious patients and dental emergencies.
• Figures and badges: cards in the figures layout for years, team size, waiting time and reviews, and in the badges layout with line icons for new patients, insurances, accessibility, languages and memberships.
• Team: cards with portrait photos of the same ratio, the name as title and qualifications and focus as text; the team size matches the figures.
• Prices: a pricing element with typical prices for self-pay services, always with a note on cost plans.
• First visit: a horizontal timeline from booking to the treatment plan.
• Patient guides: blog pages below the guides page, each with an article, key figures, a vertical step timeline, questions and a call to action.
• Appointment: a contact form with selects for the reason, new or existing patient, insurance and preferred time, plus a map with opening hours and directions.
• Patient info: what to bring, insurance and costs, emergencies and directions, followed by questions.
• Footer: opening hours with the emergency number, treatments, practice links including careers, imprint and privacy, and contact.
• Practice details: the practice config adds the medical business JSON-LD, the call button for phones, the top bar with telephone and emergency number and the booking button in the header.