Design notes — 03 / Ophthalmology

Design decisions.

This is one of six fictional demonstration practices created by MedPresence. It shows how deliberate design, patient-centred communication and compliance-focused quality assurance can strengthen patient trust. This page explains the decisions behind the experience.

1 · Concept

Ophthalmology is the medicine of light, so the site is built from light: a warm paper-white field (#fbfaf7), black high-contrast serif type, and one spectral gradient — violet to blue to teal to amber to rose — used as the only color voice on the page.

2 · The living iris

The hero iris is not a photograph. It is drawn from scratch in canvas, fiber by fiber, every frame:

• 460 stroma fibers — quadratic curves radiating from pupil to rim, colored in three zones (amber collarette, teal midfield, blue-slate periphery) with per-fiber jitter so no two page loads produce the same eye.
• 34 crypts (darker arcs), a glowing collarette ring, a dark limbal ring, and two specular highlights that make it read as wet and alive.
• The pupil physically responds to your cursor like light — approach and it constricts, retreat and it dilates, with a resting "breathing" oscillation.
• It blinks: a state machine closes paper-colored eyelids every few seconds — fast close, slower open, like a real blink.

3 · Typography & layout

• Gloock for display — a razor-contrast modern serif that feels like precision optics; Jost for body text.
• The "Why sight" section is typeset as a Snellen chart — the eye-test format itself becomes the layout, with acuity ratios (6/60 → 6/5) as the footer.
• Service cards get a spectral gradient border on hover via a masked gradient overlay (mask-composite: exclude).

4 · Shipping

Pure static HTML/CSS/JS — no framework, no build step, no image files. Deployed to Netlify, whose pretty-URL resolution serves this page at /guide. All motion honours prefers-reduced-motion.

Why this works for patients

Every choice above serves the same goals: a committed art direction that signals care and craft, procedural visuals that stay light and fast on mobile, honest fictional-practice disclosures, reduced-motion support, and a clear path from curiosity to consultation. The same discipline — patient trust, clinical positioning, mobile clarity, accessibility, PDPA-aware consent and MMC/KKLIU-ready copy — is what MedPresence brings to real practices.

Fictional demonstration site · Produced for MedPresence · 2026