◆ PHOTO ◆
Deluxe AC
ACQueen bed · Smart TV · Hot water · 2 guests
₹1,800 / night
Foundation
One Sign, Every Surface
Everything in this system derives from the XL Hotel sign: gold ornament on deep black, engraved Roman capitals, and a geometric sans for plain information. The rule of the whole system — gold is for the brand, cream is for reading, black is the ground.
| Principle | In practice |
|---|---|
| Gold is precious | Gold marks identity and primary actions only. If everything is gold, nothing is. One primary button per view. |
| Black is the ground | Surfaces are warm near-blacks, never pure #000 and never cool grey. Depth comes from lighter inks, not shadows. |
| Capitals are ceremonial | Cinzel appears only in uppercase, only for names and headings — never for sentences, prices, or form text. |
| Ornament is punctuation | The scroll divider ends a chapter. At most one per view, always centered, never stretched. |
Tokens · 01
Color
A warm-black ink ramp, one gold, and its two supporting tones. All neutrals are biased toward the gold hue — nothing in this palette is a pure grey.
Brand
Gold 500
#D4A73C · --gold-500
The brand color. Logo, primary buttons, active states, eyebrows.
Gold 600
#B98F2C · --gold-600
Pressed states, secondary button borders.
Gold 700
#94711F · --gold-700
Gold text on light grounds; quiet ornament.
Champagne
#EBD9A4 · --champagne
Subheadings, prices, hover state of primary gold.
Cream
#F2EAD6 · --cream
Body text on dark. The reading color.
Ink ramp
Ink 950
#0D0C0A · --ink-950
Page ground.
Ink 900
#141210 · --ink-900
Cards, panels. Also the text color on gold.
Ink 800
#1C1813 · --ink-800
Inputs, wells, inline code.
Hairline
#332B1A · --hairline
Borders and rules. Warm, never grey.
Muted
#9C9282 · --muted
Secondary text, captions, placeholders.
Semantic
Available
#5FA873 · --ok
Room available, booking confirmed.
Notice
#C9822E · --warn
Few rooms left, pending payment.
Error
#C4544A · --err
Validation errors, fully booked.
Approved text pairs
| Text | Ground | Contrast | Use |
|---|---|---|---|
| Cream #F2EAD6 | Ink 950 | 15.6 : 1 | Body text — the default pair |
| Champagne #EBD9A4 | Ink 950 | 13.0 : 1 | Subheads, prices |
| Gold 500 #D4A73C | Ink 950 | 8.6 : 1 | Headings, links, eyebrows |
| Ink 900 #141210 | Gold 500 | 8.2 : 1 | Text on primary buttons |
| Gold 700 #94711F | Cream ground | 4.6 : 1 | Gold text on light — never Gold 500 on light |
Tokens · 02
Typography
Two faces, strictly divided. Cinzel is the sign — engraved Roman capitals for names and headings. Jost is the desk — a geometric sans (the voice of the “AC & Non-AC Rooms” strip) for everything a guest actually reads, types, or taps.
Display XL — Cinzel 800 · 48px · uppercase · used once per page
XL Hotel
Display — Cinzel 700 · 32px · section titles
Rooms & Tariff
Title — Cinzel 700 · 22px · card and room names
Deluxe AC Room
Heading — Jost 600 · 17px · uppercase · sub-sections
Check-in & Check-out
Body — Jost 400 · 16px / 1.65
Check-in begins at 12 noon and check-out is 11 AM. Early check-in is subject to availability — call the front desk and we will hold your room when we can.
Small — Jost 400 · 14px & Caption — Jost 500 · 12px · uppercase
Free parking · Hot water · Power backup
Tariff includes GST
| Token | Face / weight | Size / line | Rules |
|---|---|---|---|
display-xl | Cinzel 800 | 48 / 1.1 | Uppercase, letter-spacing .05em. Hero only. |
display | Cinzel 700 | 32 / 1.15 | Uppercase, .06em. Section titles. |
title | Cinzel 700 | 22 / 1.2 | Uppercase, .07em. Room and card names. |
heading | Jost 600 | 17 / 1.3 | Uppercase, .1em. |
body | Jost 400 | 16 / 1.65 | Sentence case. Max measure 64ch. |
small | Jost 400 | 14 / 1.5 | Amenity lists, metadata. |
caption | Jost 500 | 12 / 1.4 | Uppercase, .14em. Labels, badges. |
Prices always use font-variant-numeric: tabular-nums. Cinzel is never set in lowercase and never below 18px — below that, use Jost.
Tokens · 03
Logo
The lockup is drawn geometry, not text — never retype it. Three files ship with this system: the full lockup, the wordmark, and this page’s divider ornament.
#94711F. Gold 500 fails contrast on cream.Do
- Keep clear space equal to the height of the “XL” on all sides
- Use the wordmark alone below 220px width
- Place only on Ink 950 / black or Cream grounds
- Recolor via the single
fillvalue — it is one flat color by design
Don’t
- Re-add gradients, bevels, or drop shadows — the flat mark is the brand now
- Set “XL HOTEL” in live text next to the lockup
- Stretch, rotate, or crop the ornament off
- Place on photography without a black scrim behind it
Tokens · 04
Spacing, Radius & Depth
A 4px base scale. Corners stay sharp — this brand is engraved, not bubbly: 2px on controls, 4px on cards, pill only on badges.
Spacing scale
--sp-14px--sp-28px--sp-312px--sp-416px--sp-524px--sp-632px--sp-748px--sp-864px--sp-996px| Token | Value | Use |
|---|---|---|
--r-1 | 2px | Buttons, inputs |
--r-2 | 4px | Cards, panels, images |
--r-pill | 999px | Badges only |
--shadow-1 | 0 1px 2px rgba(0,0,0,.5) | Resting cards on light grounds |
--shadow-2 | 0 8px 28px rgba(0,0,0,.55) | Modals, popovers |
--glow-gold | 0 0 0 2px rgba(212,167,60,.55) | Focus ring — every interactive element |
On the dark ground, depth comes from the ink ramp (950 → 900 → 800), not shadows. Shadows exist for light-ground print pieces and overlays.
Components · 05
Components
Buttons
| Variant | Use when | Spec |
|---|---|---|
| Primary | The one main action per view — Book, Send Enquiry | Gold 500 fill · Ink 900 text · hover Champagne · active Gold 600 |
| Secondary | Supporting actions beside a primary | Transparent · Gold 600 border · hover 10% gold wash |
| Ghost | Tertiary and inline actions | Text only · hover 8% gold wash |
| Disabled | Unavailable action, kept visible | Ink 700 fill · 45% text — never a greyed gold |
All buttons: Jost 600, uppercase, .08em tracking, 44px minimum height, 2px radius. Focus is always the gold glow ring, never browser default.
Badges
AC
Non-AC
Deluxe
Fully Booked
AC is the premium offer, so it takes the gold fill; Non-AC takes the outline. Never invert this — the hierarchy is the pricing story.
Inputs
Enter a 10-digit mobile number.
Detected from your enquiry.
Labels sit above the field, caption style. Errors replace help text, never stack with it. Error text names the fix, not the failure.
Room card
◆ PHOTO ◆
Standard AC
ACDouble bed · TV · Hot water · 2 guests
₹1,400 / night
◆ PHOTO ◆
Non-AC
Non-ACDouble bed · Fan · Hot water · 2 guests
₹999 / night
Room name in Cinzel title; amenities in Small with middle-dot separators; price in Champagne tabular figures. One gold “Book Now” per row of cards — the featured room.
Navigation
Nav sits on true black (#0A0908), one shade below the page, so the sign reads as a sign. Active link takes gold with a 1px underline. On mobile the links collapse; “Book Now” never does.
Patterns · 06
Booking Enquiry
XL Hotel takes bookings by phone and WhatsApp — the form is an enquiry, not a checkout. No payment fields, no accounts. Ask only what the front desk needs to hold a room.
We reply within 30 minutes, 7 AM – 11 PM.
| Rule | Why |
|---|---|
| Dates first, contact last | Guests decide dates before they decide to give a number. |
| Success message names the room and dates back | “Enquiry sent — Deluxe AC, 22–24 Aug. We’ll call you.” Confirms, not just thanks. |
| Phone link is always live | Every page carries a tap-to-call. The form is one route, not the only one. |
Tokens · 07
Motion & Accessibility
| Token | Value | Use |
|---|---|---|
--t-fast | 150ms | Hover, focus, button state changes |
--t-std | 250ms | Card lift, accordion, dropdown |
--t-slow | 400ms | Page-level reveals, gallery transitions |
--ease-std | cubic-bezier(.2, 0, 0, 1) | The only easing. Decisive out, no bounce. |
- Honor
prefers-reduced-motion: all transitions and reveals collapse to instant. - Touch targets are 44px minimum — buttons, nav links, form controls.
- Focus is always visible: the gold glow ring, on every interactive element, in every component.
- Every text/ground pair used in product comes from the approved pairs table in the Color section.