Case study

Bracken Heath

A private golf and country club on the Surrey heath, designed from its name and identity through to the website. Every part is built to feel like the club itself: unhurried, assured and quietly exceptional.

Role
Brand identity, web design and engineering
Stack
Next.js, React, CSS Modules, GSAP, Lenis
Bracken Heath homepage: a green beneath Scots pine with the line Somewhere to slow down.

The brief

A premium club is an experience before it is a product, so the site had to be one too. The brief was to lead visitors through Bracken Heath in the order a member lives it, from the first tee to the last light on the terrace, with pacing and motion that never feel hurried.

Identity

A two-line lockup in Young Serif, gently warped so it feels drawn rather than typeset, with no descriptor beneath it. The seal pairs a Young Serif initial with lettering in Cormorant Garamond and is kept for membership. Chalk and pine do almost all the work: premium is largely uncolourful, so colour has to earn its place.

Logo Young Serif, warped
Bracken Heath seal in chalk on pine
Seal Young Serif and Cormorant Garamond
Bracken Heath app icon at 72 pixelsBracken Heath app icon at 40 pixelsBracken Heath app icon at 20 pixels
App icon Pine square
Bracken Heath link preview card in chalk with a hole plan
Link preview 1200 × 630
  • Chalk#EDEFEA
  • Mist#D5DAD4
  • Moss#525D56
  • Pine#1C3227
Young Serif, the mark and section names

TheClubhouse

Cormorant Garamond, headings and figures

Long lunches, longer evenings.

Schibsted Grotesk, links and small text

Heath Lane, near Chobham. Twenty-seven holes, a clubhouse, a spa and rooms.

The motif

Three ideas taken from the game rather than from a mood board: the hole plans of a yardage book, the frame numbers printed along the edge of a strip of film and the flagstick, which leads the way through the navigation.

268164Heather
Yardage book Hole plans
Film rebate Image frames
Flagstick Navigation and placeholders

Hole by hole

Every hole on both courses is drawn from its data rather than by hand. Par, yardage and the direction of the dogleg generate the fairway, bunkers, trees and line of play, and each plan draws itself in as you move through the round. Twenty-seven holes from one component, and every one of them can be played with a keyboard.

This is the real thing, not a recording. Pick a hole.

Out
In
255157Heather

The 1st

Heathside

A gentle opening down a wide fairway, though the green is guarded on the left by the first of the heath's deep bunkers.

Par
4
Yards
412
Stroke index
9

The 7th, drawn as you scroll

On the homepage, the club’s signature hole is drawn one shot at a time as you scroll: the drive, the lay-up around the heather, then the approach to the green. On a phone, it plays once as it comes into view.

260Heather245

The famous7th

Long Bracken

A sweeping par five that turns left around a corner of heather, framed by Scots pine from tee to green.

Par
5
Yards
505
Stroke index
3

The flagstick

Every hole is played towards a flag, so the flag became the club’s way of showing where you’re headed. Open the menu and one rises beside each part of the club as you reach for it, the same small gesture whether you arrive by mouse or keyboard.

It carries into the imagery too. Any photograph still to be taken is held by a flagstick on pine or mist, set slightly off centre and numbered like a strip of film, so every page reads as finished and replacing a frame with the real image is a single change.

Photography

Every image is art directed to one brief: an ordinary morning or evening at an established club, simple compositions, natural light and as few people as possible. Each frame is finished with the same film treatment, so the courses, the spa and the rooms read as a single set rather than a library of stock.

A striped fairway on the Heath Course running between tall Scots pines
The clubhouse and its stone terrace beyond the final green
The indoor pool in pale stone beneath oak beams
A panelled bedroom with a sash window over the course
A golfer at the top of her backswing on the practice ground

On a phone

Nothing is cut for a smaller screen. The yardage book, the drawn holes and the pacing of the site all carry over, so the experience is the same wherever it’s opened.

Bracken Heath homepage on a phone
The yardage book on a phone showing the 7th hole

Performance and accessibility

Motion is usually what slows a site like this down, so none of it loads until a visitor scrolls or moves the pointer. The first paint is the hero photograph, its line of type and the fonts it needs, and nothing on the page shifts as it loads.

Every page meets WCAG 2.2 AA, works fully by keyboard and holds still for anyone who prefers reduced motion.

Mobile

Performance
96
Accessibility
100
Best practices
100
SEO
100

Desktop

Performance
100
Accessibility
100
Best practices
100
SEO
100

Lighthouse, homepage