Lagoon Premium
FunToSee Island Ferry · redesign in exploration
Misty sea-white pages, white 28px cards, deep-sea ink and one sky-blue accent from the logo. Albert Sans set large and tight, Zoox-quiet. Native mobile: a floating dark action bar, pill steps and photo headers.
Foundations
Direction status: concept exploration (redesign requested 4 Nov 2026). Palette sampled from the FunToSee logo; rhythm after Zoox and a native rounded-card app. Spacing one-offs use the shared .mt-* / .mb-* utilities.
One sky accent, kept for the primary action and the current state
Sky blue from the logo fills the one primary pill, the current step chip and the selected option, always with deep-sea ink on top. A deeper sky is readable brand text (live times). Everything else is ink on mist and white.
Logo sky
Primary pill, current, selected
--brand-primary
Deep-sea ink
Type, links, the floating bar
--fg
Map art
Sea, land and the route line
--map-*
Text roles
--fg--fg-secondary--fg-muted--fg-placeholder--fg-disabled--fg-brand-primary--success--danger--fg-inverseSurfaces, borders and status
bg · mist page
bg-surface · cards
bg-subtle · fields
bar-bg · action bar
border · hairline
border-strong · controls
map-sea
map-land
success-bg
warning-bg
danger-bg
info-bg
Status colours never carry meaning alone: every notice has an icon and a title in words.
Explore the full palettes · 50–950
Raw ingredients. Components use semantic roles so colours adapt to light and dark.
Neutral · sea slate
50
100
200
300
400
500
600
700
800
900
950
Brand primary · logo sky
50
100
200
300
400
500
600
700
800
900
950
Brand sun · offers only
50
100
700
800
600 · promo-icon
promo-bg
promo-fg
Spacing, shape and elevation
16px page gutter on phones, 32px on desktop · cards pad 24/20 (28/32 from 768px) and stack 12px apart · fields and pills 56px, chips 52px, targets at least 44px.
Motion: cards rise in once on arrival (420ms, expo ease-out, 40ms stagger); pills press to 98%; sheets rise; a changed time swaps in. Reduced motion removes all of it.
Typography
Albert Sans, a clean geometric grotesk that echoes the logo’s rounded wordmark. Titles medium and tightly tracked; body regular. Tabular figures everywhere.
Ramp
56 / 40 / 28 / 22 / 18 / 16 / 15 / 13 / 12
Letter spacing
−0.03em display · −0.015em titles · 0 body
Weights
400 / 500 / 600
Figures
Tabular
Large titles are Medium at −0.03em; card titles, buttons and chips Semibold; labels Medium; body and meta Regular.
Product text styles
3XL · 56px
Desktop large titles
Line height 59px · 1.05 · default medium · .text-3xl
Regular · 400
4:30
Medium · 500
4:30
Semibold · 600
4:30
2XL · 40px
Large titles (H1), phone
Line height 42px · 1.05 · default medium · .text-2xl
Regular · 400
4:30
Medium · 500
4:30
Semibold · 600
4:30
XL · 28px
Hero line
Line height 32px · 1.15 · default medium · .text-xl
Regular · 400
4:30
Medium · 500
4:30
Semibold · 600
4:30
LG · 22px
Card titles (H2), totals
Line height 27.5px · 1.25 · default semibold · .text-lg
Regular · 400
4:30
Medium · 500
4:30
Semibold · 600
4:30
BODY-LG · 18px
Summary titles, ETAs
Line height 24px · 1.333 · default semibold · .text-body-lg
Regular · 400
4:30
Medium · 500
4:30
Semibold · 600
4:30
MD · 16px
Body, inputs, option titles
Line height 23px · 1.45 · default regular · .text-md
Regular · 400
4:30
Medium · 500
4:30
Semibold · 600
4:30
UI · 15px
Labels, chips, supporting body
Line height 20px · 1.333 · default medium · .text-ui
Regular · 400
4:30
Medium · 500
4:30
Semibold · 600
4:30
SM · 13px
Meta, help, tags
Line height 19px · 1.45 · default regular · .text-sm
Regular · 400
4:30
Medium · 500
4:30
Semibold · 600
4:30
XS · 12px
Header meta line
Line height 16px · 1.333 · default regular · .text-xs
Regular · 400
4:30
Medium · 500
4:30
Semibold · 600
4:30
In use
Step 2 of 5
Flights & sailings
Your arrival
Scheduled arrival time in Saint Lucia
You land 75 min before the ferry’s last cast-off.
Like DL1970 — not your confirmation code.
Display sizes 4XL–8XL exist for the review hub only; product screens never use them.
Label
Presenter
12px · Semibold · 0.08em tracking · uppercase. Review chrome only; product headings carry their own weight.
Icons
Phosphor Regular: light, even strokes that read premium beside Albert Sans. Filled only for a confirmed or error state. 20px in chips, rows and notices; 16px inline with meta.
Regular · interface
Fill · emphasis
Button
One primary per screen: a 56px sky pill with ink text and an arrow when it moves you forward. Secondary actions are underlined ink links; outline pills hold a contained action such as Call.
Disabled is a flat muted fill, not a faded sky, so it never reads as pressable. Pills press to 98% on tap.
Field
A 15px medium label above a 56px white field with a 16px radius and a mid-grey border that darkens on hover; focus adds the sky border and ring. Required is a red asterisk; help sits below in 13px.
Rodney Bay area · your ferry arrives at Rodney Bay Marina
Like DL1970 — not your confirmation code.
That looks like a confirmation code. Enter the flight number, like DL1970.
Selection controls
Native radios and checkboxes with 22px indicators: a thin 1.5px outline, and a deep-blue fill with a white tick or dot when chosen. Three layouts: filled option cards (seating), hairline rows (cover tiers, payment), pill tiles (contact type). Selected is a 2px brand ring on a sky tint.
Segmented & stepper
Segmented: a slim 48px mist track; the chosen option is a raised white pill in semibold ink (Round trip / Arrival / Departure). Stepper: 44px round filled buttons around a live count.
Adults
Age 11+
Surface
White 28px cards on the mist page carry every section; hairlines only split rows inside a card. Cards never nest and never carry a border and a shadow.
Rodney Bay area · ferry to Rodney Bay Marina
Arrival
Fri, Jan 15
Departure
Fri, Jan 22
Subtle panel: route summaries and tips.
Raised: sheets and menus only.
Badge
A small tinted pill in the status colour. Words carry the meaning.
Tabs
Available, but the product has two roots and no tabs. Use for panel switching only; form choices use the segmented radio group.
Fri, Jan 15 · DL1970
Fri, Jan 22 · DL1971
Alert
The fit check and the delay banner: tinted 20px panels without borders. Icon and title take the status colour; the body stays ink. A delay is information, so it uses info blue.
Good fit
You land 2 h 30 min before the ferry’s last cast-off. Plenty of time.
Fast Track recommended
You land 75 min before the ferry’s last cast-off. We’ll add Fast Track on the Extras step — you can remove it.
Fast Track is required due to scheduling
You land 55 min before the last cast-off. We’ve added Fast Track for everyone — or pick another date.
Not compatible
You land 15 min before the last cast-off — not enough to make it.
DL1970 now lands 4:10 PM (+25 min)
We’ve moved your airport taxi to about 4:25 PM and told your driver and Fast Track host — nothing for you to do.
Airport taxi → coastal ferry → resort taxi. Both taxis are included in your fare.
Dialog
Centered dialog for desktop confirmations. On mobile, the product uses sheets (see Mobile primitives).
Avatar
Not used in the concept. Kept for a driver photo if FTSI’s dispatch provides one.
Search field
Available for plain searches. The resort field uses the Resort combobox below, so guests can see the options before typing.
Combobox
Product addition in css/product.css and js/product.js. The list shows before typing, grouped by area with its ferry port; typing filters by name, alias or area; the last option is always “My place isn’t listed”. Each option has a 56px photo and one line of facts (taxis, departure pickup); the not-listed option gets a sky tile with a plus. The active option has a mist fill and a sky edge; the selected one is semibold with a sky check. Below, the result row restates the port, taxis and pickup.
Sandals Grande St. Lucian
Sandals Regency La Toc
Sandals Halcyon BeachFlight variant
Product patterns
Compositions in css/product.css: the photo hero, the steps progress (desktop bar and mobile header) and the card stack. They are product-specific, built only from shared tokens.
From the airport to your resort, by sea.
- Airport and resort taxis included
- A coastal ferry up the west coast
- We track your flight
Your arrival
Mobile primitives
Native 56px header with a round back button and a blurred backdrop; the floating dark action bar (28px radius) with total, meta and the sky pill; sheets with a grab handle; 64px list rows. No bottom navigation: the product has two roots.
Children
Age 4–10 · half price
Change date
Up to 10 days before travel
Sheets share dialog behaviour: focus stays inside, Escape closes, focus returns to the trigger. From 768px a sheet becomes a centered dialog.