Design Reference Analysis

Comparison of 3 reference sites selected by Niall for the new beachhutpr.com

Reference Sites Compared

	MGroup	Sodali & Co	WildfirePR
Background	#151515	~#0A1628	#1C1C1C
Accent	#3430E8	#FF6400	#EF4E01
Secondary	None	~#E8C872	Teal / Amber / Purple
Font	Plus Jakarta Sans	Montserrat	Poppins
Headings	ExtraBold 800	Bold 700, uppercase	Bold 700
Hero	Video + text animation	SVG mask aperture	Looping video + overlay
Buttons	Pill	Text + chevron	Pill
Image Corners	Large card radii	80px asymmetric	50px all corners
Animation	GSAP heavy	Minimal + Swiper	Parallax + fade

What All 3 Share

These patterns appear across every reference site. This is what the new Beachhut site should replicate:

Dark-first design

All three use dark backgrounds as the default. Deep navy or near-black covers 70-80% of the page. White text on dark. Premium, confident feel.

Extreme colour restraint

None use more than 3 colours. One dark background, one accent, sometimes one secondary warm tone. The colour comes from photography, not the UI.

Single sans-serif font, bold headings

All use one typeface with bold/extrabold headings and regular body. Clean hierarchy without multiple font families.

Generous rounded corners on images

Sodali: asymmetric 80px. WildfirePR: 50px all corners. MGroup: large card radii. No sharp rectangles.

Hero with motion

Background video (MGroup, WildfirePR) or animated SVG mask (Sodali). None use a simple static hero image.

Pill-shaped buttons

Fully rounded CTA buttons (MGroup, WildfirePR) or minimal text-with-chevron links (Sodali).

Full-width alternating sections

Homepage structured as full-width colour bands (dark / accent / light). Content constrained within 1400-1500px.

What Makes Each Distinctive

MGroup — Motion-forward, editorial

mgroupsc.com

Scroll-driven text reveal (characters dim to bright). 380-frame earth rotation on scroll. Viewport-scaled typography. Video throughout. Heaviest animation investment.

Sodali — Shape-driven, restrained

sodali.com

Asymmetric 80px rounded corners everywhere. SVG mask hero aperture. Three colour sections (navy, gold, white). No video. Most restrained and corporate.

WildfirePR — Texture-driven, energetic

wildfirepr.com

Custom 3D swirl background textures. Three accent card colours (teal, amber, purple). Hero video with heavy overlay. Chevron section dividers. Most "colourful".

Recommendation for Beachhut

Colours

#051525

#0A2540

#002B55

#D4A847

#FFFFFF

Keep the pitch palette. It sits between Sodali's navy and MGroup's near-black, with gold matching Sodali's warm secondary.

Typography

Single sans-serif. Top picks: Plus Jakarta Sans (modern, clean), Montserrat (proven, strong uppercase), or Inter (already used in pitch). Bold/ExtraBold uppercase headings with wide letter-spacing.

Hero

Short looping background video (10-15 seconds) of Dublin or European city footage with 60-70% dark overlay. Big bold heading, pill CTA button.

Layout

Full-width alternating sections (navy / gold / white)
Content constrained to 1400px max width
80-120px vertical section padding
Swiper.js for carousels

Images

50px rounded corners on all images. Full-bleed hero photography with dark overlays. WebP format with responsive srcset.

Animation

GSAP + ScrollTrigger for scroll-based reveals (fade + slide, 0.6s)
Text splitting on hero heading
Staggered entrance on grid items
Parallax on section backgrounds (subtle)

Buttons

Pill-shaped. Primary: gold background, dark text. Secondary: text + chevron arrow.

Tech Stack

Tailwind CSS (custom tokens), GSAP (animations), Swiper.js (carousels), SSR for SEO/GEO.

Key insight: Niall said he wanted "colourful and fun" but all 3 sites he picked use disciplined, restrained palettes. The colour comes from photography and video, not from the interface. Build a dark, clean, premium UI and let the imagery do the colourful work.