Maison

Brand & Style Guide -- OKLCH Design Tokens, Suisse Intl Typography, Hospitality Voice

Conversational & Trustworthy

Natural, reliable guest interactions that hotels and guests can trust.

Personal & Proactive Hospitality

Service that adapts to each guest while strengthening the property's brand.

Intelligence & Integration

The connected, intelligent platform that powers hospitality at scale.

1. Colors

Built on OKLCH color science. Six intent families, each with an 11-step ramp. Accent hue 270 (calm, inviting blue) — drag the slider in the top right to explore other seeds.

Accent (hue 270)

Neutral (hue 270, low chroma)

Hospitality Intents

Intent	Hue	Use	Sample
Accent	270	Primary actions, navigation, brand	Active
Success	150	Booking confirmations, availability	Normal
Warning	80	Guest alerts, pending requests	Overdue
Danger	20	Cancellations, overbooking alerts	Critical

2. Typography

SuisseIntl is the sole typeface. Hospitality interfaces favor warmth and clarity over editorial expression.

Display / H1

SuisseIntl 600 -- 2.5rem -- -0.02em tracking

Heading 2

SuisseIntl 600 -- 1.75rem -- -0.01em tracking

Heading 3

SuisseIntl 600 -- 1.25rem

Body text -- the quick brown fox jumps over the lazy dog. Hospitality warmth meets readable prose.

SuisseIntl 400 -- 1rem -- 1.5 line-height

Small / Caption -- secondary information, metadata, timestamps

SuisseIntl 400 -- 0.875rem

Label / Booking Code

SuisseIntl 500 -- 0.75rem -- uppercase -- 0.04em tracking

RES-2026-0412 -- $289/night -- 2026-03-11T14:30:00Z

SuisseIntl Mono 400 -- 0.8125rem -- booking codes, rates, timestamps

3. Voice & Copy

Clear. Calm. Confident. Human. -- Hospitality language demands warmth without losing precision.

Do / Don't

Do

"See how guest sentiment shifted after you updated your check-in flow."

"12 guest inquiries answered overnight. Here's what they asked about most."

"Booking conversion improved from 30% to 52% after adding availability responses."

Don't

"Our revolutionary AI-powered platform leverages cutting-edge..."

"Comprehensive, robust solution that seamlessly integrates..."

"Utilizing next-generation machine learning algorithms..."

Terminology

Conversation trace (not "chat log") -- our term for captured guest interactions and context

Guest Context -- our structured knowledge of guest preferences and history

Service moment (not "support ticket") -- guest-centered framing

4. Components

Buttons

Badges

Active Normal Overdue Critical

Card

Guest Summary

Booking conversion improved after adding real-time availability responses. Inquiry-to-booking rate shifted from 30% to 52% across chat and SMS channels.

Guest Alert (Danger)

Overbooking Conflict

2 reservations for Room 308 on 2026-04-15. Review and reassign before guest arrival.

Guest Alert (Warning)

Late Checkout Request

Guest in Room 215 requested late checkout until 2:00 PM. Awaiting front desk approval.

Code Example

          /* Using Maison design tokens */ .guest-card { background: var(--n-card-neutral); color:
          var(--n-ink-neutral); border: 1px solid var(--n-border-muted-neutral); border-radius:
          var(--n-radius); padding: var(--n-space-6); } .alert-critical { background:
          var(--n-panel-danger); color: var(--n-ink-danger); border-left: 3px solid
          var(--n-surface-danger); }
        

5. Spacing

Base unit: 4px. Consistent spatial rhythm across all surfaces.

6. Data Visualization

Token-based colors. SuisseIntl throughout. Intent families encode hospitality meaning.

Chart Color Ramp (Accent)

Rules

1. Use intent colors -- success for positive trends, danger for negative, accent for neutral series

2. SuisseIntl Mono for axis labels, values, and annotations

3. Token-based fills only -- no hardcoded hex values

4. Must work in both light and dark mode

5. No gradients -- flat OKLCH fills only

6. Label axes with guest-facing terms (occupancy, ADR, guest satisfaction)

7. Logo

The Maison wordmark is a bold, all-caps logotype. Always maintain clear space and contrast.

On light

On dark

On accent

Adaptive (follows color-scheme)

App Icon

Square mark with dark fill and white wordmark at icon scale. Corner radius 8px matches app icon conventions.

Default

Brand dark

Accent

Inverted (light)

Rules

Minimum clear space: equal to the cap height of the "M" on all sides
Preserve the wordmark letterforms -- never crop, distort, or restyle individual letters
On light surfaces: dark fill. On dark surfaces: white fill. On accent: white fill.
Never stretch, rotate, recolor to off-brand colors, add effects, or place on busy backgrounds
Minimum display width: 120px (below this, letterforms lose legibility)