Mira Bio

Mira is a calm health and longevity dashboard for clinics, health-tech startups and app teams who want to show their product on the web. It's light, soft and quiet, with lime accents and mono labels, so the data reads easily.

5 pages

Overview, Biomarkers, Sleep, Plan and Care, plus a 404. Overview brings everything together: markers to watch, biological age, sleep, today's plan and a care team chat. Biomarkers lists 17 markers against their optimal range with a detail card. Sleep shows stages, score and bed times. Plan has three focus areas, a daily checklist and supplements. Care has clinician threads and a booking card.

Interactions

- Click any biomarker to open its detail card with a trend chart.

- Filter markers by status (Optimal, Watch, Low) and by category. The filters combine.

- On Care, switch clinicians, pick a day and a time slot, confirm the booking and add it to the calendar.

- Daily checklist items tick on and off.

- Cards and charts animate in as each page loads.

Built natively

Everything is made with Framer's own layers, components, variants, variables and effects. There are no code components or overrides, so you can change every part on the canvas.

Organised

- 22 text styles in Geist and Geist Mono, and 37 colour tokens.

- Named components: Header, Marker Row, Category Item, Status Chip, Check Row, Clinician Item, Day Chip, Slot Chip and booking buttons.

- A Biomarkers CMS collection (17 items) drives the Overview cards, the list and the detail card.

- Desktop, tablet and phone layouts. On phones the tabs move to a bar at the bottom.

Setup

1. Edit the biomarkers in the CMS (value, unit, status, note).

2. Swap the names, avatars and messages on the Overview and Care pages.

3. Set a destination for the Care message form.

4. Publish.

Good to know

- All data is sample data. There is no sign-in or live data source.

- The range and trend charts are images in the CMS. Replace them per marker.