Foundations

Elevation

The six-level shadow scale — how depth, layering and focus are communicated through light in the Kuoni component library.

Elevation communicates relationship. A card sitting above the page surface says "I am a distinct object". A modal with a deep shadow says "I am in front of everything else and I need your attention". Depth is not decoration — it is structure made visible.

The Kuoni shadow scale has six levels, each one a step upward in perceived height. The values were calibrated against the live kuoni.co.uk site, where cards use a soft lift and hover states increase that lift. Both the colour (always near-black at low opacity) and the blur radius were chosen to feel natural under warm, diffused light — the same light travellers associate with the destinations they are browsing.

Shadow scale

Each card below shows the same white surface with one shadow level applied.

shadow.none

No shadow — flat surfaces inside a card or panel

none

shadow.xs

Barely-there lift — table rows, inline form fields

0 1px 2px rgba(0,0,0,0.06)

shadow.sm

Card default resting state — confirmed from live site

0 2px 8px rgba(0,0,0,0.08)

shadow.md

Card hover / active lift — the most common transition

0 4px 16px rgba(0,0,0,0.10)

shadow.lg

Modals, popovers, floating panels

0 8px 24px rgba(0,0,0,0.12)

shadow.xl

Mega-menu, full-page drawers, maximum elevation

0 16px 40px rgba(0,0,0,0.14)

Token reference

Token	CSS value	Tailwind	Use case
`shadow.none`	`none`	`shadow-none`	Flat surfaces, nested elements inside a card
`shadow.xs`	`0 1px 2px rgba(0,0,0,0.06)`	`shadow-kuoni-xs`	Table rows, inline inputs on white backgrounds
`shadow.sm`	`0 2px 8px rgba(0,0,0,0.08)`	`shadow-kuoni-sm`	Card resting state, pill chips
`shadow.md`	`0 4px 16px rgba(0,0,0,0.10)`	`shadow-kuoni-md`	Card hover, active state, BookingCard
`shadow.lg`	`0 8px 24px rgba(0,0,0,0.12)`	`shadow-kuoni-lg`	Modal, Popover, floating DatePicker
`shadow.xl`	`0 16px 40px rgba(0,0,0,0.14)`	`shadow-kuoni-xl`	MegaMenu, full-height Drawer overlay
`shadow.inset`	`inset 0 0 0 1px rgba(0,0,0,0.06)`	`shadow-kuoni-inset`	Inner border on white-on-white cards

Resting vs hover/active

The most common elevation pattern in the system is a two-step lift: a component rests at shadow.sm and rises to shadow.md on hover or focus.

Apply shadow-kuoni-sm at rest and hover:shadow-kuoni-md on interactive cards.

A visible lift on hover signals interactivity without relying on colour alone.

Don't

Go from shadow-none to shadow-kuoni-lg on card hover.

Shadows that appear only on hover with no resting shadow can feel abrupt.

<div className="rounded-md bg-white shadow-kuoni-sm transition-shadow hover:shadow-kuoni-md">
  {/* TripCard, DestinationCard, AccommodationCard — all follow this pattern */}
</div>

Layering rules

Shadows are not additive. A component renders at exactly one elevation level. When one elevated component contains another (e.g. a Popover inside a Modal), the child must use a lower shadow than the parent — never the same or higher.

Scenario	Component	Shadow level
Page surface	Section, page background	none
Card at rest	TripCard, DestinationCard	sm
Card focused/hovered	TripCard (hover state)	md
Floating UI, inline	DatePicker, SortDropdown	lg
Overlay UI	Modal, Drawer	lg
Top-of-stack navigation	MegaMenu	xl

Shadow and background colour

Shadows are calibrated for white (#FFFFFF) and light-grey (#F5F5F5) backgrounds. On dark surfaces (the kuoni-dark footer, hero sections) shadows become invisible; use borders or colour contrast for separation instead.

Apply card shadows on white or grey-50 section backgrounds.

Shadows work against light surfaces and provide clear separation.

Don't

Apply shadow-kuoni-md to a card placed on the kuoni-dark (#1A1A1A) background.

Near-black shadow on a dark surface is invisible and adds no information.