A plain-language walkthrough of the concept, layout system and motion behind this black-and-white dental concept site.
Northlight Dental Care is a portfolio concept for a practice that wants to look editorial rather than clinical. The whole site is built from one idea: a gallery of rounded cards laid out on a white page, with photography and bold black type doing all the work. There is no accent colour at all. Black, white and two greys carry every page, which makes the smiling faces in the photographs the only colour on screen.
The signature technique is a single photograph that appears to flow behind a mosaic of separate cards. Each card in the hero is positioned on the page, then the same background image is drawn inside every card at an offset that matches where that card sits, so the picture reads as one continuous image with gaps cut out of it. When the layout resizes, the offsets are recalculated so the illusion holds at every width.
One heavy geometric sans is used everywhere, from the enormous "Dental Care" headline that fills the hero card down to the small semibold labels in each card corner. Pages are stacks of cards with a consistent gap, and the same card component is reused for headers, text blocks, link tiles and photographs. Cards alternate between a warm stone tint, a cool zinc grey and solid black so long pages keep a rhythm without introducing colour.
This is a full site rather than a landing page: Home, a services index with an individual page for each of twenty-eight treatments, About the practice, a page for the lead dentist, a team page, New Patients, Insurance and Fees, Smile Gallery, Reviews, Contact and a Terms page. Every service page is generated from one content registry, so each treatment gets the same layout: an introduction, a set of explainer cards, an "at a glance" fact list and links to related treatments.
Cards rise into view with a short stagger as each page loads, photographs drift with a slow Ken Burns zoom, and the page glides on an inertia-style smooth scroll. Everything respects the visitor's reduced-motion setting, and on phones the hero rebuilds itself as a single column so the mosaic still reads correctly.
All photography is licensed stock: the hero, gallery and patient portraits are models, and the implant illustrations are rendered product visuals. The site is a single-page React application built with Vite, served as static files with a fallback route so that every deep link loads directly. The callback form posts to Netlify Forms.