Principles

Five rules we hold ourselves to. They sit above any individual screen, and every component below should be measurable against them.

Colour

Two core hues, two supporting hues, a warm neutral spine, and a measured set of semantics. The full palette is built from oklch-stable ramps so each step has even visual weight. Yellow stays a reserved accent — never a wallpaper.

Primary · Coastal Blue

Where: primary buttons (700/800), nav, links, focus rings, headlines on light surfaces. Use 500 as the brand mid for marketing surfaces; 100/200 as quiet card and chip backgrounds. Avoid 300 and 400 for body text — they can drift below AA on warm sand.

Brand Accent · Honeyed Sun

Where: reserved accent. Featured CTA on a hero (500), price-rise highlights, ‘saved to wishlist’ confirmations, seasonal/quality marks (100 background + 800 text). Never as a body-text colour, and never as a flat fill across a screen.

Supporting · Sage & Terracotta

Sage is the quiet supporting hue — coastal grass, calm map fills, ‘pet friendly’ amenity tags. Terracotta is the warmer balancer — illustration accents, host-side surfaces, regional tags for Cornwall/Devon copy. Both are restricted to one or two appearances per screen.

Neutrals · Sand & Ink

Sand 50 is the page canvas — warmer than off-white, never beige. Sand 100/200 separate cards from page; sand 300 is the standard hairline. Ink 700 is body copy (never pure black); ink 900 is reserved for headlines and emphasis. Ink 300 is the quietest readable text — tertiary meta only.

Semantic

Typography

A two-family pairing: Fraunces for editorial moments — listing headlines, property names, marketing — and Inter as the workhorse for UI, forms, dashboards. Fraunces gives us the gentle British warmth without going twee; Inter keeps everything else honest.

Type scale (web · 16px base)

Mobile adjustments

• Display steps drop ~20% on viewports under 720 px (e.g. Display L 44 → 36, H1 36 → 28).
• Body stays 15 px — never smaller, even on mobile. iOS/Android natural reading minimum.
• Line lengths capped at 64ch for editorial body, 36ch for cards.
• Use font-feature-settings: "ss01", "tnum" on prices to keep digits aligned.

Spacing & Radius

A 4 px base scale. Eight named steps for layout; the rest by ratio. Radius reads balanced — soft enough to feel coastal, sharp enough to feel grown-up.

Elevation

Three soft levels. Shadows are warm-tinted (slight ink-brown undertone) so they feel at home on sand, not the cool grey of a generic system.

Buttons

Three intent levels — Primary, Secondary, Ghost — plus a reserved Sun variant for the brand’s warmest moments. Three sizes. Always pair with a clear verb.

Primary uses Blue 700 — calmer than Blue 500 to reduce visual stress. Sun is reserved for one moment per screen, max — typically the hero CTA on marketing surfaces or the “Book” action on a confirmation step.

Sizes

Mobile defaults to large (48 px) to meet 44 px hit-target with vertical padding. Icon-only buttons must always carry an aria-label.

Inputs & Filters

Forms feel calm, generous, and forgiving. Borders soften to blue on focus rather than darkening. The amenities filter is the workhorse of search — pills first, dropdowns second.

Search bar (composite)

The composite search bar collapses to a single tappable “Where to?” pill on mobile, expanding into a full-screen sheet on tap.

Amenity filter pills

Active filter inverts to ink. Counts use tabular numerals so they never jitter on update.

Tags & Badges

Tags carry the small, persistent metadata of a listing — amenities, region, status. Quality marks read as a quiet honour, not a sales banner.

Amenity & region tags

Quality & trust signals

Quality signals never shout. The yellow gradient is gentle; copy is descriptive (“Top rated”, “Verified host”) rather than promotional (“BEST DEAL!”).

Status badges

Property cards

The single most important component in the system. Three variants: Standard with price, Quality-marked with a subtle trust stamp, and Price hidden for partnered or enquiry-only listings — handled with grace, never as a void.

Behaviour notes

• Price hidden state replaces the price block with a calm “Enquire for rates” chip — same vertical weight, no empty space, never a strikethrough.
• Wishlist heart sits top-right with a 92% white pill behind it for legibility on dark imagery. Saved state fills the heart in error-500 (it’s the warmest red we permit).
• Quality stamps sit top-left when present and never coexist with a discount or “book now” banner.
• Card hover: 4 px lift + shadow-2 on web; tap-down at 0.98 scale on mobile.
• Image area uses a 4:3 aspect ratio. Carousels paginate with dots inside the image, anchored bottom-centre.

Wishlist interaction

Saving is the single most-used delight in the product. The interaction is fast, forgiving, and explicit — but never noisy. One tap, one confirmation, one undo.

On save, a toast confirms the wishlist name and offers a one-tap Undo. Wishlists are titled by default with the destination + month — a quiet British touch (“Cornwall, May”).

Reviews

Reviews are editorial — generous line-height, real names, full stops. Three moderation states are visible to admins: approved, pending, and flagged. Guests only ever see approved.

Navigation

Web uses a single horizontal top nav with a centred composite search. Mobile collapses to a five-tab bottom nav with the search anchor up top.

Web · top nav

Rent Your Holiday Home

Stay Wishlists Trips Host a home

Sign in Get started

Mobile · bottom tab bar

Tab bar uses 22 px icons + 10.5 px labels — large enough to read at arm’s length, small enough to keep the tab bar at 60 px (incl. safe-area padding on iOS).

Modals & Alerts

Modals are short. Alerts are useful. Both follow the same rule: lead with what just happened or what we need; end with a clear next action.

Mobile & touch

The mobile experience isn’t a smaller web page — it’s the same system tuned for thumbs.

UX direction

Some product decisions don’t belong in a token file. These are the ones that quietly define the experience.