Stay Flow · Design system
Register & Tape
Quiet hospitality for guests, precise operations for hosts. The look comes from the two paper tools small hotels ran on for a century: the guest register and the tape chart.
The mark is one stay on a ruled line. It starts half a night in, like a bar on the tape chart.
Colour
One accent, kept for actions. Every text pair passes WCAG AA in both themes, checked by a unit test.
- LimestonePage ground
ground - PaperCards and panels
paper - RaisedFields and menus
raised - InkText, in-house stays
ink - Ink 2Secondary text
ink-2 - Ink 3Labels and hints
ink-3 - RuleHairlines and grid lines
rule - Field edgeInput borders
field-edge - Nile blueActions, nothing else
action - Ochre tapeHolds
hold - VermilionErrors and no-shows
danger - MossSuccess messages
success
- LimestonePage ground
ground - PaperCards and panels
paper - RaisedFields and menus
raised - InkText, in-house stays
ink - Ink 2Secondary text
ink-2 - Ink 3Labels and hints
ink-3 - RuleHairlines and grid lines
rule - Field edgeInput borders
field-edge - Nile blueActions, nothing else
action - Ochre tapeHolds
hold - VermilionErrors and no-shows
danger - MossSuccess messages
success
Type
Three open-licence families. Newsreader speaks to guests, Instrument Sans runs the interface, DM Mono sets references, rooms, prices and times.
- display64 / 68 · Newsreader
- Dar Nubia Guesthouse
- title40 / 44 · Newsreader
- Four nights by the Nile
- headline28 / 34 · Newsreader
- You are booked, Laila.
- heading22 / 28 · Instrument Sans
- Arrivals today
- lead18 / 28
- Ten rooms around a palm garden, with balconies over the Nile.
- body16 / 26
- Your confirmation and a private link to manage the booking go to this email.
- small14 / 20
- Free cancellation until 48 hours before arrival.
- label12 / 16 · DM Mono
- M8D5G7QT · ROOM 201 · 3,600 EGP · 14:00
Controls
React Aria for behaviour, our own styles. Every control is 44 px or taller and shows its focus ring only for the keyboard.
Buttons
Fields
Buttons
Fields
Status tape
Status is never colour alone. Each tape has its own fill, pattern, outline or dash, and always its name.
- In houseThe most contrast: who is in the building now.
- ConfirmedUpcoming stays, one step quieter.
- HeldOchre tape while a guest confirms, for ten minutes at most.
- BlockedTaken off sale by the host. Hatched, with the reason written on it.
- No-showOutlined in vermilion. Set by the night audit the morning after arrival.
- Checked outDashed and quiet: history.
- CancelledDashed. The nights are on sale again.
- Hold expiredThe guest did not confirm within ten minutes.
- ReleasedThe guest let the hold go before it ran out.
States
Every screen has a loading, empty, error and success state. Each one says what happened and what to do next, and states the guarantees plainly.
Sold out a moment ago
Someone just booked the last Garden Double
Connection lost
We could not confirm your booking
Confirmed
You are booked, Laila.
REFERENCEW4L7N2KD
Sold out a moment ago
Someone just booked the last Garden Double
Connection lost
We could not confirm your booking
Confirmed
You are booked, Laila.
REFERENCEW4L7N2KD