Principle · 01
Clarity over decoration
Every pixel earns its place. We use type, weight, and space — not color and ornament — to guide buyers through complex catalogs.
Restock · Design System v1.2
The living style guide behind Restock — wholesale, redesigned for humans.
A shared language of tokens, components, and patterns used across the Restock marketplace, where independent artisan brands sell wholesale to independent retailers.
Principle · 02
Efficiency for repeat buyers
A retailer restocking their store on a Tuesday morning should never lose a click. Muscle memory, keyboard-first, dense when it needs to be.
Principle · 03
Trustworthy by default
Prices, minimums, lead times and terms are stated plainly. No dark patterns, no surprises at checkout, no fine print.
Principle · 04
Consumer-grade polish on a B2B workflow
Wholesale software has looked like an ERP for too long. Restock brings the craft of a great consumer product to spreadsheet-heavy work.
Foundations
The raw material
Color, type, space, and elevation — the primitives every component is built from. Change a token here, ripple everywhere.
Color
A warm, editorial palette anchored by a deep evergreen. Semantic tokens map to underlying ramps so themes can shift without rewriting components.
background
#FBF9F3
Page canvas — warm cream
surface
#FFFFFF
Cards, sheets, elevated surfaces
border
#E7E2D6
Dividers, hairlines, input outlines
text-primary
#252320
Body copy, headings
text-muted
#7B7568
Captions, helper text, metadata
primary
#2C4A3E
Primary actions, links, focus
accent
#D97A46
Highlights, promotional accents
success
#4C8C64
Confirmations, delivered orders
warning
#E9B457
Attention, expiring terms
destructive
#C8452A
Errors, destructive actions
Underlying ramps
Evergreen
6 steps
Terracotta
4 steps
Clay (neutrals)
7 steps
Typography
Fraunces adds warmth and voice at display sizes; Inter carries the workhorse UI. Both loaded as variable fonts for tight control at every step.
Display
Wholesale, made human.
Fraunces · 56 / 60 · 500
H1
Foundations of Restock
Fraunces · 40 / 44 · 500
H2
Components & patterns
Fraunces · 28 / 34 · 500
H3
Order minimum progress
Inter · 20 / 27 · 600
H4
Case-pack selector
Inter · 16 / 22 · 600
Body
Buyers restock quickly by scanning brand rows, entering case-pack quantities, and confirming totals in a single view.
Inter · 14 / 22 · 400
Small
Ships from Portland, OR · Lead time 5–7 business days
Inter · 13 / 19 · 400
Caption
Net 30 terms available
Inter · 11 / 14 · 500
Spacing
A 4-based scale doubling into 8s. Density tightens by one step in tables and product grids; loosens by one step in marketing surfaces.
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
24px
space-6
32px
space-7
48px
space-8
64px
Radius & elevation
Soft, humane corners paired with layered warm shadows. Elevation communicates rank — not decoration.
radius-sm
radius-md
radius-lg
radius-xl
radius-2xl
e1 · Rest
Inline surfaces — cards, inputs
e2 · Raise
Hover state, sticky headers
e3 · Overlay
Popovers, dropdowns, toasts
e4 · Modal
Dialogs, side sheets
Components
The kit
Each component ships as a rendered preview, with variants and states side by side. Everything below is production code, not a mockup.
Form controls
Every control ships with a label, optional helper, and error slot — they are not decoration, they are the contract with the buyer.
Shown on invoices and packing slips.
Enter a valid email address.
Try brand names, categories, or 'MOQ under $250'.
Payment terms
Notifications
Auto-approve reorders
Quantity stepper
Fast to click, faster from the keyboard. The number is always editable directly — no modal, no arrows-only fallback.
ea
Case-pack selector
Wholesale is sold by the case. The selector resolves cases into a live unit count so buyers always see what they're actually receiving.
Cases
Sold in packs of 6
cs
12 units
2 × 6
Cases
Sold in packs of 12
cs
12 units
1 × 12
MOQ progress
Every brand sets an order minimum. The bar keeps that constraint visible without nagging — it turns green the moment it's satisfied.
Order minimum
$148 / $250
$102 to go to reach this brand's minimum
Order minimum
$312 / $250
Minimum met — ready to submit
Badges & chips
Order lifecycle status and terms. Colors are intentionally soft — badges live in dense tables and must not shout.
PendingConfirmedShippedDeliveredDraftNet 30New brandFree shipping · $500+
Status & terms
The order-lifecycle chips and payment-terms chip, documented explicitly. Each status has one canonical tone — reuse it everywhere the order appears (tables, receipts, emails).
Order status
Pending
Awaiting brand review
tone · warning
Confirmed
Accepted, in production
tone · accent
Shipped
In transit with carrier
tone · info
Delivered
Received by retailer
tone · success
Payment terms
Net 30Net 15Pay on shipmentNet 30 is the account default — surfaced in evergreen to signal it's an approved credit relationship.
Status uses the
dot variant so the chip is legible even when the row is scanned peripherally. Terms chips omit the dot to signal they are metadata, not a state.Product card
The atom of the marketplace. Brand name is prominent, price and MOQ are inseparable, add-to-order is one click away.
New
Marlow & Rye
Marlow & Rye
Sourdough crackers, sea salt
$4.20
wholesale · 12 units MOQ
Foundry Ceramics
Foundry Ceramics
Speckled stoneware mug
$11.00
wholesale · 6 units MOQ
Restock
Ember Kitchen
Ember Kitchen
Smoked chili oil, 8oz
$7.50
wholesale · 12 units MOQ
Fieldnotes Co.
Fieldnotes Co.
Botanical linen tea towel
$8.25
wholesale · 8 units MOQ
Data table
Row hover, tabular numerals, right-aligned money. Density is deliberate — retailers scan hundreds of orders a week.
| Order | Brand | Items | Total | Status | Date |
|---|---|---|---|---|---|
| #RS-10428 | Marlow & Rye | 24 | $412.40 | Delivered | Jun 28 |
| #RS-10427 | Ember Kitchen | 18 | $286.00 | Shipped | Jun 27 |
| #RS-10425 | Foundry Ceramics | 12 | $142.00 | Confirmed | Jun 26 |
| #RS-10422 | Fieldnotes Co. | 32 | $524.75 | Pending | Jun 25 |
Tabs
Peer navigation for a single object. Never used to hide critical settings.
12 active SKUs · updated 3 days ago.
Alerts & toasts
Alerts anchor context; toasts confirm actions. Neither should ever require translation.
You have Net 30 terms with 3 brands
Approved during your account review last month — no need to re-apply.
This brand ships from Portugal
Expected transit is 12–18 business days. Plan reorders accordingly.
One item is out of stock
"Seeded rye crisps" was removed from your cart. You can request a restock notification.
Order submitted
Marlow & Rye · 24 units · $412.40
Modal / dialog
Reserved for decisions that must not be lost. Cancel is always available and never destructive by default.
Submit order to Marlow & Rye
Once submitted, the brand is notified and lead time begins.
Items24 units · 4 SKUs
Subtotal$412.40
ShippingFree · MOQ met
Total$412.40
Empty state
A moment to reassure and redirect. Every empty state names the next best action explicitly.
No orders yet
Once you place your first wholesale order, you'll be able to track it, reorder in a click, and download invoices from here.
Patterns
Composed in the wild
A single pattern that shows the system doing real work: a brand's line sheet with a bulk quantity matrix and a live order-minimum meter.
Marlow & Rye · Build order
4 SKUs · Ships from Portland, OR · Lead time 5–7 business days · Net 30
Net 30MOQ $250
Product
Wholesale
Cases
Line total
Sourdough crackers · Sea salt
MR-CRK-01 · pack of 12
$4.20
per unit
cs
$100.80
24 units
Sourdough crackers · Rosemary
MR-CRK-02 · pack of 12
$4.20
per unit
cs
$50.40
12 units
Sourdough crackers · Black pepper
MR-CRK-03 · pack of 12
$4.50
per unit
cs
$0.00
0 units
Seeded rye crisps
MR-CRK-04 · pack of 6
$5.80
per unit
cs
$0.00
0 units
Quick add:
Accessibility
Access is a design constraint
Craft doesn't count if buyers can't reach it. Every component ships with tested contrast, visible focus, real tap targets, and full keyboard support.
Color contrast
Body text against surface exceeds WCAG AA (7.4 : 1). All semantic tokens are audited for both light background and inverse pairings. Semantic color is never the only signal — icons and text reinforce it.
Text on surface
7.4 : 1 · AAA
Text on primary
9.1 : 1 · AAA
Keyboard & focus
Every actionable element receives a 2px evergreen focus ring at a 2px offset. Focus never traps, always follows DOM order, and is never removed without a documented replacement.
Live demo
Press Tab to walk the ring
Touch targets
Interactive controls maintain a 44 × 44 minimum on touch surfaces. On dense desktop tables, hit areas extend beyond visible chrome to preserve the target.
44
Minimum · confirmedDo vs. avoid
✓
Do · sufficient contrast
Order shipped from Marlow & Rye
Expected Thursday · tracking attached
text-ink on surface · 7.4 : 1 · AAA
×
Avoid · insufficient contrast
Order shipped from Marlow & Rye
Expected Thursday · tracking attached
text-clay-300 on surface · 1.9 : 1 · fails AA
✓
Do · visible focus ring
2px evergreen · 2px offset
×
Avoid · outline: none
Keyboard users lose their place