Osbert - a system for hospitality.
Revenue recovery infrastructure for local venues. This document defines every token, component, and tone of voice that powers the product. Warm, considered, commercially sharp - built so an operator opens it on a Tuesday morning and thinks "this gets it."
Make recovered revenue impossible to miss.
A warm room, not a dashboard.
Cream is the calm workspace. Charcoal carries authority. Green signals money recovered - and only that. Amber asks for attention. Red is reserved for customer recovery. No saturated chrome, no electric SaaS blues.
Editorial warmth, operational clarity.
Newsreader gives the brand its hospitality voice - a contemporary serif that feels at home on a printed menu. Figtree is the operator's font: clean, humanist, unflinching at small sizes. JetBrains Mono carries the numbers - revenue is the hero, and it needs to land with weight.
Generous, soft, never bubbly.
A 4-pixel base with named tokens for the common moves. Radii get more generous as a surface gets more pill-like - buttons sit at 10px, badges at full pill, cards at 14px. Shadows are tinted warm - never cold grey - so depth still feels like the room.
One line weight, one library.
Every icon in Osbert comes from Lucide (lucide.dev) - a single stroke-drawn set rendered at a 2px line weight in currentColor. Icons mark actions, states and places - never decoration. In the app they render exclusively through the shared <ob-icon> component, which owns the registry: if an icon isn't registered there, it isn't in the product.
One green action per screen.
Primary is reserved for the moment that earns revenue: Approve, Connect, Save. Secondary carries everything else. Ghost lives in tables and rows. Destructive earns its red.
Quiet inputs that get out of the way.
Operators read fast and type carefully. Inputs are warm-grey by default, lean charcoal on hover, and earn a green focus ring only when they're active. The textarea matters most - it is where a message gets edited before it goes out.
The colour-coded language of the queue.
Operators scan these constantly. Each status earns a colour for a reason - amber moves toward action, green walks the journey from approval to return, red flags the careful work, neutral steps back. The strongest treatment is reserved for the moment a customer comes back.
The hero stat, the dense table, the empty room.
The Revenue Recovered card is the centrepiece. Tables are quiet by default and earn their hover. Avatars warm up customer records without being clinical. Empty states encourage - they never feel broken.
| Customer | Last visit | Avg spend | Est. value | Status |
|---|---|---|---|---|
|
SM
Sarah Mendez 14 visits · party of 2 |
8 weeks ago | $92 | $184 | Draft Ready |
|
JR
James Rourke First visit · 10 weeks ago |
10 weeks ago | $48 | $96 | Approved |
|
EO
Emma O'Brien 6 visits · usually Friday |
3 weeks ago | $140 | $280 | Sent |
|
TF
Tom Fielding 22 visits · big spender |
2 weeks ago | $210 | $420 | Returned |
|
PL
Priya Laksmi Complained · party of 4 |
1 week ago | $68 | $136 | Needs Care |
No opportunities right now.
Quiet weeks happen. Check back after your next busy period - we'll surface regulars worth reaching out to.
Calm, not alarming.
A toast should feel like a colleague leaning in to mention something. Alerts carry more weight but never shout. Each variant uses the smallest hint of its semantic colour against a cream surface.
3 customers are eligible this week.
We'll prepare drafts once you've confirmed your outreach tone in Settings.
Sarah M came back. $70 recovered.
The message you approved on Monday brought her in last night. Nice one.
POS sync paused 18 hours ago.
We're still showing data, but it's slightly stale. Reconnect Square to get back on track.
Emma's draft references a complaint.
This customer left a 1-star review last month. Switch to grievance tone before sending.
Charcoal sidebar, cream room.
The sidebar wears the brand's authority colour so the workspace beside it can breathe. Active items earn a soft green tinge and a thin accent stripe - the only place the colour appears in chrome.
The repeating unit of the product.
The Opportunities list is what an operator returns to every morning. Each row pairs a known customer with a quantified ask and a clear next action. Opportunity type is signalled by a quiet vertical accent - not a heavy icon. The estimated value is mono and right-weighted; the badge is the eye-catch.
The approval moment.
Two columns: the message on the left, the customer's story on the right. The Approve button is the only green CTA. Edit, Send Test, Skip and Mark as Sent sit in calmer treatments. The whole panel should feel considered - never rushed.
Hi Sarah,
It's been a little while since we've seen you - we noticed you haven't booked in for about eight weeks, and your usual Friday table has been on our minds.
This week is a great one to come back: we've just put a new tasting menu on, and your name is at the top of my list. If you'd like, I can hold a 7pm spot for you on Friday.
- Marco
A different emotional register.
A grievance card is not an opportunity card with a red badge - it has its own treatment. The accent is a single thin red rule on the left; the customer's words sit in a quiet quoted block to remind the operator a person wrote them. Actions are quieter - nothing is "approved" here, it's offered.
"Service was extremely slow and our mains came out cold. We waited 40 minutes for water. We had been looking forward to this dinner for weeks."
"I had a reservation at 8 and was told there was no record of it when I arrived with my partner."
"Honestly, I appreciated the message. We'll be back."
Considered, smooth, never flashy.
Animation reduces friction and guides attention. It never performs. The dashboard's revenue counter is the one allowed moment of delight - a deliberate count-up that lets the operator feel the win.
Default for hover, focus, colour change.
Toast in, modal open, stat reveal.
Toast out, modal close, dismissals.
On dashboard load, the revenue figure counts from $0 to its true value over 1400ms with deliberate easing. It happens once per session. Never on re-renders.
Three voices, one venue.
The product writes on behalf of the venue - so tone is a feature, not a style guide. UI speaks like a capable colleague. Standard outreach is warm and unhurried. Grievance recovery is careful, human, and never automated-feeling.
Product UI
How the interface speaks to the operator. Smart, warm, direct. Like a colleague who knows the industry.
No opportunities right now - check back after your next busy period.
Approved. Ready to send when you are.
Sarah M came back. $70 recovered.
We need a couple of answers before we can start. No rush - just flag these with your team.
Standard outreach
Default tone for re-engagement. Warm, genuine, no pressure. The venue speaks for itself.
Hi Sarah, it's been a little while since we've seen you. We'd love to welcome you back - this week is a great time to book in.
James, your first visit meant a lot to us. We hope to see you again soon.
Grievance recovery
Carefully different. Human, apologetic where appropriate. Never salesy. Must feel like a real person wrote it.
Hi Emma, I wanted to reach out personally about your recent experience with us. What you described isn't the standard we hold ourselves to, and I'm sorry.
Tom, I heard about the issue with your booking last week. I'd love the chance to make it right - please let me know if you're open to coming back as our guest.
- First-name address
- One clear ask per message
- Specific, not generic ("Friday at 7" not "soon")
- The venue's actual signature
- Exclamation marks (except in success toasts)
- Marketing words: "exclusive", "limited", "miss out"
- Emoji in any outbound message
- "Dear" or "valued customer"
- A specific menu reference (if the operator opted in)
- "Your usual" - if the customer has one
- A held table offer - for high-value regulars
- An apology - only in grievance flows