EN 
ES 
FR 
DE 
PT 
Website Style Guide
updated 12.10.25
Table of Contents
01. Logo
Primary Logo
Primary Logo
White on solid background
Primary Logo
Black
02. Typography
Navigation Typeface
Montserrat Regular #273d3b
Hero Image & Headline Typefaces
H1 – Bely Display #f26b39
H2 – Bely Display #3e9976
H1/Hero/Headline
H2/Subheadline/Block Headlines
H3 Headline
H4 Headline
H5 Headline
H6 Headline
Blog Subheadlines
Montserrat Bold #273d3b
Subheadline paragraph onsectetur adipiscing elit.
Blog Section Headlines
Bely Display #3e9976
Section Headlines
Body Typeface
Montserrat Regular #273d3b
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis diam enim, a blandit ex vestibulum vel. Pellentesque nec dui id nisi feugiat pharetra ut et justo. Nam pretium magna ac rhoncus placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec lobortis diam massa, ut egestas nisi iaculis nec.
03. Colors
primary colors
Mandarin Orange #F26B39
Emerald Shores #3E9976
Midnight Tide #273D3B
Seashell #F9F6F0
SECONDARY COLORS
Golden Sunrise #FBC731
Coral Sands #FABDB6
Seafoam Serenade #85C9AF
Steel Gray #707070
04. Layout – Homepage
The Homepage is organized in the following manner:
- Navigation Bar
- Hero image or video, may or may not have text overlay
- Headline
- Subhead
- Intro copy
- Experience our Cities
- Jump link to map module
- Flavors of the Moment – Curated Content
- The Palm Beaches Experiences
- Signature Events
- Deals module
- Now Trending – latest content
- Interactive map module
- Tips from the Locals module
- Sponsored Content
- Social media module
- Conversion block – Lodging booking engine, Newsletter and Visitor Guide sign-ups
- Footer
05. Layout – Top-Level Pages
06. Layout – Listing Pages
07. Blog & General Pages
08. Image Sizes – Hero Images
Desktop Image Sizes
Full Image: 1900w x 1000h
Live Area: 1400w x 850h
All hero images should be 1900×1000, however due to the nav bar and the palms, the live area (subject of the photo) is limited to 1400×850 with 150px of space above the live area. So if you have a photo that has a subject that must be visible (see the Collection landing page), make sure the subject fits within the 1400×850 live area. See the diagram on the right.
POSTER IMAGES: 1600w x 900h
Poster images are used as placeholders when the video heroes are being loaded. Typically they will only be visible for a second or less. It is strong recommended the first frame of the video is used to make it really seamless after the video loads in and starts playing.
BLOG HERO IMAGES: 1900w x 1000h
(Hero images are not required for every blog article, butrecommended. In the event when no hero is provided, a placeholder image of watercolor artwork with be used.)
Mobile Image Sizes
Full Image: 900w x 1600h
Live Area: 700w x 1300h
All hero images should be 900×1600, with a safe area (subject of the photo) limited to 700×1300 with 135px of space above and 165px of space below the live area. So if you have a photo that has a subject or text embeded in the photo (see the Love landing page), make sure the subject fits within the 700×1300 live area. See the diagram on the right.
POSTER IMAGES: 900w x 1600h
Poster images are used as placeholders when the video heroes are being loaded. Typically they will only be visible for a second or less. It is strong recommended the first frame of the video is used to make it really seamless after the video loads in and starts playing.
BLOG HERO IMAGES: 900w x 1600h
(Hero images are not required for every blog article, but recommended. In the event when no hero is provided, a placeholder image of watercolor artwork with be used.)
09. Image Sizes – Top-Level Pages
HERO IMAGES: 1900w x 1000h
TOP-LEVEL FEATURED CONTENT
HORIZONTAL: 950w x 500h
VERTICAL: 500w x 850h
HOMEPAGE EVENT & FEATURED
LISTINGS ARCHES: 450w x 800h
TOP-LEVEL PAGE MASONRY GRIDS
Landscape orientation images are highly recommended. Please see example to the right.
1×1.5: 700w x 900h
2x.5: 1400w x 450h
1x.5: 700w x 450h
1×1: 700w x 700h
TOP-LEVEL NOW TRENDING STORIES:
500w x 650h
SPONSORED ADS: 600w x 350h
10. Image Sizes – Body, Listings & PR
FEATURED CONTENT IMAGES
Horizontal Image: 950w x 500h
Vertical Image: 500w x 850h
Please take into consideration the orientation of the respective image when selecting an image. Please see the example below.
BLOG BODY/INLINE IMAGES: 1000w x 700h
Landscape orientation images are highly recommended. Please see example below.
LISTINGS GRID & DETAILS, & PUBLIC RELATIONS PAGE IMAGES:
1150w x 700h
Landscape orientation images are highly recommended. Please see example below.
11. Image Sizes – Ads
SPONSORED/AD IMAGES: 600w x 350h
Landscape orientation images are highly recommended. Please see example below. Please see example above.
