Foundations

Radius

The seven-step corner radius scale — from sharp promo badges to fully circular avatars — and which components use which value.

Rounded corners soften the interface without erasing structure. The Kuoni radius scale was calibrated from the live site's observed values: buttons and inputs sit at 4 px, destination cards at 8 px, and filter chips at the pill shape that echoes the oval airline luggage tags of classic travel. Each step has a job — they are not interchangeable.

The site favours subtle rounding, not the aggressive full-round style of some consumer apps. That restraint reflects the brand's combination of warmth (rounded enough to feel approachable) and authority (structured enough to feel trustworthy with large sums of money).

Visual scale

Each swatch below shows the same 80 × 80 box with a different radius applied.

radius.none

0

Promo badge anchors, full-bleed hero images

radius.sm

4 px · rounded-sm

Buttons, inputs, standard cards

radius.md

8 px · rounded

Featured destination cards, holiday-type cards

radius.lg

12 px · rounded-lg

Expert contact module, brochure card

radius.xl

16 px · rounded-xl

Larger modals, overlay containers

radius.pill

20 px · rounded-[20px]

Filter chips, Chip, Pill, QuickFilterBar

radius.full

9999 px · rounded-full

Circular avatars, radio button indicators

Token reference

Token	Value	Tailwind	Primary use
`radius.none`	0	`rounded-none`	Promo badge (top-left anchor), full-bleed images
`radius.sm`	4 px	`rounded-sm`	Button, Input, Select, Checkbox, Tag — all interactive controls
`radius.md`	8 px	`rounded`	Card, DestinationCard, TripCard, AccommodationCard, Alert
`radius.lg`	12 px	`rounded-lg`	ExpertQuote, brochure containers, larger card variants
`radius.xl`	16 px	`rounded-xl`	Modal dialog, Drawer header region
`radius.pill`	20 px	`rounded-[20px]`	Chip, Pill, QuickFilterBar items, Badge (status variant)
`radius.full`	9999 px	`rounded-full`	Avatar, radio button indicator, icon-only circular buttons

Component mapping

Interactive controls → radius.sm (4 px)

All form controls and buttons use radius.sm. The subtle rounding signals interactivity without softening the functional, professional feel.

Button — all variants
Input, Select, Textarea
Checkbox (outer border)
CounterInput
RangeSlider track

Cards → radius.md (8 px)

Content cards are the primary canvas for trip information. The 8 px radius gives them warmth while keeping them distinct from the interactive controls that sit inside them.

Card, TripCard, DestinationCard
AccommodationCard, RoomTypeCard, ActivityCard, ResortCard
Alert, Callout
BookingCard

Overlay UI → radius.lg / radius.xl (12–16 px)

Overlays appear above the page surface. A larger radius reinforces the separation from background content.

Modal dialog container — radius.xl
Drawer — radius.lg on the exposed edge
Popover — radius.md (keeps it visually lightweight)

Pills and chips → radius.pill (20 px)

The pill shape echoes the brand's travel heritage — boarding passes, luggage tags, and the oval stamps of a well-stamped passport.

Chip, ChipGroup
Pill
QuickFilterBar filter items
Badge in the status and category variants

Circular elements → radius.full

Reserved for elements that must be perfectly round. Apply only when the element's width equals its height.

Avatar
Radio button indicator dot
Notification badge dot
Icon-only circular action buttons

Rules

Use radius.sm (4 px) on all Button variants.

radius.sm keeps buttons feeling crisp and action-oriented.

Don't

Use radius.full or radius.pill on a standard text button.

radius.full on a button makes it look like a pill badge, not a primary action.

Apply the same radius.md to TripCard, DestinationCard and AccommodationCard.

Consistent 8 px radius across all card types creates visual cohesion across browse pages.

Don't

Use radius.lg on some cards and radius.sm on others of the same component type.

Mixing radii across adjacent cards of the same type creates visible inconsistency.