Template Preview
Brand HotelPlatform Sand rendered by template hotelplatform — visual reference for all design tokens
Block Coverage
Block types the hotelplatform template renders, and the variants it ships for each. A type missing here renders the fallback.
cta_card no variants — default only
features variants: catalogue
header_section no variants — default only
hero variants: flow, sand, spine
image no variants — default only
integration_search no variants — default only
posts variants: archive
tailwind_hero variants: flow, sand, spine
text no variants — default only
Brand Scale
50
100
200
300
400
500
600
700
800
900
950
Neutral Scale
50
100
200
300
400
500
600
700
800
900
950
Semantic Colors
Primary
Bg Default
Bg Secondary
Bg Dark
Brand Tint
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Body text — The quick brown fox jumps over the lazy dog. This is how body copy looks with the current template settings. Paragraph text uses the default text color on the secondary background.
Muted text — Secondary information that doesn't need to stand out as much.
This is a link — and this is visited.
Components
Buttons
Cards
A
Feature Card
Sample card content showing how feature blocks look with the current template.
Brand Tint Card
This card uses the brand tint background scheme.
Dark Card
Dark background with auto-selected text color.
Dark Section
Subtitle
Dark Section Heading
This simulates a HeaderSection block. Text colors are auto-selected for contrast against the dark background.
Contrast Check
| Pair | Background | Foreground | Ratio | WCAG | Sample |
|---|---|---|---|---|---|
| Primary bg + text | primary | text-onPrimary | 7.0:1 | AAA | Sample |
| Dark bg + text | background-dark | text-onDark | 13.0:1 | AAA | Sample |
| Default bg + text | background-default | text-default | 5.2:1 | AA | Sample |
| Card bg + text | background-secondary | text-default | 5.5:1 | AA | Sample |
Token Values
Show all CSS custom properties
{
"--color-ink": "#0B1B33",
"--color-deep": "#14306E",
"--color-signal": "#4FC3B0",
"--color-signal-deep": "#136558",
"--color-signal-light": "#8FE0D2",
"--color-canvas": "#F6F9FC",
"--color-error": "#B4442F",
"--color-brand-50": "#F6F9FC",
"--color-brand-100": "#EAF0F9",
"--color-brand-200": "#CBD9F0",
"--color-brand-300": "#A3BCE4",
"--color-brand-400": "#6389C8",
"--color-brand-500": "#2A56A8",
"--color-brand-600": "#204487",
"--color-brand-700": "#14306E",
"--color-brand-800": "#0F2452",
"--color-brand-900": "#0B1B33",
"--color-brand-950": "#071223",
"--color-neutral-50": "#F8FAFC",
"--color-neutral-100": "#F1F5FA",
"--color-neutral-200": "#E3E9F2",
"--color-neutral-300": "#CFD8E6",
"--color-neutral-400": "#A6B3C6",
"--color-neutral-500": "#8494AB",
"--color-neutral-600": "#6C7C93",
"--color-neutral-700": "#5A6A80",
"--color-neutral-800": "#3B4A61",
"--color-neutral-900": "#12233F",
"--color-neutral-950": "#0B1B33",
"--color-primary": "#2A56A8",
"--color-primary-hover": "#14306E",
"--color-secondary": "#4FC3B0",
"--color-background-default": "#F6F9FC",
"--color-background-secondary": "#FFFFFF",
"--color-background-elevated": "#FFFFFF",
"--color-background-dark": "#0B1B33",
"--color-text-strong": "#12233F",
"--color-text-dark": "#12233F",
"--color-text-default": "#5A6A80",
"--color-text-muted": "#5D6C82",
"--color-text-light": "#A9BEDC",
"--color-text-subtle-on-dark": "#7A93BD",
"--color-text-accent": "#4FC3B0",
"--color-text-onPrimary": "#FFFFFF",
"--color-text-onDark": "#D5E1F2",
"--ui-text": "#12233F",
"--color-border-default": "#E3E9F2",
"--color-border-on-dark": "rgb(169 190 220 / 0.22)",
"--font-heading": "\"Outfit\", ui-sans-serif, system-ui, sans-serif",
"--font-display": "\"Outfit\", ui-sans-serif, system-ui, sans-serif",
"--font-body": "\"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif",
"--font-mono": "\"IBM Plex Mono\", ui-monospace, monospace",
"--font-size-base": "17px",
"--text-display": "clamp(2.1176rem, 4.4vw, 3.4118rem)",
"--text-h1": "clamp(1.6471rem, 2.9vw, 2.2353rem)",
"--text-h2": "clamp(1.2941rem, 2vw, 1.5294rem)",
"--text-h3": "1.1765rem",
"--text-h4": "1.0000rem",
"--text-metric": "1.7647rem",
"--text-body": "clamp(0.8824rem, 1.2vw, 1.0000rem)",
"--text-caption": "0.7647rem",
"--text-eyebrow": "0.7059rem",
"--radius-control": "10px",
"--radius-card": "16px",
"--radius-floating": "20px",
"--radius": "10px",
"--shadow-float": "0 24px 50px -30px rgb(11 27 51 / 0.45)",
"--shadow-control": "0 10px 20px -12px rgb(20 48 110 / 0.65)",
"--shadow-header": "0 10px 24px -20px rgb(11 27 51 / 0.5)",
"--container-site": "1200px",
"--section-rhythm": "88px",
"--rope-display": "block"
}