ORAL./BIO
A clinical-grade digital presence for a dental research lab that refuses to separate science from aesthetics — four departments, zero compromises, one single-page React application that treats every protocol like a publication.
ORAL./BIO Labs is not a typical dental clinic. They are a bio-emulation research practice — publishing in peer-reviewed journals, running NIHR-funded trials, and performing procedures under 25x microscope magnification with rubber dam isolation. They needed a digital platform that communicated this level of rigor without the sterile blandness that plagues most healthcare websites. The goal: a site that reads like a scientific publication and feels like a luxury brand.
The
Challenge
Most dental websites fall into one of two traps: either a warm, stock-photo-heavy patient portal that undersells clinical expertise, or a text-dense academic page that drives away every visitor who is not a researcher. ORAL./BIO needed neither. They needed a third option — one that treated their clinical protocols, active research grants, and publication archive as equally important departments of a single institution. Three problems defined the project:
The site had to serve two fundamentally different audiences — referring dentists evaluating clinical protocols, and research peers reviewing publication history — without splitting into separate portals or diluting either experience
Complex procedures like rubber dam isolation, composite stratification under magnification, and bioactive cement application needed to feel visually compelling without oversimplifying the science or resorting to stock imagery
The referral workflow — traditionally a PDF fax form — had to be digitized into a seamless inline experience with required records checklists (CBCT/DICOM, periodontal charting, STL files) while maintaining the clinical authority of the rest of the site
The
Solution
We built a departmentalized single-page application — four numbered departments (Clinical, R&D/Lab, Archive, Referral) organized as a vertical editorial scroll. Each department opens with a thesis statement, presents its content in clean typographic blocks, and closes with a clear next action. The site reads top-to-bottom like a monograph, not a marketing page.
A predominantly white canvas with clinical gray panels, accented by a signature teal (#0d9488) that appears only on interactive elements and department markers. Typography is the primary design tool — serif italic for manifesto statements, monospace for labels and metadata, clean sans-serif for body text. Framer Motion drives subtle entrance animations that feel organic rather than decorative. The aesthetic is deliberately restrained: no gradients, no hero sliders, no stock photography.
A React and TypeScript SPA built with Vite, using Tailwind CSS for utility-first styling and Framer Motion for scroll-triggered animations. Each department is a smooth-scroll anchor target with its own content structure. The publication archive supports client-side filtering by type (Journal Articles, Textbook Chapters, Keynote Lectures). The referral form is a fully custom inline component — no third-party embeds, no external redirects.
Inside
the Build
The site opens with a desaturated clinic lobby as a full-screen backdrop — no carousel, no animations. Just a serif italic manifesto quote ('We do not merely repair. We restore structural integrity.') and a single teal CONSULT_01 button. The hero establishes the entire brand tone in one frame: authority through restraint, confidence through silence. Every element that could have been added was deliberately left out.
DEPARTMENT 01 declares its philosophy in the opening line — 'We adhere to the Bio-Emulation manifesto.' Each protocol (rubber dam isolation for absolute field control, advanced composite stratification, 25x microscope precision) is presented as a numbered editorial block on a pure white SPA panel. The design choice was deliberate: these are not marketing bullet points — they are clinical standards presented with the gravity they deserve. Updated: 2024.
DEPARTMENT 02 opens with the lab's thesis: 'We do not guess. We measure.' Alongside: an active NIHR R01 grant card — Bioactive cements in deep margin elevation, Status: Ongoing (Phase II) — surfaced inline without a separate research page. This was a key architectural decision: research credibility should not require navigation. It should be visible the moment a referring dentist scrolls past clinical protocols.
DEPARTMENT 03 is a filterable publications repository — Journal Articles, Textbook Chapters, and Keynote Lectures — with an RSS feed. 'Documenting the paradigm shift.' Typography-first, zero visual noise, built for clinicians who read. The archive is not decorative — it is the proof layer that validates every claim made in Departments 01 and 02.
DEPARTMENT 04 speaks directly to referring dentists — 'We operate as an extension of your practice.' A downloadable Traditional Referral Pad PDF, a required records checklist (CBCT/DICOM, periodontal charting, STL files), and a digital referral form are surfaced in a single, uncluttered screen. This section replaced a fax-based workflow that had been unchanged for years. No friction, no portals, no external redirects.
The
Results
The site repositioned ORAL./BIO from a local dental practice with a research sideline to a recognized clinical research institution with an online presence that matches its publication record. Referring dentists now complete the digital referral form instead of faxing PDFs, and the publication archive drives organic search traffic from researchers worldwide.
Final
Reflection
ORAL./BIO was a test of whether clinical authority could be communicated through design restraint rather than visual complexity. Most healthcare websites compensate for a lack of genuine expertise by adding stock photography, testimonial carousels, and trust badges. ORAL./BIO had the opposite problem — a practice with peer-reviewed publications, active research grants, and microscope-precision protocols that was being undersold by a conventional dental website. Every design decision was a deliberate subtraction: no hero slider, no team photo grid, no patient testimonials. Instead, four departments — each with a thesis statement, structured content, and a clear next action — organized as an editorial scroll. The referral form was the proof of concept: a fax workflow digitized into a seamless inline experience that referring dentists actually use. The result is a dental practice website that reads like a research institution — because that is exactly what ORAL./BIO is.
Want a site like this?
We build premium websites for businesses that refuse to blend in. Let us know about your project and we will get back to you within 24 hours.