Churchfield
A maintainable website design system for local churches, with Google Workspace integration. First implemented for St Leonard’s in Upton St Leonards.
Churchfield starts with a straightforward question: how can a local church have a welcoming, useful website that stays manageable after the person who built it moves on?
It brings together a design system and a practical website implementation. St Leonard’s, in the Gloucestershire village of Upton St Leonards, is its first use. The name comes from Churchfield Road, where the church stands.
A welcome before the first visit
The site needs to work for someone who has never been to a service as well as someone who has attended for years. That means clear language, familiar navigation, and room for the questions a regular visitor might no longer think to ask.
Churchfield uses warm neutrals, green accents, generous spacing, and a serif for headings paired with a readable sans serif for longer text. The interface puts practical information first: visiting, services, community activities, and the important moments in people’s lives.
The design system records those choices in tokens, reusable components, and usage guidance. They provide a consistent starting point for future pages and changes, rather than requiring every maintainer to rediscover the design.
Built to be maintained
The implementation uses Astro and TypeScript, with static pages served by Cloudflare. Most content lives in Markdown. Contact details are kept as role records so a change of postholder can be made in one place.
The design and implementation account for keyboard navigation, small screens, readable text, and reduced motion. The church’s mobile navigation uses a native disclosure element, so visitors can still navigate without JavaScript.
Those decisions are part of the product. A useful website needs a manageable way to keep its information accurate.
Working with Google Workspace
Services and events are designed to come from two public Google Calendars. Staff can manage recurring events in the calendar tools they already use, without editing website code or waiting for a rebuild.
The calendar integration is implemented, including caching and an honest fallback when information is unavailable. Connecting the parish’s calendars and credentials is still part of launch preparation. The site does not substitute invented service times when the feed cannot be read.
Newsletter publishing is also implemented. A protected staff page accepts a PDF, and Cloudflare R2 stores the dated archive. Cloudflare Access controls entry to the publishing area. This keeps routine updates separate from changes to the site itself.
First implementation: St Leonard’s
The St Leonard’s website is implemented for review. It is not yet approved for public launch. Parish content, contacts, safeguarding information, and final integration configuration remain part of that process.
The interface shown here comes from that implementation. It demonstrates the design direction and components; it is not a claim that the public website has launched or that its impact has been measured.
What comes next
I plan to open-source Churchfield so other churches can use and adapt it. St Leonard’s is the first practical example, and the next step is to separate reusable guidance and components from parish-specific content and configuration.
That release is still ahead. For now, this is a record of the design and implementation as they develop.
If you’re working on a similar project, I’d be glad to compare notes.