Template Preview

HotelPlatform — visual reference for all design tokens

Brand Scale

100

200

300

400

500

600

700

800

900

950

Neutral Scale

100

200

300

400

500

600

700

800

900

950

Semantic Colors

Primary

Secondary

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

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	brand-300	text-onPrimary	9.6:1	AAA	Sample
Dark bg + text	background-dark	text-onDark	8.1:1	AAA	Sample
Default bg + text	background-default	neutral-700	9.8:1	AAA	Sample
Card bg + text	background-secondary	neutral-700	10.5:1	AAA	Sample

Token Values

Show all CSS custom properties

{
  "--color-brand-50": "#e5f0ff",
  "--color-brand-100": "#d7e2ff",
  "--color-brand-200": "#c2cdff",
  "--color-brand-300": "#a3aeff",
  "--color-brand-400": "#838bfa",
  "--color-brand-500": "#6264e2",
  "--color-brand-600": "#4b4abd",
  "--color-brand-700": "#373395",
  "--color-brand-800": "#231d6e",
  "--color-brand-900": "#12074a",
  "--color-brand-950": "#070030",
  "--color-primary": "var(--color-brand-300)",
  "--ui-text": "var(--color-brand-900)",
  "--color-secondary": "#6BC8BC",
  "--color-neutral-50": "#f2f4ff",
  "--color-neutral-100": "#e8eaf6",
  "--color-neutral-200": "#dbdde8",
  "--color-neutral-300": "#c5c7d1",
  "--color-neutral-400": "#9fa1ab",
  "--color-neutral-500": "#6f717b",
  "--color-neutral-600": "#53555e",
  "--color-neutral-700": "#3e3f48",
  "--color-neutral-800": "#24262e",
  "--color-neutral-900": "#14151d",
  "--color-neutral-950": "#08090f",
  "--color-background-default": "#F0F9FF",
  "--color-background-secondary": "#FFFFFF",
  "--color-background-dark": "#9B9BFF",
  "--color-text-light": "var(--color-neutral-300)",
  "--color-text-default": "var(--color-neutral-700)",
  "--color-text-muted": "var(--color-brand-600)",
  "--color-text-dark": "var(--color-brand-950)",
  "--color-text-accent": "var(--color-brand-300)",
  "--color-text-onPrimary": "#070030",
  "--color-text-onDark": "#070030",
  "--color-border-default": "var(--color-neutral-200)",
  "--font-heading": "\"Inter\", sans-serif",
  "--font-body": "\"Inter\", sans-serif",
  "--radius": "0.375rem"
}