Dev Medical Hospital
A rebuild of a Vadodara physician's website, replacing a single-page Zyro template with a typography-led, credential-forward site built to surface a genuinely exceptional CV, including Lancet-published trial work, that the old site buried.
Overview
Dev Medical Hospital is a full rebuild of devmedicalhospital.com for Dr. Parag Rana, a Vadodara-based physician with credentials most local practice sites cannot claim: investigator on the Lancet-published Polycap trial, seven fellowships including FACP Boston, ICU service at Civil Hospital Bhuj during the 2001 earthquake, and founder of the region's first entry-level NABH-accredited nursing home. The existing site was a one-page website-builder template with a placeholder logo that buried all of it. The rebuild is deliberately typography-led rather than photo-led, since only six real photographs exist and no stock photography is used, with a credential wall, a dedicated Lancet-trial panel, and a scroll-driven career timeline carrying the visual weight instead.
Why it was built
A client project for a real practicing physician. The brief is explicit that the design job is not to decorate a CV but to stop hiding the evidence: a two-axis theme engine (four color identities crossed with light/dark mode, all required to pass WCAG 2.2 AA contrast), a scroll-revealed 'Wall of Distinction' for the fellowships and publications, and a dedicated feature panel for the Polycap trial specifically, since that single sentence in the old site's wall of text is the most credible differentiator on the entire practice.
Two-Axis Theme Engine (Planned)
Color identity (Clinical, Meridian, Heritage, Midnight) and light/dark mode are designed as independent, user-selectable axes, implemented as OKLCH custom properties under Tailwind 4's @theme so switching is a CSS variable swap with zero layout shift.
Pre-Deploy Check Gate
npm run check chains typecheck, lint --max-warnings 0, format:check, test, and build into one command that must pass before any npx vercel --prod, replacing a CI pipeline for a one-person team working with manual deploys.
Mobile-First, Verified Per Sprint
Playwright is configured against three device profiles (desktop Chrome, Pixel 7, iPhone 14) from Sprint 0 onward, reflecting the brief's statement that mobile is the primary target, not the fallback, given the expected patient audience.
Tech Breakdown
RSC, streaming, and built-in metadata/image optimisation fit a mostly-static credential-and-services site with no CMS and no backend.
The two-axis theme engine needs four color identities each shipping a validated light and dark palette; CSS-first @theme config with OKLCH custom properties makes switching a variable swap rather than a class-toggle explosion.
A deliberate Sprint 0 decision for a one-person team maintaining a single practice site: content is written directly into components as JSX, with one exception (site.ts) for facts that repeat across many pages.
Cross-browser and real device emulation plus automated accessibility checks, needed specifically because the WCAG 2.2 AA contrast requirement across four themes times two modes is not something to verify by eye.
- 1
Verifying TypeScript 7's native compiler was compatible with the rest of the toolchain before committing to it, only to find typescript-eslint outright rejects it, meaning the fallback decision (TS 5.9.3) had to be made and documented in Sprint 0 rather than discovered mid-build.
- 2
Designing four full color identities that each have to pass WCAG 2.2 AA contrast in both light and dark mode is a combinatorial constraint (8 palettes total) that has to be automated-checked, not eyeballed, since a theme that looks good but fails contrast is explicitly stated as not shippable.
Sprint 0 (tooling, deploy pipeline, TypeScript decision) is complete and verified. Sprint 1, the design system and two-axis theme engine, is next, followed by the app shell and the home, doctor, services, and contact pages before a production deploy to the real domain.
Want to know more?
Happy to walk you through the details, just reach out.