# Guest experience platform for hotels. > **ChatGPT / AI usage.** Before applying this specification, open the four public contact > sheets in the [Public visual asset index](#public-visual-asset-index), then open any exact > asset URLs needed for the task. Treat those visuals and this text as one specification. **Contents** 1. [Guest experience platform for hotels.](#guest-experience-platform-for-hotels-1) - `index.html` 2. [Guest experience platform for hotels.](#guest-experience-platform-for-hotels-2) - `index--uxui.html` 3. [Guest experience platform for hotels.](#guest-experience-platform-for-hotels-3) - `index--creatives.html` 4. [Guest experience platform for hotels.](#guest-experience-platform-for-hotels-4) - `index--assets.html` 5. [Guest experience platform for hotels.](#guest-experience-platform-for-hotels-5) - `index--rules.html` ## Guest experience platform for hotels. ### 0 What this spec is built from, and where it stops | **Source basis** | Brand 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 for** | The 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 for** | Print collateral, signage and OOH, packaging, hardware UI, or motion-graphic identities; the type and density rules here are tuned for screens. | | **Audience** | Product, design, and engineering teams building Guesteria's three product surfaces, plus marketing teams extending the brand into web. | | **Evidence confidence** | HIGH 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 gaps** | No 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. ### 1 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 #### 1.1 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`. ![](assets/logos/guesteria--icon.svg) ![](assets/logos/guesteria--icon--lavender.svg) ![](assets/logos/guesteria--icon--violet.svg) ![](assets/logos/guesteria--icon-light.svg) Disc badge, four inks (`logo 2.3`) violet: no book page approves it ![](assets/logos/guesteria--logo.svg) Lockup, light ground (`logo 2.1`) ![](assets/logos/guesteria--logo-light.svg) Lockup, dark ground (`logo 2.1`) ![](assets/logos/guesteria--logo-light.svg) On brand background (`logo 2.1`) ![](assets/logos/guesteria--logo--capsule.svg) ![](assets/logos/guesteria--logo--lavender.svg) ![](assets/logos/guesteria--logo--violet.svg) ![](assets/logos/guesteria--logo--light.svg) Capsule plate, four inks (`logo 2.2`) violet: no book page approves it ![](assets/logos/guesteria--mark.svg) ![](assets/logos/guesteria--mark-light.svg) ![](assets/logos/guesteria--mark--mono.svg) Bare mark, three inks (`logo 2.4`) ![](assets/logos/guesteria--tile--earthy-comfort.svg) ![](assets/logos/guesteria--tile--skyline.svg) Store tiles, square ground - the store masks it (`logo 2.6`) ![](assets/logos/guesteria--favicon.svg) ![](assets/logos/guesteria--favicon.svg) Favicon - tab size (`logo 2.5`) ![](assets/logos/guesteria--mono.svg) 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`. #### 1.2 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-glance Low-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 + scannable Multilingual 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 + airy One 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 tasks Schedule grid ### 2 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: white Guest: warm bone Staff: 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). ### 3 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.) #### 3.1 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 #### 3.2 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 #### 3.3 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 #### 3.4 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`). #### 3.5 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 & accent | Hex | Role | | --- | --- | --- | | `--accent-link` | #826AFF | Hyperlink, inline emphasis, merge-field tokens in chat | | `--accent-link-hover` | #532DF5 | Hyperlink hover | | `--accent-link-visited` | #6E64ED | Hyperlink visited | | `--focus-ring` | #A59CD3 | Royal Glow "key accents" step - 2px outer ring, 2px offset | | Text & surface (the rest) | Hex | Role | | --- | --- | --- | | `--text-disabled` | #A1A1AA | Disabled inputs, ghost labels | | `--text-inverse` | #FAFAFA | Long-form text on dark chrome (tooltip, footer). A FILLED button label is pure `#FFFFFF`, not this step | | `--surface-overlay` | rgba(10,10,11,0.55) | Modal scrim | | `--surface-inverse` | #0A0A0B | Camera / scan body, marketing inversions | | `--line-strong` | #D4D4D8 | Divider between sections | | Status soft fill | Hex | Role | | --- | --- | --- | | `--status-success-soft` | #D1FAE5 | Success pill / banner background | | `--status-warning-soft` | #FEF3C7 | Warning pill / banner background | | `--status-error-soft` | #FFE4E6 | Error pill / banner background | | `--status-info-soft` | #DBEAFE | Info pill / banner background | | Shadow | Value | Use | | --- | --- | --- | | `--shadow-sm` | 0 1px 2px rgba(10,10,11,0.04) | Resting card, KPI tile | | `--shadow-md` | 0 4px 12px rgba(10,10,11,0.08) | Hovered card, dropdown | | `--shadow-lg` | 0 12px 32px rgba(10,10,11,0.12) | Toast, popover, legend | | `--shadow-xl` | 0 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. #### 3.6 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. #### 3.7 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 #### 3.8 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. #### 3.9 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. ### 4 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. #### 4.1 Typography principles - Prefer ONE weight per hierarchy step. Do not mix 500 and 600 in the same surface. - KPI and stat values are bold large numerals; metadata and labels are muted gray. - Use numerals tabular in console tables (balances, counts), proportional in guest prose. - Room-type codes are small uppercase (FML, LSV, PCP - the codes observed on screen, `dmd 11`); track wider and never go all-caps below ~12px. #### 4.2 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 ### 5 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. #### 5.1 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). | # | Scenario | When to use | Rule | | --- | --- | --- | --- | | **A** | Hero connector / cover / chapter divider | Covers, section dividers, full-bleed hero canvases | One 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) | | **B** | Background watermark | Behind swatches, text, quiet content areas | Same 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) | | **C** | Layout routing line | Connecting 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) | | **D** | Wrap / bead-on-a-thread | A circular photo or portrait that should sit "on" the line | Run 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) | | **E** | Enlarged-loop watermark | Vertical social / stories frames, quiet full-bleed grounds | Blow 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) | | **F** | Accent underline | Under the active element / headline in a layout | The one place the line turns solid accent: a short heavy violet underline run beneath the active element, against a thin neutral baseline. (p17) | | **G** | Small product / app / apparel = icon only | App tile, apparel, door hanger, any small surface | Drop the free line; let the icon carry the identity (the mark, heart, location); single color, on-brand field. (p21, p22, p23, p24) | | **H** | Logo-on-photo (white knockout + mask) | The lockup placed over a photograph | Knock the logo out white over a 30% dark mask for contrast; capsule-cropped imagery is the house photo shape. (p07, p10) | #### 5.2 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 tier | Headline nudge | Stroke token | | --- | --- | --- | | Small surface, routing line, watermark (chip, app tile, ambient backdrop) | Light or no headline | `--curve-w-hair` (11) | | Standard card, section, default frame | Regular headline | `--curve-w-base` (22) | | Hero, cover, full-bleed canvas | Heavy / oversized headline | `--curve-w-bold` (40) | #### 5.3 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. ![](assets/logos/guesteria--mark-light.svg) The mark, off-white ink, on the brand violet field - one accent, centred. ![](assets/logos/guesteria--mark-light.svg) The same mark on a context (staff) ground; same file, only the ground changed. ![](assets/logos/guesteria--mark-light.svg) 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. #### 5.4 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. #### 5.5 Curve over a photo - three ways The curve behaves IDENTICALLY on an image ground: it still fills the frame at `preserveAspectRatio=" 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`. ### 6 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. #### 6.1 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. #### 6.2 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. #### 6.3 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`. | Wrapper | Token | Guesteria (soft and rounded) | | --- | --- | --- | | Card / panel / block-wrapper | `--radius-md` console / `--radius-lg` guest | 12px / 16px | | Content island | `--radius-island` | 0.9em (tracks type) | | Tag paragraph wrapper | `.tagwrap--block` | 0.5em (<= its padding) | | Focus-wrap / chip / badge | `--radius-pill` | stadium | | Button / input | `--radius-sm` | 8px | 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`. #### 6.4 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. #### 6.5 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). #### 6.6 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. ### 7 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. #### 7.1 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. #### 7.2 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----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. #### 7.3 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. ### 7a 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. #### 7a.1 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](assets/bg-0.jpg) `tint-brand` - Royal Glow violet, `--brand-600` `#826AFF` multiply ![Property photography](assets/bg-1.jpg) `tint-staff` - Skyline blue, `--ctx-1-800` `#2E4258` multiply ![Property photography](assets/bg-2.jpg) `tint-guest` - Earthy Comfort, `--ctx-2-800` `#443F2C` multiply ![Property photography](assets/bg-4.jpg) `tint-dark` - Navy `#2D2F44` multiply #### 7a.2 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](assets/bg-3.jpg) Icon in circle - heart glyph, off-white disc, over a `tint-brand` photo. ![Property interior](assets/bg-5.jpg) ![](assets/logos/guesteria--mark.svg) Logo in circle - the transparent bare mark (`guesteria--mark.svg`), off-white disc, over a `tint-dark` photo. ![Property terrace](assets/bg-6.jpg) Icon in circle, corner-pinned - location glyph, navy `.is-ink` disc at `.at-br`, over a `tint-guest` photo. ![Property lobby](assets/bg-7.jpg) 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.) #### 7a.3 Rules - **Real brand assets only.** Photos are real property and hospitality imagery, never generic stock and never placeholder fills. - **Off product: always tinted, badged, or curve-masked.** A brand or campaign photo carries a palette tint, a disc badge (an icon or the bare mark), or a curve mask so it reads as part of the system. - **In product: raw, in a rounded rectangle.** A catalogue thumbnail, an offer card image and the Hotel Info header carry NO tint, NO mask and NO disc badge - only the product's own chips and the orange TOP badge sit over them (`Guest/Guest - Activities_grid.png`, `Guest/Guest - Hotel Info.png`). Do not apply the off-product treatments to a screen a guest buys from. - **In-palette.** Tints and grounds stay inside the sanctioned palette: brand violet, staff blue, guest brown, or navy - never an off-palette wash. - **Logo-on-photo follows the mask rule.** When the lockup sits over a photo, it knocks out white over a 30% dark mask (visual language H). - **Curve-masked splits live in Creatives.** The full curve-masked photo split - where a handcrafted curve becomes the seam between a color field and an image - is a campaign device documented in the Creatives facet. #### 7a.4 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. ### 8 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. #### 8.1 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. #### 8.2 Voice do / don't | Do | Don'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." | ### 9 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 Non-negotiables The PRD mandates WCAG AA contrast and platform-native mobile patterns. (PRD L1368-1374.) - **Contrast.** Body text and CTA labels meet WCAG AA (4.5:1 small, 3:1 large). Verify the violet `--brand-600` against white and the navy guest CTA against beige. - **Status.** Never signal state by color alone - pair every status pill with a glyph and a label (Approved, Done, Cancelled). - **Multilingual.** Guest content is localized. Translation is exposed per MESSAGE, as a chip labelled by the action it performs - Translate, Translating, See original - hung outside the bubble at its trailing edge, on both sides of the conversation (`Guest/Guest - Chats.png`, `Front Desk/FD - Chats 3.png`). There is no thread-level switch, no conversation language setting, and no screen carries the word "AI" or a language name; the target language is a reservation attribute ("Preferred language: Spanish"). The top-bar language pill is the guest's own UI locale, and it is first-class. - **Focus.** Visible on every interactive element, never suppressed. - **Keyboard.** Tab order matches visual order; Escape closes overlays; Enter activates the primary action. - **Screen reader.** Live regions for async state changes (request approved, message sent, pre-check-in confirmed). - **Motion.** Respect `prefers-reduced-motion`. - **Forms.** Every input has a programmatic label; required fields and errors wired via `aria-describedby`. ### 10a Unique artifacts Guesteria's signature modules - applied patterns, not brand foundation. - The Guest Experience journey panel - The property switcher - Per-message translation, labelled by ACTION - Translate / Translating / See original (`Guest/Guest - Chats.png`, `Front Desk/FD - Chats 3.png`) - The console guest-chip: a warm avatar tile, a NEUTRAL grey room pill, and a warm olive room-type code (`Front Desk/FD - Chats 3.png`) - Merge-field composition - an OPERATOR feature (`Front Desk/FD - Chats 3.png`) - The Reservation Profile booking track - The Pre-Check-In wizard - Step N/8 on every shipped screen, but the denominator is a DERIVED value, not a constant: the pre-check-out wizard prints 1/5, 2/8 and 4/5 inside one flow. Authored in the console beside a live phone-framed rendering of the guest app (the derivation rule is at `dmd 14`) - The document-scan reticle - Five-star rating with an optional comment (`Guest/Guest - Request_feedback.png`, `Guest/Guest - Chat - Rate the communication.png`) - The stay stage as a SYSTEM dimension - authored, rendered, and measured - The three-surface (white console / warm guest / cool staff) system 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. Authored Rendered Measured 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 frame Original / 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/`.) ## Guest experience platform for hotels. ### 11 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. #### 11.1 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. ▢ Pay now Next + Guest service Filters Reply Cancel See original Staff verb buttons - one hue per verb, same component, same screen (`Staff/staff - Dashboard.png`): Get Start Finish Legacy aliases, kept in the stylesheet and shipped on no screen: .btn-staff (not shipped) .btn-guest (not shipped) | Variant | Background | Border | Text | Use | | --- | --- | --- | --- | --- | | Guest primary | `--brand-800` `#2D2F44` navy | none | `#FFFFFF` | EVERY guest-app primary: "Next", "Pay now" (with a card glyph), "Back to Dashboard", "Confirm", "Decline", "Upgrade room type" | | Staff verb | one hue per verb - Get blue, Start orange, Finish green | none | `#FFFFFF` | The full-width staff task action. Two cards with the SAME status carry different buttons, because assignment - not status alone - picks the verb | | Primary (`.btn-primary`) | `--brand-600` violet | none | `#FFFFFF` | Console CREATE actions ("+ Guest service", "+ Internal service"). Violet's other jobs are marks, not buttons: the price, the unread count, the active-nav fill, the translation chip | | Secondary | `--surface-canvas` | 1px `--line-strong` | `--text-primary` | "Filters", "Skip", "Add feedback", and the "Cancel" that abandons a dialog or a form - the card demotes its own action to an outlined secondary once the object is terminal | | Split-button | `--ctx-1-700` slate, or `--status-*` at a terminal state | none | `#FFFFFF` | Label + caret manager actions: "Set", "Approve", "To Do" all slate; only "Done" green and "Canceled" red | | `.btn-staff` / `.btn-guest` | `--ctx-1-800` / `--ctx-2-800` | none | `#FFFFFF` | LEGACY ALIASES. Actor-routed CTAs are not shipped on any screen; do not use | | Tertiary | transparent | none | `--text-primary` | Toolbar, dense console surfaces | | Link | transparent | none | `--accent-link` | True hyperlink, "All" / "See original" | | Destructive | `--status-error` | none | `#FFFFFF` | "Cancel request", "Mark Canceled" - an action that destroys the object | | Size | Height | State | Spec | | --- | --- | --- | --- | | `sm` | 28px | rest | the resting fill | | `md` (default) | 36px | hover | -10% luminance | | `lg` | 44px | pressed | -20% luminance | | `xl` (marketing only) | 52px | focus | 2px `--focus-ring`, 2px offset | | | -- | disabled | 40% opacity | | | -- | loading | spinner replaces label, width preserved | #### 11.2 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. Set ▾ Approve ▾ To Do ▾ Done ▾ Canceled ▾ Set ▾ #### 11.3 Primary — sizes Small Default Large Marketing #### 11.4 Primary — states Rest rest Hover hover Pressed pressed Focused focus-visible Disabled disabled Loading loading #### 11.5 Secondary — sizes Small Default Large Marketing #### 11.6 Secondary — states Rest rest Hover hover Pressed pressed Focused focus-visible Disabled disabled Loading loading #### 11.7 Tertiary — sizes Small Default Large Marketing #### 11.8 Tertiary — states Rest rest Hover hover Pressed pressed Focused focus-visible Disabled disabled Loading loading #### 11.9 Ghost — sizes & states Small Default Large Marketing Rest rest Hover hover Pressed pressed Focused focus-visible Disabled disabled Loading loading #### 11.10 Destructive — sizes & states Cancel request Cancel request Cancel reservation Mark Canceled Rest rest Hover hover Pressed pressed Focused focus-visible Disabled disabled Loading loading #### 11.11 Icon treatment Label-only, icon-only (square), leading icon, trailing icon. Icon is 14-16px; padding tightens for icon-only. Pay now ✓Approve Finish→ ⤓Request Set↗ … #### 11.12 Form fields — Both Guest email Used for the booking confirmation and any messages from the property. Internal request Late check-out requested for room 312; confirmed with housekeeping. Language Password Use at least 12 characters. Slider (generic control) Shown for the control's states only. Translation carries NO global control - no confidence slider, no thread switch, no conversation language setting; it is a per-message toggle, documented at `dmd 14`. Preferences New chat messages Assigned requests Passport ID card Service active Phone * ▢ +34 ▾ Country-code phone: flag + code prefix + number in one field. Baby Crib − 2 + Quantity stepper: -/value/+ control. Signature * ✎ Tap to put signature here Signature capture: off-white card, prompt + pencil tile. Pay now Skip | Element | Resting | Focus | Error | Disabled | | --- | --- | --- | --- | --- | | Text / textarea | 1px `--line-strong`, ~8px radius, 40px height; char counter ("0/750") | `--focus-ring` border + `--focus-ring-soft` glow | 2px `--status-error`, error helper | `--surface-sunken`, 40% text | | Select / dropdown | same plus caret | same | same | same | | Date / date-range / time | field plus calendar icon; range chip | same | same | same | | Checkbox | ~18px, ~4px radius; checked fills `--control-active` | 2px focus ring | error stroke | 40% opacity | | Radio | circle, 2px stroke; document-type choice | 2px focus ring | error stroke | 40% opacity | | Toggle | pill, `--control-active` ON, gray OFF; encodes service active/inactive | 2px focus ring | n/a | 40% opacity | | Quantity stepper | -/value/+ control | n/a | n/a | 40% opacity | | Signature capture | off-white card, "Tap to put signature here" + pencil tile | n/a | required asterisk | n/a | | Country-code phone | flag + code prefix + number | `--focus-ring` border | error stroke | 40% opacity | 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. #### 11.13 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 ![Guesteria full lockup, navy knockout](assets/logos/guesteria--logo.svg) shell header, dark ground ![Guesteria full lockup, off-white knockout](assets/logos/guesteria--logo-light.svg) app / favicon / strict slot only ![Guesteria circular badge](assets/logos/guesteria--icon.svg) #### 11.14 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. Guest Services Internal Requests Room Services All Priority Filters #### 11.15 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. #### 11.16 Pagination ‹ 1 2 3 4 ... 12 › #### 11.17 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`). The page ground stays white. A guest in the content is never a hand-rolled avatar + room badge - it is the `.guest-chip` component, so the room tag and the room-type code travel with it: AS 312 Alex Smith Family - FML Many items carry **dual count badges**: a gray total plus a violet unread ("Chats 23 | 4", "Requests 28 | 2" - the shipped frames disagree on the Requests badge, which also renders 12 | 1). The active item takes the SAME violet in every group - a `--brand-50` fill with `--brand-700` text and a 3px `--brand-600` left bar. There is no per-group active colour: ◆Arrivals ☀Services ■Dashboard #### 11.18 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. ![](assets/logos/guesteria--icon.svg) Verde Canario Hotel ⇤ AS Alex Smith alex.smith@example.com ▢Room ▤My Stay▾ ●Hotel▴ Wi-Fi Rules Info FAQ Map Amenities ♡Hotel Services ▲Activities ENG ▢ Download App Terms / Privacy #### 11.19 Dropdown menu — Front-Desk Actions ▾ Assign to ■Robert Williams`R` ◆Front-Desk team`T` ▲Housekeeping`H` Date range ❖Last 7 days`7` ◯Custom range ✕Cancel request Anchored popover, used for assignee pickers ("Robert Williams"), the date-range "Last 7 days" selector, row overflow (3-dot) menus, and the caret half of split-buttons. 32px row, --line-default separators. #### 11.20 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. ⚲ `Esc` Guests Alex Smith - Room 312Family - FML Verde Canario HotelProperty Reservation 2947594234Booking Recent Chats 4 - conversation list Requests 2 / Completed 12 `↑` `↓` navigate `Enter` select · `Esc` close #### 11.21 Dialog (modal) — Both ##### Cancel this request? This will mark the request `Canceled` and notify the guest. This action can't be undone from the request list. Keep request Cancel request Centered, ~480px max width, 16px radius, `--shadow-xl`, scrim `--surface-overlay`. Primary CTA right of the footer, cancel at left. #### 11.22 Right-side panel — Front-Desk The console's signature container: a collapsible right rail holding the Guest Experience journey panel or the Reservation Profile, anchored to the viewport edge and collapsible from the top bar. ##### Alex Smith × Reservation Profile Reservation ID Booking track Confirmation E-mail Pre-check-in Arrival Message Approve Skip #### 11.23 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. ##### Choose currency Pay now Skip Cancel request Decline #### 11.24 Popover, tooltip, hover-card — Front-Desk Hover for tooltip Help `?` Tooltip: ~4px radius, `--surface-inverse` background, `--text-inverse`, on collapsed nav icons and utility glyphs. 120ms open delay. Click for popover ###### Pre-Check-Outs / Departures Monday, 16 June 2025 - Occupancy 420 80% / Guest Satisfaction 8.5/10. New Approved Canceled #### 11.25 Toast / notification — Front-Desk + Pre Check-in Confirmed Alex Smith completed pre-check-in for room 312. × i Notifications You have 8 unread updates. × ! Warning Request #201 (Room Service) has been unassigned for over 15 minutes. × ! Error WhatsApp token expired for Front-Desk. × ~12px radius, `--shadow-lg`. Auto-dismiss info/success; keep error until dismissed. #### 11.26 Cards — Both Resting card --surface-canvas, 1px --line-default, ~12px radius (console) / ~16px (guest), --shadow-sm. Hover lifts to --shadow-md with a 1px --brand-200 border tint. Updated 2h Done Selected card 2px violet (--brand-600) border, padding shrinks by 1px to preserve outer dimensions. Active Disabled card 60% opacity, no shadow, no hover. Canceled #### 11.27 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). | ! | Guest | Request | Status | Room | Payment | | | --- | --- | --- | --- | --- | --- | --- | | | AS 312 Alex Smith Family - FML | Late check-out | Approved | 312 | Unpaid | Done ▾ | | | AC 112 Alex Carter Lux - ST-C | Breakfast in the room | Done | 112 | Paid | Approve ▾ | | | HS 214 Hiroshi Stouna Pre-Check - PCP | Room Service #201 | New | 201 | Unpaid | To Do ▾ | | | JD 312 John Doe Family - FML | Baby Crib x2 | Canceled | -- | -- | Canceled ▾ | | | RW Robert Williams Front Desk | Internal Chat | On Hold | -- | -- | Open | **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. #### 11.28 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`). JD 312 John Doe Family - FML HS 214 Hiroshi Stouna Pre-Check - PCP AC 112 Alex Carter Lux - ST-C #### 11.29 Data table — ranked and scheduling variants A ranked variant shows Top-5 with progress bars; a scheduling variant is a weekly grid. ranked · Top-5 Breakfast in the room Room Service Concierge chat Laundry Baby Crib x2 scheduling · weekly grid Mo Tu We Th Fr Sa Su #### 11.30 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. JD AC RW AS JD AC RW +4 #### 11.31 Progress & skeleton — Both Pre-Check-In progress Indeterminate (loading) Skeleton loader #### 11.32 Accordion — Guest What's included under Hotel? ▸ Six children - Wi-Fi, Rules, Info, FAQ, Map and Amenities - live in the guest drawer's expandable "Hotel" item, with a vertical guide line connecting the nested list. How do I change my check-out time? ▸ Request it from the Concierge tab; Front-Desk approves or declines and the status updates in your Requests list. Which languages does chat support? ▸ Translation is per MESSAGE, in both directions, and there is no thread mode: an inbound bubble arrives translated with "See original" beneath it, an outbound one shows "Translating" while it sends. No screen carries a "translate this thread" switch or a conversation language setting. #### 11.33 Badges, pills & chips — Both FML 312 Service Arrivals 45 Family (FML) Paid On Hold Not sent All × Priority × Room Restaurant Laundry | Variant | Background | Text | Use | | --- | --- | --- | --- | | Neutral | `--surface-sunken` | `--text-secondary` | Category pills (Restaurant, Room, Laundry), transport chips, assignee chips | | Room pill | `--ctx-3-600` neutral grey | `#FFFFFF` | The room NUMBER on the console guest-chip - solid neutral. The number itself also appears as plain text on guest and staff cards; only this pill is console-only | | Brand (`.badge-brand`) | `--brand-50` | `--brand-700` | Unread count badges, "Service" chip, brand-tied tags, the active state | | Skyline (staff/ops) | `--ctx-1-200` | `--ctx-1-800` | Staff/ops data: `Arrivals 45`, `Occupancy 420 80%`, bell `8` | | Earthy (guest) | `--ctx-2-200` / `--ctx-2-50` | `--ctx-2-800` / `--ctx-2-700` | Guest data: the avatar tile, stay dates, offer name, and the ROOM-TYPE CODE (FML, PCP, ST-C) where the surface renders it warm - the code reads warm olive on `Front Desk/FD - Chats 3.png` (R-B about 24) and neutral dark grey on `Front Desk/FD - Requests list - Guest.png`, so warm olive is a SURFACE-dependent rendering, not a global token. The room number beside it is neutral on both | | Success | `--status-success-soft` | `#065F46` | Approved, Done, Paid | | Warning | `--status-warning-soft` | `#92400E` | New, On Hold | | Error | `--status-error-soft` | `#9F1239` | Canceled, Not sent | 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. #### 11.34 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. Brand rule: violet marks the amount, the unread count and the active item. Console rule: the rail stays white and its eyebrows stay grey. Guest rule: the guest-app primary action stays navy on every screen, "Pay now" included. #### 11.35 System banners — Both + **Pre check-in confirmed.** Alex Smith is checked in for room 312. View i **Heads up.** The guest app drawer now shows Wi-Fi, Rules and Amenities under Hotel. ! **Warning.** Request #201 (Room Service) has been unassigned for over 15 minutes. ! **Sync failed.** WhatsApp token expired for Front-Desk. Inspect #### 11.36 Distinctive: KPI stat tiles — Front-Desk Arrivals Pre-Check-In 30% 45 today In-House Upsells 5 70 guests Departures Pre-Check-Out 30% 45 today #### 11.37 Distinctive: Activity Log — Front-Desk RW Robert Williams Room Cleaning 7:30 PM - marked Done. 2m JD Front-Desk Assigned Robert Williams to Room Service #201. 14m AS Alex Smith Completed pre-check-in for room 312; document scan verified. 1h #### 11.38 Distinctive: media overlay card — Both Guide Find the hotel map and local activities. Best practice Tint the header strip, keep the data on white. #### 11.39 Image & interaction handling — Both object-fit: cover ![A hotel interior, filling its frame](assets/bg-2.jpg) Photos use `cover`: the frame is filled, the crop is accepted. object-fit: contain ![](assets/bg-3.jpg) 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. #### 11.40 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. ![A photo under a context wash](assets/bg-1.jpg) Rhythm tint A real photo under a sub-prime wash, colour-coded by actor. ![A bright office interior](assets/bg-4.jpg) 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. ![Guest room](assets/bg-6.jpg) Liquid CTA over a photo The new `.btn-liquid` rides the frost - the same material as the panel. Get started Learn more #### 11.41 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 frost Front-Desk Guest ![](assets/bg-2.jpg) Ink frost Over 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. Save Save Save brand . cool . warm - one button, three rhythm tones #### 11.42 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. Glass over a light field A near-clear frost over a sub-prime ground - the DARK text reads, the luminous edge gives depth without a slab. Glass over a colour field Over a dark field the ink frost keeps the LIGHT text crisp - the same material, picked by the ground. Glass over a deep field The frost refracts the ground into a calm field; the block stays distinct, the copy legible. Run the whole flow from one calm console. A message that reads over any ground. #### 11.43 Distinctive: empty state — Both + No requests yet Guest and internal requests will appear here as they come in from chat, the app, and the front desk. Request a service #### 11.44 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`). ![](assets/bg-1.jpg) TOP Room Service Breakfast in the room 45 EUR ![](assets/bg-4.jpg) 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 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. --space-1 / 4 --space-2 / 8 --space-3 / 12 --space-4 / 16 --space-5 / 24 --space-6 / 32 --space-7 / 48 --space-8 / 64 --space-9 / 96 --space-10 / 128 #### 12.1 Containers, gutters & grid | Dimension | Value | | --- | --- | | Spacing scale | 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 | | Container widths | the console is a full-bleed dashboard (cap ~1440 to keep tables scannable); the guest app is a 446px mobile artboard; marketing centers ~1200; reading content ~640 | | Page gutter | 24px at `<768`, 32px at `>=768`, 48px at `>=1280` | | Grid | 12 columns on the console. The guest app runs TWO grids, chosen by screen kind: the dashboard and the wizard are a single column with horizontal card carousels (`Guest/Guest - Dashboard - In stay State.png`), and every CATALOGUE screen is a **two-column grid** of photo cards - Activities, Services, Amenities (`Guest/Guest - Activities_grid.png`, `Guest/Guest - Amenities_grid view.png`). The grid does not replace the carousel: Activities and Services each keep a horizontal Featured / Recommended carousel BAND above the grid, so a catalogue screen is a band plus a grid. A browse screen is a grid; a task screen is a column | | Section rhythm | 64px between sections, 32px between subsections, 16px inside a card | #### 12.2 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. ### 13 Three surfaces, one system Guesteria's surfaces are not one responsive layout: they are THREE tonally independent design directions sharing one brand — a white, dense Front-Desk / Tenant / Admin console (desktop web, 1296x848 artboards), a warm, airy Guest app (iOS, mobile web, WhatsApp, 446x948) and a cool, compact Staff app (mobile, WhatsApp, same 446x948). A viewer can name the surface from the page ground alone, with the type and photography cropped out. The surface sets only the CANVAS; component colour is carried by the OBJECT KIND it represents, not by the block, and not by the actor holding the phone. **The staff app is not the console on a phone and not the guest app for staff.** Its ground is the arithmetic inverse of the guest ground, it re-implements the request card, the status pill and the bottom bar rather than reusing the guest ones, and its status vocabulary has already drifted from the other two - Done renders violet there while the green pill reads "Finished" (`Staff/staff - Dashboard.png`, `Staff/staff - Dashboard - Listed Task.png`, `Staff/staff - Chats.png`). Every shared component is tested three times. Front-Desk console Canvas: white Dense The page ground is WHITE; cool blue-grey appears only as a grouped-panel fill inside the page, never as the canvas (`Front Desk/FD - Requests list - Guest.png`, `Front Desk/FD - Requests - View request -Guest.png`). Multi-column sortable tables, KPI tiles, a white left nav rail with a property switcher and dual count badges, and a top bar with global search (no command palette). Photography appears only as a 32-40px row thumbnail. One shell serves three roles - the same rail and top bar carry "Front Desk / Verde Canario" and "Guesteria Admin / Hotel Brand #1". Observed info-chips, read off the master Front-Desk screens and kept verbatim. Staff/ops chips carry the Skyline role; unread inbox counts and the active state stay violet. Arrivals 45 In-House 70 Departures 45 Chats 4 Requests 2 / Completed 12 Occupancy 420 80% Guest Satisfaction 8.5/10 bell 8 FML PCP ST-C 312 New Approved Done Guest app Canvas: warm Spacious Airy and photograph-led, large radii; a floating translucent 5-tab bar with a raised circular Concierge tab that content scrolls under, one navy primary CTA per screen. Task screens are one column, catalogue screens are two-column photo grids. Guest data tints to `--ctx-2-*` (Earthy Comfort); the PRICE is violet and the pay action beside it is navy. Observed info-chips, read off the master Guest screens. Guest data carries the Earthy role; the price renders in the brand violet on every guest screen sampled. Verde Canario Hotel Alex Smith 2 adults - 2 childs 16 June - 22 June Family (FML) Breakfast in the room 45 EUR 10% Room Activities Concierge Requests My Stay Baby Crib x2 40 EUR ▢ Pay now The price `40 EUR` is the brand violet; "Pay now" beside it is dark navy with a card glyph. Violet and navy have swapped the roles a reader expects: violet marks the AMOUNT, navy COMMITS (`Guest/Guest - My requests1.png`, `Guest/Guest - Chats.png`). Staff app Canvas: cool Compact A cool off-white ground (`--ctx-1-50`) carrying white task cards, each with a fixed-width photo strip down its left edge and a category tab on the photo. A flat opaque 4-tab bar - Dashboard, Schedule, Chats, Account - with no raised tab and no translucency. The filter row IS the count row: horizontally scrolling tiles where each tile is both the number and the filter. The CTA is full-width, ~40px, and coloured by the verb (`Staff/staff - Dashboard.png`). Observed on the master Staff screens. Two cards with the SAME status, Approved, carry different buttons - assignment picks the verb, not status alone: All Tasks 21 Unassigned 2 Priority 5 Active 4 On Hold 1 Approved Done Finished Get Start Finish "Done" is VIOLET here and "Finished" is the green one - a word the status table does not otherwise carry. Do not assume the guest app's status colours transfer. Context is bound to the smallest element that carries the distinction, not to the block, so one row can hold several at once. A content-heavy row stays WHITE: tint only the low-detail header strip, then put the dense content in a white inner card. Below, a Front-Desk Requests work-row carries a guest avatar tile (warm) beside a neutral room pill and an olive room-type code, a violet-outlined per-message translate pill, and a SLATE Approve split-button — four colour jobs in a single row, none of them tinting the row itself: Front-Desk Requests AS 312 Alex Smith Family - FML ● New ▢ See original Approve ▾ Independence is real: a component may exist on one surface and not the others - the staff app has presence tiles and a shift grid that no other surface carries, and the guest app shows no staff identity at all, attributing every reply to "Cocierge". Tag every component by surface (Front-Desk / Guest / Staff / Both); tint it by the OBJECT KIND it carries (a guest request is cool, an internal request warm yellow, a note warm peach, a guest identity warm sand and olive), and keep the tint off every container. ### 14 Top journeys, rebuilt as blocks No one-off styling; every block is traceable to a real screen. 1. Front-Desk agent clears the morning queue Signature block: a KPI tile row (Arrivals 45 Skyline, Requests 2 / Completed 12 violet) + a work-list row with a `.guest-chip` and a SLATE Approve split-button. Rebuilt from `components.data-table` + `components.badges-chips`. Screens: `Front Desk/FD - Dashboard.png`, `Front Desk/FD - Requests list - Guest.png`. 2. Operator answers + translates a chat Front-Desk agent replying across a language gap. Signature block: a 3-pane chat (list / thread / composer) - a `.guest-chip` in the list, and a hanging translation pill under each bubble. **Two things are OPERATOR-only.** Merge fields render LITERALLY in the composer and in the operator's own outbound bubble (`{{guestFirstName}}`, `{{guestProductPage}}`) and resolve on send - the conversation-list preview of that same message already reads "Hey, Maria"; no guest screen carries a token (`Front Desk/FD - Chats 3.png` against `Guest/Guest - Chats.png`). And the transport chip ("WhatsApp") rides beside every timestamp on the console while the guest thread carries no transport mark at all. Translation is a per-message pill labelled by ACTION - Translate, Translating, See original - attached outside the bubble at its trailing edge. There is no thread mode, no language picker, and the word "AI" appears nowhere on any screen; the target language is a reservation attribute ("Preferred language: Spanish"), resolved before the first message. The in-flight "Translating" state sits on the OUTBOUND bubble, which is the tell that translation is a send-path step and not a display filter. AS 312 Alex Smith Family - FML Hola, llego tarde esta noche. WhatsApp ▢ See original now RW Reception Hey, {{guestFirstName}}! No problem, your room is ready. WhatsApp ▢ Translating 3:10 PM 3. Guest completes pre-check-in Signature block: a multi-step wizard row with an olive/taupe progress bar, a live phone preview in the console, a document-scan reticle (red to green), Earthy doc chips, and a NAVY "Next". The step counter is not a constant. Pre-check-in runs Step N/8, but the pre-check-out wizard prints two denominators in one flow and draws two of its five frames against the wrong one: Step 1 fills ~12% under a printed 1/5, and Step 4 fills ~75%, matching neither 4/5 nor 4/8. Steps 2, 2.2 and 5 agree with their labels - Step 2 fills ~25%, exactly 2/8 - so the defect is two frames drawn against a five-step model, not a bar that is generally wrong. The fills are read off the olive against the track and carry about half a percentage point of antialiasing noise; the measurement, its method and its tolerance are owned by `sources/app/ui-approaches.md` (`Guest/Guest - Pre-check-out - Step 1.png`, `Guest/Guest - Pre-check-out - Step 2.png`, `Guest/Guest - Pre-check-out - Step 4.png`). The denominator must be derived from the enabled step set - a hard-coded "N/M" per screen cannot survive a wizard whose length is a console setting. Screens: `Guest/Guest - Pre-check-in-Step 1.png`, `FD_Settings/FD_Settings - Pre Check-In-Step 7.png`. 4. Guest orders a concierge service and pays Signature block: a concierge offer card ("Baby Crib x2 / 40 EUR") with the price in brand VIOLET and a dark NAVY "Pay now" carrying a card glyph. The card is not chat-specific - it is the same request object, sitting inside a tinted outgoing bubble with the bubble's own padding, timestamp and read receipt around it. Rebuilt from `components.cards` + `components.buttons`. Screens: `Guest/Guest - Chats.png`, `Guest/Guest - My requests1.png`. 5. Guest reviews the stay + bill Guest rates the stay and sees the bill. Signature block: a SINGLE five-star row with an optional comment above the itemized line items, which render in mono. There is no total row and no pay action: the Bill Summary screen is excluded from the corpus because the product must not depict a checkout. **There is no dual rating.** No emoji-face row appears on any screen - the second control beside the stars is a plain "Add comment (optional)" pill in the thread, or a Comments/Preferences textarea in the modal (`Guest/Guest - Chat - Rate the communication.png`, `Guest/Guest - Request_feedback.png`). The same five gold stars carry the feedback back into the console's request detail. Warm canvas, neutral bill text, gold stars. Rebuilt from `components.cards` + `components.badges-chips` + `components.form-fields`. ★★★★★ Add comment (optional) Breakfast in the room 45 EUR Baby Crib x2 40 EUR No total, and no pay action. The Bill Summary screen is deliberately outside this corpus - payments are handled by the partner, so a checkout or a card form must not be depicted inside the product (`selection.md` L155-160). Line items are the shipped part; summing them here would be an unsourced number. Rule: a story block ships only when it cites the source screen it reconstructs. No screen, no block. ### 15 Radius & elevation Seven radius tokens, four shadow tiers. Cards step from sm to md on hover; modals and drawers sit on xl. Radius values are inferred from approximate twin pixels (cards ~12px, inputs ~8px, guest cards ~16px) - the source mandates "rounded / pill", not exact numbers. #### 15.1 Radius scale xs / 4 sm / 8 md / 12 lg / 16 photo / 32 island / 0.9em pill #### 15.2 Elevation tiers shadow-sm / resting card, KPI tile shadow-md / hovered card, dropdown shadow-lg / toast, popover, legend shadow-xl / dialog, drawer, phone preview ### 16 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. | Token | Range | Strategy | | --- | --- | --- | | `xs` | < 480 | Guest and staff app default: one column for task screens, TWO columns for catalogue screens, bottom tab bar, bottom-sheet menus, sticky primary CTA | | `sm` | 480-767 | Same two grids, sticky bottom CTA | | `md` | 768-1023 | Console rail collapses; right panel stacks under content | | `lg` | 1024-1279 | Console full left rail + content + optional right panel | | `xl` | 1280-1535 | Default console dashboard layout | | `2xl` | >= 1536 | Console caps ~1440 to keep tables scannable, never wider | ### 17 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`). ? bell 8 JD John Doe Front-Desk ▾ #### 17.1 Hey, John! How are you today? Monday, 16 June 2025 10:00 + Add service Arrivals Pre-Check-In 30% 45 today In-House Upsells 5 70 guests Departures Pre-Check-Out 30% 45 today i **Heads up.** Request #201 (Room Service) has been unassigned for over 15 minutes. Assign Chats 4 Answered automatically 30% AS 312 Alex Smith Family - FML WhatsApp AC 112 Alex Carter Lux - ST-C Guest App Requests 2 Completed 12 Room Service #201 New Robert Williams ▾ Approve ▾ Baby Crib x2 New Unassigned ▾ Approve ▾ Guest Services Internal Requests Room Services All Priority Filters Property: Verde Canario × Unassigned | Request | Guest | Status | Room | Started | | | --- | --- | --- | --- | --- | --- | | Late check-out | AS 312 Alex Smith Family - FML | Approved | 312 | 9:00 AM | Done ▾ | | Breakfast in the room | AC 112 Alex Carter Lux - ST-C | Done | 112 | 8:30 AM | View | | Room Service #201 | HS 214 Hiroshi Stouna Pre-Check - PCP | New | 201 | 10:00 AM | To Do ▾ | | Baby Crib x2 | JD 312 John Doe Family - FML | Canceled | -- | -- | View | Showing 4 of 12 ‹ 1 2 3 › Activity Log 1 Room Cleaning 7:30 PM Robert Williams ✓ Done 2 Room Service #201 Robert Williams ● New 3 Late check-out Front-Desk ✓ Approved Analytics Last 7 days ▾ ###### Monday, 16 June 2025 Occupancy 420 80% / Guest Satisfaction 8.5/10 / Upsells 17 Key Metrics Occupancy 420 80% Guest Satisfaction 8.5/10 Upsells 17 Guest Experience ⇥ PMS Confirmation E-mail Pre-check-in Arrival Message Guest App Services Amenities FAQ Pre-check-out Feedback follow-up When notifications fire, this rail is replaced by the colour-coded toast stack. ### 18 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 ``` #### 18.1 Generation rules & fast cautions What an agent generating a Guesteria surface applies, and what it must never do. ##### Generation rules of thumb - Pick the CANVAS first, from THREE: white console (`--surface-canvas`), warm guest (`--surface-guest` `#EAE7E1`), cool staff (`--ctx-1-50`). The surface only sets the ground, and only as a low-detail frame - it does not tint the components inside, and it never floods a data-dense block. Cool blue-grey on a console page is a grouped-PANEL fill, never the page ground. - Tint by the OBJECT KIND, not by the block and not by the actor: staff/ops data → Skyline `--ctx-1-*`; guest data → Earthy `--ctx-2-*`; a guest request cool, an internal request warm yellow, a note warm peach. Apply it to the smallest element that carries the distinction - a button fill, a chip outline, a two-letter avatar tile - and keep every container neutral. - Sidebar: keep the rail WHITE and the group eyebrows one NEUTRAL grey. Only the ACTIVE item takes colour, and it is the brand violet in every group. Do not tint a group by meaning. - A guest in any row is the `.guest-chip` component - a warm rounded-SQUARE avatar tile, a NEUTRAL grey room-number pill on its lower edge, and the room-type code in warm olive (`--ctx-2-700`). A staff or operator row is a CIRCULAR avatar, a photo where one exists, with a grey role caption and no room tag. Never swap the two shapes. - Route the primary CTA by SURFACE and by VERB. Guest primary = navy `--brand-800`, always, including "Pay now". Staff primary = the verb's own hue (Get blue, Start orange, Finish green). Console manager action = the split-button, slate at the intermediate states. Console create action = violet. Violet is otherwise a MARK, not a button: the price, the unread count, the active-nav fill, the translation pill. - A guest offer card is a PHOTO card, two-up in a catalogue grid under a Featured / Recommended carousel band: photo, then an orange TOP badge and a translucent category chip over it, then the name, then the price in brand violet. No feature list, no plan column, no per-card button row - the commit action lives on the detail the card opens. The `.feature-list` class stays in the stylesheet for non-product surfaces; no guest screen uses it. - Header current-item indicator: every `.nav-links` link's `href="#id"` pairs with a `
` in the body, ids unique; an inline scroll-spy lights the matching `.nav-link` (a desaturated `--control-active` underline via `.nav-link.is-active`) for the section in view. Wire ids before relying on it. - Guest price / commerce emphasis renders in the brand VIOLET (`--brand-600`), on every guest screen - card grids, dashboard carousels, request cards and chat cards alike. The commit action beside it is navy. The system has no warm-red commerce hue. - Idle field focus = `--focus-ring` border + `--focus-ring-soft` glow on white; committed controls fill `--control-active`. Never set focus or an idle/committed control to the saturated `--brand-600`. - Status: use color-coded pills with a glyph (Approved green, In Progress blue, New amber, Canceled red). Manager split-buttons take slate at Set / Approve / To Do and the status colour only at Done (green) and Canceled (red). On the STAFF app the vocabulary differs - Done is violet there and the green pill reads "Finished"; map status to label per client rather than assuming one table. - Tables: hairline rows, sticky header; the guest cell is a `.guest-chip`, with the room-type code in mono olive (FML / PCP / ST-C); color balances (green/red). Overdue is a RED DATE, not a pill - no "Overdue" badge exists anywhere. - Empty states always carry a primary action. Derive a wizard's step counter from the enabled step set - "N/8" is the pre-check-in case, not a constant; the pre-check-out flow ships /5 and /8 in the same wizard. The progress bar is olive/taupe. - Product photography runs RAW inside a rounded rectangle - untinted and unmasked. It is not bare: the Hotel Info header is the one plain case, while EVERY catalogue thumbnail carries furniture over the image - the orange TOP badge on a Featured card, two chips on a grid card. Generate no bare catalogue photo. The tint / disc-badge / curve-mask treatments belong to the off-product register. - Translation is a per-message pill labelled by ACTION (Translate / Translating / See original), hung outside the bubble at its trailing edge. No thread mode, no language picker, and never the word "AI" - the target language is a reservation attribute. Merge-field tokens are an OPERATOR affordance: they render literally in the composer and the operator's outbound bubble and resolve on send; no guest screen carries one. ##### Fast cautions - Never set the focus ring or an idle/committed control to the brand fill. Idle focus uses `--focus-ring` (`#A59CD3`) + `--focus-ring-soft`; committed controls use `--control-active` (`#4E4670`). - Never put a background fill on the sidebar rail, and never tint a group eyebrow. Keep the rail white, the eyebrows one neutral grey, and the violet for the active item alone. - Never paint a guest CTA violet, brown or blue - EVERY guest primary is navy `--brand-800`, "Pay now" included. Violet on a guest surface marks the price, not the button. - Never draw a guest avatar round or a colleague's avatar square, and never make the room-number pill warm - the pill is neutral grey; the warmth in that cluster is the avatar tile and the room-type code. - Never tint a whole block by its surface, and never flood a data-dense block (table, form, multi-row card) with a `--ctx-*-50`/`--brand` fill. Tint a low-detail header strip and white-wrap the content; tint each component by the actor/data it carries. - Never render the guest price as neutral text. It is the brand VIOLET (`--brand-600`) on every guest screen; a warm-red price hue is not a brand colour and stays excluded. - Never animate `width` or `height`. Animate `transform` and `opacity`. - Never use pure black on pure white; cards are `#FFFFFF` but text bottoms at `#0A0A0B`. - Never signal a status by color alone; pair it with a glyph and a label. ## Guest experience platform for hotels. ### 19 The system, applied off-product A creative recolors and retypes the system; it never invents a second brand. Every off-product surface reuses the same violet ramp, the same Codec Pro display and Source Sans 3 body pairing, and the same graphic language - the bell-swirl mark, the connecting line unrolled from it, and the line-built icon set (see `05 Visual language`) - tuned for each format. One accent device per view. The line is a single continuous open monoline, constant width, fully rounded end caps, smooth curves only, looping over itself at most once but never closing (logobook p01, p08, p18). Its colour is one flat tone of its ground — off-white on neutral, a lighter tint of violet on a LIGHT-violet `--brand-50` field, slate-blue on navy — or full brand violet `#826AFF` to pop on a photo (logobook p04, p08, p12, p17). On a SATURATED `--brand-600` field the line knocks out off-white `#FFFDF5`; `--brand-200` there is the adjacent ramp step and vanishes. Never gradient, tapered, dashed, or outlined; off-palette colour is an explicit don't, with a green lockup and a yellow-on-black lockup both struck out (logobook p06). The brand mark is the REAL logo only, and the full lockup is the default. Which file belongs on which ground is `logo 3`, and what breaks the mark is `logo 4`. Every applied surface places the full wordmark lockup (`assets/logos/guesteria--logo.svg` on light grounds, `guesteria--logo-light.svg` on dark or saturated grounds, with the capsule / violet / lavender variants as the ground asks); the lockup is ONE element, never a bare icon plus a separate "Guesteria" text node. The bare circle mark (`guesteria--icon.svg`, `viewBox 0 0 256 256`) is reserved for the icon's strict slots — the app-icon tile and a favicon-type tile — though a creative MAY also reach for it as a SHORT logo at small / square scale (apparel, sticker, a corner stamp), ground-correct and still one mark per creative. No fabricated glyph, no coloured-square placeholder, no hand-drawn bell stands in for it (logobook p01, p15). #### 19.1 Icon language - the real line-built glyphs The set is FIVE glyphs and the master owns it (`dmd 7`): heart, house, location, phone and a filled document. This facet renders the four MONOLINE files from `assets/icons/` at their native `viewBox 0 0 96 96` — `icon--heart.svg`, `icon--location.svg`, `icon--house.svg` and `icon--phone.svg` — each a single stroke, round caps, single-ink, recoloured via the disc's colour; the fifth, `icon--document.svg`, is filled rather than stroked and is shown at `dmd 7`. Heart Location pin House Phone #### 19.2 Curve x palette x background The line takes a NEAR-TONE of its ground (logobook p04, p08, p12, p17). The SAME real curve from the canon (`curve-1--top-right.svg`) is rendered once per sanctioned line colour on its MATCHING ground; a gallery cell that shows a curve WHOLE takes a `.curve-frame` whose `aspect-ratio` matches the curve's viewBox, so `slice` shows the same shape legibly in every line colour. **Violet on light violet.** `var(--brand-600)` `#826AFF` (or the lighter `var(--brand-200)` `#C7BCFF`) on a light-violet `var(--brand-50)` `#F2F0FF` field - the brand ground (logobook p12, p14). **Skyline blue on blue.** `var(--ctx-1-700)` on a `var(--ctx-1-50)` ground - the staff / operations near-tone, the brand's Skyline family (logobook p16 navy frame, p18 divider). **Earthy on warm.** `var(--ctx-2-700)` on a warm `var(--ctx-2-50)` ground - the guest / comfort near-tone, the brand's Earthy Comfort family (logobook p08, p11). **Off-white on navy.** `#FFFDF5` on a navy `#2D2F44` ground - the knockout tone the cover uses (logobook p01, p18). A curve's stroke is coloured by ROLE: a SUBJECT curve (the gallery, a hero with no heading over it) is DISTINGUISHABLE from its ground; a BACKING curve behind a bare heading is a NEAR-TONE of the ground (the same light/dark zone, low contrast) — never a knockout line under a same-tone title. A bold line stays only where it is the subject AND the heading rides a `.tagwrap` pill. Text over a saturated ground is high-contrast (`#fff` for headings, or the focus phrase wrapped in a rounded `.tagwrap`). Every curve in a creative frame uses ONE non-breakable fill model: inside a `position:relative; overflow:hidden` frame, a `.curve-fill` div holds the source svg at its OWN viewBox with `preserveAspectRatio=" slice"`. The `slice` covers the format (uniform scale, no distortion) and pins the curve's NAMED edges off-frame, so the rounded line ENDINGS are never visible. `` is the curve's named edges, fixed per curve: top-right curves use `xMaxYMin` (`curve-1` 608x467, `curve-2-2` 279x151, `curve-6-2` 267x347), bottom-right curves use `xMaxYMax` (`curve-2-1` 291x541, `curve-3-1` 306x345, `curve-5-1` 247x132). A curve MAY be rotated in 90-degree steps and MAY be mirrored, provided the transform is applied to the PATH inside the viewBox (never a CSS transform on the element, which leaves the box unrotated so `slice` covers the old box) and the ALIGN is REMAPPED to the edges the transform moved the line onto. Untransformed, each layout simply picks a curve whose natural named edges suit it; the frames on this page that mirror `curve-3-1` and `curve-5-1` do it through the mask path, with the mask's own boundary carrying the mirror. #### 19.3 Icons + curves, together The two motifs combine in creatives: a real icon disc seats at the END of a curve sweep so the line "drops off" the icon, or NESTS inside a curve's loop like a bead on a thread. Four worked pairings — always a real curve recoloured to its ground plus a real glyph file, never a new shape, never an off-palette colour (logobook p13, p14, p25). Heart on curve-1 The `icon--heart.svg` disc sits where the hero loop (`curve-1`) ends, on `var(--brand-50)` — the line drops off the icon (logobook p14). Pin in curve-2-1 loop The `icon--location.svg` disc nests inside the enlarged loop (`curve-2-1`), off-white line on the `#2D2F44` navy — icon within the curve (logobook p25). House on curve-3-1 The `icon--house.svg` disc rides the high end of the Skyline routing thread (`curve-3-1`), `var(--ctx-1-700)` on `var(--ctx-1-50)` (logobook p14). Phone on curve-6-2 The `icon--phone.svg` disc seats at the foot of the Earthy backdrop loop (`curve-6-2`), `var(--ctx-2-700)` on `var(--ctx-2-50)` (logobook p13). #### 19.4 Composition approach (the golden rule) Every surface obeys the golden rule: (1) ONE ANCHORED CLUSTER - group the headline, supporting copy and the lockup into a single block (a `.cre-cluster`) seated on a third, the lockup sized to the headline, never scattered to opposite corners with a dead middle; (2) CURVE AS COUNTERWEIGHT - the curve's mass fills the rest of the frame OPPOSITE the cluster, balancing it across the centre; (3) AIR AND SAFE MARGINS - generous, even margins; if it does not fit, cut copy, not margins (logobook p06, p15); (4) SCALE CONTRAST - type, logo, line and icon each sit at a clearly different scale, never two elements fighting at the same weight; (5) ONE PER SURFACE - one accent line, one CTA, one idea per surface (logobook p17). Vary the format across four patterns: **top-cluster** / **center** / **side-band** / **diagonal**; each frame below names its pattern. #### 19.5 Tag wrapper - focus a phrase, a sentence, or a paragraph When text runs close in color to the shape/ground behind it, wrap it in a `.tagwrap` (real DOM, not inline styles). It scopes any span: one word, or a whole sentence, or a paragraph. Its corner radius follows the roundness stance (see `06 Shape & roundness`) - a paragraph wrapper's radius stays at or below its horizontal padding, and a WHOLE paragraph carries generous VERTICAL padding. I go to school in the morning. A whole sentence, scoped into one pill. A whole paragraph can sit inside the wrapper when the photo or shape behind it would otherwise swallow the text. Balanced padding, a radius that stays under the padding, easy to replicate. #### 19.6 The four off-product formats Formats: small (1:1 post, 4:5 story/poster, icon tiles, app tile), medium (business card, 8:5 ad), full-width (letterhead, wide banner), and fullscreen 16:9 slides. Every frame reuses the violet ramp, Codec Pro headings, one REAL open monoline (round caps, no gradient, recoloured to its ground via the curve files above) from the master curve system, grounded in a logobook page. Social media 1:1 and 4:5 frames. A giant brand icon (house, location pin, or heart) blows up until it bleeds off-frame, with a line tail running out of it so icon and connector read as one stroke; the lockup pins bottom-center (logobook p16). One icon per frame. Posters / Print Portrait posters bleed one hero curve off the frame; the business card carries the full lockup and the tagline on one grey and one violet face; the A-frame routes a line from headline to a corridor photo; the letterhead loops a quiet line behind the body copy. On a photo, the lockup knocks out white over a 30% dark mask (logobook p07). Presentation slides 16:9. One message per slide, generous margins. Section dividers run the line full-bleed, entering one edge and exiting another to imply continuation (logobook p12, p18). Ads Multiple sizes from one layout: logo, one line of copy, one CTA reusing the primary button. At small or product scale (apparel, app icon, door hangers) the free line is dropped and the icon alone carries the identity (logobook p21-p24). The bulkier galleries (Social, Posters/Print, Slides, Ads, and the curve-masked photo splits) are **swipe carousels** (`.cre-carousel` scroll-snap tracks with prev/next arrows, `data-carousel-autoplay="6000"`); the engine JS pauses on hover/focus, respects reduced-motion, and the track swipes natively with JS off. #### 19.7 Social mockups **Stories (vertical).** The enlarged-loop watermark. One icon per frame, rotated for variety — the book shows house, location pin, and heart at giant scale on grey, violet, and navy frames — with the lockup pinned bottom-center and the icon in a near-tone of the ground (logobook p16). **Facebook / LinkedIn.** The swirl or location-pin motif is enlarged and laid across the seam between a solid brand colour field and a photo, overlapping the boundary; here the motif may go full brand violet `#826AFF` to pop against the photograph (logobook p17). **Frames and rhythm.** Use 1:1 and 4:5 frames, one idea per post, headline in Codec Pro display; the line-built icons (logobook p13) also tile as 1:1 brand stamps. Social 1:1 / 4:5 seven frames < > Post 1:1 top-cluster · logobook p16 / p13 ![Guesteria](assets/logos/guesteria--logo.svg) Every guest, cared for. From first message to check-out. The enlarged loop `curve-2-1` at near-tone `var(--brand-200)` on a `var(--brand-50)` field, with the real `icon--heart.svg` disc seated at the sweep (logobook p16, p13). Guest post 1:1 top-cluster · ctx-2 ground ![Guesteria](assets/logos/guesteria--logo.svg) Your stay, made simple. Everything ready before you arrive. The hero loop `curve-1` in Earthy `var(--ctx-2-700)` on warm `var(--ctx-2-50)` — a SUBJECT line, so the headline rides a `.tagwrap` pill to clear it (logobook p08, p11). Staff post 1:1 top-cluster · ctx-1 ground ![Guesteria](assets/logos/guesteria--logo.svg) One console, every property. Desk, housekeeping and maintenance in sync. The routing thread `curve-3-1` in Skyline `var(--ctx-1-700)` on blue `var(--ctx-1-50)`; the copy rides a `.tagwrap` where it crosses the line (logobook p16). Story 4:5 side-band · logobook p16 / p01 ![Guesteria](assets/logos/guesteria--logo-light.svg) Find your place. Off-white `#FFFDF5` enlarged loop `curve-2-1` on navy `#2D2F44` with the real `icon--location.svg` disc (logobook p16, p01). Story 4:5 top-cluster · logobook p12 / p14 ![Guesteria](assets/logos/guesteria--logo-light.svg) Booking to check-out. The hero loop `curve-1` in off-white `#FFFDF5` bleeding off a `var(--brand-600)` field — the sanctioned knockout pop on violet, never `--brand-200` (logobook p12, p14). Icon tiles 1:1 center · logobook p13 The real line-built glyphs as 1:1 brand stamps — heart, pin, house, phone — single-ink on `var(--brand-50)` (logobook p13). Post 1:1 glass island · photo ![Guesteria](assets/logos/guesteria--logo-light.svg) A welcome that travels. The brand reads over any photo — a frosted island lifts the line off the image, the border catches the light. A liquid-glass `.island.glass.glass--ink` over a real photo (`bg-7.jpg`): the DARK frost and light text keep the copy crisp over the image, the logo holding the top-left at the same padding (theme.liquid-glass). #### 19.8 Photo, curve-masked Real brand photography (`assets/bg-0.jpg` .. `assets/bg-7.jpg`) meets a colour splash across a FULL-BLEED brand curve: the bigger part carries the message, the photo fills the rest, and the boundary is cut from a REAL master curve (`curve-3-1`, `curve-5-1`), never a generic arc. Each of the four `.photo-split` creatives carries its own inline `clipPath` (`cm-1` .. `cm-4`) traced from a real curve's normalized path and closed along the frame edges. The photo also carries a matching colour wash. The brand mark appears ONCE per creative — the full lockup rides WITH the cluster, so the photo side carries at most a FUNCTIONAL icon-disc in a CONTRAST tone, never the brand logo-disc again and never the lockup's colour, toward the TOP and clear of the copy. Each carries a headline → subtitle → body stack knocked out in `#fff`; the focus phrase rides a rounded `.tagwrap` pill whose colour differs from BOTH the splash AND the text — a same-colour pill vanishes (logobook p07, p17). Photo + curve split cm-1 .. cm-4 < > Split 16:9 brand splash · photo right · curve-3-1 edge ![Guesteria](assets/logos/guesteria--logo-light.svg) Every guest, cared for. From first message to check-out. The whole stay runs on one calm console — staff and guest, one timeline. Brand `var(--brand-600)` splash carries the headline + subtitle + body; the real photo (`bg-1.jpg`) fills the right behind a brand wash, the boundary cut from `curve-3-1`; the focus phrase in an INK `.tagwrap` pill that differs from the violet splash (logobook p17, p07). Split 16:9 staff splash · photo left · curve-3-1 mirrored ![Guesteria](assets/logos/guesteria--logo-light.svg) Run it all, one screen. One console, whole portfolio. Housekeeping, front desk and maintenance, all in sync. Staff `var(--ctx-1-800)` `#2E4258` splash on the right; the real photo (`bg-3.jpg`) fills the left behind a slate wash, the boundary cut from `curve-3-1` mirrored; the location-disc top-left on the photo side, the phrase in a light staff pill (logobook p07). Split 16:9 guest splash · photo right thirds · curve-5-1 edge ![Guesteria](assets/logos/guesteria--logo-light.svg) Feel at home, from hello. The welcome starts before arrival. Check in early and find everything ready the moment you walk in. Guest `var(--ctx-2-800)` `#443F2C` splash takes two-thirds; the real photo (`bg-5.jpg`) fills a thirds sliver on the right behind an earthy wash, the boundary cut from `curve-5-1`; the light lockup leads the cluster, one mark per creative (logobook p07). Split 16:9 navy splash · photo left thirds · curve-5-1 mirrored ![Guesteria](assets/logos/guesteria--logo-light.svg) Calm, premium, service-grade. One system, off-product too. The brand carries to any surface without a redesign — one system, every surface. Navy `#2D2F44` splash takes two-thirds; the real photo (`bg-6.jpg`) fills a thirds sliver on the left behind a navy wash, the boundary cut from `curve-5-1` mirrored; the violet heart-disc rides the photo side, the phrase in a violet pill that differs from the navy splash (logobook p01, p07). #### 19.9 Tinted photo + photo badge Two more ways the system meets real photography (logobook p07). **Tinted photo (`.photo-tint`).** A brand or context colour WASH over a real `bg-N.jpg` via `mix-blend-mode: multiply` — brand `var(--brand-600)` over `bg-0.jpg`, staff `var(--ctx-1-800)` `#2E4258` over `bg-2.jpg`, guest `var(--ctx-2-800)` `#443F2C` over `bg-4.jpg`, dark `#2D2F44` over `bg-7.jpg`. The knockout headline always rides `#fff`. **Photo badge (`.photo-badge`).** A real mark seated in a disc on a tinted photo, never a fabricated medallion wordmark: the disc holds a REAL asset only — an icon glyph or the bare mark `assets/logos/guesteria--mark.svg`. Tint · brand ![Guesteria property, violet wash](assets/bg-0.jpg) The guest experience platform Brand `var(--brand-600)` wash over `bg-0.jpg`; the knockout headline rides `#fff` (logobook p07). Tint · staff ![Operations corridor, slate wash](assets/bg-2.jpg) Operations, automated Staff `var(--ctx-1-800)` `#2E4258` wash over `bg-2.jpg` (logobook p07). Tint · guest ![Guest room, warm wash](assets/bg-4.jpg) A warm welcome, every time Guest `var(--ctx-2-800)` `#443F2C` wash over `bg-4.jpg` (logobook p07). Tint · dark ![Property exterior, navy wash](assets/bg-7.jpg) One brand, every touchpoint Dark `#2D2F44` wash over `bg-7.jpg` (logobook p07). Badge · icon-in-circle ![Guest stay, brand wash](assets/bg-3.jpg) Icon-in-circle: the real `icon--heart.svg` glyph in an off-white disc on a brand-washed photo. Badge · mark-in-circle ![Property, slate wash](assets/bg-5.jpg) ![Guesteria mark](assets/logos/guesteria--mark.svg) Mark-in-circle: the shipped bare mark `guesteria--mark.svg` seated in an off-white disc — a REAL asset, never a fabricated medallion. Badge · ink disc ![Guest room, navy wash](assets/bg-4.jpg) ![Guesteria mark](assets/logos/guesteria--mark-light.svg) The knockout pairing: the off-white bare mark `guesteria--mark-light.svg` on a navy `is-ink` disc. #### 19.10 Poster mockups (portrait 4:5) **Discipline.** High contrast, a single baseline rule under the headline (the same rounded baseline bar the mark already carries), generous margins. Capsule-cropped imagery is the house photo shape; on a photo, knock the logo out white over a 30% dark mask (logobook p07). Six portrait 4:5 posters, each a DIFFERENT format pattern — top-cluster, center, side-band, diagonal, photo. Every one keeps the logo TOP-LEFT, the same edge padding, large Codec Pro type, and a single REAL curve recoloured to its ground. Off-palette colour is a don't (logobook p06). Posters 4:5 six frames < > Poster 4:5 top-cluster · logobook p12 / p14 ![Guesteria](assets/logos/guesteria--logo.svg) We craft inspiring guest experiences Large type, one bold violet hero loop `curve-1` in `var(--brand-600)` bleeding off the foot, on `var(--brand-50)`; the line is the SUBJECT, so the headline rides a `.tagwrap` pill (logobook p12, p14). Poster 4:5 center · logobook p01 / p18 Calm, premium, service-grade. ![Guesteria](assets/logos/guesteria--logo-light.svg) Off-white `#FFFDF5` hero loop `curve-1` on the `#2D2F44` cover navy; the centred title rides an ink pill so the SUBJECT line stays the subject (logobook p01, p18). Poster 4:5 diagonal · logobook p08 ![Guesteria](assets/logos/guesteria--logo.svg) Feel at home from the first message. Earthy enlarged loop `curve-2-1` in `var(--ctx-2-600)` on warm `var(--ctx-2-50)` — the logo holds the top edge, the copy the bottom third, the line the diagonal between (logobook p08). Poster 4:5 side-band · logobook p16 / p26 ![Guesteria](assets/logos/guesteria--logo.svg) One console, every property. Skyline routing thread `curve-3-1` in `var(--ctx-1-700)` on blue `var(--ctx-1-50)`; the headline holds the left band at mid-height, the line the right (logobook p16, p26). Poster 4:5 side-band · logobook p11 ![Guesteria](assets/logos/guesteria--logo-light.svg) Set up in days, not months. Ambient backdrop loop `curve-6-2` in off-white `#FFFDF5` on a `var(--brand-600)` field — the knockout pop, never `--brand-200`; the headline rides an ink pill on the opposite band (logobook p11). Poster 4:5 photo · liquid glass · island ![Guesteria](assets/logos/guesteria--logo-light.svg) Run every property from one screen. A frosted island lifts the promise off the photograph — the room reads through the blur, the copy stays crisp. A POSTER on a real photo (`bg-4.jpg`): the headline rides a liquid-glass `.island.glass.glass--ink`, so the type reads BRIGHT over imagery without a solid slab; the logo holds the top edge, knocked out over the 30% dark mask (theme.liquid-glass; logobook p07). #### 19.11 Business card + A-frame **Business card.** Two faces, one grey and one violet, carrying the full wordmark lockup and the tagline "We craft inspiring guest experiences" (logobook p15); single-ink mark, no shadow, no outline, generous air — no baseline rule between the lockup and the descriptor. **Street A-frame.** A violet board pairs wordmark and copy with a line that connects the headline block down to a capsule-cropped photo of a corridor — the line routing the eye from message to proof (logobook p26). Business card · grey face logobook p15 ![Guesteria](assets/logos/guesteria--logo.svg) We craft inspiring guest experiences The grey face: the full wordmark lockup above the tagline "We craft inspiring guest experiences," single-ink mark, no shadow, no outline (logobook p15). Business card · violet face logobook p15 ![Guesteria](assets/logos/guesteria--logo-light.svg) We craft inspiring guest experiences The violet face: the light lockup above the same tagline, generous air — no baseline rule between the lockup and the descriptor (logobook p15). A-frame logobook p26 ![Guesteria](assets/logos/guesteria--logo-light.svg) Your front desk, always on. ![Operations corridor](assets/bg-2.jpg) A violet board routes the off-white `#FFFDF5` line `curve-3-1` from the headline down to a real tinted corridor photo (`bg-2.jpg`) — message to proof, a clean field instead of a stripe pattern (logobook p26). #### 19.12 Letterhead (full-width) A document with the wordmark and body copy, with a quiet line that loops up from a corner and travels across the page as a routing thread behind the text (logobook p19). Letterhead logobook p19 ![Guesteria](assets/logos/guesteria--logo.svg) An ambient backdrop loop `curve-1` in light-violet `var(--brand-200)` travelling across the page behind the body copy — quiet but still distinguishable on white (logobook p19). #### 19.13 Slide mockups (16:9) Where body copy runs close to the line or ground it rides a rounded `.tagwrap`: `.tagwrap--word` (1-2 words), `.tagwrap--line` (a whole sentence), `.tagwrap--block` (a whole paragraph). Slides 16:9 four frames < > Title slide 16:9 logobook p14 ![Guesteria](assets/logos/guesteria--logo-light.svg) Guest experience, end to end. Hospitality, one calm flow. A BACKING near-tone `var(--brand-700)` hero loop `curve-1` recedes on the `var(--brand-600)` field so the white title leads; the body's focus words ride a `.tagwrap--word` (logobook p14). Content slide 16:9 logobook p14 Everything, in one place The line carries from the title and drops off the location-pin badge. The routing thread `curve-3-1` continues behind the content and terminates near the real `icon--location.svg` badge; the whole sentence rides a `.tagwrap--line` (logobook p14). Guest slide 16:9 logobook p08 A stay they remember Check in early, find everything ready, and chat in your own language. A BACKING near-tone Earthy `var(--ctx-2-200)` loop `curve-1` recedes on warm `var(--ctx-2-50)` so the title leads; the body sits on a `.tagwrap--block` (logobook p08). Divider slide 16:9 logobook p12 / p18 Part 02 — Operations The line full-bleed `curve-1` in slate `#6D82A3` on the navy `#2D2F44` — a low-contrast line at 3.4:1, drawn from the neighbouring Skyline family (hue 217 against the navy's 235), so the centred `#FFFDF5` title leads at 12.9:1 — entering and exiting to imply continuation (logobook p12, p18). #### 19.14 Twin spread - vertical pair + horizontal pair TWO EQUAL panels carry ONE line. The same continuous path (`curve-2-1`) is inlined in BOTH panels; each panel's viewBox WINDOWS its half of the shared coordinate space, so the line connects across the seam at one scale while the curve sits contained (margin) inside two same-size panels. The VERTICAL pair splits the window top/bottom (violet palette); the HORIZONTAL pair splits it left/right (navy palette). Each panel's `aspect-ratio` equals its window's W/H; the headings ride fully-round ink pills so the line stays the subject (logobook p12, p18). Vertical pair (stacked, EQUAL panels, one violet palette - the same line windowed top/bottom) The journey starts here ...and ends with a smile Two EQUAL panels; the SAME line (`curve-2-1`) is windowed top/bottom (the viewBox y-split at 296.97), so it connects straight down the seam at one scale and sits contained with margin — one violet palette, headings on fully-round ink pills (logobook p12, p18). Horizontal pair (side by side, EQUAL panels, one navy palette - the same line windowed left/right) The journey starts here ...and ends with a smile Two EQUAL panels; the SAME line is windowed left/right (the viewBox x-split at 296.97), so it crosses the vertical seam as one navy monoline at one scale, contained with margin (logobook p12, p18). #### 19.15 Slide deck (16:9) - ten common templates A presentation is the same system at 16:9. Each of the ten templates reuses the ramp, type scale, and ONE curve from the canon; the cover and closing slides pair the lockup with the headline; photos are real `assets/bg-*.jpg` tinted by the photo system. One message per slide. 1 · Title / cover ![Guesteria](assets/logos/guesteria--logo-light.svg) Calm, caring, precise. Guest experience platform for hotels 2 · Agenda Agenda 1. The tokens 2. The curve canon 3. Off-product formats 3 · Section divider 01 The system 4 · Statement / quote "A creative recolors and retypes the system; it never invents a second brand." 5 · Bulleted content The curve canon - Ten real curves, never redrawn - One accent line per view - Recolor and retype, never redesign 6 · Two-column Console White, dense; one shell, three roles. Mobile Two apps: warm guest, cool staff. 7 · Big stat 10 handcrafted curves in the canon - recolor, never redraw 8 · Image-full + glass island ![A hotel entrance at night](assets/bg-7.jpg) ![Guesteria](assets/logos/guesteria--logo-light.svg) Real property, frosted A dark colour wash over a real photo, the copy lifted off it by the frosted island (logobook p07). 9 · Image + text split ![A hotel reception bell on the front desk](assets/bg-0.jpg) Photo + text Half photo, half copy - the split keeps one clear reading order, the photo tinted to its context. 10 · Closing / CTA ![Guesteria](assets/logos/guesteria--logo-light.svg) Thank you. Get in touch #### 19.16 Ads / apparel / app At small or product scale the free line is dropped and the **icon** carries the whole identity; the line collapses back into the mark (the collapse-to-mark rule) (logobook p21, p22, p23, p24). Apparel A white tee with the line-built violet heart icon at the chest (logobook p21); a violet tee with the white bell/cloche glyph at the chest (logobook p22). logobook p21 / p22 App icon A violet `#826AFF` rounded-square tile with the white bell glyph, shown on a phone home screen (logobook p24). logobook p24 Door hangers & ads Navy and white hangers carrying a QR code and the wordmark (logobook p23). Ads: one layout, multiple sizes - logo, one line of copy, and one CTA that reuses the primary button (violet `--brand-600` `#826AFF`, hover `--brand-700` `#532DF5`). logobook p23 #### 19.17 Ad mockups (8:5 + app tile) Three 8:5 ad units, the app-icon tile and the apparel sticker; each carries one REAL curve recoloured to its ground, on-palette only (off-brand colour is a don't, logobook p06). Ads 8:5 / app tile < > Ad 8:5 navy · logobook p24 / p06 ![Guesteria](assets/logos/guesteria--logo-light.svg) Set up in days, not months. Book a demo A navy `#2D2F44` frame carries the full light lockup, one line of copy, and one CTA reusing the primary button (violet `#826AFF`, hover `#532DF5`); slate routing thread `curve-3-1` on navy, on-palette only (logobook p24, p06). Ad 8:5 brand ground · logobook p12 / p14 ![Guesteria](assets/logos/guesteria--logo-light.svg) One brand, every guest touchpoint. Start free Off-white hero loop `curve-1` in `#FFFDF5` on a `var(--brand-600)` field — the knockout pop, never `--brand-200`; the line is the SUBJECT, so the headline rides an ink pill. Logo, one line, one CTA (logobook p12, p14). Ad 8:5 guest ground · logobook p08 ![Guesteria](assets/logos/guesteria--logo.svg) Check in before you arrive. Try the guest app Earthy enlarged loop `curve-2-1` in `var(--ctx-2-600)` on warm `var(--ctx-2-50)`; the primary CTA stays violet (logobook p08). App icon 1:1 logobook p24 ![Guesteria mark](assets/logos/guesteria--mark-light.svg) A violet `#826AFF` rounded-square tile with the white bell glyph — the shipped `guesteria--mark-light.svg`, the line collapsed into the mark (logobook p24). Apparel / sticker 1:1 short logo ![Guesteria mark](assets/logos/guesteria--icon.svg) The SHORT logo — the icon-logo (`guesteria--icon.svg`, the mark in its dark disc) — as a woven patch or sticker on a warm `var(--ctx-2-50)` ground. #### 19.18 Banner mockups (wide) Two full-width leaderboard banners: logo, one line, one CTA, a single REAL curve sweeping the strip (logobook p06). Banner wide brand ground · logobook p12 ![Guesteria](assets/logos/guesteria--logo-light.svg) The guest experience platform Book a demo A BACKING near-tone `var(--brand-700)` loop `curve-1` recedes on `var(--brand-600)` so the lockup + headline lead; logo, one line, one CTA (logobook p12). Banner wide navy ground · logobook p06 / p24 ![Guesteria](assets/logos/guesteria--logo-light.svg) Operations, automated Get started Slate routing thread `curve-3-1` in `#6D82A3` on `#2D2F44`; the primary CTA stays violet (logobook p06, p24). #### 19.19 Rendered examples (across sizes) Small (social), medium (banner, ad), fullscreen 16:9. Each reuses the ramp, type, and ONE curve from the canon (see `05 Visual language > The curve canon`) as the counterweight, recolored to its ground and never redrawn. Each frame applies the golden rule (see `05 Visual language > Shape as background`). Social post 1:1 ![Guesteria](assets/logos/guesteria--logo.svg) One idea, one post. The enlarged loop `curve-2-1` as a BACKING near-tone `var(--brand-200)` on a `var(--brand-50)` ground (logobook p16). Banner ![Guesteria](assets/logos/guesteria--logo.svg) Calm, caring, precise Learn more No line at strip scale: lockup, one line, one CTA on `var(--surface-canvas)` - cut copy, not margins (logobook p06). Ad ![Guesteria](assets/logos/guesteria--logo-light.svg) Headline first One line of copy, one action. Get started The routing thread `curve-3-1` as a BACKING, slate `var(--ctx-1-700)` at 3.4:1 on the `var(--brand-800)` ink ground; logo, one line, one CTA (logobook p24). Slide 16:9 Section title One message per slide. The curve, overscaled and cropped, carries the eye from title to content. The ambient backdrop loop `curve-6-2` in light-violet `var(--brand-200)` on `var(--surface-canvas)` (logobook p14). #### 19.20 Creative random generator A CONTROL SIDEBAR drives a RULE-VALID creative: lock the Palette / Mode / Logo form / Aspect or leave them on Auto, toggle the Icon / Focus-wrap / Logo / Accent, then Shuffle. The colours stay DERIVED from `color.rhythm` - a control only chooses WHICH rhythm cell. Works with JS off (a default creative stays). (components.generator) Palette Mode Logo Aspect Icon Focus-wrap Logo Accent Shuffle One system, applied off-product. Recolor and retype, never a second brand. #### 19.21 Content island + liquid glass A `.island` is a rounded content block that lifts two-to-three paragraphs off a coloured / photo ground. Its corner radius TRACKS the type size (`--radius-island`, an em; the roundness stance lives in `06 Shape & roundness`). Add `.glass` to frost it into an Apple-style liquid-glass panel (a `backdrop-filter` blur, a luminous border, an inset highlight, a float shadow - background AND border); the same material rides the `.tagwrap` focus-wrap. Glass is over-a-ground only. (components.content-island + theme.liquid-glass) Solid island Held off the line On the letterhead, an ambient backdrop loop travels behind the body copy; the island keeps the paragraph legible without competing with the line (logobook p19). Solid `.island` on a brand field - the letterhead pattern. Liquid glass . ink Frosted over the cover navy The block with `.glass.glass--ink`: a DARK frost over the cover navy #2D2F44 (logobook p01, p18), so the LIGHT text reads through the blur; the copy stays legible if blur is unsupported. `.island.glass.glass--ink` over a dark field - ink frost, light text. Liquid glass . light Frosted over Earthy Comfort Over the warm guest ground, the default `.glass` light frost keeps DARK text; a liquid focus-wrap rides the same material - one calm guest surface. `.island.glass` over a light field - light frost, dark text + a liquid focus-wrap. #### 19.22 Liquid glass — light frost vs ink frost CONTRAST RULE: the default `.glass` is a LIGHT frost 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. With `backdrop-filter` unsupported the `@supports` fallback keeps copy legible. Glass over a photo . 3 paragraphs Read over the room A multi-paragraph block stays legible over a busy photograph because the ink frost refracts the image into a calm field. A single paragraph rarely needs the island — reach for it at two or three. The frost keeps the photo present; the luminous edge keeps the block distinct. `.island.glass.glass--ink` over `bg-0.jpg` — THREE paragraphs lifted off the image. Glass over a photo . 2 paragraphs A welcome that travels The brand reads over any photograph — the frosted island lifts the line off the image, the border catches the light. One device, every surface; the photo stays present behind the calm field. `.island.glass.glass--ink` over `bg-7.jpg`, right-aligned — a second liquid block in front of imagery. #### 19.23 More liquid — colour & photo More of the liquid approach: frosted `.island.glass` wrap-blocks and liquid `.tagwrap` focus-wraps, over a COLOUR field and over a real photo. Liquid glass . colour field Guest warmth, frosted A liquid island over the Earthy field — the ink frost keeps the light copy crisp without a solid slab. `.island.glass.glass--ink` over an Earthy colour field — ink frost, light text. Liquid glass . photo Lifted off the photo The frost refracts the room into a calm field; check in early and find everything ready. A liquid island + a focus-wrap over `bg-7.jpg` — glass--ink, the pill a contrasting violet. Every stay reads as one calm thread — run it from one console, every surface. A poster-scale LIQUID focus-wrap (`.tagwrap.tagwrap--block.glass.glass--ink`) over `bg-4.jpg` — the phrase frosts the same way the island does. #### 19.24 The same material on the focus-wrap Over a dark photo use `.glass--ink` (light text); the wrapper padding tracks the type so it never dwarfs the copy. ONE focus-wrap per paragraph, and the phrase never breaks mid-word. Every stay runs on one calm console — staff and guest, on a single timeline. #### 19.25 Creative rules The discipline every creative follows - the curve canon and roundness stance from the Master, applied off-product. - **One curve per surface.** A creative carries ONE curve from the canon (`05 Visual language > The curve canon`), recolored to its ground - never two competing lines, never a hand-drawn addition. Do not invent a curve; fill a cell with a canon path and recolor it, nothing else. - **Colour by role.** A SUBJECT curve is DISTINGUISHABLE from its ground; a BACKING curve behind a bare heading is a NEAR-TONE of it. A bold line stays only where it is the subject AND the heading rides a `.tagwrap` pill. - **Distinguishable accent.** The curve must clear its ground by ≥ ~3 ramp steps (light on dark/saturated, or dark/saturated on light; never an adjacent step - brand-200 on brand-600 vanishes). - **Tagwrap.** Body copy that runs close in colour to the line or ground behind it rides a `.tagwrap`; its text is a calm, less-prime tone, never a second accent. - **Composition.** One anchored cluster, the curve as counterweight, no dead middle, one accent line / one CTA per surface. Every edge element sits the SAME distance from the frame (`--cre-pad`). - **Collapse to the mark.** At small or product scale (apparel, app icon, door hangers) the free line is dropped and the icon alone carries the identity (logobook p21-p24). - **Curve as background.** A curve may also be the BACKGROUND - overscaled past the frame, ghosted over a photo, or bled off a single edge; see `05 Visual language > Shape as background`. It stays a subtone backing - near-tone over colour, a faint wash over a photo. - **Content island + glass.** A `.island` lifts a multi-paragraph block off a busy ground, its radius tracking the type; `.glass` frosts any over-a-ground wrapper (island or `.tagwrap`) - never the plain page. #### 19.26 Motion (inferred - not in the book) i The open path with rounded ends invites a "draw-on" reveal, but the Logo Guide shows no storyboard, no motion spec, and no timing. Any "the line draws itself" guidance is **inferred, not in book** (logobook, motion section). #### 19.27 Assets The un-editable brand artifacts (logos, icons, curves, photos) ship as real files in `assets/` beside this document. Recolor a curve via its `stroke` per ground, an icon via `stroke=currentColor`; never redraw the logo. (reference.assets) One row per file, with its viewBox and the slice / align rule that pins it. Recolour a token, never redraw a mark; marks are inlined from the source svg (recolour the fill / stroke only). | Path | What it is | Usage rule | | --- | --- | --- | | assets/logos/guesteria--logo.svg | Wordmark lockup, navy `#2D2F44` ink, vb 512x136 | The full lockup - the DEFAULT on every surface (header, card, posters, ads, slides, letterhead, social) on light grounds. Never re-letter. | | assets/logos/guesteria--logo-light.svg | Wordmark lockup, off-white `#FFFDF5` ink, vb 512x136 | The KNOCKOUT lockup on dark / saturated grounds and straight over a photo. | | assets/logos/guesteria--logo--capsule.svg (+ --light, --violet, --lavender) | The lockup on a navy / cream / violet / lavender pill, vb 512x136 | The background-by-ground pill; pick the pill that is a near-tone of the ground. | | assets/logos/guesteria--icon.svg | Mark in a navy `#2D2F44` disc, vb 256 | The circle mark - the icon's strict slots (app-icon, favicon) AND the SHORT logo on a creative at small / square scale (apparel, sticker, stamp), in place of the full lockup. | | assets/logos/guesteria--mark.svg | Bare mark, navy, no disc, vb 256 | Seat in a `.photo-badge` disc or over a light field. | | assets/logos/guesteria--mark-light.svg | Bare mark, off-white `#FFFDF5`, no disc, vb 256 | The knockout bare mark - seat on a navy `is-ink` badge disc, or on a violet app-icon tile. | | assets/logos/guesteria--mono.svg | Wordmark in `currentColor`, vb 512x136 | Single-ink; recolour via the parent's `color`, one flat tone only. | | assets/logos/guesteria--favicon.svg | Bare mark, cropped, vb 144x134 | The favicon-type tile only. | | assets/icons/icon--{heart,location,house,phone}.svg | Monoline glyphs in `stroke="currentColor"`, vb 96 | Single-ink; recolour via the parent's `color`, inline or as a file. No literal ink to edit out. | | assets/icons/icon--document.svg | Filled document glyph in `fill="currentColor"`, vb 96 | Single-ink; recolour via the parent's `color`. The one filled glyph - no stroke. | | assets/icons/icon--*--bg.svg | Glyph in a `#C7BCFF` disc, vb 128 - the disc keeps that palette tint, the glyph inherits `currentColor` | Pre-disced icon stamp; use where a tinted disc is wanted. One filename breaks the pattern: the mate of `icon--document.svg` ships as `icon--documents--bg.svg`, plural. | | assets/curves/curve-1--top-right.svg | Hero connector, vb 608x467 | In a `.curve-fill`, `preserveAspectRatio="xMaxYMin slice"`; near-tone stroke. | | assets/curves/curve-2-1--bottom-right.svg | Enlarged loop, vb 291x541 | `xMaxYMax slice`, pairs with curve-2-2 for twins. | | assets/curves/curve-2-2--top-right.svg | Short companion arc, vb 279x151 | `xMaxYMin slice`; the twin closer. | | assets/curves/curve-3-1--bottom-right.svg | Routing thread, vb 306x345 | `xMaxYMax slice`; also a photo-split mask edge. | | assets/curves/curve-5-1--bottom-right.svg | Shallow sweep, vb 247x132 | `xMaxYMax slice`; a thirds photo-split mask edge. | | assets/curves/curve-6-2--top-right.svg | Ambient backdrop loop, vb 267x347 | `xMaxYMin slice`, quiet ground sweep. | | assets/curves/ (curve-3-2, 4, 5-2, 6-1) | The rest of the handcrafted set | Same rule: pin the named edge with `slice`, near-tone stroke. | | assets/curves/divider-{1,2,3}--wave*.svg | Full-width wave dividers | A derived full-width rule: `.divider-wave` with `preserveAspectRatio="none"`, never a cropped-corner brand curve. | | assets/bg-0.jpg .. bg-7.jpg | Real brand photography | Tint (`.photo-tint`), curve-mask (`.photo-split`) or badge (`.photo-badge`); knock type out `#fff`. | Five real handcrafted glyphs - heart, house, location, phone, and a filled document - are the icon source of truth. The Logo Guide's own creatives chapter names eight line-built icons (logobook p13), but only these five were ever produced as files; cup, bed / lounger, dumbbell / key, steam, and swirl have no shipped SVG. The curve canon is the ten handcrafted curves - curve-1, twin 2-1 / 2-2, twin 3-1 / 3-2, curve-4, twin 5-1 / 5-2, twin 6-1 / 6-2; never invent an eleventh. Rule: every creative is a recolor-and-retype of the system, never a redesign. If a creative needs a token the system lacks, add it to the system first. ## Guest experience platform for hotels. ### 20 The shot list — what to add to finish the book The real visual assets a complete brand-guidelines BOOK still needs — cover imagery, product screenshots, photography, textures, social. Each carries a SPEC (count, ratio, where it is used) and a ready, realism-focused PROMPT for an image model. Generate or shoot, drop the files into `source/assets/`, and the book renders them in place. How to use this list Copy the PROMPT, generate or shoot the file, save it under `source/assets/`, then reference it from the relevant section. Real product screenshots and real people should be CAPTURED where possible — the prompt is the fallback and the art-direction brief. Prompt skeleton Every prompt follows: `[subject + scene], [composition / crop], [lighting + mood from the brand voice], color palette anchored on the Guesteria ramp (violet #826AFF primary; calm Skyline-blue staff + warm Earthy-beige guest neutrals), [realism cue], no text, no logos, no watermark, [aspect ratio].` Swap the bracketed parts; keep the realism cue and the palette anchor. Realism first Favor REAL over rendered — shot-on-camera depth of field, natural light, authentic hospitality environments and people; for UI, a real screenshot framed in a device or a high-fidelity mock, never lorem-gibberish text or warped controls. Keep logos OUT of the generation and composite the real lockup in post. Already shipped — never regenerate The logo package ships at `assets/logos/`. Every file in it, with its ground, its ink and its approving book page, is at `logo 2`; the surface-to-file table is `logo 3`; the downloads and the open items are `logo 5`. Two files in the package carry no approving book page; `logo 2` marks which, and `logo 5` tracks it as an open item - do not composite an unapproved variant into a creative. Photography ships at `assets/bg-0.jpg` ... `assets/bg-7.jpg`, and the five glyphs at `assets/icons/` (heart, house, location, phone, document) with their `--bg` disc mates - the document glyph's mate is named `icon--documents--bg.svg`, plural. Nothing on this list re-makes any of them — composite the shipped file in post. #### 20.1 1. Cover & section dividers Book cover 16:9 1 hero image for the guideline cover and the facet openers. **Where:** hero, section dividers. **Prompt:** `Photorealistic wide establishing shot that embodies calm, premium hospitality, calm negative space top-left for a headline, soft natural light, color palette anchored on the Guesteria ramp (violet #826AFF primary; calm Skyline-blue staff + warm Earthy-beige guest neutrals), photorealistic, no text, no logos, no watermark, 16:9.` Section divider 16:9 3-6 quiet abstract bands to separate chapters. **Where:** between sections. **Prompt:** `Minimal abstract backdrop, a single sweeping brand curve as the hero shape, generous empty space, soft gradient anchored on the Guesteria violet ramp (#826AFF), photorealistic paper / material texture, no text, no logos, no watermark, 16:9.` #### 20.2 2. Product & app screenshots Desktop console 16:10 2-4 real captures of the Front-Desk operator console, framed in a clean browser / laptop. **Where:** components, creatives, social. **Prompt:** `Realistic high-fidelity screenshot of the Guesteria OPERATOR CONSOLE (front desk chats, requests queue, analytics), clean modern UI on a WHITE page ground with cool blue-grey used only as a grouped-panel fill, the --brand-600 violet on unread counts and the active nav item, crisp 2x, real labels not lorem, framed in a minimal laptop mockup on a soft surface, photorealistic, no watermark, 16:10.` Guest app 9:19.5 2-3 phone screens of the key guest flow, in a device frame. **Where:** components, app-store, creatives. **Prompt:** `Realistic screen of the Guesteria GUEST APP (booking to check-out), high-fidelity UI on a warm bone canvas, a two-column catalogue grid of untinted property photography, prices set in the --brand-600 violet and a dark navy primary button, real microcopy, framed in a modern phone mockup held at a natural angle, soft daylight, photorealistic, no watermark, 9:19.5.` Staff app 9:19.5 2-3 phone screens of the task flow - the third surface, and the one most often missed. **Where:** components, creatives, recruiting. **Prompt:** `Realistic screen of the Guesteria STAFF APP (task feed, schedule, team chat), high-fidelity UI on a COOL off-white canvas carrying white task cards, each card with a photo strip down its left edge, a row of count-filter tiles at the top and a flat four-tab bottom bar, the primary button coloured by its verb, real microcopy, framed in a modern phone mockup, soft daylight, photorealistic, no watermark, 9:19.5.` #### 20.3 3. Lifestyle / in-context Product in use 4:5 3-5 candids of real people using Guesteria in its true environment. **Where:** photo creatives, splits, badges. **Prompt:** `Authentic candid photograph of a real person using Guesteria in a boutique-hotel setting (lobby, room, front desk), shot on a 35mm lens, shallow depth of field, natural window light, muted tones that sit beside the Guesteria violet ramp (#826AFF), photorealistic, no text, no logos, no watermark, 4:5.` Hands / detail 3:2 2-3 close detail shots (hands on a device, a key object). **Where:** tinted-photo cells, dividers. **Prompt:** `Close-up photograph of hands interacting with the Guesteria app, warm natural light, soft bokeh background, realistic skin and material texture, palette that complements the Guesteria violet ramp (#826AFF), photorealistic, no logos, no watermark, 3:2.` #### 20.4 4. Team / culture Team portrait 4:5 1 per teammate + 1 group. **Where:** about, founder note, social. **Prompt:** `Natural environmental portrait of a hospitality operator at a boutique-hotel front desk, relaxed and approachable, soft directional daylight, neutral backdrop that complements the Guesteria violet ramp (#826AFF), shot on an 85mm lens, photorealistic, no text, no logos, no watermark, 4:5.` Office / culture 3:2 2-3 wides of the workspace / culture. **Where:** about, dividers. **Prompt:** `Candid wide photograph of a calm boutique-hotel back office with staff at work, airy natural light, authentic clutter, tones that sit beside the Guesteria violet ramp (#826AFF), photorealistic, no text, no logos, no watermark, 3:2.` #### 20.5 5. Backgrounds & textures Tinted gradient 16:9 3-4 soft brand-tinted grounds for islands / hero panels. **Where:** island grounds, panels. **Prompt:** `Soft abstract gradient background anchored on the Guesteria violet ramp (#826AFF) (the --brand-600 primary fading to a near-white), subtle film grain, gentle light falloff, photorealistic material, no text, no logos, no watermark, 16:9.` Curve texture 1:1 2-3 large-scale renders of the Guesteria bell-swirl curve motif as texture. **Where:** watermark grounds, tiles. **Prompt:** `Single large brand curve as an embossed texture on a matte surface, raking side light catching the edge, monochrome tone on the Guesteria violet ramp (#826AFF), photorealistic material study, no text, no logos, no watermark, 1:1.` #### 20.6 6. Spot illustrations & empty-states Feature spot 1:1 4-6 small spots, one per feature / value. **Where:** feature cards, story blocks. **Prompt:** `Clean single-concept spot illustration of one Guesteria feature, line-and-fill style built from the Guesteria bell-swirl curve language, two tones from the Guesteria violet ramp (#826AFF) on a neutral ground, crisp vector look, no text, no logos, no watermark, 1:1.` Empty-state 4:3 2-3 friendly empty / error / success states. **Where:** product, docs. **Prompt:** `Friendly minimal empty-state illustration, calm and reassuring, built from the Guesteria bell-swirl curve language, one accent from the --brand-600 primary on neutral grays, generous whitespace, no text, no logos, no watermark, 4:3.` #### 20.7 7. Social / OG / app-store / favicon OG share card 1.91:1 1 template ground (the lockup + headline composite in post). **Where:** link previews. **Prompt:** `Open-graph share-card background, a single Guesteria bell-swirl curve sweeping a soft gradient on the Guesteria violet ramp (#826AFF), clear empty space for a headline and a logo to be composited later, photorealistic material, no text, no logos, no watermark, 1.91:1.` App-store set varies 5-8 framed screens + captions. **Where:** the app stores. **Prompt:** `App-store screenshot frame: a realistic phone screen of one key flow on a solid brand-ramp panel with space above for a short caption, high-fidelity UI, real microcopy, photorealistic, no watermark, per-store ratio.` Favicon / PWA 1:1 The SHIPPED mark in a maskable safe-area, 512 / 192 / 32. **Where:** tab, home screen. **Prompt:** `Use the supplied brand mark (do not regenerate it): export assets/logos/guesteria--mark-light.svg - the OFF-WHITE knockout, since the tile is saturated violet - onto a solid --brand-600 tile with the maskable safe-area padding, at 512, 192 and 32 px, 1:1. The navy guesteria--mark.svg belongs on a light ground, never on the violet tile. (Icon is shipped, not generated.)` #### 20.8 8. Motion (optional) Logo / curve loop brief A 2-4s loop for splash / social. **Where:** launch, social. **Prompt:** `Storyboard / video-model brief: the Guesteria bell-swirl curve draws on in one continuous stroke and settles behind the lockup, soft easing, palette on the Guesteria violet ramp (#826AFF), calm and premium, 2-4s seamless loop, no text, no watermark, 1:1 and 16:9.` Product demo brief A 20-40s captured screen-flow. **Where:** landing, sales. **Prompt:** `Capture brief: screen-record the core flow end to end at 2x, steady cursor, real data not lorem, light UI, add calm motion-graphic callouts in the Guesteria violet ramp (#826AFF), 20-40s, 16:9. (Captured, not generated.)` The contract is in `framework/artifacts.md` (`reference.assets-to-provide`). Generated files live in `source/assets/` and are indexed by the shipped Assets section. ## Guest experience platform for hotels. ### 21 How to verify a result against this system The VERIFICATION surface: every major rule, HOW to check it (the visual signal + the script that enforces it), and the pass criterion. A human or an llm reviewer can audit a surface against it. Two layers, and what each one reads SCRIPT: `python3 -m unittest discover tests` (240 tests, green) gates the design-md ENGINE - the framework template under `engine/artifact-types/design-md/framework/` and the engine's own workspace copy at `engine/lib/designmd/workspace/projects/guesteria/output/`. It does NOT read the pages of this document: 19 of its file paths point at that workspace output and ZERO at `organizations/guesteria/`, and the two have already diverged - the workspace creatives page carries 16 headings the shipped page does not, and the shipped page carries 14 the workspace copy does not. GEOMETRY of the CURVE FILES is the one part that does reach this document: the 13 svgs in `assets/curves/` carry the exact geometry of the set `tests/test_curves.py` + `tests/curve_geom.py` parse - every `d` path string, `viewBox`, `stroke-width`, linecap and miterlimit is character-identical - so the named-edge slice and the cap clip, both pure geometry, are enforced on the exact shapes shipped here. The FILES are no longer byte-identical: the stroke ink was recoloured to the declared Royal Glow 800 `#2D2F44`, and that ink is the only byte in any of the 13 that differs. A claim about their geometry holds; a claim about their bytes does not. Everything page-level in the Script column - twin pairs, mark discipline, accent hierarchy, contrast, MD↔HTML parity - is asserted against the workspace copy and is a PROXY for this page, never a gate on it. VISUAL: the same rules with the eye-signal of a pass / fail - and below the curve files, the only layer that reads this document at all. Pointing the suite at the org output is an engine change affecting every organization; it is open, not done. For an llm reviewer Open the creative and apply the CHECK. If it fails, apply the FIX in the same row. The rules are the contract (`framework/artifacts.md`); the FIX column is the only sanctioned remedy. Scope Run the check on EVERY creative, not a sample. A rule passes for the document only when it passes for all of its creatives. #### 21.1 The rules — check & fix | Rule | How to verify (the signal) | If it fails (the fix) | Script | | --- | --- | --- | --- | | Named-edge slice | Every curve pins its filename edges via `preserveAspectRatio=" slice"`; no cut end, no `xMid` / `meet` on a corner curve. | Pin the named edges, remap after rotate / mirror. | CurveAlignValid | | Cap clip + interior break | No round-cap blob on a named edge; a two-arc curve's centre break stays interior. | Extend a real ending past its edge; leave interior termini put. | CurveCapClip, Curve4InteriorBreak | | Twins | ONE continuous line across TWO EQUAL panels, connecting across the seam at one scale, contained with margin, one palette. | Inline one path in both equal panels; each viewBox windows its half. | TwinPairs | | One accent shape, ONE register | A creative carries ONE accent shape from the brand's SINGLE chosen register (strong / soft / simple / custom - Guesteria = CUSTOM, the bell-swirl curve, see `05 Visual language`); the SAME register reads across every creative, slide, the bento and the GENERATOR, and every accent is pulled from the CLOSED ten-curve canon - never a mix of registers, never a curve outside the canon. It clears its ground by ≥ ~3 ramp steps; no second device, never a bezier drawn by hand. The curve may also be a BACKGROUND (overscaled, cropped by the frame, or ghosted over a photo - a tier-4 subtone backing, still ONE per view; see `05 > Shape as background`). It PAIRS with the corner stance (`06`): an angular shape with sharp-ish corners, a round shape with round corners - Guesteria's rounded-terminal curve pairs with round corners, never contradictory. | Pick ONE register and carry it everywhere (incl. the generator pool), drawing every accent from the ten-curve canon; drop the second device; recolour the curve to clear the ground (or tone a backing curve to a near-tone). | (visual) | | Roundness stance | ONE corner language (sharp ↔ round - see `06 Shape & roundness`) drives EVERY wrapper radius; a wrapper's radius never exceeds its own padding (a paragraph `.tagwrap--block` radius ≤ its horizontal padding) so a corner never clips the copy. | Set the stance once; map it onto the radius scale; keep `.tagwrap--block` radius at/below its padding. | (visual) | | Colour by role | A SUBJECT curve (gallery / hero, no heading over it) is distinguishable; a BACKING curve behind a bare heading is a NEAR-TONE of the ground so the title leads. | Tone the backing curve toward the ground (same light/dark zone), or keep it bold + put the heading on a pill. | (visual) | | Tagwrap focus pill | Copy close in colour to its ground rides a rounded pill; the pill colour differs from BOTH the ground AND the text (a same-colour pill vanishes); text centred. | Pick a contrasting pill variant; `--block` uses a radius ≤ its padding; nudge text 1px down. | TagwrapPill, TagwrapMuted | | Composition (logo leads) | Content reads as ONE cluster in reading order LOGO -> headline -> subtitle -> body: the lockup LEADS above the headline (never below the title or exiled to a far corner), the accent curve is the counterweight, no dead middle; the layout VARIES across FOUR named formats - top-cluster / center / side-band / diagonal. The functional ICON PINS to a CORNER or AXIS OPPOSITE the content block (content left -> a right corner, content right -> a left corner, a CENTRED block -> the centre axis at top / bottom), NEVER beside or behind the block. | Lead the cluster with the logo; cluster the copy; add subtitle/body; vary the format across the four patterns (top-cluster / center / side-band / diagonal); pin the icon to the OPPOSITE corner / axis (`.cre-icon-pin.at-*`). | (visual) | | Edge padding (golden rule) | Logo, icon and cluster sit the SAME distance from the frame edge (`--cre-pad`); a corner icon is NEVER tighter than the logo; the global alignment (left / centre / right) propagates to every child. | Pin corner icons with `.cre-icon-pin.at-*` (not an inline `--space-4`); let the cluster class place + align the logo. | CompositionEdgePad | | Content island + liquid glass | A multi-paragraph block lifts off a busy ground in a rounded `.island` whose radius TRACKS the type; `.glass` frosts an over-a-ground wrapper (the island OR a `.tagwrap`). CONTRAST: the light frost (`.glass`) takes DARK text, the dark frost (`.glass--ink`) takes LIGHT text - a light frost with light text vanishes. An inline `` / chip inside glass keeps its OWN contrast (a light chip -> dark text), so it never inherits light-on-light. | Wrap the copy in `.island`; add `.glass` over a LIGHT ground, `.glass.glass--ink` over a DARK ground / photo; keep the radius on `var(--radius-island)`; size the frame to the copy. | ContentIslandTests, LiquidGlassTests | | Focus-wrap discipline | A `.tagwrap` phrase NEVER breaks mid-word (`white-space: nowrap`) and runs at most ONCE per paragraph; padding is FLAT (low, a hair more on the bottom) and em-based; a sentence-ending wrap pulls the full stop INSIDE the pill. A QUIET, no-fill variant exists (`.tagwrap--quiet` liquid edge / `--quiet-tint` rhythm border); the HTML renders a GALLERY of the registers. | Keep one tagwrap per paragraph; pull the full stop inside a sentence-ending wrap; use `--quiet` when a filled pill is too loud; never force a mid-word break. | TagwrapPill | | Mark is a glyph | The brand mark is the supplied icon / lockup svg as shipped - never described or rebuilt as a letter. | Inline the original svg; remove any letter framing. | (visual) | | One mark per creative | A single creative shows the full lockup OR the icon / brand-disc, NEVER both (a SYSTEM bento showcase is exempt - each tile is its own context); a FUNCTIONAL icon-disc's fill differs from the logo colour. | Drop the redundant brand-disc when the lockup is present; recolour a functional disc so it differs from the logo. | MarkDiscipline | | Accent hierarchy | The one accent is spent on the MOST important element first: CTA > focus-wrap > icon > title > curve. BODY / paragraph copy stays NEUTRAL ink, never an accent or context tone (a sampled palette card's subtitle is neutral). | Neutralise body subtitles to `--text-secondary` (light) / a translucent light (dark); keep the accent on the title / curve / CTA. | HierarchyBodyNeutral | | Contextual contrast | Every contextual element (a glass panel, a focus-wrap, an inline code chip, a media block) clears its GROUND by a luminance delta - a light frost over a DARK photo, or a light chip inheriting light text, both FAIL. | Use `.glass--ink` over a dark ground; give the chip its own colour; pick the frost by the ground value. | ContrastGuards | | Bento first-screen | master / uxui / creatives OPEN on a bento (`id="identity"`) that REPLACES the text hero - the headline lives in a large tile; the assets / rules facets keep the plain hero. Every tile is contrast-correct. | Lead the facet with `00b-bento`; keep the nav `#identity` anchor on the opener; use `.glass--ink` on dark tiles. | ComponentSurfaceTests | Run `python3 -m unittest discover tests` for the script layer - it gates the framework template and the engine's workspace copy, plus the geometry of the 13 curve svgs this document ships unchanged (only the stroke ink was recoloured); it does not read these pages (see *Two layers, and what each one reads*). For every other rule above, this page is the only layer. ## About this text copy Generated from the artifact's own pages. Nothing here is written by hand, so nothing here can disagree with them. | Derived from | Mode | | --- | --- | | `index.html` | addressed | | `index--uxui.html` | addressed | | `index--creatives.html` | addressed | | `index--assets.html` | addressed | | `index--rules.html` | addressed | **What this copy cannot carry** - 28 of 89 images carry no alternative text, so they appear here as a link to the file. - 123 inline drawings are not text and do not travel; none carries a title to write in its place. - 3 measured figures keep their value and lose the audit reference behind it. - 2 in-page links are written as plain text. - Colour, type and spacing values that live only in the page's stylesheet are not restated here; the ramp itself is `design/brand.json`. ## Public visual asset index Every visual source file is available at a stable absolute HTTPS URL. SVG originals are paired with PNG previews for vision tools. The four contact sheets are the fastest visual entry point; use the per-file links when exact geometry or source artwork is required. - [Download the complete ZIP bundle](https://brand.guesteria.com/assets/download/guesteria-design-system.zip) - [Open the checksum manifest](https://brand.guesteria.com/asset-manifest.csv) ### Contact sheets #### Logos [![Guesteria logos contact sheet](https://brand.guesteria.com/assets/previews/contact-sheets/logos.png)](https://brand.guesteria.com/assets/previews/contact-sheets/logos.png) #### Icons [![Guesteria icons contact sheet](https://brand.guesteria.com/assets/previews/contact-sheets/icons.png)](https://brand.guesteria.com/assets/previews/contact-sheets/icons.png) #### Curves [![Guesteria curves contact sheet](https://brand.guesteria.com/assets/previews/contact-sheets/curves.png)](https://brand.guesteria.com/assets/previews/contact-sheets/curves.png) #### Photography [![Guesteria photography contact sheet](https://brand.guesteria.com/assets/previews/contact-sheets/photography.png)](https://brand.guesteria.com/assets/previews/contact-sheets/photography.png) ### Logos | Source asset | Vision preview | Description | | --- | --- | --- | | [`guesteria--favicon.svg`](https://brand.guesteria.com/assets/logos/guesteria--favicon.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--favicon.png) | Cropped Guesteria favicon mark for browser and compact identity slots. | | [`guesteria--icon--lavender.svg`](https://brand.guesteria.com/assets/logos/guesteria--icon--lavender.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--icon--lavender.png) | Circular Guesteria app icon in the lavender variant. | | [`guesteria--icon--violet.svg`](https://brand.guesteria.com/assets/logos/guesteria--icon--violet.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--icon--violet.png) | Circular Guesteria app icon in the violet variant. | | [`guesteria--icon-light.svg`](https://brand.guesteria.com/assets/logos/guesteria--icon-light.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--icon-light.png) | Circular Guesteria app icon in the light variant. | | [`guesteria--icon.svg`](https://brand.guesteria.com/assets/logos/guesteria--icon.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--icon.png) | Circular Guesteria app icon in the navy variant. | | [`guesteria--logo--capsule.svg`](https://brand.guesteria.com/assets/logos/guesteria--logo--capsule.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--logo--capsule.png) | Full Guesteria wordmark lockup in the navy variant on a capsule. | | [`guesteria--logo--lavender.svg`](https://brand.guesteria.com/assets/logos/guesteria--logo--lavender.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--logo--lavender.png) | Full Guesteria wordmark lockup in the lavender variant on a capsule. | | [`guesteria--logo--light.svg`](https://brand.guesteria.com/assets/logos/guesteria--logo--light.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--logo--light.png) | Full Guesteria wordmark lockup in the light variant on a capsule. | | [`guesteria--logo--violet.svg`](https://brand.guesteria.com/assets/logos/guesteria--logo--violet.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--logo--violet.png) | Full Guesteria wordmark lockup in the violet variant on a capsule. | | [`guesteria--logo-light.svg`](https://brand.guesteria.com/assets/logos/guesteria--logo-light.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--logo-light.png) | Full Guesteria wordmark lockup in the light variant on a transparent ground. | | [`guesteria--logo.svg`](https://brand.guesteria.com/assets/logos/guesteria--logo.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--logo.png) | Full Guesteria wordmark lockup in the navy variant on a transparent ground. | | [`guesteria--mark--mono.svg`](https://brand.guesteria.com/assets/logos/guesteria--mark--mono.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--mark--mono.png) | Bare monochrome Guesteria hospitality mark for single-colour applications. | | [`guesteria--mark-light.svg`](https://brand.guesteria.com/assets/logos/guesteria--mark-light.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--mark-light.png) | Bare Guesteria hospitality mark in off-white, without a disc or wordmark. | | [`guesteria--mark.svg`](https://brand.guesteria.com/assets/logos/guesteria--mark.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--mark.png) | Bare Guesteria hospitality mark in navy, without a disc or wordmark. | | [`guesteria--mono.svg`](https://brand.guesteria.com/assets/logos/guesteria--mono.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--mono.png) | Full monochrome Guesteria wordmark for single-colour applications. | | [`guesteria--tile--earthy-comfort.svg`](https://brand.guesteria.com/assets/logos/guesteria--tile--earthy-comfort.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--tile--earthy-comfort.png) | Square Guesteria mark tile using the warm beige Earthy Comfort background. | | [`guesteria--tile--skyline.svg`](https://brand.guesteria.com/assets/logos/guesteria--tile--skyline.svg) | [PNG](https://brand.guesteria.com/assets/previews/logos/guesteria--tile--skyline.png) | Square Guesteria mark tile using the light-blue Skyline background. | ### Icons | Source asset | Vision preview | Description | | --- | --- | --- | | [`icon--document.svg`](https://brand.guesteria.com/assets/icons/icon--document.svg) | [PNG](https://brand.guesteria.com/assets/previews/icons/icon--document.png) | Canonical document service icon, from the Guesteria line-icon family. | | [`icon--documents--bg.svg`](https://brand.guesteria.com/assets/icons/icon--documents--bg.svg) | [PNG](https://brand.guesteria.com/assets/previews/icons/icon--documents--bg.png) | Canonical documents service icon on a lavender background disc, from the Guesteria line-icon family. | | [`icon--heart--bg.svg`](https://brand.guesteria.com/assets/icons/icon--heart--bg.svg) | [PNG](https://brand.guesteria.com/assets/previews/icons/icon--heart--bg.png) | Canonical heart service icon on a lavender background disc, from the Guesteria line-icon family. | | [`icon--heart.svg`](https://brand.guesteria.com/assets/icons/icon--heart.svg) | [PNG](https://brand.guesteria.com/assets/previews/icons/icon--heart.png) | Canonical heart service icon, from the Guesteria line-icon family. | | [`icon--house--bg.svg`](https://brand.guesteria.com/assets/icons/icon--house--bg.svg) | [PNG](https://brand.guesteria.com/assets/previews/icons/icon--house--bg.png) | Canonical house service icon on a lavender background disc, from the Guesteria line-icon family. | | [`icon--house.svg`](https://brand.guesteria.com/assets/icons/icon--house.svg) | [PNG](https://brand.guesteria.com/assets/previews/icons/icon--house.png) | Canonical house service icon, from the Guesteria line-icon family. | | [`icon--location--bg.svg`](https://brand.guesteria.com/assets/icons/icon--location--bg.svg) | [PNG](https://brand.guesteria.com/assets/previews/icons/icon--location--bg.png) | Canonical location service icon on a lavender background disc, from the Guesteria line-icon family. | | [`icon--location.svg`](https://brand.guesteria.com/assets/icons/icon--location.svg) | [PNG](https://brand.guesteria.com/assets/previews/icons/icon--location.png) | Canonical location service icon, from the Guesteria line-icon family. | | [`icon--phone--bg.svg`](https://brand.guesteria.com/assets/icons/icon--phone--bg.svg) | [PNG](https://brand.guesteria.com/assets/previews/icons/icon--phone--bg.png) | Canonical phone service icon on a lavender background disc, from the Guesteria line-icon family. | | [`icon--phone.svg`](https://brand.guesteria.com/assets/icons/icon--phone.svg) | [PNG](https://brand.guesteria.com/assets/previews/icons/icon--phone.png) | Canonical phone service icon, from the Guesteria line-icon family. | ### Curves | Source asset | Vision preview | Description | | --- | --- | --- | | [`curve-1--top-right.svg`](https://brand.guesteria.com/assets/curves/curve-1--top-right.svg) | [PNG](https://brand.guesteria.com/assets/previews/curves/curve-1--top-right.png) | Canonical Guesteria brand curve: curve 1, top right. Preserve its named-edge alignment. | | [`curve-2-1--bottom-right.svg`](https://brand.guesteria.com/assets/curves/curve-2-1--bottom-right.svg) | [PNG](https://brand.guesteria.com/assets/previews/curves/curve-2-1--bottom-right.png) | Canonical Guesteria brand curve: curve 2 1, bottom right. Preserve its named-edge alignment. | | [`curve-2-2--top-right.svg`](https://brand.guesteria.com/assets/curves/curve-2-2--top-right.svg) | [PNG](https://brand.guesteria.com/assets/previews/curves/curve-2-2--top-right.png) | Canonical Guesteria brand curve: curve 2 2, top right. Preserve its named-edge alignment. | | [`curve-3-1--bottom-right.svg`](https://brand.guesteria.com/assets/curves/curve-3-1--bottom-right.svg) | [PNG](https://brand.guesteria.com/assets/previews/curves/curve-3-1--bottom-right.png) | Canonical Guesteria brand curve: curve 3 1, bottom right. Preserve its named-edge alignment. | | [`curve-3-2--top-right.svg`](https://brand.guesteria.com/assets/curves/curve-3-2--top-right.svg) | [PNG](https://brand.guesteria.com/assets/previews/curves/curve-3-2--top-right.png) | Canonical Guesteria brand curve: curve 3 2, top right. Preserve its named-edge alignment. | | [`curve-4--left-bottom.svg`](https://brand.guesteria.com/assets/curves/curve-4--left-bottom.svg) | [PNG](https://brand.guesteria.com/assets/previews/curves/curve-4--left-bottom.png) | Canonical Guesteria brand curve: curve 4, left bottom. Preserve its named-edge alignment. | | [`curve-5-1--bottom-right.svg`](https://brand.guesteria.com/assets/curves/curve-5-1--bottom-right.svg) | [PNG](https://brand.guesteria.com/assets/previews/curves/curve-5-1--bottom-right.png) | Canonical Guesteria brand curve: curve 5 1, bottom right. Preserve its named-edge alignment. | | [`curve-5-2--top-right.svg`](https://brand.guesteria.com/assets/curves/curve-5-2--top-right.svg) | [PNG](https://brand.guesteria.com/assets/previews/curves/curve-5-2--top-right.png) | Canonical Guesteria brand curve: curve 5 2, top right. Preserve its named-edge alignment. | | [`curve-6-1--bottom-right.svg`](https://brand.guesteria.com/assets/curves/curve-6-1--bottom-right.svg) | [PNG](https://brand.guesteria.com/assets/previews/curves/curve-6-1--bottom-right.png) | Canonical Guesteria brand curve: curve 6 1, bottom right. Preserve its named-edge alignment. | | [`curve-6-2--top-right.svg`](https://brand.guesteria.com/assets/curves/curve-6-2--top-right.svg) | [PNG](https://brand.guesteria.com/assets/previews/curves/curve-6-2--top-right.png) | Canonical Guesteria brand curve: curve 6 2, top right. Preserve its named-edge alignment. | | [`divider-1--wave.svg`](https://brand.guesteria.com/assets/curves/divider-1--wave.svg) | [PNG](https://brand.guesteria.com/assets/previews/curves/divider-1--wave.png) | Canonical Guesteria brand curve: divider 1, wave. Preserve its named-edge alignment. | | [`divider-2--wave-calm.svg`](https://brand.guesteria.com/assets/curves/divider-2--wave-calm.svg) | [PNG](https://brand.guesteria.com/assets/previews/curves/divider-2--wave-calm.png) | Canonical Guesteria brand curve: divider 2, wave calm. Preserve its named-edge alignment. | | [`divider-3--wave-busy.svg`](https://brand.guesteria.com/assets/curves/divider-3--wave-busy.svg) | [PNG](https://brand.guesteria.com/assets/previews/curves/divider-3--wave-busy.png) | Canonical Guesteria brand curve: divider 3, wave busy. Preserve its named-edge alignment. | ### Photography | Source asset | Vision preview | Description | | --- | --- | --- | | [`bg-0.jpg`](https://brand.guesteria.com/assets/bg-0.jpg) | [JPG](https://brand.guesteria.com/assets/bg-0.jpg) | A silver hotel reception bell on a dark front desk in warm directional light. | | [`bg-1.jpg`](https://brand.guesteria.com/assets/bg-1.jpg) | [JPG](https://brand.guesteria.com/assets/bg-1.jpg) | A composed hotel bedroom with a dark carved bed, white linen and deep blue walls. | | [`bg-2.jpg`](https://brand.guesteria.com/assets/bg-2.jpg) | [JPG](https://brand.guesteria.com/assets/bg-2.jpg) | A guest opening an electronic hotel-room door into a softly lit room. | | [`bg-3.jpg`](https://brand.guesteria.com/assets/bg-3.jpg) | [JPG](https://brand.guesteria.com/assets/bg-3.jpg) | A long symmetrical hotel corridor with warm wood doors and ceiling lights. | | [`bg-4.jpg`](https://brand.guesteria.com/assets/bg-4.jpg) | [JPG](https://brand.guesteria.com/assets/bg-4.jpg) | A brass reception bell and RECEPTION desk sign in warm shallow focus. | | [`bg-5.jpg`](https://brand.guesteria.com/assets/bg-5.jpg) | [JPG](https://brand.guesteria.com/assets/bg-5.jpg) | A refined hotel bar and lounge with stools, bottles and warm ambient lighting. | | [`bg-6.jpg`](https://brand.guesteria.com/assets/bg-6.jpg) | [JPG](https://brand.guesteria.com/assets/bg-6.jpg) | A symmetrical modern hotel bathroom vanity with twin mirrors and folded towels. | | [`bg-7.jpg`](https://brand.guesteria.com/assets/bg-7.jpg) | [JPG](https://brand.guesteria.com/assets/bg-7.jpg) | A hotel entrance with revolving doors and guests at night. |