Design Direction

Guest experience platform for hotels.

Unify a hotel's communications and service into one calm, managed flow so each guest feels personal care at scale. Hospitality first, technology second; automation that augments staff, never replaces it.

Inspect components Read the spec
A bright workspace, laptop and notes on a desk
in context
Real surfaces, real photography.
A brand wash over a workspace photo keeps the accent on rhythm.
palette rhythm
1 Primary
2 Sub-prime
3 Structure
4 Subtone
Frosted over a field.
A liquid panel lifts copy off a dark ground - the frost refracts the field, the light text stays legible.
lockup
type
Aa
Display / Body
context A
slate · support
context B
stone · support
app icon
on-brand
Aa
display / body pairing
grid
4px
spacing base step
contrast
AA
WCAG 2.2 target

00 Source contract

What this spec is built from, and where it stops

Source basisBrand Guidelines (palette, type, identity, visual style), the official Logo Guide (25-01-20, 27 pages), Product Requirements Document (surfaces, modules, personas, UX rules), marketing / sales / demo material, buyer ICP, live marketing site, and the in-product screenshot twins (Front-Desk console + guest app + 2 brand SVGs).
Use forThe hotel operator console (Front-Desk and manager web app), the guest app (mobile, mobile web, native, WhatsApp), the staff app, and brand-aligned marketing pages.
Do not use forPrint collateral, signage and OOH, packaging, hardware UI, or motion-graphic identities; the type and density rules here are tuned for screens.
AudienceProduct, design, and engineering teams building Guesteria's three product surfaces, plus marketing teams extending the brand into web.
Evidence confidenceHIGH for color palette, typography families, identity, and the visual language (all directly sourced); MEDIUM for layout and motion (INFERRED FROM OBSERVED PIXELS); LOW for the full numeric type scale and a canonical tagline (only the 48 / 32px hero sizes are sourced; no single tagline is canonical).
Known gapsNo full numeric type scale, weights, or line-heights beyond the hero sizes; no numeric radius / spacing / elevation tokens; no canonical tagline; no dark-mode specification in source; locale rules beyond auto-translate.

This system is for SCREENS. Print, signage, OOH, packaging, hardware and motion identity are out of scope.

Layout and spacing numbers carry the MEDIUM rating above: the 4px base unit, the 64px section rhythm, 32px subsections and 16px in-card stacking (carried into the applied UX/UI facet) are inferred from observed pixels, not published by the brand.

01 Brand identity

Guesteria at a glance

The name is guest + -eria ("a guest place", like cafeteria or pizzeria) - the guest's environment. The logo is an icon plus the "Guesteria" wordmark; the icon reads as a reception bell or a waving concierge. Rounded forms throughout stand for comfort and the "smoothing of corners" in service. The single-ink mark is navy #2D2F44; the knockout wordmark sits in off-white on a dark #2D2F44 capsule. (Brand Guidelines L57-72; the navy is the Royal Glow icons/backgrounds stop, L95.)

Mission
Unify a hotel's communications and service into one calm, managed flow so each guest feels personal care at scale.
Descriptor: Guest experience platform for hotels
Audience
Three product surfaces under one brand: the Front-Desk / Tenant / Admin console (desktop, full-bleed dashboard width, one shell shared across three roles), the guest app (mobile, web, WhatsApp), and the staff app (mobile, WhatsApp) - its own surface, not the console on a phone and not the guest app for staff.
Primary surface: Front-Desk operator console
Values
Hospitality first, technology second. One calm managed flow out of chaos. Automation that augments staff, never replaces it.
Tone-of-voice anchor

Logo

The mark belongs to the logo artifact. Every shipped file is at logo 2, the surface-to-file table at logo 3, and what breaks the mark at logo 4.

Disc badge, four inks (logo 2.3) violet: no book page approves it
Lockup, light ground (logo 2.1)
Lockup, dark ground (logo 2.1)
On brand background (logo 2.1)
Capsule plate, four inks (logo 2.2) violet: no book page approves it
Bare mark, three inks (logo 2.4)
Store tiles, square ground - the store masks it (logo 2.6)
Favicon - tab size (logo 2.5)
Single-ink lockup (logo 2.5)

Use the brand's original SVGs only; the short mark is never redrawn or distorted (logo 4). An outline mark is not produced - p06 strikes a hollow lockup out (logo 4). Clear space (logo 3.1) and the size floor (logo 3.2) are derived there, not quoted - the logobook publishes neither. Every shipped file is depicted above, each on a ground it is approved for; the downloads are at logo 2. Two of them - the violet capsule and the violet disc - ship without a book page approving them, which is the console's own open item at logo 5 and not a licence here. Downloads and the open items - including the files no book page approves and the vendor-to-shipped name crossing - are at logo 5.

Personas

The platform answers to four user types, drawn from the PRD (L53-55, L312-391) and the buyer ICP.

GM
Hotel buyer / General Manager
Owner or GM, 1-5 properties
Owner or GM of a 3-4 star hotel or small group (1-5 properties, 30-120 rooms, sweet spot 50-80; European tourist cities). Wants more revenue from guest services with no added operational load, and predictable, scalable service without chaos. Fears complex software. Buying cycle is short (1-4 weeks); approves the purchase, then rarely logs into the console day to day. Design implication: the console must demonstrate value at a glance (KPI tiles, revenue analytics) and feel effortless to adopt - "set up in days, not months." (ICP; homepage L29.)
Value-at-a-glanceLow-effort adoption
FD
Front-Desk Agent / Manager
Primary console operator
The primary in-product operator on the hotel side - receptionists, concierges, reception managers. Lives in the dense console: triages guest chats across WhatsApp and the app, approves and assigns requests, manages reservations, statuses, and analytics, and coordinates staff. Works under peak-hour pressure and language barriers. Design implication: dense but scannable layouts, color-coded statuses, split-button actions (Approve / Done), auto-translate, and merge-field templates to answer fast without losing the personal touch. (PRD L160-168, L328-352.)
Dense + scannableMultilingual
GU
Guest
Traveling, often arriving tired
The hotel's customer, traveling and often arriving tired. Uses the guest app (mobile, web, or WhatsApp) to check in fast, find hotel info, order services, and chat with reception in their own language. Pains: not knowing what the hotel offers, language barriers, surprise charges, slow replies. Design implication: a warm, airy, low-effort interface - big rounded cards, a single navy primary action per screen, transparent prices set in the brand violet, status visibility, and a guided wizard rather than dense controls. (PRD L215-235, L354-379.)
Warm + airyOne task per screen
ST
Staff
Housekeeping, kitchen, porters
Housekeeping, cleaners, waiters, kitchen, porters, bell, and tech staff. Use a lightweight staff app (mobile + WhatsApp) to receive clear tasks, track and complete them, see their schedule, and confirm details with managers and guests. Pains: tasks lost in manual hand-off, unclear instructions, language barriers, no recognition. Design implication: task lists with explicit statuses and reminders, a readable weekly schedule grid, and plain task formulations that need no extra explanation. (PRD L170-176, L381-391.)
Clear tasksSchedule grid

02 Visual theme & atmosphere

Calm, caring, precise

The core motif is the smooth line and the soft, rounded shape - cards and panels that recall hotel furniture, doorways, and architecture, set in large calm color fields with minimal icons. Color is reserved for meaning: a single violet accent carries value and key actions, with blue for operations and beige for comfort, all on neutral backgrounds. Modern but never techno-aggressive: it should read as a well-trained service team, not "another IT system." (Brand Guidelines L35-39, L112-120.)

One brand spans THREE tonally distinct surfaces: the Front-Desk / Tenant / Admin console is a white desktop surface, the guest app is a warm mobile surface, and the staff app is a cool mobile surface that is neither of the other two. All three share the violet accent and the same status pill, and diverge in page ground, navigation shape and control size - never flattened into one uniform temperature. The ground is the only thing that carries temperature; all three put white cards on it. (Front Desk/FD - Requests list - Guest.png, Guest/Guest - Dashboard - Check-in State.png, Staff/staff - Dashboard.png.)

Three canvases
The console page ground is WHITE (--surface-canvas #FFFFFF), gridded, information-rich, white cards on it; the cool blue-grey (--surface-sunken) is a GROUPED-PANEL fill inside the page, never the ground (Front Desk/FD - Requests - View request -Guest.png, the fact panel behind Priority / Room / Guest). The guest app sits on a warm bone canvas (--surface-guest #EAE7E1), roomy, big rounded cards, photograph-led. The staff app sits on a cool off-white canvas that measures as --ctx-1-50 #F3F7FC - the arithmetic inverse of the guest ground, blue channel above green above red where the guest ground runs red above green above blue (Staff/staff - Dashboard.png).
Console: whiteGuest: warm boneStaff: cool off-white
What separates them
Four mechanics, not a colour swap. Photography weight: guest is photograph-led (full-bleed hero, photo catalogue cards), the console uses photography only as a 32-40px row thumbnail, staff sits between with a fixed-width photo strip down each task card. Navigation shape: guest, a floating translucent 5-tab bar with a raised circular centre tab; staff, a flat opaque 4-tab bar with no raised tab and no translucency; console, a permanent left rail with grouped sections and dual count badges. Control size: the guest primary is a full-bleed pill ~56px on a 446px canvas, the staff primary is full-width but ~40px, the console's equivalent is a ~30px split button in a 72px row. Radius carries ONE step of the split, not a second language - all three sit in the same gentle-radius family with pills everywhere, and the only measured difference is the card corner: ~12px (--radius-md) on the console, ~16px (--radius-lg) on the guest app, both inferred from twin pixels. (Guest/Guest - Dashboard - In stay State.png, Staff/staff - Dashboard.png, Front Desk/FD - Requests list - Guest.png.)
Ground, photography, nav, control size
Character
Calm, confident, precise, caring, without pomp or fuss. The reference vector is the brand's own service-grade restraint - the smooth line and rounded form of the bell-swirl mark, applied with discipline. (Brand Guidelines L43, L112-120.)
Atmosphere keywords
Calm Caring Precise Reliable Modern
Photography
Real property imagery. IN PRODUCT it runs untinted and unmasked inside a rounded rectangle - and that is where "raw" stops. The Hotel Info header is the one BARE case: untinted, unmasked, unbadged (Guest/Guest - Hotel Info.png). Every CATALOGUE thumbnail carries furniture over the photo - the orange TOP badge on each Featured card and two overlay chips on each grid card, with no bare card photo on the screen (Guest/Guest - Activities_grid.png). The tint / disc-badge / curve-mask treatments are the OFF-PRODUCT register. When the lockup sits over a photo, it knocks out white over a 30% dark mask (logobook p07).

03 Color

Palette & roles

Color encodes Guesteria's product story: Service + Hospitality + Efficiency leads to Magic. Violet is the one magic / value accent; Skyline blue carries staff and operations; Earthy Comfort beige carries guest comfort and reservations; all sit on a neutral monochrome base. The ramp below anchors on the violet from the Brand Guidelines (#826AFF); in-product captures show close variants (#826BFF, #7C5CFC, #6C5CE7) which are implementation evidence, not new tokens. Status colors and brand colors never mix in the same component. (Brand Guidelines L80, L84-98; website/site-style-signals L20-26.)

Primary

Royal Glow violet - the one magic / value accent, a five-stop ramp anchored on #826AFF. It carries value and priority: one PRIMARY per composition, never the field for long reading.

Royal Glow 50
#F2F0FF
Active-nav fill, callout backgrounds
Royal Glow 200
#C7BCFF
Hovers, chips, focus ring on violet
Royal Glow 600
#826AFF
Guest price, unread counts, the 3px active-nav left bar, translation chip
Royal Glow 700
#532DF5
CTA hover / pressed
Royal Glow 800
#2D2F44
Icon backgrounds, dark chrome

Contextual subpalettes — role-bound

Two context subpalettes, each BOUND to the OBJECT KIND a component carries, not to the surface it sits on: Skyline blue for staff and operations data, Earthy Comfort beige for guest data. The roles COEXIST inside one block - the surface sets only the CANVAS temperature, never the component color. On the white operator console the guest-chip's avatar tile renders in the warm guest context while the unread count and the active-nav fill stay violet, all in the same row (Front Desk/FD - Chats 3.png). The binding is narrow by design: it applies to the smallest element that carries the distinction - a create-button fill, a chip outline, a two-letter avatar tile - and every surrounding container stays neutral.

CTAs do NOT route by actor. There is no warm guest-branded CTA and no blue staff CTA. The guest primary is dark navy --brand-800 #2D2F44 on every guest screen - "Next", "Pay now", "Back to Dashboard", "Confirm", "Upgrade room type" (Guest/Guest - My requests1.png, Guest/Guest - Pre-check-in-Step 8.png). The staff primary is 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 a split button coloured by the status it sets, and only at the terminal states (section 11.2).

Violet marks the AMOUNT, not the action. Every price on the guest surface is the brand violet - --brand-600 #826AFF, rendered in product as #826BFF (Guest/Guest - Activities_grid.png, Guest/Guest - Dashboard - In stay State.png, Guest/Guest - My requests1.png, Guest/Guest - Chats.png). "Pay now" beside it is dark navy with a card glyph. Violet's other jobs are the same across all three surfaces: unread counts, the active-nav fill, the translation chip's outline and label, and the create-a-service chip. It is never the field for long reading.

Context 1 — Skyline blue (staff / ops data):

Skyline 50
#F3F7FC
Ground / tint
Skyline 200
#D1DFF0
Borders on Skyline
Skyline 600
#A2B8D6
Staff / ops data - nav, badges, chart line
Skyline 700
#6D82A3
Hover
Skyline 800
#2E4258
Strong fill, dark staff / ops chrome - not a CTA

Context 2 — Earthy Comfort beige (guest data):

Earthy 50
#FFFDF5
Ground / tint
Earthy 200
#E3DCC7
Borders on Earthy
Earthy 600
#CAC19F
Guest data - chips, reservations
Olive / taupe 700
#878065
Wizard progress, headings, KPI mini-bars
Earthy 800
#443F2C
Strong fill, guest-data ink on Earthy tints - not a CTA

Text & surface

Text primary
#0A0A0B
Headings, body, guest name (the price is violet)
Text secondary
#52525B
Supporting copy, room-type names
Text tertiary
#71717A
Captions, helper, column headers
Surface canvas
#FFFFFF
Card body on all three canvases
Surface raised
#FAFAFA
Toolbar, sticky header, ivory base
Surface sunken
#F4F4F5
Grouped-panel fill INSIDE a console page - the page ground is white
Line default
#E4E4E7
Hairline, card border

Status

Success
#13B981
Approved, Done, Paid
Warning
#F59E0B
New, On Hold
Error
#E11D48
Canceled, Not sent, negative balance
Info
#2563EB
In Progress, Sent N days. "To Do" is a manager ACTION on the split button, not a status pill

Six status words ship, and Done is not one word across the three surfaces. The console queue reads New, In Progress, Approved, On Hold, Canceled; the guest app reads In Progress, Approved, Done - six words in all, spelled Canceled with one L on screen. "Completed" belongs to the Legend's own vocabulary ("Completed On Time"), not to a pill. On the guest app and the console, Done is the success family and there is no seventh word (Guest/Guest - My requests1.png, Front Desk/FD - Requests list - Internal.png). On the staff app the Done pill renders VIOLET, and the green pill on the same screen reads "Finished" - a status word this table does not otherwise carry (Staff/staff - Dashboard.png). Three clients, two meanings for one word: build the transition table so a status maps to a label per client, and do not assume Done is green everywhere. Payment is a second, independent pill (Unpaid / Paid) riding beside status, so a request can be Approved and Unpaid at once (Front Desk/FD - Requests list - Guest.png).

The complete color reference

The remaining literal values the rendered system already uses - the interactive layer, the rest of the text and surface ramps, the soft status fills, the shadow scale, the third (neutral) context slot, and the two Do / Don't card edges. None are new colors.

Interactive & accentHexRole
--accent-link#826AFFHyperlink, inline emphasis, merge-field tokens in chat
--accent-link-hover#532DF5Hyperlink hover
--accent-link-visited#6E64EDHyperlink visited
--focus-ring#A59CD3Royal Glow "key accents" step - 2px outer ring, 2px offset
Text & surface (the rest)HexRole
--text-disabled#A1A1AADisabled inputs, ghost labels
--text-inverse#FAFAFALong-form text on dark chrome (tooltip, footer). A FILLED button label is pure #FFFFFF, not this step
--surface-overlayrgba(10,10,11,0.55)Modal scrim
--surface-inverse#0A0A0BCamera / scan body, marketing inversions
--line-strong#D4D4D8Divider between sections
Status soft fillHexRole
--status-success-soft#D1FAE5Success pill / banner background
--status-warning-soft#FEF3C7Warning pill / banner background
--status-error-soft#FFE4E6Error pill / banner background
--status-info-soft#DBEAFEInfo pill / banner background
ShadowValueUse
--shadow-sm0 1px 2px rgba(10,10,11,0.04)Resting card, KPI tile
--shadow-md0 4px 12px rgba(10,10,11,0.08)Hovered card, dropdown
--shadow-lg0 12px 32px rgba(10,10,11,0.12)Toast, popover, legend
--shadow-xl0 24px 64px rgba(10,10,11,0.18)Dialog, drawer, phone preview

Elevation is near-flat throughout: cards read as flat sheets with hairline rows; only floating layers (toasts, dropdowns, the phone-preview mockup) lift.

Third context slot (--ctx-3-*) - neutral grey, and Guesteria BINDS it: the room-NUMBER pill on the console guest-chip is --ctx-3-600, the neutral half of a chip whose other half is warm olive (dmd 11). All three slots are in use:

Neutral 50
#F4F4F6
Ground / tint - spare
Neutral 200
#DBDADF
Borders - spare
Neutral 600
#6E6B79
BOUND: the room-number pill, console only
Neutral 700
#514F5A
Hover on the room pill
Neutral 800
#3B3942
Strong fill - spare

Do / Don't card borders: the success-tinted "Do" card edges in #6EE7B7; the error-tinted "Don't" card edges in #FECDD3. Status text on the soft fills reads success #065F46, warning #92400E, error #9F1239, info #1E3A8A; the destructive button hover deepens to #BE123C; the committed-control fill (--control-active) is #4E4670, never the saturated CTA.

Rhythm of colors

Every color sits in ONE of four tiers; a surface is "on rhythm" when each element draws from the tier its job calls for.

1 · Primary One magic accent. 600 + 700 hover - value / priority only, one per composition
2 · Sub-prime Actor support. a context / actor family (Skyline blue, Earthy Comfort beige) - supports the primary, never leads
3 · Low-priority Structure. lines, dividers, borders, wrappers, rules (structural ink #2D2F44) - never primary
4 · Subtone Grounds + backing. tints (#F2F0FF, #C7BCFF), washes, backing shapes, muted copy - recede behind content

Mandatory rhythm: one PRIMARY per composition; SUB-PRIME supports it; LOW-PRIORITY carries structure; SUBTONE carries grounds and backing.

Palette rhythm

A second, orthogonal layer: which PALETTE(S) and in which DIRECTION + FLAVOUR a composition draws from. Three palettes - Royal Glow violet, Skyline blue, Earthy Comfort beige - each a 5-stop ramp, plus the four mixes. LIGHT = a high-value ground; DARK = a low-value ground; CALM = adjacent near-tones (recede); CONTRAST = the 50 to 800 poles (pop). Each cell still obeys the four role-tiers inside it.

1 · Violet (Royal Glow) light / dark x calm / contrast Light-Calm Light-Contrast Dark-Calm Dark-Contrast
2 · Skyline (blue) light / dark x calm / contrast Light-Calm Light-Contrast Dark-Calm Dark-Contrast
3 · Earthy (beige) light / dark x calm / contrast Light-Calm Light-Contrast Dark-Calm Dark-Contrast

Mixing palettes - exactly ONE violet accent, the other palettes ground / support (a light row + a dark row each):

Mix 1-2 violet x Skyline Light: Skyline ground, violet accent Dark
Mix 1-3 violet x Earthy Light: Earthy ground, violet accent Dark
Mix 2-3 Skyline x Earthy - the calm, no-magic pairing Calm, no violet Dark
Mix 1-2-3 all three Two supports + one violet accent Dark

Color in space

Violet on violet One accent, one family. violet-50 tint on the violet-600 ground
Tint + ink Callout / active-nav fill. violet-50 field, violet-700 ink, violet-600 accent - one CTA only
Neutral canvas + ramp Structure first.
Navy inverse Off-white on navy. off-white #FFFDF5 and --brand-200 on navy --brand-800 chrome
Staff blue + guest brown Two audiences, one accent. staff --ctx-1-* guest --ctx-2-* violet action Skyline --ctx-1-* and Earthy Comfort --ctx-2-* sit side by side, each bound to its actor / data, with the shared --brand-600 violet as the one action accent across both. The two audiences coexist; the violet crosses the divide.

Rule: the saturated violet is the accent, never the field for long reading. Pair each fill with text from its own legible end of the ramp.

Dark mode

Low-confidence - the source ships no dark mode; all twins are light. If one is authored: invert the surface scale - canvas #0A0A0B, raised #18181B, sunken #27272A - and lift the violet to the near-tone already in the ramp, --brand-200 #C7BCFF, which measures 11.4:1 / 10.2:1 / 8.6:1 against those three grounds - comfortably AA. Lifting means LIGHTER: the light-mode --brand-600 #826AFF reads 5.1:1 / 4.6:1 / 3.9:1 and already misses AA on the sunken ground, and the visited-link #6E64ED is darker still (4.4:1 / 4.0:1 / 3.3:1), so it lowers contrast on all three. The four-tier rhythm still holds: a tint becomes a low-value ground, structure lines lift, the magic accent still appears once.


04 Typography

Type scale (inferred)

Codec Pro is the specified display face; Source Sans 3 is body. No Codec Pro font file has ever been handed over, so any live build falls back to Source Sans 3 until the org owner supplies it. JetBrains Mono / IBM Plex Mono carries code, IDs, and balances (inferred; no brand mono in source). The scale below is inferred and low-confidence - only the hero size (48px desktop / 32px mobile) is sourced.

Hero / 48-52px / 700 / -1.5%
One calm, managed flow.
H1 / 32-38px / 700 / -1%
Personal care at scale.
H2 / 24-30px / 700 / -0.5%
Hospitality first, technology second.
H3 / 20-28px / 600 / 0%
Guesteria design system.
Stat / 28-32px / 700 / -0.5%
Bold large numerals for KPI values.
Body L / 18-28px / 400 / 0%
Guesteria unifies a hotel's communications and service into one calm, managed flow, so every guest feels personal care at scale.
Body / 16-24px / 400 / 0%
Default product copy. Reserve Body L for guest-facing screens; use Body S for dense console tables.
Body S / 14-20px / 400 / 0%
Dense console tables and supplementary metadata sit here.
Caption / 13-18px / 500 / 0%
Metadata, helper text, and timestamps.
Micro / 11-16px / 600 / 4%
Section eyebrow

Tracking tightens as the type grows and opens as it shrinks: -1.5% at the 48px hero, -1% at H1, -0.5% at H2 and Stat, 0% across the body steps, and 4% at the 11px Micro step.

Typography principles

Hierarchy in use

Marketing Personal care at scale. A guest experience platform for hotels, tuned for calm. Body copy holds a comfortable reading line; the headline drops to a tight leading, and the eyebrow sets context above it without competing. Caption - metadata, timestamps, helper text.
Inverse Calm, confident, precise. One weight per step keeps the dark surface legible. Hierarchy survives the inverse: contrast comes from size and weight, not color. The accent stays a single violet tint. Caption on inverse stays above 4.5:1.
Your stay Breakfast in the room Served to your door, any morning of the stay. Guest-app card copy on a warm ivory --ctx-2-50 tint; in product this card is WHITE and the warm bone --surface-guest is the canvas under it. The price renders in the brand violet (--brand-600), set tight against the card title (Guest/Guest - Activities_grid.png). 45 EUR   one task, one clear price

The one sanctioned golden-ratio curve: a full-width .curve-divider, proportioned on the golden ratio and stretched wide, drawn at --curve-w-base in a near-tone --brand-200 (#C7BCFF) on the page ground, used between major sections with its mass opposite the heading. It belongs to the ONE family that sits outside the ten-curve canon: the DERIVED full-width rule, which stretches on preserveAspectRatio="none" and pins no named edge. That family ships in four shapes - this golden-ratio divider, plus the three traced wave variants divider-1--wave.svg (asymmetric), divider-2--wave-calm.svg and divider-3--wave-busy.svg, rendered at dmd 12.2. Nothing else is synthesized.

05 Visual language

One curved voice, three motifs

Guesteria's visual language is a SYSTEM of THREE motif families sharing one DNA: a single-weight, smooth-bezier, rounded-terminal curve, single-ink throughout. Source: the official Logo Guide (27 JPGs plus a line-narrative analysis); page 12 opens its chapter as "Brand graphic elements used to create visual images." The register here is CUSTOM, and it is explicitly OPTED IN, not defaulted off - Guesteria's own bell-swirl glyph, unrolled into a connecting line, and distilled into a line-built icon set. Anything past "smooth connecting line + bell-swirl mark + line-built icons in navy / violet / neutral" that the book does not show is flagged inferred, not sourced.

Pick a register
Strong Soft Simple Custom
STRONG = straight lines, hard edges. SOFT = rounded corners, soft turns. SIMPLE = a primitive (rectangle, circle, triangle). CUSTOM = a branded shape. One register per brand, carried everywhere. (Guesteria = CUSTOM, explicitly opted IN - its own bell-swirl mark, unrolled into the connecting line and distilled into the icon set covered below. The curve system is ON; nothing here defaults to a plain shape register.)
Nature
Whatever the register, the curve ORGANIZES space: it divides sections, threads a headline to its photo, underlines the active element as the one place the line turns solid accent, and counterweights a creative as its background mass. A single-weight line in --line-strong is the quietest form; the accent line switches to full --brand-600 only on the active element.
Applications
In-product: the line threads between content blocks and wraps BEHIND round photo cutouts like a bead on a thread. Social: an oversized loop bleeds off-frame as a background gesture on vertical story canvases. Small surface - app tile, apparel, door hanger: DROP the free line and let the icon alone carry the identity.

Rule across all three motifs - the mark, the connecting line, the line-built icon set: one accent device per view.

Motif 2 - the connecting line

The mark "unrolled" into a thread: a single continuous OPEN monoline, constant width, fully ROUNDED end caps, smooth curves only (no corners, no straight runs); it loops / crosses itself once but never closes; always a single flat color. The brand claims it "connects things together, across things." (logobook p01, p08, p12, p18, p19.)

Behavior
Bleeds off the canvas edge to imply continuation (the journey is bigger than one screen); routes between content blocks (headline to photo, card to card); wraps BEHIND round photo cutouts like a bead on a thread; grows out of the icon, and collapses back into the icon at small / product scale. (p11, p14, p16, p17, p25, p26.)
Color on the line
One flat tone of its ground: off-white / warm white on neutral (#FFFDF5), a lighter tint of violet (--brand-200 #C7BCFF) on a LIGHT-violet --brand-50 #F2F0FF field, a muted slate-blue on navy; or full brand violet #826AFF to pop on photos. On a SATURATED --brand-600 field the line knocks out in that same off-white as the neutral ground - never --brand-200, which is the adjacent step and vanishes.
Don'ts
Never gradient, tapered, dashed, dotted, outline, or multi-strand; never off-palette - page 06 strikes out green and yellow-on-black lockups, so the line stays in navy + violet + neutral. (p06, p12, p17.)

Where the line is applied - EIGHT lettered scenarios, each with its rule (page citations are to the Logo Guide).

#ScenarioWhen to useRule
AHero connector / cover / chapter dividerCovers, section dividers, full-bleed hero canvasesOne oversized line at constant heavy weight, ~a third of the canvas, bleeding top and bottom, single central loop; quiet corner wordmark; background-tone color. (p01, p12, p18)
BBackground watermarkBehind swatches, text, quiet content areasSame line at lower contrast as an ambient backdrop; may mirror to enter from the opposite edge; near-tone of the ground so copy stays legible. (p08, p11)
CLayout routing lineConnecting two content elements along the "journey"Thin the line down and route it element to element (headline to image, card to card), threading behind round photo cutouts. (p11, p14, p26)
DWrap / bead-on-a-threadA circular photo or portrait that should sit "on" the lineRun an S-curve behind the circular cutout so the subject reads as a bead on a thread; or overlap the loop across the seam of a color field and a photo. (p25, p17)
EEnlarged-loop watermarkVertical social / stories frames, quiet full-bleed groundsBlow up the open line itself until it bleeds off-frame as a tonal background gesture; one loop per frame, lockup pinned bottom-center. The line is enlarged here, never the logo glyph. (p16)
FAccent underlineUnder the active element / headline in a layoutThe one place the line turns solid accent: a short heavy violet underline run beneath the active element, against a thin neutral baseline. (p17)
GSmall product / app / apparel = icon onlyApp tile, apparel, door hanger, any small surfaceDrop the free line; let the icon carry the identity (the mark, heart, location); single color, on-brand field. (p21, p22, p23, p24)
HLogo-on-photo (white knockout + mask)The lockup placed over a photographKnock the logo out white over a 30% dark mask for contrast; capsule-cropped imagery is the house photo shape. (p07, p10)

The curve canon - four cells, ten curves

Guesteria's canon is TEN real handcrafted curves, never redrawn - the filename names which edge the line is pinned to (top / right / bottom / left). The fill model is small and unbreakable: the svg fills a cell and is pinned by its named edges via preserveAspectRatio ALIGN slice; the cell's aspect ratio is set to the curve's own viewBox so the slice is exact; no anchor, no zoom, no free scale. A curve MAY be rotated in 90-degree steps and MAY be mirrored, on two conditions: the transform is applied to the PATH inside the viewBox, never as a CSS transform on the element, and the ALIGN is REMAPPED to the edges the transform moved the line onto. The generator on this page does both (remapAlign + curveSvg). ALIGN follows the named edges: top-right xMaxYMin, top-left xMinYMin, bottom-right xMaxYMax, left-bottom xMinYMax. The ten, each with its own viewBox and align: curve 1 (608/467, xMaxYMin, one self-crossing loop); twin 2-1 (291/541, xMaxYMax, a long descending tail) handing off to 2-2 (279/151, xMaxYMin, a short rising head); twin 3-1 (306/345, xMaxYMax, a single sweep) and 3-2 (346/312, xMaxYMin, an S-bend); curve 4 (269/300, xMinYMax, a two-path figure - a main loop plus a short companion stroke); twin 5-1 (247/132, xMaxYMax, a shallow arc) and 5-2 (247/308, xMaxYMin, a tall hook); twin 6-1 (203/499, xMaxYMax, a deep S) and 6-2 (267/347, xMaxYMin, a single bow). The mark itself is the real logo asset and is never reproduced as a curve-gallery illustration.

1 Curve 1 - one self-crossing loop, 608 x 467, pinned top-right (xMaxYMin). Job: the hero connector - one oversized line, bleed top and bottom, single central loop. curve-1--top-right.svg
2 Curve 4 - a two-path figure, a main loop plus a short companion stroke, 269 x 300, pinned left-bottom (xMinYMax). Job: the routing line, threading between content blocks and behind a round photo cutout. curve-4--left-bottom.svg
3 Curve 2 - the twin: a descending tail, 291 x 541, pinned bottom-right (xMaxYMax), handing off to its rising head, 279 x 151, pinned top-right (xMaxYMin), on the next frame. Job: the hand-off, read as one gesture across a spread. curve-2-1--bottom-right.svg
4 Curve 6 - a single bow, 267 x 347, pinned top-right (xMaxYMin). Job: the background watermark, lower contrast, near-tone of the ground. curve-6-2--top-right.svg

The canon is CLOSED: curve 1, the two-path curve 4, and the four twins 2 / 3 / 5 / 6 - ten curves, nothing else. Do not invent a curve. Fill a cell with a canon path and recolor it - nothing else; never draw a new bezier by hand. Each curve keeps ONE open path with fully rounded end caps and smooth beziers only - no corners, no straight runs - and crosses itself at most once. The one stated exception is a FAMILY, not a file: the derived full-width rule, which stretches on preserveAspectRatio="none" and pins no named edge. It ships in four shapes - the golden-ratio .curve-divider rendered above this section, and the three traced wave variants divider-1--wave.svg / divider-2--wave-calm.svg / divider-3--wave-busy.svg at dmd 12.2. Add no others.

Colour rule: a curve ships as ONE single-ink file - for example curve-1--top-right.svg or curve-6-2--top-right.svg - recolored per ground via its stroke, never as a light/dark pair, never gradient, tapered, dashed, dotted, outlined, or multi-strand; off-palette is an explicit don't (the book strikes out green and yellow-on-black lockups). Sanctioned pairs: violet --brand-700 or --brand-600 on --brand-50; off-white #FFFDF5 on --brand-600 or navy --brand-800; staff --ctx-1-700 or --ctx-1-800 on --ctx-1-50; guest --ctx-2-700 or --ctx-2-800 on --ctx-2-50. The line must read against its ground - at least ~3 ramp steps apart; never an adjacent step (--brand-200 on --brand-600 vanishes). One accent line per view.

Stroke width: pick the token by the creative's SCALE TIER, nudged by the weight of the headline it sits with. ONE single open stroke at one weight - no accent pair.

Creative scale tierHeadline nudgeStroke token
Small surface, routing line, watermark (chip, app tile, ambient backdrop)Light or no headline--curve-w-hair (11)
Standard card, section, default frameRegular headline--curve-w-base (22)
Hero, cover, full-bleed canvasHeavy / oversized headline--curve-w-bold (40)

The mark in a creative

The mark sits OPPOSITE the heavy type or content as a counterweight, rides TOP-LEFT (centre only if alone, never the bottom), and content holds ONE alignment line. The geometry never changes - only which ink of the file is used: dark navy for light grounds, off-white for dark or saturated grounds.

The mark, off-white ink, on the brand violet field - one accent, centred.
The same mark on a context (staff) ground; same file, only the ground changed.
Over a photo: a dark mask floors the contrast so the off-white mark still reads - the mask value belongs to the photo and background system.

Shape as background

Every backing here is one of the ten canon curves, put through one of three derivations and nothing else: OVERSCALE it past the frame so the edges CROP it, the same fill-the-cell / pin-the-named-edges model as every canon cell; drop it to a GHOST over a photo so it steers mood without competing with the image; or bleed it off a single edge so the journey reads as continuing past the frame. It stays a SUBTONE backing (tier 4) - near-tone over colour, a faint wash over a photo. One backing shape per view. Compose as ONE cluster plus counterweight - the golden rule: group the headline, copy, and lockup into a SINGLE block seated on a third, never scattered to opposite corners with a dead middle; the curve's mass is the counterweight OPPOSITE the cluster, filling the centre.

Overscaled.
The curve spills past the frame; the edges crop it.
CURVE 3-1, overscaled and cropped on a tint - a near-tone backing (tier 4), the frame edges do the framing.
Ghosted.
Transparent over the photo - it sets mood, the image still reads.
CURVE 5-2, recolored off-white, ghosted over a PHOTO at a 42% dark wash - the stroke stays the distinguishable subject line, the photo still reads through it.
Edge-bleed.
Anchored to one corner, spilling off the frame.
CURVE 5-1, bled off a single edge on a dark context ground - the line implies the journey continues past the frame; the copy holds the opposite alignment.

Curve over a photo - three ways

The curve behaves IDENTICALLY on an image ground: it still fills the frame at preserveAspectRatio="<ALIGN> slice" with the named edges pinned and the endings clipped off-frame. Only the line COLOUR follows the ground - no anchor or scale knob changes.

On a COLOUR field: off-white line on --brand-600, ends hidden past the bottom + right edges.
The SAME curve over a WASHED photo: a 42% dark wash floors the contrast so the off-white stroke stays a distinguishable SUBJECT line; identical slice rule, ends clipped past the named edges.
TRANSPARENT stroke, NO wash: a translucent off-white rides DIRECTLY on the image so the photo reads THROUGH the line - same slice rule, a softer subject.

Inferred, not in the book: mark any such usage clearly as inferred, never present it as sourced. The logobook is silent on data or route lines on maps and charts (the pin icon exists at p13, but no actual data line or path-on-map is shown); a loading, progress, or scrubber line; a codified hairline divider or card-accent system (the glyph has a baseline bar and p16 shows small top progress-tick bars, but no reusable rule is codified); motion or animation timing (any "the line draws itself" guidance is inferred); and numeric clear-space ratio, minimum size, and stroke or radius tokens (clear space and minimum size are shown graphically only at p02-p03; the one explicit numeric spec in the book is the 30% photo mask at p07). Corner language (sharp vs round) is a SEPARATE decision - see 06 Shape & roundness.


06 Shape & roundness

Sharp or round? Commit to one corner language

Corners are SHARP (rectangles, squares, hard 90-degree edges) or ROUND (rounded corners, circles, ovals, pills). The decision flows to EVERY wrapper through a single radius scale, so the focus-wrap, the content block, the card and the button all read as one family.

The axis

SHARP reads as engineered, precise, serious; ROUND reads as friendly, soft, approachable. Sit deliberately at one end, never in the muddy middle.

Sharp
Round

Guesteria's proposed answer (the marker above): soft and rounded. A gentle radius on blocks, a full pill on tags and chips - and the same rounded-terminal curve carries through the icon set too, so nothing in the family ever meets a hard corner.

ONE identity, two halves: the ACCENT SHAPE (05 Visual language) and the CORNER STANCE (here) read together. Guesteria's shape IS the curve system - the bell-swirl mark and its connecting line, a single-weight, smooth-bezier, rounded-terminal family with no corners and no straight runs - inside ROUND containers: shape and corner already match. Pick the shape (05) and the corner point (here) so the two never contradict.

The radius scale (the example)

One token ramp answers the question for every element. A SHARP brand lives at the left (xs/sm or 0); a ROUND brand lives at the right (lg + pill). Guesteria's picks are marked.

xs 4
sm 8
md 12
lg 16
pill
island em

The island radius is an EM (--radius-island: 0.9em), so it tracks the block's OWN type size. Marked chips (md / lg / pill / island) are Guesteria's choices.

One decision governs every wrapper

The roundness stance is one choice mapped onto the scale: move the brand sharper or rounder and EVERY row below shifts together. Token mechanics (the depth + elevation pairing) live in 15 Depth, Radius & Elevation.

WrapperTokenGuesteria (soft and rounded)
Card / panel / block-wrapper--radius-md console / --radius-lg guest12px / 16px
Content island--radius-island0.9em (tracks type)
Tag paragraph wrapper.tagwrap--block0.5em (<= its padding)
Focus-wrap / chip / badge--radius-pillstadium
Button / input--radius-sm8px

Rule: the tag paragraph wrapper's radius must stay at or below its horizontal padding, or the corner clips the copy. A WHOLE-paragraph wrapper also needs generous VERTICAL padding (more than a one-line phrase) so the copy breathes top-and-bottom.

Roundness governs the wrapper's CORNER; the accent shape's COMPOSITION (overscaled, cropped by the frame, or ghosted over a photo) is the PAIRED half of the same identity - see 05 Visual language > Shape as background.

Content island (core) + optional enrichment

The .island is a CORE, brand-neutral device for lifting READING copy off a busy surface - a content block whose corner radius TRACKS its type size (per the scale above); reach for it at two-to-three paragraphs, rarely for one. Use it in any brand.

OPTIONAL ENRICHMENT - the LIQUID-GLASS material + the FOCUS-WRAP. The .glass modifier turns any over-a-ground wrapper into an Apple-style liquid-glass panel: a frosted backdrop-filter blur, a luminous border, an inset top highlight and a float shadow - reusable on the island AND the .tagwrap focus-wrap. Reach for it to enrich a SOFTER, rounder brand; skip it for a flatter, harder one. Glass is over-a-ground only (a colour or a photo), never the plain page. Both inherit their radius from the roundness stance above.

Lifted off the ground
A solid island in a SUBTONE ground holds two short paragraphs clear of the saturated field behind it - the radius follows the type.
Solid .island (subtone ground) on a brand field - radius from --radius-island.
Frosted over a field
The same block with .glass.glass--ink over a DARK field: the ground reads THROUGH a blur, the LIGHT text stays legible, the border catches light.
Liquid-glass .island.glass.glass--ink over a dark field - ink frost (light text); the default .glass is a light frost with dark text for LIGHT grounds.
Frosted over a light ground
The default .glass over a LIGHT photo: a LIGHT frost, so its text stays DARK - the same material as the panel beside it, the opposite ink.
Default .island.glass over a LIGHT photo - light frost, DARK text: the evidence for the contrast law below.

Inside an island, colour roles still apply - ground is subtone, the one accent is primary/sub-prime, any rule is low-priority. The focus-wrap shares the material: a .tagwrap.glass--ink frosts a phrase the same way over a dark photo.

The GLASS CONTRAST LAW: the default .glass frost is LIGHT so its text is DARK (use over a light ground); .glass--ink is a DARK frost so its text is LIGHT (use over a dark ground or photo) - a light frost with light text vanishes. Inline chips carry their OWN contrast, so nesting one inside a dark-frost panel never produces light-on-light.

Focus-wrap gallery (optional enrichment) - one phrase, many registers

Reach for the focus-wrap when a phrase needs to lift off a busy ground. Pick the wrapper by the GROUND and how loud the emphasis should be; the pill colour always differs from BOTH the ground AND the text, the phrase never breaks mid-word, and a sentence-ending wrap pulls the full stop INSIDE. Its radius follows the roundness stance (pill for a round brand, a small --radius-sm for a sharp one). Its padding is FLAT - a hair more on the bottom than the top - so the pill never dwarfs the type. The registers are actor-named: the --solid / --guest / --staff / --ink fills, and --word / --line / --block for a word, a sentence, or a whole paragraph.

Run it from one calm console.

.tagwrap - calm subtone (the default).

Ship it in one tap.

--solid - primary fill, white text (loud).

A welcome before arrival.

--guest - guest subtone tint (Earthy Comfort).

The desk stays in sync.

--staff - staff subtone tint (Skyline blue).

Just one console.

--word - a tight single phrase.

The line carries the eye across a wrap.

--line - a whole sentence wraps.

A multi-row paragraph sits in a rounded card whose radius stays below its padding.

--block - a paragraph card (not a pill).

Calm on a dark register.

--ink - navy fill, light text (over a light ground).

Frosted over a liquid field.

.glass.glass--ink - a liquid frost (over a dark ground).

Quiet focus-wrap - no fill, subtle

When a filled pill is too loud, the QUIET focus-wrap drops the fill entirely - a thin border, no slab, slightly dimmed. Two reads: a LIQUID luminous edge (adapts to the text colour) or a RHYTHM-tint border (a thin palette border + a faint tint). One focus-wrap per paragraph; the phrase never breaks mid-word.

Run it from one calm console.

.tagwrap--quiet - a liquid luminous edge.

The detail stays in focus.

.tagwrap--quiet-tint - a thin rhythm border + faint tint.

07 Icons

One monoline set, two render modes

Icons are a foundation: five real handcrafted glyphs (source: icon--*.svg, drawn on a 96x96 grid, round caps and joins), built from the same single stroke as the mark and the line. Each glyph is recolorable through stroke=currentColor, so one source mark tints across the whole palette without a redraw; the document glyph is the one filled exception.

The two use cases

Every icon ships in two presentations. BARE (no background) is the default - it inherits the text colour and sits inline, in nav, on controls and in dense UI. WRAPPED on an .icon-disc lifts a single glyph for a feature tile, an empty state or a marketing accent, and the disc is what carries the role tint.

Bare . no background
The glyph inherits currentColor - one weight, no container.
Wrapped . on a disc
The disc tints by role - .tint-brand (prime violet) / .tint-staff (Skyline) / .tint-guest (Earthy) - one family, every context.

The set

Five real handcrafted glyphs are the source of truth: heart, house, location, phone, and a filled document (icon--heart.svg, icon--house.svg, icon--location.svg, icon--phone.svg, icon--document.svg). The Logo Guide's own creatives chapter names eight line-built icons - heart, location pin, cup, house, bed/lounger, dumbbell/key, steam, swirl (logobook p13) - but only these five were ever produced as files; cup, bed/lounger, dumbbell/key, steam, and swirl have no shipped SVG. Do not treat the book's eight as shipped inventory. Each glyph ships with a disc mate named icon--<glyph>--bg.svg, with ONE exception: the document glyph's mate is icon--documents--bg.svg, plural, against a singular icon--document.svg. The filenames disagree on disk; reference each exactly as listed.

House
Heart
Location
Phone
Document (filled)
Cup (book, not shipped)
Bed / lounger (book, not shipped)
Steam (book, not shipped)

Rules: the four line glyphs (heart, house, location, phone) share ONE stroke weight, round caps + joins, and recolor only through stroke=currentColor; the document glyph is the single exception - filled (fill="currentColor", no stroke). Never two-tone inside one glyph. The heart, location, and the mark are the most brand-load-bearing. One icon family, never a second.

Icons across the palette

The five glyphs live INSIDE the colour system, not a fixed ink. Each disc recolors via the palette - .tint-brand (the prime violet), .tint-staff (Skyline blue --ctx-1-*) and .tint-guest (Earthy Comfort beige --ctx-2-*). The glyph is stroke="currentColor" (exact source geometry), so the disc fill and the glyph colour both come from ONE ramp.

Row 1 prime violet (.tint-brand), row 2 Skyline staff (.tint-staff), row 3 Earthy guest (.tint-guest). One geometry, three palette homes.

Usage seen
A coherent feature / amenity icon row; ENLARGED to a giant off-frame watermark with a line tail on vertical stories (house, location, heart at huge scale, p16); on apparel / app a single glyph (heart p21, the mark p22 / p24) carries the whole brand.
Placement
A functional icon sits OPPOSITE the content block - content left → icon right, content right → icon left (a side-oriented creative may be left OR right) - in the opposite column, NEVER behind the content and never stuck to a corner; a disc when it rides the curve's line. One mark per creative still holds: the functional icon is not the brand mark.
Applications
Amenity / feature rows, drawer nav glyphs, story watermarks, apparel and small-surface marks. Single-ink, recolored by context (violet for "magic", neutral elsewhere); never two-tone inside one glyph.

07a Backgrounds & photography

Real photos, always in-palette

Guesteria's photography is real brand property imagery - rooms, lobbies, terraces, the hospitality moments the product serves. It runs in TWO registers, and the register is set by where the photo sits. In product, a photo runs raw - untinted and unmasked - but not bare. The plain rounded rectangle is the Hotel Info header: untinted, unmasked, unbadged (Guest/Guest - Hotel Info.png). A CATALOGUE thumbnail is the other case: the image is still untinted and unmasked, and it always carries furniture on top - the orange TOP badge on each Featured card and two overlay chips on each grid card (Guest/Guest - Activities_grid.png, Front Desk/FD - Services - Guest services.png). Do not generate a bare catalogue photo; that screen has none. Off product, a photo is always tinted, badged, or curve-masked so it sits inside the palette and reads as brand rather than stock. The real assets are assets/bg-0.jpg ... assets/bg-7.jpg, referenced relative to this page.

Tinted photos

A property photo under a single multiply tint, one per sanctioned ground: the brand violet, the staff blue, the guest brown, and the dark navy. The wash mechanism is mix-blend-mode: multiply over a real bg-N.jpg; a knockout headline always rides #fff.

Property photography
tint-brand - Royal Glow violet, --brand-600 #826AFF multiply
Property photography
tint-staff - Skyline blue, --ctx-1-800 #2E4258 multiply
Property photography
tint-guest - Earthy Comfort, --ctx-2-800 #443F2C multiply
Property photography
tint-dark - Navy #2D2F44 multiply

Photo badge

A tinted photo carrying a mark inside a disc - the icon-in-circle / logo-in-circle options. The disc holds a REAL asset only (an icon glyph or the transparent bare mark), never a fabricated mark; it centers by default or pins to a corner (.at-tl / .at-br), and its ground is off-white, navy (.is-ink), or violet (.is-violet).

A welcoming property interior
Icon in circle - heart glyph, off-white disc, over a tint-brand photo.
Property interior
Logo in circle - the transparent bare mark (guesteria--mark.svg), off-white disc, over a tint-dark photo.
Property terrace
Icon in circle, corner-pinned - location glyph, navy .is-ink disc at .at-br, over a tint-guest photo.
Property lobby
The third disc ground - violet .is-violet, corner-pinned .at-tl, over a tint-staff photo.
Service that feels personal at scale

The front desk keeps warm, in-house hospitality intact while one calm, managed flow handles the chaos behind it. (Companion copy block on the guest --ctx-2-800 #443F2C field, carrying the .hl-solid focus phrase.)

Rules

Photo wrapper block

A big boxed photo panel - wider than tall, 100% rounded, a tough brand-weight border - with the image FIXED behind one to three rows of copy, so it reads as a PARALLAX as the page scrolls (degrades to a static cover; respects reduced-motion). Inside the copy, TWO type-focus tools: bold for a word, and the rounded .tagwrap pill for a phrase. The image is a real assets/bg-*.jpg.

Hospitality, at scale.
One calm system carries every property - the image stays fixed as you scroll, so the panel reads as a quiet parallax behind the words.

A narrower variant (.pw-two-thirds), same behaviour, three rows of copy:

Every guest, cared for.
From the first message to check-out.
One timeline, on a single console.

08 Voice & tone

Five dials, calibrated from the brand's own words

Calibrated from the stated brand character - calm, confident, precise, caring, without pomp or fuss - and voice: friendly, clear, to the point, focused on real results. Even sales copy holds the line: an upside scenario, not a universal promise, never hype.

Calm vs loud
25 / 100
Calm and confident. No hype, no exclamation farms. "Pre-check-in completed." not "You're all set!!".
Warmth
70 / 100
Caring and personal, never cold. Greet the guest by name; acknowledge, do not gush.
Precision
80 / 100
Clear and specific. Name the room, the request, the time. "Request #201 unassigned for over 15 minutes."
Honesty
80 / 100
Grounded, results-first; hedge claims rather than overpromise. Even sales copy is "an upside scenario, not a universal promise."
Authority
60 / 100
Guide guests through stay steps; direct staff with clear task formulations; advise managers, do not lecture.

CTA verb library

Primary action (product)
Request, Pay now, Approve, Done, Reply, Start, Finish, Set, Get. The console manager verb is Set (it assigns the responsible party on a New request), not "Set Schedule". Get is the staff app's full-width BLUE primary - it claims the task for this staff member - so it is a primary action, not navigation.
Destructive / negative
Cancel, Cancel request, Decline, Canceled, On Hold. Decline is the guest's own destructive verb, shown when the HOTEL offered the item. "Pay later" and "Not Completed" appear on no screen and are not part of this library.
Navigational / passive
See original, Translate, Skip, Next, Add comment, View, Filter, To Do. To Do is a manager action on the split button - it returns an on-hold request to the active queue - never a status pill.
Marketing
Book a demo, See how much your hotel can earn.

Voice do / don't

DoDon't
Greet the guest personally. "Hey, John! How are you today?""Welcome, valued customer."
State the operational fact plainly. "Request #201 (Room Service) has been unassigned for over 15 minutes.""Heads up, something might need a look."
Name the object and stage. "Guest Alex Smith (Room 312) has completed Pre-check-in.""An action was completed."
Hedge honestly. "By paying in advance, you will be able to expedite your check-in upon arrival.""Pay now and skip the entire front desk!"
Keep guest steps reassuring. "This is required by law in order to complete your Check-In.""You must upload a document or you cannot proceed."

09 Principles & do / don't

The discipline that makes Guesteria read as Guesteria

Guesteria is calm, not coy. We resist decoration without function and "friendly" copy that hides complexity.

Do

  • Hospitality: Make the product feel like a well-trained service team.
  • Color: Reserve violet for value and for the assistive affordance, and label neither - no screen carries the word "AI", "automatic" or a language name. Use Skyline blue for staff/ops data, Earthy Comfort beige for guest data.
  • Per-component context: Tint the smallest element that carries the distinction - a create-button fill, a chip outline, an avatar tile.
  • Three surfaces: Keep the console white / dense, the guest app warm / airy and the staff app cool / compact, sharing the violet accent and the status pill.
  • Visual language: Use one accent device per view - the mark, the line, or one line-built icon.
  • Type: Pair one display weight with one body weight per surface.
  • Density: Let the console run dense but gridded; keep guest screens roomy, one task at a time.
  • Status: Encode state with both a glyph and a color-coded pill.
  • Commerce: Render the guest price in the brand violet, and the action beside it in navy.
  • Tone: "Request #201 has been unassigned for over 15 minutes."
  • Multilingual: Translate per message; label the chip by its action (Translate / Translating / See original); localize.
  • Decoration: Earn ornament with a guest or operator need; keep it modern, not techno-aggressive.

Don't

  • Hospitality: Make it feel like "another IT system."
  • Color: Spread violet across secondary actions for "interest."
  • Per-component context: Tint a whole row, panel or navigation group by origin - the console ends up striped.
  • Three surfaces: Flatten them into one temperature, or treat the staff app as the console on a phone.
  • Visual language: Stack the mark, a free line, and an icon row in the same frame.
  • Type: Mix three weights to fake hierarchy.
  • Density: Cram guest screens with controls or edge-to-edge cards.
  • Status: Rely on color alone to signal a status.
  • Commerce: Paint the price and the pay action the same colour - the amount is violet, the commit is navy.
  • Tone: "Oops! A request might need a look."
  • Multilingual: Assume everyone reads English.
  • Decoration: Add glow or motion because a surface looks "empty."

10 Accessibility

Non-negotiables

The PRD mandates WCAG AA contrast and platform-native mobile patterns. (PRD L1368-1374.)

10a Appendix

Unique artifacts

Guesteria's signature modules - applied patterns, not brand foundation.

Two of those are bigger than a component, and both were read here as screen states. They are not.

The stay stage is a system dimension
The stay is a five-stage state machine that runs the length of the product, not a guest-app screen state. Authored: a new page or banner carries a "Guest Stages" block with one toggle per stage, beside Create (Page / Banner) and Display (List / Carousel) - publishing means choosing which stage of the stay the content belongs to (FD_Settings/FD settings - Pages - Add page.png). Rendered: the guest dashboard keeps ONE slot below the shortcut chip row and swaps its contents by stage - absent in stay, "Early Check-in" + "Room Upgrade" at check-in, transfer and late-check-out offers plus a hero CTA before check-out (Guest/Guest - Dashboard - Check-in State.png against Guest/Guest - Dashboard - In stay State.png). Measured: Analytics > Offers is segmented by a five-item stage switcher - Pre-Check-in / Dashboard Check-in / Dashboard In stay / Dashboard Check-out / Pre-Check-Out - with a funnel per stage; 23 files under Front Desk/FD - Analytics - Offers* cover all five plus a comparison mode (Front Desk/FD - Analytics - Offers_In Stay.png). The stage is a first-class key on the content model, the dashboard module and the analytics event, and it is invisible in the component layer.
AuthoredRenderedMeasured
The authoring console renders the guest app live
The console does not describe the guest screen its settings produce - it SHOWS it. Beside the pre-check-in step editor sits a phone frame headed "Guest App Preview", rendering that same guest screen at "Step 7/8" with the authored custom questions filled in, an Original / Preview / Save control set above it and left/right arrows to page through the whole wizard (FD_Settings/FD_Settings - Pre Check-In-Step 7.png). The same frame appears in page authoring, rendering the guest dashboard complete with hero, chip row and bottom bar (FD_Settings/FD settings - Pages - Add page.png). The cost is lockstep: the console ships a real rendering of the guest app, so a guest component that changes without the preview changing turns the authoring console into a liar.
Live phone frameOriginal / Preview / Save

The applied facet rebuilds the wizard-plus-live-preview journey as a story block at dmd 14; the brand-creative artifacts (the three-motif system in campaign and social form) live in the Creatives facet. (Twins under source/; PRD module specs; the finished screens under sources/app/screens/.)