GreenScape — landscape design and planting
// Goal
Turn a service normally discussed on site into a legible catalogue: what the work includes, how long it takes, how to get a price.
// Brief
Design a services site with timelines and cost calculation while assembling a UI Kit, so pages can be added later without losing consistency.
How we built it
Landscape companies rarely publish prices or timelines — only “calculated individually”, and the visitor leaves. We put a timeline and a cost-calculation button on every service card: landscape design from 20 days, site planting from 15, irrigation systems and vertical planting from 7. Below sit completed projects and a step-by-step account of the process, beginning with consultation and information gathering.
Alongside the mockup we assembled the UI Kit, which became the project's main asset. It sets Manrope typography across four levels (heading 32 extrabold, subheading 24 bold, body 16 regular, secondary 12 regular) and a palette with a fixed role per colour: #323232 for headings and body text, #D8E4BE and #D9D9D9 for buttons and panels, #97A371 for strokes and accents.
Every interactive state is specified — default, hover, press, disabled — for buttons and input fields, together with grid rules, a 40px padding on all sides, and the rule that level-one headings align right. The enquiry form is documented as its own library component.
Stages of delivery
Service catalogue with timelines
Four services, each with scope, a timeline from 7 to 20 days, and a cost-calculation button instead of “ask us”.
Completed projects
A block of built work — a contemporary private garden — as the proof that precedes the enquiry.
Process
A step-by-step account opening on consultation and information gathering, to remove uncertainty about starting.
UI Kit typography
Manrope across four levels: heading 32 extrabold, subheading 24 bold, body 16 regular, secondary 12 regular.
Palette with roles
Six colours with fixed purposes: #323232 for text, #D8E4BE and #D9D9D9 for buttons and panels, #97A371 for strokes.
States and grid
Default, hover, press and disabled for buttons and inputs, grid rules, 40px padding and a dedicated enquiry-form component.
Outcome
A services site where the visitor sees scope, timeline and a route to a price on every card, plus a design system that lets pages grow without type and spacing drifting apart.
The library covers typography, a palette with fixed colour roles, every button and input state, grid rules and the enquiry-form component.
Other cases
Want the same outcome?
Tell us about the task — we will design, build and ship a solution for it.