Website Design Reference
Reference sites and an example of the Beachhut aesthetic for the new website build. We like the navy background, the use of strong photography, and a design that is not monochrome black and white.
Reference Sites
MGroup
mgroupsc.com
Sodali & Co
sodali.com
WildfirePR
wildfirepr.com
Beachhut Materials
Design Reference Analysis
Comparison of all 3 reference sites — colours, fonts, animation, recommendations
Pitch Presentation Example
Interactive presentation — navy background, photography, deep dives
SEO, GEO & Technical Specs
Search engine optimization, generative engine optimization, analytics setup
What we like
- Navy background — not black, not white. Distinctive and confident.
- Photography that pops — colourful hero images against the dark background
- Not monochrome B&W — warm gold accents, depth, and contrast
- Clean typography — Inter for body, DM Serif Display for headings
- Glass-style cards — subtle transparency and border effects
Design System
Colours, fonts, and styling used in the pitch presentation. This is the aesthetic we want the website to reflect.
Colour Palette
Dark
#051525
Mid Navy
#0A2540
Navy
#002B55
Gold
#D4A847
White
#FFFFFF
Glass
4% white
Typography
Headings
DM Serif Display
Google Fonts · Regular 400, Italic · Used for slide titles, hero text, feature numbers
Body & UI
Inter — clean, modern, highly legible
Google Fonts · 300 / 400 / 500 / 600 / 700 · Body text, labels, nav, cards, buttons
Surface Effects
Glass Card
bg: 4% white
border: 7% white
radius: 12px
border: 7% white
radius: 12px
Accent Card
gradient: navy to mid
border: 20% gold
radius: 12px
border: 20% gold
radius: 12px
Key Patterns
- Gold rule — 60px wide, 2px tall #D4A847 line used as a section divider
- Section labels — 11px, uppercase, letter-spacing 2px, gold colour
- Text hierarchy — white for headings, 75% white for body, 45% white for muted, 35% for metadata
- Hover states — cards lift 1px (translateY), border brightens, arrows turn gold
- Photography — full-bleed hero images with dark gradient overlays (rgba 0,0,0,0.55)
- Deep dives — slide-in white panels from the right, 520px wide, with navy headings and gold accents
- Callout boxes — 3px gold left border, 8% gold background, rounded right corners
CSS Variables
:root {
--cf-navy: #002B55; /* Primary brand navy */
--cf-dark: #051525; /* Darkest background */
--cf-mid: #0A2540; /* Mid-dark for gradients */
--bh-gold: #D4A847; /* Beachhut gold accent */
--bh-gold-light: rgba(212,168,71,0.12);
--bh-gold-glow: rgba(212,168,71,0.25);
--text-muted: rgba(255,255,255,0.45);
--text-dim: rgba(255,255,255,0.6);
--glass: rgba(255,255,255,0.04);
--glass-border: rgba(255,255,255,0.07);
--radius: 12px;
}
/* Fonts */
font-family: 'Inter', sans-serif; /* body */
font-family: 'DM Serif Display', serif; /* headings */
/* Google Fonts import */
fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700
&family=DM+Serif+Display:ital@0;1