quotesEthiopia Yirgacheffe250g · Light
Single originLight
Ethiopia Yirgacheffe
Jasmine, bergamot and white peach — tea-like and luminous.
- Jasmine
- Bergamot
- White peach
£16.50 · 250gChoose
Components · v1.0The parts,
The parts,
and their states.
Buttons, forms, cards, navigation, badges, toasts and loyalty — each with its default, hover, focus, pressed, disabled, loading, empty, error and success state. Everything here is imported live from the app, so the documentation cannot drift.
ButtonsFormsNavigationFeedbackLoyaltyProduct
02
Forms & selection
Labels stay visible, hints sit below, and errors replace the hint and are announced to assistive tech.
Text inputs
We only use it for the receipt.
Allergies, or how you take it.
Controls
2
1
04
Badges & labels
Mono, wide-tracked, uppercase. Status colour comes from the muted semantic set.
Tones
NeutralOutlineEspressoLimitedReadyLow stockSold outDecaf
With an icon
Northern Quarter~6 min
Overline
Single origin05
Feedback & states
Every module ships default, loading, empty, error and success. Nothing dead-ends.
Notices
£12.40 more for free delivery — the threshold is £30.00.
quotes Ancoats. Usually ready in about 4 minutes.
Sold out. This lot has finished. We'll write when the next harvest lands.
Payment declined. Check the card number and try again.
Toasts
Loading
Brewing…
Nothing in the bag yet
Start with the Signature Blend, or pick something from the café menu.
06
Loyalty module
Domain-specific, not a generic progress bar: the bean itself is the stamp.
Empty · a fresh card
0/8 — 8 more cups to a free coffee.
In progress · 5 of 8
5/8 — 3 more cups to a free coffee.
Complete · reward ready
8/8 — card complete, reward ready.
07
Product cards
Not generic cards: overline, roast, serif name, tasting notes, price and stock state.
quotesKenya Nyeri AA250g · Light–Medium
LimitedLow stock
Micro lotLight–Medium
Kenya Nyeri AA
Blackcurrant, pink grapefruit and a dry, wine-like finish.
- Blackcurrant
- Pink grapefruit
- Cane sugar
£19.00 · 250gChoose
quotesSumatra Mandheling250g · Dark
Sold out
Single originDark
Sumatra Mandheling
Cedar, molasses and pipe tobacco. Heavy and syrupy.
- Cedar
- Molasses
- Pipe tobacco
Back next harvestDetails
Left to right: in stock, a low-stock limited lot, and a sold-out lot. Stock state changes the badge, the price line and the call to action, never the layout.