Designing a steady hand.

A surgical practice earns trust through discipline, not decoration. So the site's design argument is restraint itself: a strict grid, one blue, hairline rules, and numbers treated with more respect than adjectives. This page documents the decisions.

01 — Palette

One blue, used like a scalpel.

Cool whites and porcelain grays do the ambient work; graphite carries the text. Precision blue is the only color with a voice, and it only speaks when something matters: a number, an action, a rule. No teal gradients, no healthcare turquoise — the palette of a well-lit planning room.

Clinical White

#FCFDFE

Cool Porcelain

#EEF2F5

Precision Blue

#1D5D8E

Surgical Steel

#9FB4C2

Graphite

#20262B

02 — Typography

Franklin, set tight.

Libre Franklin carries the headlines at semibold with tight tracking — an American grotesque with newsroom credibility, confident without theatrics.

Inter handles body and labels, with tabular numerals everywhere data appears so that 0.4% and 94.6 align like instruments on a tray. Labels are small caps, tracked to 0.28em, always indexed: 01, 02, 03.

Display — Libre Franklin 600

Surgery, measured.

Data — Inter, tabular

0.4%

Deep infection rate, joint replacement

Labels — Inter small caps

02 — Outcomes

03 — Technique

The planning scene.

Wireframe anatomy

The hero's knee joint is built from geometric primitives — condyle spheres, shaft cylinders, a patella disc — rendered as wireframe in React Three Fiber. An abstraction of a surgical plan, deliberately not a realistic model: precision reads as geometry, not gore.

Measurement chrome

Orbiting torus rings echo intraoperative alignment guides; annotation labels (valgus 5.2°, resection 9.0 mm) sit in the margins like a planning workstation. The same measurement-line motif — capped hairlines — recurs under figures across the whole site.

Precision micro-interactions

Cards reveal a blue measurement rail on hover. Stats count up with exact decimals and cubic easing. The cursor becomes a crosshair over the 3D zone. Small movements, all of them controlled — the motion language of a steady hand.

04 — Why it works

The design argument.

Restraint signals competence

Healthcare sites overcompensate with warmth: gradients, stock smiles, reassurance. A surgeon's patient wants evidence of control. The strict grid, the single accent, the whitespace — the design behaves the way you hope the operating room does.

Numbers over adjectives

The site's most emotional moments are statistics with decimal points. Publishing an infection rate is a braver marketing move than any tagline, and the design gives data the largest type on every page.

Honesty as differentiation

Forty percent of spine consults end in 'don't operate.' A surgeon bio that admits what she publishes 'whether it flatters her or not.' The copy earns belief by conceding things — and the visual restraint makes the candor legible.