Medplum Design System: bridging frontend & FHIR for custom EHRs
In recent conversations we've had with healthcare founders and Clinical Operations (ClinOps) leaders, one question keeps coming up: How do you ensure your Electronic Health Record (EHR) system supports highly specialized workflows, integrates seamlessly with existing processes, and delivers a great experience for both providers and patients without blowing the budget or getting stuck in endless cycles of refactoring? This is a great question indeed, and one whose answer may vary greatly depending on the context. This is the question that led us to come up with the Medplum Design System.
Sometimes, an off-the-shelf solution does the job. Other times, the need for flexibility, control, and scalability makes customization the wiser path. In the following sections, we’ll dive into how to make that call.
Problem #1: off-the-shelf EHR solutions
Many organizations opt for off-the-shelf EHR solutions as a quick, cost-effective starting point. While they handle common workflows well, they often lack the flexibility to adapt as operations grow and unique needs emerge. This can create friction when implementing new processes or scaling effectively. That’s where platforms like Medplum come into play.
Medplum provides a customizable foundation, offering the building blocks you need to assemble your solution without starting from scratch. It strikes a middle ground: more flexible than a fully off-the-shelf system, but not a custom EHR that needs to be built and implemented with compliant flows and interoperability from scratch.
In some cases, teams consider more extensive customization — or even building parts of the system themselves — to match their domain’s unique requirements.
Problem #2: overspending on custom EHRs
On the other end of the spectrum lies the challenge of fully custom EHR development. A report by the Bloor Group highlights a significant risk: over 80% of EHR migration projects exceed budgets and timelines. Cost overruns average 30%, while time overruns average 41%. These delays don’t just affect internal timelines — they can disrupt go-to-market plans, impact funding rounds, and slow down user adoption.
So consider this article your prescription for more intelligent healthtech customization. I’ll walk through the tools and practices we recommend for building a high-performing EHR that empowers your care team while controlling development costs and schedules.
Customization isn’t just about making your EHR look attractive — it’s about adapting the technology to fit healthcare professionals' workflows and ensuring efficiency at every stage.
When done correctly, customization enhances the provider experience, reduces manual administrative toil, and lightens the cognitive load on care teams. It also helps streamline patient interactions, ensures compliance with regulatory standards, and integrates with key systems.
We’re all about transparency, so here are the tools and practices we recommend — right up front — before explaining why they’re our preferred approach to building the ideal EHR.
TL;DR: Medplum + Mantine + Figma + Discovery = A Faster Path to Your Specialized EHR
Combining Medplum with Mantine and Figma can build a solid foundation for creating tailored, scalable, and compliant medical systems. Add a carefully designed set of discovery workshops, and we can get your ideal EHR up and running in months, not years.
While I hope this TL;DR might've been helpful, let’s dive into why each of these tools is valuable and how they stand out in the healthcare software space:
Medplum: a customizable and open-source healthcare platform
Launched in 2021, Medplum is an open-source healthcare developer platform designed for flexibility and compliance. Unlike rigid white-label solutions, Medplum enables teams to create fully customized EHRs tailored to their workflows and patient needs.
This flexibility suits various clinical settings. A hospital may need a tablet-friendly EHR for quick patient charting and streamlined workflows, while a telemedicine network might prioritize scheduling, secure messaging, and real-time patient updates.
It offers FHIR integration for seamless data exchange, HIPAA & SOC 2 compliance, and a modular API-first design for full customization. Supported by an active open-source community, it drives rapid innovation. One of my favorite features is that Medplum is built by engineers for engineers.
Medplum has been adopted by various healthcare providers, and with its growing ecosystem, it's quickly becoming a standard for developers looking to create scalable and interoperable healthcare applications.
.webp){kind=icon}
Adding to all that, Medplum's user interface side is based on another very reliable open-source tool:
Mantine & Medplum's React Storybook: components that accelerate development
Mantine is a modern, open-source React component library that streamlines front-end development. Since its initial release, Mantine has seen over 200 updates and has become one of the most reliable UI frameworks for React applications.
It provides 100+ accessible UI components, custom theming for seamless branding, and lightweight, high-performance design across all devices. With cross-browser compatibility and a community-driven ecosystem, it’s a top choice for scalable UI development.
In developer forums, Mantine has been ranked among the best open-source design systems and has been adopted by companies like OpenAI, Supabase, and Stripe.
Additionally, Mantine offers built-in accessibility features, ensuring that digital healthcare solutions are accessible to any user.
Medplum leverages Mantine to build its React Storybook, a tool that acts as a living library of UI components. Storybook helps developers by giving them a clear, isolated view of each component — how it looks, behaves, and can be configured — making it easier to build and maintain consistent interfaces.
However, Storybook lives in the codebase, meaning designers working in Figma don’t have direct access to it. This is where a well-maintained design system in Figma becomes essential. It ensures that designers and developers work from the same source of truth, even though they rely on different tools.
This was precisely the challenge that led to the creation of the Medplum Design System, which we'll cover in the section below. During a project in which we had just two weeks to deliver a fully functional app — on top of hours of user research — it became clear that we needed a faster, more reliable way to bridge design and development.
EHR Design System: the final homemade ingredient
To further streamline Medplum/Mantine-based EHR development, we at Vinta created an Open-Source Figma design system.
Figma, our collaborative design platform, allows teams to design, test, and iterate in real time. But having Figma alone wasn’t enough — what we required was a structured design system that accelerated prototyping and ensured every design was technically feasible and aligned with Medplum’s components and FHIR standards right from the start. This is where the Medplum Design System comes in.
Built directly on top of Mantine and Medplum’s Storybook components, every Figma component is mapped to a real, reusable code component — using the same names as the ones developers use in the codebase. This reduces friction, ensures consistency, and makes handoffs faster and more precise.
It’s easy to overlook the value of solid, technical design — especially if you haven’t worked with designers who think beyond aesthetics. We take design seriously, and our team approaches it with a strong technical mindset, ensuring that what looks good works well and delivers a well-founded user experience.
A design system is more than just a set of colors and components — it’s a structured toolkit that brings consistency, scalability, and efficiency to both design and development. It allows our designers to build EHR experiences with great speed, which in turn allows our developers to code these experiences way faster.
Much like code, our design system is fully customizable — from themes and variables to tokens and components. These variables allow designers to modify values at a single point of change and have them reflect in the entire design system. The system offers light and dark modes, uses variables for colors/branding and personas, and even incorporates FHIR-specific fields, like structured names and addresses.
At the same time, FHIR’s limitations influence how we design components. For example, FHIR’s filtering and sorting options are limited, especially when working with related resources. This directly impacts features like appointment lists, where sorting by "next upcoming" requires creative workarounds — like adding a toggle to switch between future and past appointments.
By embedding this kind of FHIR awareness into the design system, we help teams avoid surprises down the line, keeping designs both technically feasible and compliant.
What the design system delivers
- Reduced costs & miscommunication – Aligns design and development to minimize rework;
- FHIR-ready, developer-friendly & scalable – Built for smooth integration with Medplum’s API;
- Real, usable components – Prototypes use actual Medplum components for consistency;
- Pre-styled, accessible UI – Mantine components optimized for usability and branding;
- EHR workflow templates – Reusable patterns for charts, scheduling, intake, and more;
- Faster prototyping – Quickly validate ideas and gather feedback before development;
- Consistent branding – Keep a unified look across all healthcare solutions;
- Open-source & free – Ready for your team to explore and customize;
- Personas – Allows easy modification of user data across entire flows through a single point of change.
The modularity and strength of our design system let us validate ideas early, discounting the cost of building even simplified versions. This approach lets us shape what the final EHR experience looks like right from the start of our engagement with clients — often within the first few weeks of a project.
Customizing EHRs: when is it the right move?
It’s safe to say that off-the-shelf EHRs cover a wide range of scenarios. They’ve been around for decades and applied across countless healthcare settings — from small clinics to large hospital networks. However, they’re not silver bullets for every use case, and custom-built solutions might be the better fit in some situations.
Customizing an EHR makes the most sense when you have highly specific workflows that off-the-shelf solutions can’t fully support or when you need greater control over the user experience. For example, specialty clinics with unique intake processes or research institutions requiring custom data collection might struggle with rigid, pre-built systems.
Similarly, organizations aiming to optimize user flows — like reducing clicks for high-volume tasks or tailoring interfaces for different roles — benefit from custom solutions prioritizing efficiency and usability. In these cases, customization isn’t just a nice-to-have: it becomes essential for better outcomes and smoother operations.
Deciding to pursue a custom EHR solution is a significant decision, especially for first-time founders who may lack experience in software development. Even seasoned entrepreneurs can face challenges, such as evolving industry standards, integration complexities, or unique business requirements that off-the-shelf solutions can't address.
In these situations, we recommend going through a Product Discovery process to determine whether a custom solution is the right fit. This structured approach validates the problem-solution fit through UX research, stakeholder workshops, and technical assessments.
Rather than jumping straight into development, it helps teams evaluate whether customization is necessary or if existing solutions could meet their needs. The outcome is a clear, evidence-based direction — along with a validated prototype and development roadmap — allowing founders to make informed decisions while minimizing risks and unnecessary costs.
This is when the tooling mentioned above, including our Design System, comes in, and why we can ship these solutions quickly. To wrap things up, let’s examine real-world examples of how this approach has effectively streamlined the construction of healthcare operation platforms.
Real-world applications: EHRs we've built
Vinta has helped multiple healthcare companies build tailored EHR solutions using Medplum and Mantine. Here are some real-world examples:
Rewind: Type 2 diabetes reversal program
- Challenge: Build an EHR that could replace Healthie and be FHIR compliant.
- Solution: Vinta implemented a fully customizable Medplum-based system, improving charting, provider messaging, and patient interactions.
- Read more about Rewind’s transformation here
Quilted Health: modernizing maternal care
- Challenge: Migrating from a 14-year-old legacy system to a modern FHIR-based EHR.
- Solution: Vinta leveraged Medplum’s headless architecture to build a future-proof, HIPAA-compliant platform with seamless interoperability.
- Read more about how we helped Quilted Health scale
%20(1).webp)
