Skip to content
HarborStay
Check availability
Style guide · internal reference

HarborStay design tokens and components

Color tokens

hs/ink
#14232B
Text, headings, primary buttons
hs/slate
#4A5A63
Secondary text
hs/stone
#5E6863
Meta, captions
hs/harbor
#16454A
Primary surfaces, buttons
hs/lagoon
#2E6E6A
Links, interactive accents
hs/clay
#A94E2E
Validation, unavailable
hs/kelp
#3F6B52
Available, success
hs/brass
#9A7B4F
Decorative, lines
hs/paper
#F8F5EE
Page surface
hs/sand
#EFE7D8
Cards, band sections
hs/dune
#E2D6C1
Borders, dividers

Type scale

Display · Fraunces 40
Section head · Fraunces 28

Body · Manrope 15/26 — the terrace is set, the boats are out, breakfast is on its way.

Kicker · uppercase 11
Meta · stone 12

Components

PrimaryGhost Open for request Limited — fewer dates fit Not available for these dates

Component / state groups (C01–C20)

  1. C01 Header & navigation
  2. C02 Footer
  3. C03 Hero
  4. C04 Villa card
  5. C05 Filter bar & sort
  6. C06 Date range picker
  7. C07 Guest selector
  8. C08 Availability calendar & status
  9. C09 Booking summary rail
  10. C10 Step indicator
  11. C11 Form fields & validation
  12. C12 Gallery grid & lightbox
  13. C13 Accordion & FAQ list
  14. C14 Editorial split section
  15. C15 Experience card & collection tabs
  16. C16 Feature list & spec table
  17. C17 CTA band & inline CTA
  18. C18 State specimens
  19. C19 Toast & inline notice
  20. C20 Style-guide panels

Routes (R01–R29)

  1. R01 Home
  2. R02 About
  3. R03 Accommodation
  4. R04-R17 14 villas
  5. R18 Amenities
  6. R19 Experiences
  7. R20 Restaurant
  8. R21 Gallery
  9. R22 Location
  10. R23 FAQ
  11. R24 Contact
  12. R25 Availability
  13. R26 Booking
  14. R27 Booking status
  15. R28 404
  16. R29 Style guide