Design system
The store before the software.
One system for every Prood surface, drawn from a shop on a Portuguese street: receipt paper, the roof tile and the people behind the counter.
Order ORD-20261031-4K2Q
Example order
- Stoneware mug × 2
- €48.00
- Shipping
- €15.00
- Total
- €63.00
- Paid by
- Multibanco
- Payout
- Direct to you
Logo
Drawn, not typed.
One stroke weight and perfect circles. The mark is a Telha roof tile off the eave, flat at the head and round at the foot, with the wordmark's p running off its lower edge.
The key
Ring, stroke, two tiles.
The wordmark's ring is the bow and its stroke the shaft. The bit is two tiles off the eave. It hangs on the key board, and it marks anything to do with keys.
Color
One loud color.
Ink and Paper do the work. Telha shows up rarely, so that it keeps meaning. The core pairs are measured against WCAG 2.2 AA.
- InkinkText and the default action
- PaperpaperThe canvas, like receipt paper
- TelhatelhaThe one signal. Use it rarely
muted
brand-subtle
success
warning
destructive
chart-2
chart-3
chart-4
Type
Three families, one voice.
Bricolage Grotesque for headings, Instrument Sans for reading, Geist Mono for anything a machine could read.
text-display-xl
Commerce, ready to run.
text-display-lg
Keep the keys.
text-display-md
The parts a store runs on.
text-display-sm
Your payment accounts
text-lead
The paragraph under a display heading.
text-eyebrow
Above a title
Surfaces
Panels restyle what's inside.
A surface reassigns the tokens, so most components carry over. Button keeps its paper and on-photo variants for photographs.
Page
Paper
surface-ink
Ink
surface-telha
Telha
Motif
The tile and the receipt.
Filled tiles from the wordmark's ring, always hanging downward like an eave. The receipt is where Paper comes from.
What you keep
- Your domain
- Yours
- Payment accounts
- Yours
- API keys
- Yours
- Payouts
- Direct to you
Controls
Buttons and fields.
Product UI
Quiet, dense, honest.
Every signed-in page starts with a PageHeader. Numbers sit in a StatGrid, lists in a Panel.
Orders
Every order in your store, with payment and fulfillment status.
- Orders
- 128
- Sample data
- Sales
- €6,420.00
- Sample data
- Customers
- 94
- Sample data
- Products
- 42
- Sample data
Setup
Two steps left before you can take orders.
Add your first product
Orders
Sample data
| Order | Customer | Status | Total |
|---|---|---|---|
| ORD-20261031-4K2Q | Inês Carvalho | To fulfill | €63.00 |
| ORD-20261031-9T7A | Tomás Ferreira | Awaiting payment | €118.00 |
| ORD-20261030-M3XD | Marta Lopes | Fulfilled | €36.90 |
| ORD-20261030-2HVP | Anna Keller | In progress | €84.00 |
| ORD-20261029-Z8LC | Rui Santos | Refunded | €29.50 |
On marketing
Show the real thing.
Product visuals use real components where they can, simplified by hand where they can't, always with sample data, framed in a browser or a phone.
Sample checkout, on Easypay
€63.00
- MB WAYPay on your phone
- MultibancoPay by reference
- CardVisa, Mastercard
Photography
One grade, many shops.
Real hands and faces in natural light. One warm, slightly matte grade, the same for stills and film. People shown are not customers.
