Reference
Brand Kit
Every type role, colour, button and component in one place — so it can be reviewed and tuned. Not indexed.
Colour
Ivory
--color-ivory
Ivory dim
--color-ivory-dim
Paper
--color-paper
Line
--color-line
Stone light
--color-stone-light
Stone
--color-stone
Ink soft
--color-ink-soft
Ink
--color-ink
Night
--color-night
Typefaces
Miss Fajardose — display script · hero titles only, used sparingly
beautiful
Marya Jani — serif · hotel names, titles, section heads, running display
Capella Singapore
A quiet index of hotels worth the journey.
Marya Italic — serif italic · city & country only
Sentosa Island, Singapore
TWK Continental — sans · interface, labels, buttons
The Hotelist · Destinations · Reserve
Body and supporting copy is set in TWK Continental at a comfortable reading size.
Container widths
- 1500px — wide: grids, hero media (home, hotels, destinations, collections, journal, hotel gallery)
- 1400px — content: text-heavy sections inside a wide page (hotel description/FAQ/similar, home stats)
- 1100px — title: centered hero/title blocks (home hero, hotel name, Club, this page)
- 760px — narrow reading: About, Club closing note, Journal article body (prose itself caps at 62ch)
- 440 / 560 / 900px — account mini-scale, not part of the scale above: 440 login, 560 profile & signup, 900 account home & reviews
- 1080px — Concierge only: a deliberate exception for its mock chat layout, not part of the scale
Spacing
Section rhythm: most sections use py-16 to py-28 vertical padding, px-5 sm:px-8 horizontal. Grids use gap-x-6 gap-y-12 (cards) or tighter gap-6/gap-8 for text blocks.
Buttons & links
Liquid Glass · Concierge
Glass + iridescent sheen. Chromium refracts; Safari/Firefox keep a frosted fallback. Two named presets only (src/lib/liquidGlass.ts) — LG_PILL for nav/prompt bubbles, LG_CARDfor flat chat/aside chips. Don’t hand-tune a third variant per instance.
Form inputs
One shared class across every filter control (HotelsFilters.tsx): reinforced hairline border, transparent fill, u-label uppercase text, border darkens on focus — no background fill. Keyboard focus additionally shows the sitewide discreet:focus-visible ring (globals.css).
For paper-filled fields (account, reviews), .field (globals.css) now names that other recipe — rounded radius-card, reinforced hairline, paper fill, focus toward ink. New forms can use it directly; existing call sites are left as-is for now.
Breadcrumb & pagination
Empty state
Nothing here yet. Try a different place.
Quiet, no illustration, no exclamation — a single serif-name sentence, centered, same voice as everywhere else on the site (used on /hotels when filters return nothing).
Hotel card
Tokens
- radius-card · 0.75rem
- radius-pill · 999px
- duration-fast · 200ms
- duration-base · 350ms
- duration-slow · 500ms
Duration scale named in globals.css — adopted so far in the gallery arrows and the .field focus transition; not yet converted sitewide.