TidalStays
QuestionsStart a conversation

Design system

The system behind every Tidal Stays surface.

One family, two radii, two easings, eight section modes. Components read semantic slots only; the mode class remaps them. Illustrations carry the extended palette; the chrome stays disciplined.

Colour

--bg / Shell#F7F5F0Page ground — never pure white
--accent / Tide#12599EFills, CTA, tide mark
--accent-ink#0D4478Text-safe on light
--tide-on-dark#8CC0EFAccent on navy
--deepwater#072338Dark panel
--anchor#5B2436Booking/contact slab
--signal#7448CEMarketing & growth only
--coral#E0614COwner-attention only
--seagrass#8FBF5EOwner-block, highlight
--p-sky#E7F0FAmode-tint
--p-mint#E6F2ECmode-mint
--p-sand#F6EEE2mode-sand
--p-lilac#EFEAFAmode-lilac
--p-peach#FCEEE8mode-peach

Section modes

mode-light

Components read slots; the mode remaps them.

Same card, button and label markup on every band.

Primary Soft Ghost

mode-tint

Components read slots; the mode remaps them.

Same card, button and label markup on every band.

Primary Soft Ghost

mode-sand

Components read slots; the mode remaps them.

Same card, button and label markup on every band.

Primary Soft Ghost

mode-mint

Components read slots; the mode remaps them.

Same card, button and label markup on every band.

Primary Soft Ghost

mode-lilac

Components read slots; the mode remaps them.

Same card, button and label markup on every band.

Primary Soft Ghost

mode-peach

Components read slots; the mode remaps them.

Same card, button and label markup on every band.

Primary Soft Ghost

mode-dark

Components read slots; the mode remaps them.

Same card, button and label markup on every band.

Primary Soft Ghost

mode-anchor

Components read slots; the mode remaps them.

Same card, button and label markup on every band.

Primary Soft Ghost

Type

High tide

Every turnover, handled

Owner statements

Jost 600 for display with negative tracking above 40px; 400 body demoted by colour; IBM Plex Mono caps labels at +0.12em; Sacramento for one script word in the wordmark.

Label · +0.12em

Illustrations

One calendarIn sync
Direct siteListing channelSecond channelOwner block
MTWTFSS
1234567891011121314
Guest inboxHandled
What time can we check in on Friday?
From 4pm — I'll send the door code that morning.
Perfect, thank you.
Turnover runOn schedule
1Guest checked out
2Clean and linen change
3Restock and check
4Ready for arrival
Owner statementMonthly
Booking income
Cleaning
Maintenance
Management fee
Paid to you

Layout shown. Figures appear once your home is live — we do not publish sample numbers.

Where guests come fromMix
Your own booking pageReturning guestsListing channelsReferrals and local

Illustrative. Real mix figures appear once homes are live.

Season shapeBy month
APRMAYJUNJULAUGSEP

Shape only, no figures — the point is that the shoulder months are the ones to work.

Motion

Two curves — cubic-bezier(.25,1,.5,1) and (.45,.05,.55,.95). Four durations — 150 / 240 / 450 / 800ms. Stagger 70ms. Hover behind any-hover. Every transition names its properties. The tide field canvas is the one engineered system; the header rule fills with scroll via animation-timeline.