primary
#303030
Primary admin action
Commerce admin research system
Dense merchant software with neutral surfaces and semantic status.
Use this interface language for orders, inventory, payouts, risk review, and embedded commerce apps. It prioritizes scan speed, predictable controls, visible state, and compact task completion.
Net sales
$24,580
+12.4% today
Low stock
18
4 variants critical
Risk holds
03
manual review
Recent orders
Open
Unfulfilled
Risk
| Order | Payment | Fulfillment | Total |
|---|---|---|---|
| #1048 | Paid | Partial | $326.40 |
| #1047 | Review | Hold | $1,284.00 |
| #1046 | Paid | Ready | $78.15 |
Color Palette
The palette is neutral first. Status colors are saved for state, risk, and action so merchants can trust them.
canvas
#f1f1f1
Page floor
success
#047b5d
Paid, complete, in stock
warning
#ffb800
Pending, partial, attention
critical
#c70a24
Risk and destructive state
info
#006bb7
Neutral guidance
hairline
#d4d4d4
Rows, borders, separators
magic
#8051ff
AI assist only
Typography
Compact sans typography keeps the admin surface readable while leaving enough room for status, metadata, and comparison.
Merchant operations
Inventory alerts need action today
Use dense body copy for filters, help text, table rows, and admin notes. Pair compact text with clear labels and visible state.
Components
Core components express daily merchant work: filters, forms, badges, banners, row actions, and object cards.
TSHIRT-BLK-M
Published
Low stock
Chargeback
Duplicate productCmd D
Archive listingRisk
Selected rows24
Bulk actionEdit tags
Layout and Spacing
Density changes by task. Index pages compare many objects; edit pages slow down around irreversible choices.
xs8px
sm12px
md16px
lg20px
xl28px
IndexHigh
Edit flowMedium
Critical reviewLow
Desktop
Grid, filters, table, side rail.
Tablet
Stack rails below primary task.
Mobile
Convert rows into object cards.