News
Club Championship 2025 Results
John Smith retained his title in a dramatic final day at Binny, finishing two clear of the field with a course record 67.
Read moreDesign System
Binny Golf Club
Styleguide
Components, design tokens, and patterns for a fast, accessible, and consistently branded web presence. Each component has 2–3 layout variations documented below.
Colours
A golf-inspired palette rooted in parkland greens and estate gold. All text/UI colour pairs meet WCAG 2.1 AA (4.5:1 minimum for normal text; 3:1 for large text and UI components).
Brand Greens
Green 900
#0c1f14
On white: 17.1:1 ✓
Green 800
#1a3826
On white: 12.4:1 ✓
Green 700
#26543a
On white: 8.2:1 ✓
Green 600
#326e4c
On white: 5.4:1 ✓
Green 500
#469664
On white: 3.6:1 (large only)
Green 100
#ddeee5
Tint background
Gold Accents
Gold 600
#b8831e
On white: 4.8:1 ✓
Gold 500
#cc9628
On #1a3826: 5.5:1 ✓
Gold 400
#dda840
Focus ring colour
Gold 100
#f9edcc
Notice background
Neutrals
Neutral 900
#1a1714
On cream: 15.9:1 ✓
Neutral 700
#44403b
On cream: 7.8:1 ✓
Neutral 500
#78736c
On cream: 4.7:1 ✓
Neutral 200
#d8d3ca
Border colour
Neutral 100
#ede8e0
Subtle background
Neutral 50
#f5f2ec
Page background
Typography
Cormorant Garamond (serif, display) for headings — heritage and authority. DM Sans (humanist sans) for body text — readable at any size. Minimum body size 16px. Line height 1.6 for body text.
Display
Hero Headline
Page Title (H1)
Section Heading (H2)
Subsection Heading (H3)
Card Title (H4)
Lead paragraph — used after a section heading for introductory text with generous line height.
Body text — the default paragraph size. Binny Golf Club was founded in 2002 and officially opened by Bernard Gallacher on a beautiful day in West Lothian.
Small text — used for card excerpts, labels, and supporting copy.
Eyebrow / Category Label
Caption / Metadata Text
Text link — underlined, transitions to a lighter green on hover. Always has visible focus indicator.
Spacing
4px base unit. Consistent spacing tokens used throughout all components via CSS custom properties.
Header
Plain semantic HTML. Desktop: logo + horizontal nav + CTA. Mobile: logo + hamburger → slide-out drawer. Full keyboard navigation and focus management handled by js/main.js. Copy the canonical markup from includes/site-header.html when adding a new page.
Variation 1 — Default
Variation 2 — Compact (sticky) — add classes
.site-header--sticky .site-header--compact to <header>
Variation 3 — With CTA Strip — prepend
.header-cta-strip block before <header>
Course Open — Good to Excellent · 01506 000000
Hero
Full-width section at the top of a page. Use a <section> element with the appropriate class. Scroll-triggered animation is handled by js/main.js.
Variation 1 — Full-width image with overlay
Course Open — Good Conditions
West Lothian's Hidden Gem
Golf the Way It Should Be
Nine holes of parkland perfection in the historic Binny Estate, Ecclesmachan. Open to visitors every day.
Variation 2 — Gradient (no image)
Membership Open
Become Part of Binny
Full, junior, senior, and season ticket options. Transparent pricing. Apply online today.
Variation 3 — Split (content + image)
The Course
Nine Holes, Endless Character
Parkland setting with mature trees, natural hazards, and two sets of tees making it suitable for all levels.
Card
Content cards for news, hole guides, and feature content. Use a semantic <article> element. Whole-card clickability via data-href is handled by js/main.js.
Variation 1 — Default (vertical)
The Course
Hole 3 — The Burn
Par 4, 378 yards. A demanding tee shot over the burn requires accuracy before a tight approach to a well-protected green.
Hole guide
Membership
Why Join Binny Golf Club?
Friendly atmosphere, competitive green fees, and a course that rewards every level of golfer. See what membership means.
Explore benefits
Variation 2 — Featured (horizontal on tablet+)
About Us
Our Story: Binny Estate Golf Club, Est. 2002
Founded in 2002 and officially opened by Ryder Cup legend Bernard Gallacher, Binny Golf Club sits in the historic grounds of Binny Estate — a story no competitor tells quite like we can.
Read our story
Variation 3 — Compact (list row)
Button
All buttons use class .binny-btn plus a variant modifier. Minimum touch target 44×44px. Works on <a>, <button>, and within <binny-button>.
Variation 1 — Styles
Variation 2 — Sizes
Variation 3 — On dark background
Text Block
Structured text section with eyebrow label, title, gold rule, optional lead, body copy, and action buttons. Use a <div class="binny-text-block"> element. Fade-in animation handled by js/main.js.
Variation 1 — Default (left-aligned)
The Course
A Parkland Course Unlike Any Other in West Lothian
Nine holes set within the historic Binny Estate, with mature trees, natural hazards, and stunning views across the Lothians.
Built in 2002, the course was designed to make the most of the natural contours and woodland of Binny Estate. Every hole presents a different challenge, rewarding both accuracy and length.
Variation 2 — Centred + narrow
Latest News
What's Happening at Binny
Competitions, course updates, and club announcements — all in one place.
Variation 3 — On coloured background
Bernard Gallacher
Opened by a Ryder Cup Legend
When Bernard Gallacher officially opened Binny Golf Club in 2002, he called it "one of the most beautifully situated courses in Scotland." We haven't stopped proving him right.
The Binny Estate has a history stretching back centuries, and the course is designed to complement — never overwhelm — its surroundings.
List
Three list styles. Use the inner <ul> or <dl> directly — no outer wrapper element needed.
Variation 1 — Bullet
- 9 holes, two tee positions per hole
- Par 70 from the yellow tees
- 6,121 yards (yellows)
- Parkland with mature tree-lined fairways
- Buggy hire available
- Visitors welcome every day
Variation 2 — Link list
Variation 3 — Definition
- Location
- Binny Estate, Ecclesmachan, EH52 6NL
- Founded
- 2002 — opened by Bernard Gallacher
- Course type
- 9-hole parkland, two sets of tees
- Green fees
- From £16 weekday / £20 weekend
- Buggy hire
- Available — book in advance
Form
Use <div class="binny-form"> wrapping a standard <form>. Live validation with ARIA error messaging is handled by js/main.js. All inputs have visible labels and 44px touch targets. Three layout variants.
Variation 1 — Stacked (default)
Variation 2 — Inline (newsletter / quick search)
Variation 3 — Two-column (membership application)
Table
Used for green fees, scorecard data, and competition results. Wrap the <table> in <div class="binny-table-wrapper"> for horizontal-scroll support. The scroll hint is added automatically by js/main.js. Three variants.
Variation 1 — Default (green fees)
| Category | Weekday | Weekend | Twilight |
|---|---|---|---|
| Visitor (18 holes) | £20.00 | £24.00 | £14.00 after 4pm |
| Junior (under 18) | £10.00 | £12.00 | £8.00 |
| Senior (65+) | £16.00 | £20.00 | £12.00 |
| Society (per head) | £28.00 includes catering | £32.00 | — |
| Buggy hire | £18.00 | £18.00 | £12.00 |
Variation 2 — Striped (membership fees)
| Membership Type | Annual Fee | Joining Fee | Notes |
|---|---|---|---|
| Full membership | £680 | £100 | All competitions included |
| Senior (65+) | £560 | £100 | All competitions included |
| Junior (under 18) | £195 | None | Under 12: £120 |
| Season ticket | £320 | None | Casual play, no competitions |
| Country (50+ miles) | £380 | £100 | Proof of residence required |
Variation 3 — Compact (scorecard)
| Hole | Yards (Yellow) | Yards (Red) | Par | SI |
|---|---|---|---|---|
| 1 | 356 | 301 | 4 | 7 |
| 2 | 148 | 118 | 3 | 17 |
| 3 | 378 | 330 | 4 | 5 |
| 4 | 436 | 380 | 4 | 1 |
| 5 | 165 | 130 | 3 | 15 |
| Out (1–5) | 1483 | 1259 | 18 |
Map
Use <div class="binny-map"> with a nested <div class="binny-map__frame">. Use data-src instead of src on the iframe — lazy-loading is handled automatically by js/main.js when the map scrolls into view.
Variation 1 — Inline map only
Variation 2 — With address caption
Binny Golf Club
Ecclesmachan Road, Binny Estate
Uphall, West Lothian, EH52 6NL
Uphall, West Lothian, EH52 6NL
Getting here
5 minutes from J3 M9 · 3 miles south of Uphall · Regular buses from Broxburn
Variation 3 — With overlay card