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.
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 4 steps
Our packages are private on GitHub Packages, so step 1 signs you in with your own GitHub account (via the gh CLI — brew install gh) and adds a .yarnrc.yml to your project. Commit that file; teammates only need to run step 1 to authenticate. Open a new terminal before step 2.
Connect to the package registry (run once, from your project folder)
/bin/bash -c "$(curl -fsSL https://gist.githubusercontent.com/costa-athelas/d56ca543697d968d830df33797ac1263/raw/setup-repo-for-getathelas-ui.sh)"
Install packages
yarn add @getathelas/ui
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>;
}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.
Add the EPD skills marketplace
/plugin marketplace add getathelas/agent-skills
Install the sense-frontend plugin
/plugin install sense-frontend@epd-skills
Build from a Figma design
/sense-frontend:implement-figma-design https://www.figma.com/design/…?node-id=…