Medicia Health

Designed first, then built

Five pages drawn in Figma at 1440 and 430: home, about, services, a service detail, and a blog, on a violet system set in Inter Tight, with a lot of carefully placed decoration. Then the harder half of the job, making the built site indistinguishable from those frames, and giving it the things a static file cannot carry: motion, interaction, and every viewport in between.

Designing and building the same thing changes how you check your own work. There is nobody to hand the file to and no ambiguity to hide behind, so the only honest test is whether the running site matches what was drawn.

Faithful is measurable, so I measured it

“Looks close” is not a standard. Every section of the Figma file and every section of the build were rendered at 1440, placed side by side, and compared, 22 pairs across all five pages. Rendered section heights land within a few pixels of the frames, most of them exact.

That audit is also how the subtle things surfaced: the process diagram numbers its steps on mirrored sides, one headline breaks after a different word on desktop than on mobile, testimonial columns reorder on small screens, and one hero photo is stretched rather than cropped. All of it is in the build, because all of it was in the design.

The design defined two widths

Frames existed for 1440 and 430. Real devices live everywhere else, so I audited the build headlessly at twelve widths from 340 to 1920 and designed every layout that broke: diagrams that stack on tablets, spread rows that cap their width on small desktops, floating cards that anchor to edges instead of fixed coordinates. The audit now reports zero horizontal overflow at every width on every page.

Motion the file never had

Headings reveal word by word, each word rising and sharpening from a blur with a small stagger. Sections fade up as they enter, the client logos run as a continuous ticker, the FAQ opens and closes fluidly, and cards lift on hover. It is all transform and opacity, driven by one IntersectionObserver and plain CSS, so it holds 60fps with no animation library. Visitors who prefer reduced motion get everything instantly, static.

Production details that outlive the demo

All 219 image and icon assets are self-hosted, with the heavy exports recompressed to a fraction of their original weight. Every route is statically prerendered. The accordion, mobile menu, and booking popup are real, working interactions, and the floating booking button opens an in-page calendar without loading a third-party widget script into the page.