Salt · design system v1.0

Five summers.
One coastline.

The design language of Coastal Preferred Escapes. Light, unhurried and salted by the Indian Ocean. Every page we build follows this.

The idea

Make the coast the luxury.

Cabana Mio is a simple, friendly place. What's world-class is where it stands: the bush path, the dunes, the long Amanzimtoti beach. The design gets out of the way and lets that do the selling.

The same system will carry every venue we add. A guesthouse in Umhlanga or a cottage in Scottburgh should look as good here as on any five-star booking site. That's why other owners will want to join.

Sandy path through coastal bush leading to the beach
Shaded patio with white table and chairs
Light

White space is the luxury. Salt-white pages, sea-mist sections, never a heavy block of colour.

Slow

Motion moves like a swell: slow zooms, soft fades. Nothing bounces, nothing flies in.

Real

Only real photos and footage of the venue and its beach. No stock pictures, ever.

Warm

A handwritten note, a sun-coral detail, plain friendly words. Family, not five-star formality.

01 · Colour

Sea, ink, sand and one sun.

Four inputs drive everything. Teal and navy come from the logo, and sand comes from the beach in our own drone footage. Coral is the single highlight. Every other colour is calculated from these, so the whole site can be retuned by changing a few numbers.

Master colours

Sea teal--color-primary

Buttons, links, icons. Taken from the logo.
Ink navy--color-heading

Headings only. The word "COASTAL".
Sand--color-sand

Ratings, warm details, sand sections.
Sun-coral--color-secondary

The one highlight. Badges, underlines. Never a big area.

Sea scale (calculated)

50mist wash
100soft border
200light line
300on-dark faint
400mid
500 ★primary
600hover
800deep

Surfaces: where the white space lives

Salt--color-background
Page. A breath of sea, never pure white.
White--color-surface
Cards and panels sit on salt.
Sea mist--color-surface-mist
Alternate sections.
Sand wash--color-surface-sand
Warm sections: reviews, the area.
Sky--sky-top → bottom
Hero and big moments only.

Text

Heading--color-heading
Copy--color-copy
Slate, never black.
Muted--color-copy-muted
Faint--color-copy-faint
Placeholders only.
02 · Typography

Light headings, easy reading.

Fraunces at weight 300 for headings: a soft, optical serif that reads like a resort brochure, not a newspaper. Figtree for everything you read. A handwritten script for the one personal note per section.

Script option:
.eyebrow
script · 500 · −2°
one per section
See you at the beach
.display
Fraunces 300
48–102px

Salt in the air

h1
Fraunces 300
42–74px

Five years of family holidays

h2
Fraunces 300
34–51px

Wake up to the sound of the sea

h3
Fraunces 300
27–38px

Seven duplexes, one path to the beach

h4
Fraunces 400
22–27px

Friday to Friday, every year

h5 / h6
Figtree 600
Who can join
Booking your holiday week
.overline
Figtree 600 · caps
tracking .16em
Amanzimtoti · KZN South Coast
.lead
Figtree 400 · 18–21px

One affordable monthly payment, no interest and no hidden charges. Your family's beach week is simply waiting for you every year.

body
Figtree 400 · 16–17px
line-height 1.72 · max 62ch

Cabana Mio sits behind the dunes on Beach Road. A short sandy path through the coastal bush takes you straight onto the beach, where the Indian Ocean rolls in all year. Mornings are for swimming and rock pools, afternoons for the braai, and evenings for the sound of the waves. Bold is Figtree 600 in navy, used for the words that matter. Never heavier.

small / .caption

Subject to availability. Festive season excluded.

Photo: the dune path at Cabana Mio, from our own drone footage.

blockquote
Fraunces 300 italic
"The kids were on the beach before we'd even unpacked the car."

Layout example. Only real guest reviews will appear on the live site.

emphasis
<em> in a heading

Your coast, your family.

Same colour, same weight, italic only. One phrase per heading at most.

ul.ticks
  • Five holiday weeks over five years
  • One missed holiday can be carried over
  • No extra accommodation fees
03 · Buttons

One clear ask, softly made.

Pills in medium weight with a soft sea shadow. Only one solid teal button per view; everything else steps back. On hover the colour deepens, the arrow moves 3px and the shadow lifts. Pressing sinks it 1px.

On salt and sand

Become a member How it works View the duplexes Read the FAQs

Sizes

Apply now Apply now Apply now

On photos and video

Become a member Watch the beach
04 · Cards & shadows

Light that falls softly.

Shadows are tinted with the sea, never grey, and layered so they read as light rather than a drop shadow. Cards are white on salt with a hairline border. On hover they rise 6px, the shadow deepens and the photo drifts in slowly.

Shadow scale

xs · hairline
sm · resting card
md · button hover
lg · card hover
xl · floating photo

Venue card: the heart of the platform

Cabana Mio duplexes with palms and paved courtyard Founding venue
Amanzimtoti · South Coast

Cabana Mio

Self-catering duplexes behind the dunes, a sandy path from the beach.

Sleeps 6 Duplex Beach path
R1,500 / month Explore
Balcony with braai and garden view
Cabana Mio · Duplex

Balcony & braai

Two storeys, a private braai and the sea breeze through the garden.

Family of 4 Fri – Fri
rating style View
Coming soon

Your venue here

Guesthouses and cottages on the KZN coast can join the Coastal Preferred Escapes collection.

List your venue

Membership card: one quiet, one featured

Pensioners & families of 4
R1,500 / month

60 months · R90,000 in total · no interest

  • Five holiday weeks
  • Friday-to-Friday stays
  • One missed holiday carried over
Choose this package
First 50 members: 3 bonus nights Families of up to 6
R1,800 / month

60 months · R108,000 in total · no interest

  • Five holiday weeks
  • Friday-to-Friday stays
  • One missed holiday carried over
Become a member

Postcards (reviews) and stats

"Layout example. Real guest words go here, in a soft italic serif."
Guest nameStayed in July · from Johannesburg
5
holiday weeks
60
monthly payments, no interest
50
founding places
05 · Images & rollovers

Let the photos breathe.

Nine treatments, each with a job. Trek's ideas (photos dissolving into the page, framed and stacked) are combined with seaside touches: arches, wave edges, polaroids. Hover over each one.

Beach seen over the dune bush
a · Drift

Default rollover: a slow 1.6s zoom with a touch of saturation. For every card and gallery photo.

Aerial view of Amanzimtoti beach
b · Fade to salt

From Trek: the photo dissolves into the page. Section openers and the hero.

Shaded patio at Cabana Mio
c · Framed

From Trek: an offset sea-mist plate that drifts apart on hover. Feature photos beside text.

Rainbow over the beach path
after the rain
d · Polaroid

A holiday snapshot with a handwritten caption. Use sparingly: area guides and guest moments.

Path through the dunes
e · Cabana arch

A rounded top like a beach doorway. The signature shape for portrait photos.

The beach at Cabana Mio
f · Wave edge

The photo ends in a gentle wave instead of a straight line. Big banners only.

Cabana Mio courtyard
The duplexesAround the courtyard
g · Caption reveal

The label rises over a soft sea gradient on hover or keyboard focus. Galleries.

Balcony with braai
h · Sun glint

A soft light sweeps across the photo once. Only for the featured venue or membership card.

Lounge
Kitchen
i · Stack

From Trek: two photos overlap with a white salt border. Inside and outside, side by side.

06 · Surfaces & rhythm

Tide lines, not hard edges.

Sections alternate salt → mist → salt → sand, joined by soft wave dividers. Spacing is generous: 80–160px between sections. If it feels like too much space, it's probably right.

Salt

Default page.

Sea mist

Every other section.

Sand

Warm moments, with a fine grain you can feel.

Sky

Hero only.

TokenValueUse
--section-y80 → 160pxVertical space between sections
--shell1240px maxContent width
--measure62chLongest line of body text
--radius18pxCards, images, panels (sea glass)
--radius-pill999pxButtons and chips only
--dur-drift1600msPhoto zoom: as slow as a swell
--dur-slow900msContent fading up on scroll
--ease-tidecubic-bezier(.33,0,.13,1)All reveals and zooms
07 · Forms

Easy as a beach day.

The house pattern: the label sits inside the field in small capitals, with a real label kept for screen readers. On focus you get a soft teal halo. The booking bar is the platform's search, shown below.

WhereAmanzimtoti
Week3 – 10 Jul
Family4 people
Check

Ask about membership

08 · The rules

What keeps it a million-rand look.

Always
  • Headings in Fraunces 300. Weight 400 only for h4 and prices.
  • One script eyebrow per section opener, and only there.
  • One solid teal button per view.
  • Coral only in small doses: badges, underlines, the founding flag.
  • Real photos and our own footage only, each with a meaningful alt text.
  • Alternate salt and mist sections, with at least 80px between them.
  • Every colour from tokens.css. No hex in components, ever.
Never
  • Bold or black headings (700–900). Heavy is the opposite of a holiday.
  • Dark full-width blocks mid-page. The only dark area is the footer, over the waves.
  • Stock photos, AI images or fake reviews.
  • Pure white (#FFF) pages or pure black text.
  • Grey shadows: always the sea-tinted tokens.
  • Bouncy or fly-in animation. Everything moves like the tide.
  • A third button style or a new radius invented for one page.