Component Architecture

The Commure framework is structured as an atomic design system: small elements create both foundations and components, which can then be combined to form an app.

Application framework

The Commure design system is a living project, evolving and adapting over time to new and rising technologies to meet the needs of healthcare teams. Commure has based its framework on Brad Frost's Atomic Design approach to interface design.

Commure takes a modular approach to interface design. This approach uses a cohesive system that's able to respond to the various needs of healthcare products through a base set of components. With this approach, we seek to simplify processes, to reduce development times, and above all, to provide a consistent user experience across the board.

The goal is to provide a common framework for building interfaces within the healthcare product ecosystem. It is a guide to foundations, components, patterns, and use cases that provide consistency and coherence to these products, and, ultimately, provides a satisfactory and unified experience to care teams.

Foundations (Visual & Content)

These are the principles upon which the design system is built. Any modification to these principles can affect the behavior of everything else. Foundational elements can include colors, grid, and typography.

Components

Components are the elements that define how care teams use your app. Components can be:

  • Basic and difficult to break down further (called atoms - examples include icons, buttons, and text boxes)
  • Simple combination of atoms (called molecules - examples include log in forms and search bars)
  • More complex combination of components of all kinds (called organisms - examples include navigation bars or patient demographics cards).
  • FHIR components (also called clinical components); these components could be molecules or organisms, but never atoms due to how FHIR is specified.

This section contains the common components that are essential to building healthcare interfaces. Each component defines its own rules and behaviors. A component's look and feel is based on a combination of foundations mentioned above - it’s worth repeating that changes to foundations will therefore propagate to the entire system.

In our case, components are implemented by Commure applications.

ComponentsExplore our component library.

Patterns

Patterns offer pre-built solutions to tackle repetitive interface challenges. Templates help to speed up the design process, as they only require minor modifications to fit your use case and to display your content.

Examples

This section showcases a few practical designs created by UX Designers. These designs demonstrate how components and satellites are applied to create healthcare interfaces that tackle specific scenarios.