Home
DESIGN.mdStar on GitHub

The best commerce platform
for agents and developers

#1 open-source commerce platform on GitHub. Extend, customize, and own every commerce workflow.

$ npx create-medusa-app
Neutral (the brand)
Order & commerce state
Illustrative (marketing only) & code
Inter / 600
Display · 50px
The best commerce platform
Inter
Inter / 600
Heading · 20px
Extend, customize, and own every workflow
Inter
Inter / 400
Body · 15px
Advanced commerce logic for any use case, built on modules.
Inter
Roboto Mono
Code / data · 13px
await paymentModule.capturePayment({ id: "pay_1234" })
Roboto Mono
Order #2456
A Acme, Inc. · acme@example.com
order.workflow.ts

          
// run an action on the order →
👕
Medusa Sweatshirt
Color: Black · L
×1$100.00
☕
Medusa Coffee Mug
One Size
×2$40.00
Subtotal $140.00
Shipping FREE_SHIPPING · $0.00
Tax $10.00
Total $150.00
Payment
Authorized
Fulfillment
Not fulfilled
Modules power the Admin. Capture the payment or create a fulfillment — the status flips and the matching Medusa module call streams into the code panel.
Buttons
Order state
● authorized ● captured ● pending ● canceled
Product Cart Payment Fulfillment
CLI (input)
modules → workflows → admin
Radius
btn · 8
card · 10
panel · 14
Do
Keep the chrome monochrome: white (or near-black) canvas, near-black (or white) primary button.
Set every module call, ID, and money value in Roboto Mono.
Show the core model — module code beside the Admin it drives.
Color order state by meaning: blue authorized, green captured/fulfilled, amber pending.
Don't
Use the coral gradient or periwinkle as the UI accent — they're illustrative only.
Add a brand hue to buttons — the primary action is flat near-black / white.
Render code or money in a proportional sans — it's mono.
Recolor the hexagon mark — it's monochrome (--logo-mark).