#24282A
Hospitality operations, simplified
One system.
One system.
Every Hops product.
A framework-agnostic component library that gives Hops Inventory, Finance, Connect and the tools around them one clear visual language.
Start here
Start with core.
Start with core.
Add recipes deliberately.
Choose the core-only or full stylesheet, include it in a Hops application, and add the hops-theme scope to the application shell.
$ bun run build:css<link rel="stylesheet" href="/styles/hops.css" />
✓
Designed for gradual adoption
Every public class uses the hops- prefix, so teams can introduce the library alongside existing Tailwind or legacy CSS.
Foundations
Colour that knows its job.
Warm, calm neutrals keep dense operational interfaces easy to scan. Product accents carry meaning without taking over the page.
#EEECE8#FCFBFA#00AF6E#D8FFB0#8264F8TypographyHuman at the top.
Human at the top.
Precise underneath.
Platypi brings an editorial, hospitality-led voice to key moments. Plus Jakarta Sans keeps everyday product work direct and legible.
Know what your business is actually doing.
Variance is information. Review the gap, understand the cause, and take the right next step.
Aa400 · 500 · 600 · 700 · 800
Product themes
One family, three jobs.
Switch one attribute to carry the right product accent. Component structure and behaviour stay identical.
defaultfinanceconnectComponents
Buttons
Actions with clear hierarchy, useful sizes, complete states and an accessible focus treatment.
.hops-btn .hops-btn--primaryStatus
Badges
Compact labels for state, category and small pieces of operational context.
DraftHops AIMatchedNeeds reviewOverdue
.hops-badge5 statesSurfaces
Cards & stats
Quiet containers for operational summaries, decisions and drill-down entry points.
Actual GP
72.4%
Invoice value
£8,420
Connected systems
12
Stock take #1842
The Garden Room · TodayAll 486 items have been counted. Three variances need a manager's note.
Invoice review
Check extracted lines before anything reaches the ledger.
Input
Forms
Familiar controls with generous targets, legible help text and unmissable error states.
Shown on purchase orders and deliveries.
This reference already exists.
.hops-field .hops-inputNative HTML controlsFeedback
Alerts
Operational feedback should say what happened, why it matters and what to do next.
i
Connection scheduled
Lightspeed will begin syncing after tonight's close.
✓
Invoice matched
The invoice, delivery and purchase order agree.
!
Three lines need review
Unit prices differ from the current supplier catalogue.
×
Upload failed
The file could not be read. Try exporting it as CSV.
Data display
Tables & progress
Dense enough for real work, calm enough to read at the end of a long service.
| Supplier | Reference | Value | Status | Owner |
|---|---|---|---|---|
| Fresh Direct | INV-10291 | £1,842.90 | Matched | AR |
| Brakes | BRK-80342 | £986.44 | Review | RF |
| Liberty Wines | LW-44208 | £2,314.00 | Draft | JM |
Catalogue enrichment74%
1,248 of 1,682 products complete
Layers & loading
Overlays & loading
Use overlays for focused decisions, and loading states to preserve the shape of incoming content.
.hops-dialog .hops-skeletonReduced-motion awareGovernanceShared twice.
Shared twice.
Understood once.
A pattern enters core only after it appears in at least two products and carries the same meaning in both. Product recipes can move faster without making every local decision a permanent framework promise.
Observe
Find the same user need in two or more maintained Hops products.
Align
Confirm the states, language and accessibility contract mean the same thing.
Promote
Move only the stable visual and semantic contract into prefixed core CSS.
✓
The promotion rule
Promote something into core after it appears in at least two products and can share the same semantics—not merely because it exists somewhere.
Phase 1 · Core
Cross-product essentials
The structures repeatedly rebuilt by operational products: application chrome, anchored actions, selection, upload, feedback and dense data work.
.hops-app-shellActual GP72.4%Variance£184
.hops-menu.hops-toast✓
Catalogue imported
142 products are ready to review.
.hops-combobox- Suppliers
- FDFresh Direct
- FFFresh Fields
.hops-dropzonePDFINV-10291.pdf
.hops-disclosureWhy does this line need review?
The invoice unit price is 8% above the latest supplier catalogue.
How is variance calculated?
It compares expected and actual usage for the period.
⌕
No other matches
Try a supplier name or invoice reference.
.hops-table-toolbar .hops-pagination| Reference | Value | Status | ||
|---|---|---|---|---|
| Fresh Direct | INV-10291 | £1,842.90 | Matched | |
| Brakes | BRK-80342 | £986.44 | Review |
Phase 2 · Core & recipes
Operational workflows
Reviewing documents, choosing dates, moving through processes, reading history and understanding system state.
.hops-previewFRESH DIRECT
Invoice
INV-10291 · 22 July 2026Garden Room Hospitality
Food supplies£1,842.90
.hops-calendarJuly 2026
.hops-stepper- ✓Upload
- ✓Extract
- 3Review
- 4Post
DraftQueuedRunningReviewCompleteFailedOffline
.hops-timeline- ✓
Invoice matched
Alex accepted the suggested purchase order.
- ↻
Extraction completed
18 lines found with 98% confidence.
source: email · model: invoice-v4 - ↑
Document uploaded
.hops-chartActual GP by week
Garden Room · Last 6 weeks
| Week | Type | Gross profit |
|---|---|---|
| 1 | Actual | 52% |
| 2 | Actual | 65% |
| 3 | Actual | 58% |
| 4 | Forecast | 74% |
| 5 | Forecast | 70% |
| 6 | Forecast | 82% |
- Actual
- Forecast
.hops-drawer .hops-rangeUse a drawer when context should remain visible behind a focused task.
Phase 3 · Recipes
Compositions, not constraints
Demand-backed starting points that share core primitives while leaving domain behaviour with the product that understands it.
Auth & accountFeedback servicePermissionsWorkspace treeTechnical workspaceChat & CopilotConnectivityCatalogue & basketMarketingKanban & matrix
.hops-auth-shell .hops-otpWelcome back
Enter your PIN
.hops-tree- Finance
- Inventory
.hops-chatHops CopilotReadyH
Gross profit improved by 3.2%. The biggest change was lower produce waste at The Garden Room.
Show me the three biggest variances.
.hops-workspace .hops-code-surface1query VenueSummary {2 venue(id: "garden-room") {3 grossProfit4 }5}
// 200 OK · 84 ms
{
"grossProfit": 72.4
}
{
"grossProfit": 72.4
}
.hops-permissions.hops-feedback .hops-connectivityWorking offline3 pending
How was this page?
Your feedback helps us improve Hops.
.hops-catalog-layoutHeritage tomatoes
£8.40
House white
£42.00
.hops-board3 price variances
TodayMissing PO
Ready to post
.hops-marketing-heroHospitality operationsSee the whole business.
See the whole business.
Act on what matters.
Inventory, finance and connected systems in one calm operational view.
Meet Hopsi
Kept outside core on purpose
PDF rendering, chart engines, editor runtimes, drag-and-drop, chat streaming and framework-specific keyboard state remain adapter responsibilities. Hops Design supplies their shared visual and semantic surface.