Hero specimen. Full-bleed, 85–90vh. Shown here as a Ken Burns slideshow of four of Ben's project photos (Kyneton, Kyneton, Canterbury, Kyneton); production uses 4–6 (slow 1.00→1.08 scale and drift, roughly 7s per image, cross-fade), never video, never parallax, no splash loader. The left-to-right Charcoal gradient sits only behind the bottom-left copy. Motion stops for visitors who prefer reduced motion.
Light, open and quiet, so the gardens do the talking.
Option 1 takes its cue from the Designer Boys reference: a Warm White page, light Jost headings, generous white space and one large photograph carrying each screen. Structure comes from 1px Stone hairlines and spacing. There are no cards, panels, shadows or rounded corners anywhere in the system.
- Photo first
One big photo per screen. Copy is short and sits beside or below it, never on top of a page-break image.
- Open, not boxed
Items are separated by hairlines and space. If something looks like a card, it is wrong.
- Corten as a detail
The rust accent appears as an underline, a hover fill, or a single detail per screen. Never as a fill for large areas.
Seven colours, drawn from stone, timber and weathered steel.
Contrast ratios are measured against Warm White. The palette is deliberately free of greens and cool greys: the planting supplies the green.
- Warm White#FAF8F5 · --warm-white
Page and header background.
Basebackground - Charcoal#2E2D2B · --charcoal
Headings, body text, nav, outline buttons, footer background.
12.98:1AAA, any size - Text Secondary#6F6A62 · --text-2
Secondary body text, intros, eyebrow labels, captions.
5.06:1AA, any size - Corten#9E5D39 · --corten
Accent only: link underline, active nav underline, button hover fill, small highlights.
4.86:1White on it 5.15:1 - Pebble#8A857C · --pebble
Large text (24px and up), rules and marks only. Never small text.
3.46:1Fails AA under 24px - Stone#D9D3C7 · --stone
1px hairline borders, dividers and form field lines. Never text.
1.41:1Lines only - White#FFFFFF · --white
Text and outline buttons on photos, always over the dark gradient.
13.76:1on Charcoal
Jost for headings, Figtree for reading.
Both are Google Fonts, self-hosted in production. Headings are light and in sentence case. Samples below render at the live size for this viewport; resize below 767px to see the mobile scale.
- H1 · HeroJost 300 · 56 / 36px · lh 1.10 · −0.005em · max 6–7 words
Gardens built to be lived in
- H2 · SectionJost 300 · 40 / 28px · lh 1.15
Garden design and construction, from first sketch to final planting
- H3 · Card or column titleJost 400 · 28 / 22px · lh 1.25
Stone paving and rock garden, Kyneton
- H4Jost 400 · 20 / 18px · lh 1.30 · 0.01em
How a project runs
- Eyebrow · LabelFigtree 500 · 12 / 11px · lh 1.4 · 0.16em · uppercase · Text Secondary
Selected projects
- BodyFigtree 400 · 17 / 16px · lh 1.65 · Charcoal or Text Secondary · max 680px
Ben Carter designs and builds gardens across Melbourne, Kyneton and the Macedon Ranges. You deal with Ben directly, from the first site visit to the final planting.
- Small · CaptionFigtree 400 · 14 / 13px · lh 1.5 · 0.01em · Text Secondary
Bluestone path and native understorey, completed autumn.
- NavFigtree 400 · 14px desktop / 16px mobile menu · 0.04em · sentence case
Garden design Landscaping Projects About Contact
- Button labelFigtree 500 · 14px · 0.06em · sentence case
Book a garden consultation
A stacked lockup with no full stop.
"boodle" sits above "CONCEPTS", which is set in Jost 400 at 20% of the boodle size and letter-spaced to boodle's full width. Charcoal on light backgrounds; White on photos and on Charcoal.
Lowercase "b" centred on a Stone square, letter height about 62% of the square.
"boodle" is set in League Gothic Condensed (League Gothic at 85% width), the closest free match to Ben's Gill Sans MT Ext Condensed Bold sketch. Still open with Ben: Gill Sans licence or this free font, full stop or not, and whether "concepts" stays. Use outlined SVG files in production once he picks.
Square, outlined and underlined.
Zero radius throughout. Hover the live examples, or read the forced states beside them. Every control shows a Corten focus ring when reached by keyboard.
Primary button
1px Charcoal outline, Charcoal text, padding 14 × 28px. Hover: Corten fill, White text and border.
Button on photo
White outline and text. Hover: White fill, Charcoal text.
Secondary link
Charcoal text, 1.5px Corten underline, 4px offset. Hover: text turns Corten.
Navigation
Figtree 14px Charcoal. Active and hover: 1px Corten underline.
Form fields
Underline only, transparent background, 1px Stone bottom border. Label above in eyebrow style. Focus: 1.5px Corten.
Edge to edge, in natural colour.
Feature photos run full-bleed. No desaturation, tints or filters. No stock photography and no AI-generated gardens: every image is one of Ben's real projects.
Ben's real phone and email, as on his Google Business Profile.
Twelve columns, wide margins, nothing boxed in.
Content max width 1240px with a 24px gutter. Text blocks stop at 680px. Breakpoints: mobile up to 767px, tablet up to 1024px.
12 columns · 24px gutter · 1240px max. This page is built on the same grid.
- Desktop120
- Tablet88
- Mobile64
Pixels. Image breaks: 55–65vh desktop, 40vh mobile.
Fewer sections, not squeezed ones.
On phones the home page drops to a lean sequence. Secondary sections are removed, not stacked. One image break at most, a single enquiry action, and a full-width text menu behind "Menu".
- Hero78vh, H1 at 36px, one outline button
- Short introTwo sentences, 16px body
- Three projects4:5 portraits, hairline separated
- Image break40vh, no text on it
- Enquiry and footerUnderline form, Charcoal footer
The short list to check before handover.
Do
- Let one big photo carry each screen.Copy supports the image; it does not compete with it.
- Use Corten sparingly.Underlines, hover fills, or one detail per screen.
- Write headings and buttons in sentence case.Only eyebrow labels are uppercase.
- Separate with hairlines and white space.1px Stone rules, generous section spacing.
- Keep text blocks to 680px.Even when the photo above runs full-bleed.
Don't
- No cards, boxes, shadows or rounded corners.Not even on forms or buttons.
- No text on image breaks.Only the hero carries copy, over its gradient.
- No two image breaks in a row.Always a text section between them.
- Never Pebble for text under 24px.It fails AA contrast at small sizes.
- No dark hero sections, no green or grey palette.The page stays light; planting supplies the green.
- No video heroes, parallax or splash loaders.Ken Burns stills only.
- No icon soup.Words and photos only.