This page is about the design of the site
Design for Demand Definition
Matt’s day job is with Conversationware Ltd, a UK web marketing operations and content design company, so we had fun with it.
This site was made using their Agentic WordPress system, automated content design and build, developer free.
This dedicated page for the site design, it serves as a reference for colours, fonts, image sizes, logos and recording the brand direction and making it easy to find for our agents and team use.
- The website design system
- About the logo and favicon design and
- Website Elements, Colours, Font System and Imagery
- WordPress based components
A website is only used when it’s easy
About this Agentic WordPress Design System
An agentic design system chassis is a set of tools that allow agents to automate the delivery of websites.
The elements that helps designers deploy design at scale using reusable components and patterns. This page is where we record elements of the brand design applied to components (the library builds elsewhere).
This is a resource in future for working on the site or recording the brand thinking and direction.
Logo Design
This is the fourth version of the framework, representing
We originated in search, but that positioned what we do too narrowly. The application of insight into what people want and who they are helps marketing and sales with positioning,
Below is a history for Demand-Definition.com
In case we go back to it someday. Before we realised the conversion framework was pan channel, and a periodic table of marketing elements showed us the standard model of particle marketing, it was going to be called
Considering a logo design is fun and symbolic. Ideally, we get an Icon for the site that works well in the browser tab and across other marketing materials.
The original Search Audiences logo was conceived with several iconographic ideas:
- The points on a compass, finding direction whilst searching
- The idea of gravity, a central big planet has an attraction (moons).
- We have 4 elements to improve website performance, a continuous cycle of improvement
In joining the dots together, we were signalling community and education. Originally, we decided to nod at the Conversationware logo, symbolising growth through measurement and climbing upwards.
The Demand Definition Framework Logo
The framework morphed into full marketing and sales positioning tool to work across Search, Social and Partnering. not just for search and audiences.
Blue Markets, Green Journey Service Stages, Red Audience Layers (the original thought was triple niche)
The darkening logo gradients represent value over time across all components and elements of the sales and marketing ontology.
Website Decision Architecture Layout
The design is for the visitors. How we organise the information is the realisation of why people are on a site in the first place. Part of understanding visitor audiences intent, is to guide you in prioritising and organising your site to serve them.
It is the Content Design that converts visitors through the concept of conversation.
Responding to visitors through the power of search is much easier than guessing what we should say; and there are patterns to follow.
Here are some of the considerations
- Positioning and messaging
- What are our visitor’s goals?
- Where are they in the decision journey?
- Problems we solve
- The sales and marketing ladder
- What happens next?
- Who should we work for?
- Why Subscribe?
Navigation
The website navigation is how the user interacts, how we anticipate their needs, ask them questions and how they seek value.
“Don’t make me think” is a central philosophy we picked up from the book of the same name. We celebrate breadcrumbs and sidebar navigation as tools for the visitor to give vital context to what they are reading. It’s the visual hierarchy combined with knowing how minds work.
Our Colour Scheme
The Demand Definition colour scheme is a combination in harmony with the conversion framework, lending it’s core colours to the brand. The action-orientated nature, energy and vibrancy is in contrast to the understated clarity of the clean layout.
We wanted impact without clutter, and to better demonstrate some of the concepts of navigation and readability with the clarity it brings.
| Group | Colour | Value |
|---|---|---|
| Accent Colours | Accent – Red | #e04242 |
| Accent Colours | Alt – Light Red | #FF4F4F |
| Contrast Colours | Strongest Text | #283134 |
| Contrast Colours | Medium Text | #424242 |
| Contrast Colours | Subtle Text | #666666 |
| Contrast Colours | Lines | #E7D8D8 |
| Base Colours | Subtle BG | #FFC7C7 |
| Base Colours | Lighter BG | #FFF8F8 |
| Base Colours | White | #FFFFFF |
Red being the most dominant colour will be used for Call to Action buttons and links to attract the users attention. Other colours like Black and Dark Grey for the headers and paragraphs.
Typography
Readability is the most important factor when designing a website.
Sites with hard-to-read fonts don’t get read enough. The Market Audiences website will have huge amounts of content which means, selecting an appropriate size, pixel, and font for the text has been where we spent the most time.
The proportion makes it beautiful.
| Style | Typeface | Font Size | Line Height | Weight |
|---|---|---|---|---|
| Header 1 | Poppins | 48px | 56px | Semi-bold 600 |
| Header 2 | Poppins | 38px | 56px | Semi-bold 600 |
| Header 3 | Poppins | 28px | 45px | Semi-bold 600 |
| Header 4 | Poppins | 18px | 35px | Semi-bold 600 |
| Header 5 | Poppins | 16px | 40px | Semi-bold 600 |
| Paragraph Text | Poppins | 18px | 35px | Regular 400 |
| Button Text | Poppins | 18px | 35px | Semi-bold 600 |
Graphics, Illustrations, and Icons
All graphics and images used in this website are from Unsplash, Pexels, and unDraw. These are open source websites that allows our designers to get free access to different images and illustrations that they need to design any project, commercial or personal very quickly.
For the icons used in this website, we used FlatIcon. Flaticon is a database of free vector icons and stickers. Flaticon offers a wide catalogue of free icons in PNG format but if you want more accessibility, they also offer a premium subscription you can subscribe to.
The foundation of web marketing
WordPress is just the Engine?
We love WordPress through its continuous progress to provide low cost of ownership and rich functionality to its market-leading share of the internet user base. The open-source model of software makes sense.
Just like the engine of a car, WordPress is surrounded by other components that can either maximise performance or drag it down. The chassis, tyres and drive are performed by the theme, but page builders slow it all down. Going back to WordPress core enables agentic deployment from marketing to web.
Agentic WordPress System Chassis
WordPress needed to be faster to get more performance (+100% more leads in some cases). It was a big decision. We narrowed it down to two really fast themes, and then Kadence won on its future tech leadership.
When we abandoned the 10 years of Genesis Theme and Beaverbuilder page builder for the Kadence theme, there was a plan to move to a WordPress core based system. We just had to wait for Automattic and WordPress hooks to catch up.
At the time, WordPress were replacing the engine whilst the aeroplane was still flying. But, now we see why Gutenberg editor, together with Kadence will win (don’t replace the work the theme people have put in to make sites supportable and secure.
But for pages, we have been looking forward to the disappearance of the slow world of page builders like Divi and Elementor…. soon.
The Kadence direction put the user in charge, and it fully embraced Gutenberg, the future WordPress editor.
Gutenberg was not enough to build out website pages, until it was, in mid 2026. Now, it is continuously being developed and is consistent enough now to replace page builders, reduce complexity and enable agentic WordPress and automation.
- Global colour palette and design system
- Only loads what is needed into the page
- Component changes are blocks based via API
- Dynamic data elements embedded into pages
- Panel row library to reuse previous designs
- Excellent support
- User-friendly interface for everything
- Continuous investment in new features
Website Content Management: Automated
The ability to create content and get it published is a key element to any marketing plan. The friction that comes from different teams and people involved slows things to a crawl.
When you get into particle marketing, the atomisation of keywords means that automation is no longer an option. The crawl is old hat.
Using the same highly functional and easy-to-use WordPress and design systems makes all the difference. Don’t keep swapping website horses, don’t keep finding shiny tools, just create content around the interests of the website visitor and have it deployed automatically.
The more we do, the more automated it gets, the better the economy of scale.