Design system · Agent reference
GROUNDS design system
The single source of truth for people and for Framer Agent. Every swatch, type sample and component here uses the live colour styles, text styles and components. Change them in Assets and this page updates too.
Colour tokens
Forest, olive, moss and stone.
Nature, designed: rich colour environments. Forest and Deep Olive carry the big moments (projects, blueprint, enquiry, CTA), Soft Moss and Stone give lighter editorial bands, Limestone keeps reading areas calm and Clay marks interactive details. Never add new colours: edit these styles instead.
Limestone
#F2EFE7
Main background, about 70% of every page
Stone
#E9E6DB
Alternate light bands, panels
Forest
#183B2B
Primary buttons, CTA band, process band
Forest Deep
#0F2A1E
Footer, button hover
Sage
#9EAE8C
Eyebrows on Forest, success state
Sage Light
#DCE4D2
Body text on Forest
Clay
#B87855
Small interactive details only: rules, dots, focus rings
Clay Text
#8E4F33
Eyebrows and links on light backgrounds (AA)
Ink
#1F2921
Headings and primary text
Ink Soft
#4F5A50
Body and small text
Line
rgba(37,43,38,.16)
Hairlines and borders
Pure White
#FFFFFF
Cards, form panels
Deep Olive
#354A32
Blueprint band, deep environments
Soft Moss
#DCE4D2
Light green bands: expertise, materials
Typography
Editorial serif, precise sans.
Two families only: Instrument Serif for display, Geist for reading and interface. Always apply a text style; never set sizes on individual layers. Sizes are desktop / tablet / phone.
Display Hero · Instrument Serif 400 · 190 / 118 / 64 · uppercase · Home H1 only
The art of living outside.
Display XL · Instrument Serif · 104 / 76 / 50 · page H1 and section headings
Gardens with a sense of place.
Display L · Instrument Serif · 72 / 56 / 42 · secondary headings
Notes on each material.
Display Caps · Instrument Serif · 100 / 76 / 46 · uppercase · CTA band
A great space
Heading · Instrument Serif · 44 / 36 / 32
What are you planning?
Card Title · Instrument Serif · 32 / 30 / 28
Stillwater Terrace
Quote · Instrument Serif italic · 56 / 42 / 32
Spaces beyond our walls.
Numeral · Instrument Serif · 88 / 72 / 56 · Clay Text
03
Eyebrow · Geist 500 · 12 · 0.2em · uppercase · Clay Text
02 · Selected projects
Lead · Geist 400 · 21 / 19 / 18
Considered landscapes. Extraordinary outdoor spaces.
Body · Geist 400 · 16 · line height 1.7 · Ink Soft
We design, detail and, when you would like us to, build.
Small · Geist 400 · 14 / 14 / 13
Sample ranges. Not a quote.
Caption · Geist 500 · 12 · 0.12em · uppercase
Landscape Design Studio
Meta · Geist 500 · 14
Contemporary Terrace
Button · Geist 500 · 13 · 0.14em · uppercase
Explore our projects
Spacing, grid and breakpoints
Generous space, strict alignment.
4px
8px
12px
16px
24px
32px
40px
56px
72px
96px
128px
160px
· Content max width 1320px; reading width 720px. Section colours run edge to edge.
· Section padding 128 to 160px desktop, about 78% on tablet, about 57% on phone. Side gutters 40 / 32 / 20px.
· Breakpoints: Desktop 1200px and up, Tablet 810 to 1199px, Phone below 810px (designed at 390px, tested at 360px).
· Grids: 3 columns desktop, 2 tablet, 1 phone. Card gaps 24 to 32px; row gaps 56 to 72px.
· Asymmetry is intentional: index column + content, or 1.35 to 1 splits. Keep hairlines (1px Line) between rows.
Buttons
Squared, quiet, decisive.
Use the Button component only. Forest is the primary action, Outline the secondary, Limestone on Forest bands, Text for inline links. Hover deepens the fill and slides the arrow.
Navigation
Sticky, translucent, understated.
The Navigation component lives in the Site Layout. Desktop shows five links and Start a Project; Tablet and Phone use the Phone variant with a full menu (Phone Open).
Cards
Photography first, type second.
Project Card, Service Card and Journal Card are CMS-ready. Hover zooms the photo gently and reveals a quiet arrow or label.
CMS patterns
Content lives in the CMS.
Projects (with a Category reference and Related Services), Categories, Services and Journal. The list below is live: edit the CMS and it changes.
Project explorer: Projects list sorted by Order, Project Card bound to fields. Filter chips are a Categories list that sets the page’s Category variable (URL ?category=).
Detail pages: /projects/:Projects, /expertise/:Services and /journal/:Journal. Project galleries repeat over the Gallery list field; the before-and-after block shows only when Before Image is set.
Forms
Clear fields, honest states.
Inputs: white fill, 1px Line border, 2px radius, Forest focus border, a visible label above every field. Submit Button states: Default (Send Enquiry), Sending, Enquiry Sent, Error (Try Again), and Light versions for Forest backgrounds (Sign Me Up, Sending, Thanks for Joining, Try Again). There is no Incomplete state: required fields use the browser’s own validation, so the button never shows an error before interaction.
Image treatments
Architectural framing.
Stillwater Terrace
· Radius 2px or none. No tilts, no heavy shadows. Let photographs breathe.
· Photography: warm natural light, real built gardens, stone, timber and planting. No AI-generated or watermarked images, no unrelated architecture.
· Captions sit bottom-left on a Limestone tag with a Clay dot.
· Every image needs descriptive alt text. Before-and-after pairs must show the same place; otherwise label them as illustrative.
Motion
Slow, calm, purposeful.
· Entrances: fade and 24 to 60px rise, about 1 second, run once. Never replay on scroll.
· Hero: headline lines rise in sequence; the photograph settles from 112% to 100% scale.
· Hover: photos zoom to 105%, arrows slide 4px, hairlines turn Clay.
· No loops, no autoplay. Framer and the code components respect reduced-motion preferences.
Page composition
Build new pages from these sections.
· Page Header: eyebrow + Display XL H1 on the left, Lead on the right, hairline below.
· Editorial hero (Home): meta row, oversized uppercase H1, intro row, full-width photograph.
· Split row: 1.1fr image + 1fr copy, alternating sides (Our Approach, Studio).
· Index + content: narrow eyebrow column with a Clay rule, content column (Studio Introduction).
· Project explorer: filter chips + Project Card grid + empty state.
· Forest band: process steps or CTA, Limestone type, Sage eyebrows.
· Form panel: white panel, 48px padding, used by the project builder and contact form.
Accessibility
Readable, reachable, respectful.
· Text on light backgrounds uses Ink, Ink Soft or Clay Text (never bright Clay) to meet WCAG AA. On Forest use Limestone, Sage Light or Sage.
· One H1 per page, H2 for sections, H3 for cards and steps.
· Every form field has a visible label. Required fields use native validation; the project builder checks each step before continuing.
· The before-and-after handle and the materials palette work with the keyboard (arrow keys) and show a Clay focus ring.
· Touch targets are at least 44px. Test at 360px and 390px wide.
Signature components
The pieces that make GROUNDS feel like a showroom.
· Cinematic Image (code): full-bleed hero photo with a clip reveal, gentle scroll scale and an optional phone image. Used in the Home hero.
· Project Slide (canvas): quiet gallery card for the homepage (large photo, small serif title, category, location, year; Compact variant on phones). Project Panel: immersive full-image card for the Projects page and More projects.
· Rail Arrows (code): the single navigation for horizontal galleries (Project Rail, Gallery Rail). It hides the scrollbar and adds snap scrolling; touch swipe still works.
· Garden Planner (code): the Design Your Garden tool. Modes: draw, design, review (adds hidden form fields), viewer (/plan-viewer) and preview (homepage). Concept sketch only: no real dimensions or quotes.
· Material Studio (code): an illustrated terrace whose surfaces take real texture photos. Edit each material’s name, texture, note and spec. Labelled as an illustrative visualisation.
· Before After (code): drag, tap or keyboard comparison in a Forest frame. Label illustrative pairs clearly.
· Enquiry Steps and Summary (code) wrap native forms. Selected option cards get a Moss tint, Forest inset line and a check badge; radios fill Forest with a white ring; checkboxes show a white tick. Keyboard focus is a separate Clay outline.
Start a project
A great space
begins with a
conversation.
