Self-directed concept build for an invented business. This project was not commissioned, and the company described here does not exist.
ORAL./BIO
A single-page React site for a dental research lab, organized into four departments and written so each clinical protocol reads like a publication.
ORAL./BIO Labs is a bio-emulation research practice. It publishes in peer-reviewed journals, runs NIHR-funded trials and performs procedures under 25x microscope magnification with rubber dam isolation. The site had to show that rigor without the sterile look of most healthcare websites, reading like a scientific publication while still feeling high end.
The
Challenge
Most dental websites are either warm patient portals full of stock photos that undersell clinical expertise, or dense academic pages that lose anyone who isn't a researcher. ORAL./BIO needed its clinical protocols, active research grants and publication archive treated as equal departments of one institution. Three problems shaped the project:
Serve two very different audiences, referring dentists checking clinical protocols and research peers reviewing the publication history, without splitting the site into separate portals.
Make procedures like rubber dam isolation, composite stratification under magnification and bioactive cement application interesting to look at without oversimplifying the science or using stock images.
Move the referral process, usually a faxed PDF form, onto the page as an inline form with a checklist of required records (CBCT/DICOM, periodontal charting, STL files) in the same clinical style as the rest of the site.
The
Constraints
What the build was answering, and where we stopped on purpose.
- THE BRIEF
- Self-directed, for an invented practice. We set the premise ourselves: a clinic whose credibility comes from published research, shown without the stock photography most clinic sites use.
- SCOPE
- A single-page Vite app with its departments on one page instead of separate routes, and per-view metadata handled by react-helmet-async. The publication archive is a typed array in the codebase, which a practice publishing every month would outgrow and replace with a CMS.
- NOT CONNECTED
- The digital referral form doesn't submit anywhere. It shows how a referral could work on the site in place of a fax. Turning it into a real intake pipeline for patient data would be a regulated project in its own right.
The
Solution
We built a single-page application split into four numbered departments (Clinical, R&D/Lab, Archive and Referral) that you read in one vertical scroll. Each department opens with a thesis statement, sets out its content in plain typographic blocks and ends with a next step, so the page reads top to bottom like a monograph.
Mostly white with clinical gray panels, plus a teal accent (#0d9488) used only on interactive elements and department markers. Typography carries the design, with serif italic for manifesto statements, monospace for labels and metadata, and a clean sans-serif for body text. Framer Motion adds light entrance animations, and there are no gradients, hero sliders or stock photos.
A React and TypeScript single-page app built with Vite, styled with Tailwind CSS and animated on scroll with Framer Motion. Each department is a smooth-scroll anchor with its own content structure. The publication archive filters in the browser by type (Journal Articles, Textbook Chapters, Keynote Lectures), and the referral form is a custom inline component with no third-party embed or redirect.
Inside
the Build
The site opens on a full-screen, desaturated photo of a clinic lobby, with no carousel or animation. On top of it sit a serif italic quote ('We do not merely repair. We restore structural integrity.') and a single teal CONSULT_01 button. That is the whole hero, and it sets the restrained tone for everything below it.
DEPARTMENT 01 opens with 'We adhere to the Bio-Emulation manifesto.' Each protocol (rubber dam isolation for absolute field control, advanced composite stratification, 25x microscope precision) gets its own numbered block on a plain white panel, written as a clinical standard and stamped 'Updated: 2024'.
DEPARTMENT 02 opens with the lab's thesis, 'We do not guess. We measure.' Next to it is a card for an active NIHR R01 grant (Bioactive cements in deep margin elevation, Status: Ongoing, Phase II), shown inline rather than on a separate research page. A referring dentist sees the research as soon as they scroll past the clinical protocols.
DEPARTMENT 03, headed 'Documenting the paradigm shift', is a publications archive you can filter by Journal Articles, Textbook Chapters and Keynote Lectures, with an RSS feed. It is set almost entirely in type for clinicians who read, and it backs up the claims made in Departments 01 and 02.
DEPARTMENT 04 speaks to referring dentists directly: 'We operate as an extension of your practice.' One uncluttered screen holds a downloadable Traditional Referral Pad PDF, a checklist of required records (CBCT/DICOM, periodontal charting, STL files) and a digital referral form, with no portal or external redirect. The section argues that a referral belongs on the site instead of in a fax machine.
The
Results
As a Vite single-page app, the site sends its shell first and renders the content with JavaScript afterwards. The two rows below show what that costs on each device. A desktop processor absorbs the rendering work, while a throttled phone takes noticeably longer to paint.
Measured against the live build with Lighthouse 13.0.3, median of three runs per preset.
Final
Reflection
ORAL./BIO tested whether restraint can communicate clinical authority better than visual complexity. Healthcare sites often lean on stock photography, testimonial carousels and trust badges. This practice had the reverse problem, because a conventional dental site would undersell its peer-reviewed publications, active grants and microscope-level protocols. So we left out the hero slider, the team photo grid and the patient testimonials. The site is four departments in one scroll, each with a thesis and a next step, and the referral form shows what a digital referral could look like in place of a faxed PDF. The finished site reads more like a research institution's than a dental office's.
Want a site like this?
We design and build websites for small businesses in English and Japanese. Tell us about your project and we'll reply within 24 hours.