search⌘K

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.

architectureFoundationstoggle_onComponentsFigma

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

01

Install packages

yarn add @getathelas/ui @getathelas/tokens
02

Wrap your app

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

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

Use a component

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

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

Agent skills

Build with Agents

The sense-frontend plugin teaches your agent to turn Figma designs into @getathelas/ui code that follows our conventions. It needs the Figma MCP connected. Updates land with /plugin update sense-frontend@epd-skills; Cursor and CLI setup live in the agent-skills README.

01

Add the EPD skills marketplace

/plugin marketplace add getathelas/agent-skills
02

Install the sense-frontend plugin

/plugin install sense-frontend@epd-skills
03

Build from a Figma design

/sense-frontend:implement-figma-design https://www.figma.com/design/…?node-id=…