01
Property discovery
Visitors can explore available homes and narrow down options using useful listing details, rather than having to browse every property one by one.
Selected work / Real estate / Case study
Larkfield
Estates.
A real estate platform that is designed to make property discovery feel straightforward, while giving the team a more practical way to keep listings up to date.
Real estateNext.jsPayload CMSProperty discovery
The CMS demo access can be shared on request.
Project type
Real estate platform
Core experience
Property discovery
Content workflow
Payload CMS
Deployment
Vercel
01 / The brief
A property website should do more than look good.
For someone searching for a home, the important questions are practical. What is available? Does it fit the budget and location? What does the property look like? And how do I take the next step?
At the same time, the people managing the website need a reliable way to maintain property information as listings change. The project needed to serve both sides: a clear front-end experience for visitors and a manageable content workflow behind it.
The goal was to connect browsing, property details, content management, and enquiries into one coherent platform instead of treating each as a separate feature.
02 / Interface gallery
The visual language of property discovery.
Property photography plays a major role in helping visitors evaluate a listing. The image gallery below uses assets from the Larkfield project to show the kind of content the experience is built around.
These are project property assets, not fabricated analytics or claims about measured outcomes.
Visual system
A consistent palette and type scale.
These are the core visual tokens that were used in the Larkfield Estates project. They are defined in the Tailwind configuration and used throughout the interface for colour, typography, and spacing.
Colour palette
Ink
#12343BPrimary text, buttons, dark surfacesMist
#F3F6F4Page backgroundBrass
#8A6212Links, focus rings and highlightsWhite
#FFFFFFCards and elevated surfacesInk at 72%
rgba(18, 52, 59, 0.72)Muted body copyInk at 14%
rgba(18, 52, 59, 0.14)Borders and separatorsThe public site defines Ink, Mist and Brass as its three core brand colours; white and translucent Ink values are used for surfaces, copy and borders.
Typography
Font familyFraunces + Figtree
--font-display · --font-sansDisplay36–64 px · fluid
Title24 px · 600
Body16 px · 400
Line height1.6
Eyebrow13 px · 700
The live project loads Fraunces and Figtree through next/font/google. Global CSS sets body copy to 16 px with 1.6 line-height, a 24 px title token, and a fluid 36–64 px display scale.
03 / What was built
Designed around real tasks.
The feature set is shaped around what visitors and site editors need to do, from the first search to the next enquiry and the next listing update.
02
Purpose-built property pages
Each property has space for photography, key details, and a clear next step for people who want to learn more or make an enquiry.
03
Content managed in Payload
The team has an admin workspace for maintaining property information. That separates day-to-day content updates from the development workflow.
04
Enquiry workflow
The experience connects property interest with a direct enquiry path, to make reaching out to the team very simple.
05
Responsive interface
Layouts are designed to adapt to different screen sizes, which helps potential clients tobrowse listings on desktop, tablet, and mobile.
06
A considered visual system
Photography, typography, spacing, iconography, and motion work together to give the brand a more coherent and confident digital presence.
04 / How the pieces connect
A connected platform, not a collection of pages.
The high-level flow shows how the public experience and the content workflow support one another. This is an architecture overview, not a performance chart.
01
Public experienceFrom discovery to enquiry
- 01Visitor
Browses homes and property details.
- 02Next.js site
Delivers the responsive website experience.
- 03Property details
Photography, listing information and key facts.
- 04Enquiry
Interested visitors take the next step.
02
Content workflowFrom editor update to published content
- 01Site editor
Maintains property information.
- 02Payload CMS
Provides the content management workspace.
- 03Listing content
Property data and media stay organised.
- 04Next.js site
Shows the current public-facing content.
An overview of what the visitor sees and how content gets created, not a technical breakdown of the IT systems.
Clear separation
Public browsing and content editing serve different users, so each gets a focused experience.
Maintainable content
A CMS gives the team a defined place to update listing information as the catalogue changes.
Built for real use
The design prioritises readable details, responsive behaviour, and a clear route to enquiry.
05 / Technology
The stack behind the experience.
The stack below is based on the Larkfield project source and package manifest. It focuses on frameworks and services actually configured in the codebase.
Web framework
Next.js 15
App Router-based routing and server-rendered page composition, as configured in the project.
UI foundation
React 19
Component-based interface building for reusable and maintainable page patterns.
Content management
Payload CMS
An admin workspace for managing property listings and site content outside the front-end editing workflow.
Database
PostgreSQL adapter
The Payload database adapter is configured for PostgreSQL-backed content storage.
Styling
Tailwind CSS 4
Utility-first styling and theme tokens for consistent spacing, colours, and responsive layouts.
Typography
Fraunces + Figtree
Fraunces is the display face; Figtree is used for body and interface text. Both are loaded through next/font.
Media delivery
Cloudinary
The project includes a Cloudinary plugin for media storage and delivery.
Interaction
Framer Motion
Motion primitives support transitions and interface feedback where needed.
Iconography
Lucide React
A consistent set of interface icons.
Enquiry protection
Resend + Turnstile
Email delivery and bot-protection dependencies are included for form workflows.
So these are the frameworks and services that were actually used in the project, not a list of every dependency in the package manifest. The stack is focused on the parts of the codebase that are relevant to the public experience and content workflow.
06 / Outcomes and next steps
A stronger foundation for the next property enquiry.
The result is a more complete digital property experience: visitors have a clearer way to browse and explore listings, while the team has a dedicated content management workflow behind the scenes.
The important outcome here is structural. Discovery, content operations, and enquiries are treated as connected parts of the same service. That gives the platform a useful base to build on as property inventory.
A practical next-step checklist
Track search-to-enquiry conversion
Measure Core Web Vitals with field data
Review accessibility with keyboard and assistive technology
Keep listing content and metadata consistent
These are some practical next steps for the Larkfield Estates project, not a list of measured outcomes or analytics.
Built by Quode Palette
This project was built to show how a real estate platform can be designed around the needs of visitors and site editors.
Larkfield Estates is an example of how brand presentation and product thinking can work together. The work is not only about how the website looks, but how people use it and how the team keeps it useful over time.