Mirror.report – Landing Page Recreation

Mirror.report

Click image to view full size

×
Mirror Expanded

Project Overview

Mirror.report is a data-driven health platform that merges wearable and sensor data with coaching tools for clinicians, wellness coaches, and insurers. Their homepage features layered illustrations, animated UI components, and scroll-triggered storytelling, a design style that's clean, health-tech professional, yet very human.
I recreated the entire Mirror.report landing page inside Penpot, an open-source design tool. The challenge wasn't just to copy visuals, but to test how far I could translate a complex commercial interface into a more limited design environment – no animations, component auto-layout, or plugin support.


Why I made this?

I wanted to see how far static tools can go when precision and structure are the only things you can rely on. Mirror.report's site is layered and motion-rich, not something Penpot is naturally built for.
So the challenge became: Could I still capture hierarchy, rhythm, and balance without the motion layer? This wasn't about rebranding or rethinking; it was a pixel-faithful recreation exercise matching typography, grid proportions, and visual narrative while manually building every element from scratch.



Replication & Interpretation

This design started as a direct visual study of Mirror.report's landing page. I didn't aim to reinvent or brand-twist it, I aimed to mirror (pun intended) their real structure, with small adaptation choices only where Penpot required. The logo, palette, and typography follow their live brand. I retained layout hierarchy, section spacing, and visual rhythm. Where the original used parallax or motion emphasis, I balanced it with tonal contrast and shape layering instead.



What I Learnt

  • Penpot's static nature forces you to understand alignment deeply. Everything has to feel right without motion cues.
  • Recreating a polished product site makes you appreciate spacing consistency and typography scaling far more than in auto-layout tools.
  • You notice how real landing pages rely on motion to imply depth and focus, and how to suggest those visually instead.


Side Note

There's something refreshing about stripping a motion-heavy website down to static frames — it reveals how much of its polish actually comes from layout fundamentals. Penpot doesn't hand you grids or auto-alignment the way Penpot does, so every placement decision is deliberate. This project reminded me that great design starts with composition, not animation.

More Penpot Projects

0%
Scroll to top
scroll to top