Design System 3.0

The shared foundation of design and code for Commure’s healthcare products. Design system 3.0 strives to bring consistency, quality, and efficiency to every clinical experience.

architectureFoundations toggle_onComponents Figma

Getting started

Pick your path

For Designers

Begin by reviewing the core design principles and foundations. Design System 3.0 also has a Figma UI Kit that is paired 1:1 with our codebase.

For Developers

Install via npm and import components directly. Each component ships with live examples, props docs, anatomy guides, and usage guidelines.

Installation

Up and running in 3 steps

Install packages

yarn add @getathelas/ui @getathelas/tokens

Wrap your app

import "@getathelas/ui/globals.css";
import { CommureProvider } from "@getathelas/ui";

export function App({ children }) {
  return <CommureProvider>{children}</CommureProvider>;
}

Use a component

import { Button } from "@getathelas/ui";

function SaveButton() {
  return <Button variant="primary">Save changes</Button>;
}