Kollection Maldives

The design system.

Every page composes exclusively from the tokens and k-* classes below — no page-level one-off styling. Colors are exposed both as CSS variables and as Tailwind utilities (bg-paper, text-ink, border-line…).

I

Colors

paper#0d1214

Page ground

--k-paper · bg-paper
paper-2#141b1e

Alternate sections, panels

--k-paper-2 · bg-paper-2
raise#182226

Cards, raised surfaces

--k-raise · bg-raise
ink#efe6d2

Body ink

--k-ink · bg-ink
softrgba(239,230,210,.78)

Secondary type

--k-soft · bg-soft
faintrgba(239,230,210,.44)

Tertiary type, placeholders

--k-faint · bg-faint
stone#d4ada6

Eyebrows, kickers

--k-stone · bg-stone
lagoon#79aece

The one accent

--k-lagoon · bg-lagoon
cream#f4eedf

Type over photography, button fills

--k-cream · bg-cream
linergba(239,230,210,.14)

Hairline borders

--k-line · bg-line
hairrgba(239,230,210,.07)

Faint hairlines

--k-hair · bg-hair
sig#121a1d

Footer flood

--k-sig · bg-sig
wine#7e303c

CTA hover fill

--k-wine · bg-wine
II

Typography

.k-wordmarkKudryashev Display 400 · hero only
Kollection
.k-h1page titles

What to do, surveyed by hand.

.k-h2section titles · <em> takes lagoon

Curated inspiration

.k-h3card & step titles

We accompany

.k-ledeeditorial lede · <em> takes stone

Every detail, quietly handled.

.k-eyebrow11px · 0.22em track · stone

A private index of the Indian Ocean

.k-signaturedetail-page marker · caption italic 600 on stone
Signature Experience
.k-kicker10px · 0.2em track

Baa Atoll · Overwater

.k-captionCormorant Garamond italic

“No detail was missed. We simply arrived.”

.k-body15px · 1.85 · soft

The Maldives is all we do, with uncompromising attention. We listen first, then assemble the stay around you.

.k-sec-notesection standfirst

Not the postcard. The Maldives we keep is quieter.

III

Buttons & links

.k-btnhover fills cream, type flips dark
The Collection
.k-btn k-btn-solidhover fills lagoon
Enquire
.k-btn k-btn-winedetail-page CTA · hover fills wine
Enquire about this
.k-link-underlinelagoon underline, lifts on hover
Our approach →
.k-link-footerfooter flood links
Instagram
.k-cathero category links · display face
Experiences
IV

Search & facets

.k-searchbox
.k-chippinned resort, × to dismiss
.k-facet-triggerdata-active draws the underline
.k-facet-optionlive count · disabled at 0
.k-modecategory tabs · display face + count
.k-tallylive result count

28 experiences

V

Cards

.k-card · k-card-shot · k-flag · k-card-title · k-card-at · k-card-factlive record from the database
.k-flagbadge over photography
★ Signature
.k-scrimgradient laid over photo tiles
Label over the scrim
.k-pg · k-pg-ofpager
1–12 of 28
VI

Fact band

.k-facts · k-facthairline glyph + phrase · first number emphasised · label is sr-only
Price: From $90 per couple, taxes includedWhere: OverwaterBest for: Travelling as a coupleCapacity: Up to 2 guestsHow long: About an hour, unhurriedWhen: MorningBooking: Book before arrivalDress: Barefoot casualViews: Lagoon views
VII

Effects & surfaces

.k-grainfixed film-grain overlay — active on this very page

SVG turbulence at 5% opacity, mix-blend screen, above everything.

.k-revealscroll reveal · .in added by <Reveal>

Opacity 0 / translateY(22px) → settled, 1s on the house ease. Disabled under prefers-reduced-motion.

.k-hero-scene · k-hero-vignette20s slow zoom + vignette
.k-wrap · k-wrap-fluid · k-section · k-section-padlayout rhythm

k-wrap: 1240px column, 38px gutters. k-wrap-fluid: full page width, gutters only (search/index pages). Sections separated by border-line hairlines with clamp(72px, 11vw, 140px) vertical padding.

.KollectionMarkthe [K] crest — currentColor
.k-footer-floodrendered live at the bottom of this page

Signature flood (#121a1d) with the watermark mark at 18% opacity.