Customer mobile webDiscovery first
44 px targets · 16 px gutters
Sofia · Near you
Design foundationsOne Quiet Premium system.
APPROVED FOUNDATION · VERSION 01Calm intelligence,
Calm intelligence,
expressed with purpose.
Customer booking should feel warm and inviting. Business operations should feel focused and dependable. Both are built from one Quiet Premium standard.
Quiet Premium
Approved foundationBurgundy#742131
Ivory#F6F2EB
Cream white#FFFFFF
Ink#211E1A
Customer coral#C8614C
Business sage#57705C
CUSTOMERReassuring, spacious and image-led.
BUSINESSOrdered, calm and quietly authoritative.
BEST FORTrust, longevity and broad sector expansion.
WATCH FORKeep the customer journey lively enough for discovery.
Quiet Premium
Customer context
More breathing room, meaningful photography and reassuring choices.
Haircut, massage, yoga...
Sofia · Near you
Find your next favourite place.
Atelier 27Lozenets · 1.2 km
Thoughtful hair care in a calm, modern studio.
HairColourToday
Book your visit
€42Signature haircut
50 min Any stylist
Available times
01Navigation
Brand, search, and one contextual tool. Keep the first choice obvious.
02Discovery
Use real imagery and concise context before asking for a commitment.
03Decision
Keep price, duration, selection, and the primary action in one clear flow.
04Mobile
Stack content in task order and preserve 44 px touch targets.
Quiet Premium
Business page standard
A stable operational page structure, independent of any single feature.
Operations
Calendar
Manage your schedule · All locations
Tuesday, 4 August
Booked18of 24 slots
Expected€714today
Waitlist3people
TimeElenaPietjeYoana
09:00
Available
10:00
Short breakBlocked
Bookable itemTypeLocationUsed forActions
room 1RoomMain locationPet grooming
chair 2Chair/StationMain locationHair salon
01Global header
Show the title and context once. Never repeat the page title inside the work surface.
02Filter row
Scope, category, date, and saved-view filters occupy the first stable row.
03Action row
Search, bulk tools, sorting, and one primary create action occupy the second row.
04Continuous data
The table begins directly below inside the same surface. Mobile preserves this task order.
One responsive system
Mobile web standard
Customer and business products adapt differently without creating a second visual language.
One systemDesktop and mobile share tokens, components, states, and meaning.
Responsive changeOnly composition, density, navigation, and interaction placement adapt.
No hidden forkMobile rules live here, not in isolated page overrides or a second design system.
Book nearby,
Business mobile webTask first
40 px targets · 12 px guttersCalendarAll locations
Tuesday, 4 August
Booked18
Waitlist3
Expected€714
Time
ELElena
PIPietje
09:00
10:00
Short breakBlocked
11:00
Available
RuleShared contractCustomer adaptationBusiness adaptation
Layout tiers
Compact phone up to 390 px, phone up to 760 px, tablet up to 1024 px, then desktop. Breakpoints change composition, never identity.
Single reading column. Discovery content follows search, context, results, then booking action.
Single operational column around the active task. Dense data may keep a contained horizontal axis.
Navigation
The desktop sidebar collapses. The current location and a clear way back remain visible.
Use a stable bottom navigation for primary destinations and a simple top bar for context.
Use a compact top bar with menu, page title, one direct action, and an overflow menu.
Targets and spacing
No action depends on precision tapping. Labels wrap safely and controls keep stable dimensions.
Minimum 44 x 44 px targets with 16 px page gutters and more breathing room.
Minimum 40 x 40 px targets with 12 px page gutters and tighter operational rhythm.
Actions
One dominant action per view. Destructive actions stay separated and require confirmation.
The next booking action may be sticky above bottom navigation when the choice is ready.
Frequent actions stay near the relevant data; secondary actions move into a labelled overflow menu.
Overlays
Full workflows use a bottom sheet or full-height sheet. Small confirmations may remain centred.
Sheets use 16 px top corners, a clear title, close control, and one anchored primary action.
Dense edit flows may use full-height sheets. Do not cover essential context without a clear return path.
Scrolling
The browser owns vertical scrolling. Nested vertical scroll regions are reserved for sheets and bounded pickers.
Avoid horizontal scrolling for primary content. Chips and date strips may scroll when their order remains clear.
Tables and multi-lane calendars may scroll horizontally inside their data surface; the page itself must not overflow.
Input and keyboard
Focused fields remain visible above the keyboard. Use correct input modes, autocomplete, and native semantics.
Ask only for information required at that booking step and preserve entered data when navigating back.
Keep labels visible, group related fields, and anchor save/cancel actions where long forms require it.
System states
Safe areas, long translations, reduced motion, loading, empty, offline, error, and retry states are designed from the start.
Use reassuring copy and structured skeletons when useful; never hide price or commitment changes.
Use the Rèboo full-surface loader only when work is unavailable; prefer local progress for background updates.
Quiet Premium
Card and calendar event structure
One anatomy, clear action hierarchy, and calendar blocks that remain distinct from page cards.
Booking
ConfirmedSignature haircut
CustomerMia Petrova
When4 Aug · 09:00
StaffElena
Price€42
01Header
Type, meaningful title, and one compact status.
02Body
Only information needed to understand or compare the item.
03Footer
One primary action. Secondary and overflow actions remain quieter.
04Surface
8 px radius, one border, no decorative nesting, shadow only when elevated.
Use for one metric with a short comparison or status.
Use when the whole surface selects or opens one clear option.
Use for a task that needs context, status, and a clear action.
Appointment
Past appointment
Break
Main break13:00 – 14:00Blocked
Waitlist
Conflict
01Placement
Inset 4 px from the calendar cell with a 6 px radius. Events never fill the entire grid cell.
02Identity
Confirmed appointments use the assigned staff colour with accessible text contrast.
03Content
Time and customer stay visible. Service appears when height allows without crowding.
04Interaction
The complete block opens details. Hover, focus, drag, conflict, and past states remain explicit.
Familiar controls
Use established symbols and labels for repeated actions.
Stable dimensions
Controls never resize when labels, counts, or states change.
Complete states
Default, hover, focus, selected, disabled, loading, error, and success.
Canonical implementation · @reboo/ui
Shared core components
The actual reusable controls and states used across customer and business products.
Shared coreSame component anatomy and behaviour everywhere.
Customer adaptation44 px targets, more space, coral secondary emphasis.
Business adaptationBookings-density desktop controls, 40 px mobile targets, denser composition, sage support.
Quiet Premium · Shared
Core components
One visual language, one interaction model, and one implementation for every active web product.
Actions
Business desktop controls: Bookings is the canonical pattern. Toolbar actions, search fields, selects, filters, and icon controls use the compact 34 px rhythm; pagination uses 30 px and the single primary create command may use 28 px. Every control returns to at least 40 px on mobile. Repeated row actions stay white and outlined with a 14 px Lucide glyph and 1.75 px stroke.
Inputs and choices
Search existing customers or continue as walk-in.
Enter a valid email address.
Modes and status
ConfirmedPayment dueConflictWaitlistSelectedDraft
Feedback
Booking confirmed
The customer has received their confirmation.
This time overlaps another booking
Continue only when the business accepts the overlap.
We could not save the change
Your previous information is still available.
Loading and empty states
Loading content...
Nothing here yet
Add the first item or adjust the current filters.
Quiet Premium Dark
Dark mode foundation
The same system and hierarchy, rebuilt with warm dark surfaces and accessible contrast.
BackgroundApp canvas
#1A1714SurfacePanels and cards
#24201CElevatedRaised controls
#2C2722Warm ivoryPrimary text
#F4EFE8BurgundyPrimary action
#8B2B3ECustomer coralCustomer expression
#E1816CBusiness sageBusiness expression
#88A98B01 · BackgroundApplication canvasUse behind every page. Never use pure black.
02 · SurfaceCards and panelsThe default container for readable information.
03 · ElevatedMenus and active layersReserve for controls, popovers, and temporary elevation.
SuccessText, icon, border, and soft feedback surface
WarningText, icon, border, and soft feedback surface
DangerText, icon, border, and soft feedback surface
InformationText, icon, border, and soft feedback surface
StructureComponent anatomy never changes between themes.
ContrastBody text meets 4.5:1; controls and large text meet 3:1.
ElevationUse surface contrast and borders before adding shadows.
ColourBrand and semantic colours communicate meaning, never decoration alone.
Shared coreSame component anatomy and behaviour everywhere.
Customer adaptation44 px targets, more space, coral secondary emphasis.
Business adaptationBookings-density desktop controls, 40 px mobile targets, denser composition, sage support.
Quiet Premium · Shared
Core components
One visual language, one interaction model, and one implementation for every active web product.
Actions
Business desktop controls: Bookings is the canonical pattern. Toolbar actions, search fields, selects, filters, and icon controls use the compact 34 px rhythm; pagination uses 30 px and the single primary create command may use 28 px. Every control returns to at least 40 px on mobile. Repeated row actions stay white and outlined with a 14 px Lucide glyph and 1.75 px stroke.
Inputs and choices
Search existing customers or continue as walk-in.
Enter a valid email address.
Modes and status
ConfirmedPayment dueConflictWaitlistSelectedDraft
Feedback
Booking confirmed
The customer has received their confirmation.
This time overlaps another booking
Continue only when the business accepts the overlap.
We could not save the change
Your previous information is still available.
Loading and empty states
Loading content...
Nothing here yet
Add the first item or adjust the current filters.
Canonical icon language · Lucide
Icons and meaning
One approved symbol for every repeated action, destination, object, and status.
LIBRARYLucide only
Product UI uses one outline icon family.
STROKE1.75 px
The same visual weight across customer and business.
SIZES14 / 16 / 18 / 20 / 24
Use 14 only for dense business row actions.
BUSINESS ROW34 / 14 px
Bookings is canonical: white outlined controls; 40 px on mobile; never filled burgundy.
CUSTOMER TOUCH44 px
Customer icon actions retain the accessible touch target.
ICON BUTTONSLabel and tooltip
Every icon-only control needs an accessible name.
BRAND MARKSOfficial assets
Google, Apple, and Microsoft marks are the only style exception.
BROWSER TABRèboo mark
Every active Rèboo web product uses the canonical square favicon.
Navigation
Stable destinations and product areas. These meanings do not change between customer and business products.
Overview
Home or business overview
Bookings
Booking records and booking management
Calendar
Schedule and date-based work
Customers
Customer directory and customer accounts
Staff
Team members, roles, and staff management
Inbox
Messages and communication inbox
Services
Services, categories, or product modules
Bookable Items
Rooms, equipment, and other bookable items
Intelligence
Reporting, trends, and performance
Promotions
Discounts, offers, and promotions
Finance
Revenue, cash, and financial areas
Documents
Receipts, invoices, and expenses
Settings
Product and account configuration
Help
Help, support, and guidance
Actions
Commands that change, find, move, or reveal content. Destructive actions never reuse a neutral action icon.
Add
Create a new record or add an item
Menu
Open the primary navigation on compact screens
Search
Find records, places, or services
Filters
Open controls that narrow a visible result set
Refine
Tune multiple options or preferences
Edit
Modify an existing record
Delete
Permanently remove a record
Archive
Remove from active use while preserving it
Duplicate
Create a copy of a record
Download
Download or export data
Upload
Upload or import data
Move up
Move an item higher in an ordered list
Move down
Move an item lower in an ordered list
Back
Return to the previous screen or step
Continue
Continue to the next screen or step
Previous
Move to the adjacent previous date or item
Next
Move to the adjacent next date or item
More
Open secondary actions
Undo
Reverse or restore the latest change
Link
Copy, connect, or open a linked destination
List view
Switch content to a list representation
Theme
Open or change the display theme
Scheduling And Content
Shared nouns used inside booking, discovery, profile, and operational experiences.
Time
Time, duration, or opening hours
Location
Address, distance, or selected location
Add person
Add a customer, staff member, or participant
Participants
People attending a session or shared booking
Business
Business identity or business account
Inventory
Stock, storage, and non-bookable inventory
Card payment
Payment method or card transaction
Email
Email address or email action
Message
Conversation, note, or direct message
Language
Language, locale, or public web presence
Image
Photography, gallery, or media upload
Rating
Customer rating, paired with a numeric score
Favourite
Save or remove a customer favourite
Notification
Notifications, reminders, and alerts centre
Show
Preview or reveal content
Hide
Hide content or conceal a value
Assistant
Rèboo AI assistance or a generated suggestion only
Status And Feedback
State indicators always appear with text when the meaning or consequence matters.
Selected
A selected option or completed local choice
Success
A successfully completed operation
Error
An error that needs attention or recovery
Warning
Conflict, risk, or confirmation warning
Information
Helpful contextual information
Restricted
Permissions, privacy, or locked access
Unavailable
Unavailable time, disabled availability, or blocked access
Loading
Short local progress beside a visible action label
Close
Dismiss an overlay or clear a removable value
Settings is not Refine
The gear opens product or account configuration. Sliders tune visible options or preferences.
Filter is not Refine
Filter narrows results. Refine changes several display or preference options.
Close is not Delete
X dismisses an interface. Trash permanently removes a record.
Archive is not Delete
Archive preserves a record outside the active working set.
Arrows are not Chevrons
Arrows move through a flow or reorder. Chevrons step between adjacent items or dates.