Design notes — 06 / Gastroenterology

Design decisions —
grown, not drawn.

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 · One idea, taken literally

Gastroenterologists talk about gut flora — so the site is a garden. A midnight botanical garden: soil-black background (#050f0a), bioluminescent chartreuse (#c8e86a), pollen gold (#e0b45c). Every section extends the metaphor — conditions are seasons, procedures are a walk through the garden, the liver is the quiet root.

2 · The garden is grown, not drawn

There are no images on this page. The hero garden is generated by a recursive branching algorithm at load:

• Ten plants grow from seeded points along the bottom edge; each branch splits into two children with randomised spread, decaying length, and slight curvature — a stochastic L-system.
• A seeded random-number generator (16807 modulo 2³¹−1) means the garden is the same garden on every visit — designed, not accidental.
• Each segment records its birth time, so on load the garden visibly grows — trunks first, then twigs, then blooms.
• Branch tips end in glowing blooms; ~1 in 6 blossoms gold. The whole garden sways on a slow sine wind.
• 46 spores drift on Perlin-ish wander physics and lean gently toward your cursor — the garden notices you.
• Growth is earned by scrolling — trunks rise on load, but the garden only fully blooms as you walk deeper into the page.
• Click anywhere and a new seedling grows on the spot — the garden remembers you were here.

3 · Typography & texture

• Italiana — a hairline display serif with botanical-engraving elegance — for every heading.
• Karla light for body text, Fragment Mono for the figure numbers (Fig. I – VI) and status readouts.
• A fixed radial vignette keeps text legible over the canvas and gives the page candle-lit depth.

4 · Motion design

• A two-strand root divider draws itself across the page with stroke-dashoffset when scrolled into view.
• Scroll reveals use IntersectionObserver with a long cubic-bezier(0.22,1,0.36,1) ease.
• Stat counters ease out toward their values; the FLORA status dot breathes.
• All motion respects prefers-reduced-motion — the garden renders fully grown, once, and stands still.

5 · Shipping

Pure static HTML/CSS/JS — no framework, no build step, no image assets. Deployed to Netlify; pretty-URL resolution is why this page lives at /guide. The entire site weighs less than one photograph.

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