First screen
A real patient, a real room, two words.
“Creating Smiles” sits over a real photograph of a patient in the clinic, not a stock smile. The serif headline brings warmth to a dark, clinical palette, and three small proof points (3D preview, in-house printing, smile design) sit right under the copy.
- Headline
- Georgia, 86px
- Body
- Manrope, 19px, line height 1.72
- Proof points
- 3, under the copy
Navigation
Treatments are findable, not dumped on the homepage.
Sixteen pages hide behind a short top bar: the treatments live in a Services menu, so the header stays light while every treatment is two clicks away. The booking button stays separate from the links and visually distinct.
- Pages in menu
- 16
- Top-level links
- 7
- Booking
- Its own button, top right
Typography
A serif for feeling, a sans for facts.
Headlines use a classic serif, which reads as care and craft. Everything practical, from treatment details to prices to steps, is set in Manrope, a clean sans, with a generous 1.72 line height so long explanations never feel dense.
- Headlines
- Georgia
- Body
- Manrope, 19px
- Reading width
- ≈ 67 characters
Color
Dark, so the smiles are the brightest thing on the page.
Nearly the whole page is layered night blue. Against it, before-and-after photography and the mint booking button carry all the light. The mint covers about 1% of the page, which is why the eye always finds it.
Night blue54%Deep navy28%Ink17%Mint signal1%
- Dark surfaces
- 99% of the page
- Action color
- Mint, about 1%
- Section rhythm
- 101px padding, 8 times
Page structure
Reassurance first, the sale last.
The page walks a nervous patient from feeling to proof: the experience, the patient journey, the plan, the technology, the doctors, the rewards, the reviews, and only then the call to book. Each section removes one reason to hesitate.
- Sections
- 11
Calls to action
One soft action and one firm one.
Book Your Smile Consultation is the firm, filled action. See the patient journey is the soft one, for visitors who aren’t ready yet. Giving the hesitant visitor somewhere to go keeps them on the site instead of leaving.
- Primary
- Book Your Smile Consultation
- Secondary
- See the patient journey
- Corners
- 15px
Mobile
The clinic photo still leads on a phone.
The hero keeps its photograph behind the copy, both actions stack to a comfortable width, and every tappable element on the first screens is at least 40px tall. The menu sits in a 44px target in the thumb’s natural corner.
- Small tap targets
- 0
- Menu target
- 44 × 44px
- Headline
- 38px