Style guide

Every part this template is built from.

One page holding the whole system — the tokens, the type, and every component the thirty other pages use. The values below are read out of the live cascade, not copied here, so they cannot drift from packages/theme.

Palette

Eight schemes, twelve semantic roles each. Every colour on this site resolves through var(--nk-*), so a scheme is one attribute on <html> and no rebuild. Pick one and the whole page follows — including the components further down.

—

surface

—

card

—

text

—

muted

—

line

—

brand

—

brand-dark

—

brand-soft

—

accent

—

accent-dark

—

accent-soft

—

The accent is spent on the booking CTA and price emphasis, nowhere else. Chrome, links and active states are the brand.

Type

Plus Jakarta Sans, fourteen steps, five weights.

fs-10 The quick brown fox —

fs-11 The quick brown fox —

fs-12 The quick brown fox —

fs-13 The quick brown fox —

fs-14 The quick brown fox —

fs-15 The quick brown fox —

fs-16 The quick brown fox —

fs-18 The quick brown fox —

fs-20 The quick brown fox —

fs-22 The quick brown fox —

fs-26 The quick brown fox —

fs-32 The quick brown fox —

fs-38 The quick brown fox —

fs-46 The quick brown fox —

display-sm

display-md

display-lg

Regular 400 Medium 500 Semibold 600 Bold 700 Extrabold 800

Spacing

Nineteen steps. Every gap, pad and margin on the site is one of these — a new value means a new token, not a literal.

space-0 —

space-2 —

space-4 —

space-6 —

space-8 —

space-10 —

space-12 —

space-14 —

space-16 —

space-20 —

space-24 —

space-28 —

space-32 —

space-40 —

space-48 —

space-56 —

space-64 —

space-72 —

space-96 —

Shape

Eleven radii and six shadows.

radius-none

radius-xs

radius-sm

radius-md

radius-lg

radius-xl

radius-2xl

radius-3xl

radius-4xl

radius-5xl

radius-pill

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-2xl

Buttons

The accent variant is the booking CTA and is used nowhere else.

A link on brand

Forms

Bootstrap's controls, re-pointed at the tokens.

Text input

Select

Textarea

Invalid state

That address does not look right.

Range

Checkbox, checked

Switch

Selected chip Chip

Stepper

The guest picker's control

Cards and surfaces

The containers the catalogue is built from.

Stat tile

4,180

up from 3,910

Value card

An icon, a heading and a line.

Panel

A recessed surface, for a group of related things.

Task row

With an urgent variant.

Feedback

Status is always a word, never colour on its own.

Alert

Used for the things a guest has to read.

Live Waiting Off Tag

Empty state

What a list says when it has nothing in it.

Navigation

Bootstrap's nav components, retokenised.

Icons

—

One inline sprite, duplicated verbatim at the top of every page. This grid is built from the sheet itself, so a new symbol appears here on its own.