Guest experience platform for hotels.

11 Components

The union observed across 75 twins

Mirrors the ShadCN vocabulary plus the Guesteria-specific variants the product actually ships (status split-buttons, the five-star + optional-comment rating, verb-coloured staff CTAs, the .guest-chip room-row, the operator's merge-field composer). Each family below is tagged by the surface it belongs to — Front-Desk, Guest, or Both; the staff app is a third surface and is called out where it diverges.

Buttons — Both

CTA colour routes by SURFACE and by VERB, not by actor. The guest primary is dark navy (--brand-800 #2D2F44) on every guest screen sampled - "Next", "Pay now", "Back to Dashboard", "Confirm", "Decline", "Upgrade room type" (Guest/Guest - My requests1.png, Guest/Guest - Pre-check-in-Step 8.png, Guest/Guest - Chats-Request by menu.png). The staff primary is full-width and coloured by the VERB, three hues in one card component on one screen: Get blue, Start orange, Finish green (Staff/staff - Dashboard.png). The console's manager action is the status split-button (11.2), and its create actions are violet (Front Desk/FD - Requests list - Guest.png, "+ Guest service" / "+ Internal service"). Violet marks the AMOUNT, the unread count, the active-nav fill and the translation chip - never the pay action.

The actor-routed variants .btn-staff and .btn-guest are NOT shipped. No screen carries a Skyline-blue "ordinary staff CTA" or an Earthy-brown "ordinary guest CTA"; they survive in the stylesheet as legacy role aliases only. Do not reach for them when building a screen.

Staff verb buttons - one hue per verb, same component, same screen (Staff/staff - Dashboard.png):

Legacy aliases, kept in the stylesheet and shipped on no screen:

Split-button (manager actions) — Front-Desk

A label + caret manager action whose primary segment is the NEXT state and whose dropdown holds the others. The fill follows the status only at the TERMINAL states. Set, Approve and To Do all render in the same desaturated slate (--ctx-1-700 #6D82A3); only Done is green and only Canceled is red (Front Desk/FD - Requests list - Guest.png, Front Desk/FD - Requests list - Internal.png). At a terminal state the button greys out entirely. The caret half opens the dropdown of the other statuses.

Primary — sizes

Primary — states

Secondary — sizes

Secondary — states

Tertiary — sizes

Tertiary — states

Ghost — sizes & states

Destructive — sizes & states

Icon treatment

Label-only, icon-only (square), leading icon, trailing icon. Icon is 14-16px; padding tightens for icon-only.

Form fields — Both

Label and helper both sit on the Caption step - 13/18, --text-secondary for the label at 500, --text-tertiary for the helper. There is no 12px step on the master scale (dmd 4); the step below Caption is Micro at 11/16. Required fields carry an asterisk. Idle focus is desaturated - a --focus-ring border plus a --focus-ring-soft glow on a white background, never the saturated --brand-600 border or a --brand-50 fill. Committed controls (checked checkbox/radio, toggle ON, slider fill/thumb) fill --control-active (#4E4670), not the CTA violet.

Brand mark in the shell — Both

The header .nav-brand carries the REAL Guesteria full lockup - the shipped assets/logos/guesteria--logo.svg (navy knockout), or assets/logos/guesteria--logo-light.svg (off-white knockout) on a dark ground - set at ~24px tall. Never an icon-plus-wordmark composition fabricated from the bare circular mark - that is struck at logo 4. Which file goes on which surface is the logo artifact's own table at logo 3. In the shell the standalone assets/logos/guesteria--icon.svg badge is the app / favicon slot; off product it may also stand in as the SHORT logo at small or square scale.

shell header, light ground

shell header, dark ground

app / favicon / strict slot only

Tabs — Front-Desk

Two controls, not one strip. The centered QUEUE TABS are a three-way segmented control over the object kind; the All / Priority pair is a separate segmented control in the table TOOLBAR below them, beside the Filters chip, the list / kanban / calendar view switcher and the two create buttons (Front Desk/FD - Requests list - Guest.png). Merging them into one four-tab strip loses the fact that a queue and a filter are different axes.

Breadcrumb

INFERRED, not observed. Neither console screen carries a breadcrumb - both identify location with the top-bar page title plus the active rail item (Front Desk/FD - Requests list - Guest.png, Front Desk/FD - Chats 3.png). The pattern is drawn here because the console has a Management > Staff > person depth that needs one; treat it as a proposal.

Pagination

Sidebar nav — Both

The console left nav rail stays white, never a colored block. Top to bottom: the "Guesteria" wordmark + chevron; a property / workspace switcher card (property name "Verde Canario" + thumbnail + chevrons); then grouped nav. Group eyebrows are NOT tinted by meaning. Guests, Inbox and Management all render their eyebrow in one neutral grey; the only coloured item in the rail is the ACTIVE one, and it takes the brand violet regardless of which group it sits in (Front Desk/FD - Requests list - Guest.png, Front Desk/FD - Chats 3.png, FD_Settings/FD_Settings - Pre Check-In-Step 7.png).

Guest-app navigation — Guest

The guest app carries its own navigation anatomy: a bottom tab bar, a per-screen top app bar, and a slide-in drawer. The drawer DUPLICATES the tab bar rather than extending it, and the overlap is partial. Room, My Stay and Activities sit in both. Concierge and Requests - two of the five tabs - are in the tab bar ONLY; there is no Requests item in the drawer. Hotel and Hotel Services are in the drawer only. A guest who learns the app from the drawer never finds the chat (Guest/Guest-Dashboard+Sidebar1.png). Preserve the asymmetry.

bottom tab bar

5 tabs - Room, Activities, Concierge, Requests, My Stay - with a center emphasized circular "Concierge" tab linking to reception chat. A floating rounded surface. Concierge and Requests live here and nowhere else.

▢Room ▲Activities ●Concierge ■Requests ★My Stay

top app bar (mobile)

Circular back button, centered screen title ("Concierge", "Pre Check-In", "Scan"), language pill (flag + "EN") at right.

← Concierge ▢ EN

← Pre Check-In ▢ EN

← Scan ▢ EN

slide-in drawer

Brand header (circular hotel logo + name) + collapse toggle, a search field, a user block, a nav list with leading line icons and an expandable "Hotel" item, and a footer with a language switcher, "Download App", and Terms / Privacy.

Verde Canario Hotel ⇤

AS Alex Smithalex.smith@example.com

▢Room ▤My Stay▾ ●Hotel▴

Wi-Fi Rules Info FAQ Map Amenities

♡Hotel Services ▲Activities

ENG ▢ Download App Terms / Privacy

Dropdown menu — Front-Desk

Global search — Both

Guesteria does not ship a command palette. Its console equivalent is a centered global search field in the top bar, present on every console screen, plus a per-list search inside panels; the guest drawer carries its own full-width "Search" input. Advanced search behavior below is illustrative - low-confidence, only the field itself is observed.

Dialog (modal) — Both

Centered, ~480px max width, 16px radius, --shadow-xl, scrim --surface-overlay. Primary CTA right of the footer, cancel at left.

Right-side panel — Front-Desk

Bottom sheet (mobile) — Guest

Use for guest action menus and currency/option pickers where a dropdown would clip. Placement is inferred from the mobile-native pattern requirement, not directly observed in a twin.

Popover, tooltip, hover-card — Front-Desk

Toast / notification — Front-Desk

~12px radius, --shadow-lg. Auto-dismiss info/success; keep error until dismissed.

Cards — Both

Data table — Front-Desk

The shipped queue runs THIRTEEN columns in this order: row checkbox, priority marker, Name, Rooms, Requests, Created, Due date, Status, Created by, Responsible, Payment, the manager's action split button, and an overflow ellipsis (Front Desk/FD - Requests list - Guest.png). There is no money on the row. The guest's own card carries the price and "Pay now"; the operator gets a Payment PILL - "Unpaid" red, "Paid" green - riding beside a separate status pill, so a request can be Approved and Unpaid at once. The abridgement below drops Created / Due date / Created by / Responsible for width; the priority marker demonstrates both of its states (an orange filled circle for high, a grey outline for normal). Sortable columns with up-arrow sort glyphs, select-all + row checkboxes, hairline row dividers, sticky header, and a per-row action cluster. Body 14/20; column headers muted gray. The guest cell is the .guest-chip component, and it is a THREE-COLOUR cluster, not one tint: a warm sand ROUNDED-SQUARE avatar tile carrying the initials, a NEUTRAL grey room-number pill overlapping its lower edge, the guest name in near-black, and the room-type code in the warm olive --ctx-2-700 (Front Desk/FD - Chats 3.png, enlarged). The manager action is the split-button, slate at the intermediate states and status-coloured only at Done and Canceled (11.2).

The two avatar shapes are the opposite way round from what a reader expects. A STAFF or operator row takes a CIRCULAR avatar - a photograph where one exists - with a grey role caption under the name and no room tag (Front Desk/FD - Requests list - Guest.png, the Created by column; Staff/staff - Chats.png). The GUEST-chip takes the rounded SQUARE tile with initials and the room pill. Code / IDs: reservation IDs render in mono with tabular numerals - 2947594234 - and so does every amount where an amount belongs, which on the console is the guest's request detail and never the queue row.

Guest-chip inventory — Front-Desk

One component, three room types. The rounded-square avatar tile carries the initials in warm sand, the neutral grey tag near its bottom edge carries the room number, and the small uppercase code carries the room type in warm olive. Observed codes: FML, PCP, STC, ST-C, LSV, XT11, SGL, PLX (Front Desk/FD - Chats 3.png, Front Desk/FD - Requests list - Guest.png). The COMPONENT is console-only - the avatar tile plus the overlapping room pill plus the code line is an operator's addressing device. The room NUMBER and the room-type CODE are not console-only: the guest stay card reads "Family (FML) Room #312" and a staff task card reads "Room: #112 FML" (Guest/Guest-Dashboard+Sidebar1.png, Staff/staff - Dashboard - Listed Task.png).

Data table — ranked and scheduling variants

A ranked variant shows Top-5 with progress bars; a scheduling variant is a weekly grid.

Avatar & avatar group — Both

Shape encodes WHO, and it is inverted from the intuitive reading. Round = staff, operator or team - a photograph wherever one exists, with a grey role caption. Rounded square = a GUEST, initials on warm sand, carrying the room pill. Never draw a guest round or a colleague square.

Progress & skeleton — Both

Accordion — Guest

Badges, pills & chips — Both

Additional chip types from the product: removable preference tags; "TOP" / promo badges (orange) on service cards; language pills (flag + "EN"); date-range chips; the gray-total + violet-unread dual count badge in the nav. Filter chips ("All" / "Priority") are pills with an optional trailing "x"; the selected chip uses the violet variant.

Inline highlight .hl — Both

The inline highlight tag (.hl) is a separate primitive - NOT a badge. Use it sparingly to focus a PHRASE inside running copy with a contrast tint behind the text: .hl (violet) for a brand rule, .hl-staff for a staff rule, .hl-guest for a guest rule. Never a status signal.

System banners — Both

Distinctive: KPI stat tiles — Front-Desk

Distinctive: Activity Log — Front-Desk

Distinctive: media overlay card — Both

Image & interaction handling — Both

object-fit: cover

Photos use cover: the frame is filled, the crop is accepted.

object-fit: contain

The in-product phone-preview mockup uses contain: nothing of the screen is cropped away. Decorative images take alt="" and role="presentation"; everything else always carries an alt. Images use srcset with 1x / 2x / 3x.

hit targets & non-colour affordance

36 44 ✓ Approved ● New ✕ Canceled

Hit targets: 44px is the floor on touch (the guest app is mobile-first). The desktop console is deliberately denser and its controls measure below that - .btn-sm 28px, a dropdown row 32px, the split button ~30px, a rail item 36px - because there the whole ROW is the target, not the label. Do not read 36px as a desktop minimum. Every interactive element has a non-colour affordance (icon, underline, border) in addition to colour - status pills carry a glyph and a label, not colour alone.

Distinctive: content over imagery

Lift copy off a photographic or coloured surface three ways, same primitives as the creatives but web-tuned: a RHYTHM tint over the image (a colour-coded overlay), a LIQUID-glass panel (frosted - over a dark image use .glass--ink so the light text reads), or a SOLID .island callout (a dashboard announcement). The island radius tracks its type; glass sits over a ground only.

Rhythm tint

A real photo under a sub-prime wash, colour-coded by actor.

Liquid-glass panel

Frosted over a real photo: it reads through the blur, the light text stays legible, the edge catches the light.

What's new

Solid island callout

A dashboard announcement - the SaaS-adapted cousin of the creative island, drawn from the rhythm.

Liquid over a colour field

A frosted panel over a colour ramp - the dark frost keeps the light text crisp.

Rhythm tint

A colour field, no photo - the sub-prime wash carries the copy.

Liquid CTA over a photo

The new .btn-liquid rides the frost - the same material as the panel.

Get startedLearn more

Distinctive: liquid + rhythmic buttons

.btn-liquid wears the .glass material on a button: a light frost takes a DARK label (over a light / photo-light ground); --ink is a dark frost with a LIGHT label (over a dark ground / photo); --ctx1 / --ctx2 mix a rhythm tone into the frost. A library glyph rides INSIDE the button (stroke=currentColor, so the icon recolours WITH the label as the rhythm tone changes). Like all glass, it sits over a GROUND, never the plain canvas.

Light frostFront-DeskGuest

Ink frostOver a photo

Behaviour within the color rhythm: the SAME action (icon + label) recoloured by each rhythm tone - only the frost tint + the inherited text/icon colour shift, never the geometry.

Distinctive: liquid blocks - colour & image

The liquid approach beyond the buttons: a frosted .island.glass wrap-block + a liquid .tagwrap focus-wrap, over a COLOUR rhythm field and over a darker field. Light frost -> dark text over a light field; .glass--ink -> light text over a dark field / photo.

Distinctive: empty state — Both

Distinctive: offer / service cards — Guest

A guest offer card is a PHOTO card, not a pricing-plan column. The photo is the card; over it sit an orange TOP badge and a grey translucent category chip; under it the name, then the price in brand violet. They lay out TWO-UP, in the catalogue grid, under a horizontal Featured / Recommended carousel band (Guest/Guest - Activities_grid.png, Guest/Guest - Dashboard - Check-in State.png). There is no feature list and no plan column on any guest screen - the earlier .feature-list / pricing-column reading was template residue, and it is withdrawn. The one card that carries a spec row is the upgrade offer, which sets two pills side by side instead of a bulleted list (Guest/Guest - Pre-check-in-Step 3.png).

TOP Room Service

Breakfast in the room

45 EUR

Family In-house

Baby Crib x2

40 EUR

Photo, badge, chip, name, violet price - in that order, two-up. The commit action is NOT on the card: it lives on the request detail the card opens, and it is the navy guest primary ("Pay now"), never a per-card button row. A catalogue screen is a Featured / Recommended carousel band above this grid.

12 Layout

Spacing & rhythm

Spacing and grid are inferred (the source defines no numeric spacing tokens; only "rounded / pill" plus approximate twin px). Base unit 4px - every spacing token is a multiple. Section rhythm 64px; subsections 32px; in-card stacking 16px. The console runs dense but gridded with generous card padding; the guest app runs roomy with one content card high on the screen.

Containers, gutters & grid

Horizontal wave divider

A horizontal rule built from the brand line (assets/curves/divider-1--wave.svg, traced from the divider-line asset): an asymmetric monoline that runs full 100% width and BLEEDS off both side edges, while the whole wave stays visible top-to-bottom. Height is a viewport tier (.dw-sm / .dw-md / .dw-lg = 10 / 20 / 30vh). The stroke is a near-tone of the ground. Three variants keep it from reading as a repeat, and all three are rendered below, in file order: asymmetric divider-1, calm divider-2, busy divider-3. It is a DERIVED full-width rule, so preserveAspectRatio="none" is allowed - not a cropped-corner brand curve. It is the ONLY sanctioned exception to the slice / named-edge law.

1 of 3 - divider-1--wave.svg, the ASYMMETRIC variant and the default: two shallow undulations that DRIFT upward across the width, leaving the left edge low and arriving high at the right. It is the DEEPEST of the three - the largest vertical travel across the 121-unit box. Use it where the sections above and below carry different weight, since the drift gives the rule a direction. All three are drawn here at .dw-md = 20vh, so the only thing that changes between them is the path.

2 of 3 - divider-2--wave-calm.svg, the CALM variant: one shallow S, near-symmetric about the centre and returning to within a hair of the height it started at. It is the QUIETEST of the three - the least vertical travel. Use it where the divider must not compete - between two dense sections, or under a heading that already carries a curve.

3 of 3 - divider-3--wave-busy.svg, the BUSY variant: the same one-S shape as the calm, but deeper, and flattened at crest and trough - both control pairs sit at one height - so it holds at the extremes and turns fast through the middle. Use it where the divider is the only ornament in view. Never run the same variant twice in a row - three variants exist so that consecutive dividers do not repeat.

14 User-story blocks

Top journeys, rebuilt as blocks

No one-off styling; every block is traceable to a real screen.

Rule: a story block ships only when it cites the source screen it reconstructs. No screen, no block.

16 Responsive

Breakpoints & touch

Six breakpoints. The guest app is mobile-first (xs-sm); the operator console is desktop-first (lg-2xl). Breakpoints are inferred; the PRD requires platform-native mobile patterns. Touch targets are 44px minimum on md and below.

17 Dashboard preview

How the primitives compose

The real Guesteria Front-Desk dashboard: a WHITE left nav rail with NEUTRAL group eyebrows and one violet active item + top bar + the central dashboard grid + a collapsible right "Guest Experience" panel, inside a rounded dark device frame. The page ground is white; the cool tint appears only on the low-detail panel headers. Each component is coloured by the object it carries - staff/ops counts Skyline, the guest in each work-list row a .guest-chip (warm tile, neutral room pill, olive code), the manager action a SLATE split-button, the dense table on white (Front Desk/FD - Dashboard.png).

18 Agent prompt guide

Quick token reference

brand violet   #826AFF
brand deeper   #532DF5
brand darkest  #2D2F44
violet soft    #C7BCFF
violet tint    #F2F0FF
focus ring     #A59CD3   (idle field focus border - desaturated, never the CTA)
control active #4E4670   (checked/toggle/slider fills - desaturated, never the CTA)
guest CTA navy #2D2F44   (--brand-800: EVERY guest primary - Next, Pay now, Confirm)
split slate    #6D82A3   (--ctx-1-700: Set / Approve / To Do; only Done green, Canceled red)
staff verbs    blue Get, orange Start, green Finish - one hue per verb, staff app only
.btn-staff     #2E4258   (LEGACY alias, not shipped on any screen)
.btn-guest     #443F2C   (LEGACY alias, not shipped on any screen)
Skyline blue   #A2B8D6   (ctx-1: staff/ops data)
Earthy beige   #CAC19F   (ctx-2: guest data + the guest-chip avatar tile)
olive / taupe  #878065   (--ctx-2-700: wizard progress; ROOM-TYPE CODES where the surface renders them warm)
room pill grey #6E6B79   (--ctx-3-600: the room NUMBER, console only)
guest price    #826AFF   (--brand-600, in product #826BFF - violet, never neutral)
guest canvas   #EAE7E1   (--surface-guest: the third surface token)
staff canvas   #F3F7FC   (--ctx-1-50: the inverse of the guest ground)
console canvas #FFFFFF   (#F4F4F5 is a PANEL fill inside the page, not the ground)
card           #FFFFFF
text           #0A0A0B
muted          #52525B
line           #E4E4E7
success        #13B981
warning        #F59E0B
error          #E11D48
info           #2563EB
star gold      #F5B100
radius card    12 (console) / 16 (guest)
radius btn     8
shadow card    0 1px 2px rgba(10,10,11,0.04)
shadow modal   0 24px 64px rgba(10,10,11,0.18)
font display   Codec Pro
font body      Source Sans 3

Generation rules & fast cautions

What an agent generating a Guesteria surface applies, and what it must never do.