Design system
One component library for PMS, POS and booking engine. Light and dark follow the device.
Principles
- Today first
- Arrivals, departures, dirty rooms and money owed on the home screen, one tap from action.
- Plain words
- “Guest owes ₹2,400”, not “Folio balance (Dr)”. Hindi switchable per user (Phase 1).
- Undo, not “Are you sure?”
- Actions apply at once with a 10-second Undo. Risky ones (void, refund, rate override) ask for a reason.
- One colour, one meaning
- Booking and room colours are the same on every screen, always with a text label.
- Thumb-sized
- Every control is at least 44 px tall; every screen works on a 6-inch phone.
- Ctrl+K finds anything
- Name, phone, room, booking or OTA number, and actions.
Colour tokens
Change your device to dark mode to see the dark set
canvasPage background
surfaceCards
surface-2Table heads, hovers
borderLines
textBody text
mutedSecondary text
primaryActions, brand
primary-softSelected
successIn house, paid, clean
infoConfirmed, arriving
warningLeaving today, attention
dangerOwes, dirty, errors
violetOn hold
Type
Page title · 24 semibold
Section · 18 semibold
Body · 15 regular — Guest owes ₹2,400
Secondary · 14 muted
₹1,25,000 · 1,234,567
Numbers use tabular figures so columns line up. Indian grouping (lakh, crore). System font, with Noto Devanagari for Hindi.
Buttons
Status colours
Bookings
On holdConfirmedArriving todayIn houseLeaving todayChecked outCancelledNo-show
Tape chart bars
Priya Nair · Arriving today
Priya Nair · In house
Priya Nair · Leaving today
Priya Nair · On hold
Rooms
CleanDirtyInspectedOut of order
Fields
Cards and numbers
Occupied tonight
18 / 23
78%
Guests owe
₹42,180
Clean rooms
17