{"id":1366,"date":"2026-11-05T22:28:20","date_gmt":"2026-11-05T21:28:20","guid":{"rendered":"https:\/\/www.heavycampaigns.com\/business-website-design-system\/"},"modified":"2026-11-05T22:28:21","modified_gmt":"2026-11-05T21:28:21","slug":"business-website-design-system","status":"publish","type":"page","link":"https:\/\/www.heavycampaigns.com\/en\/business-website-design-system\/","title":{"rendered":"A design system for an editable business website"},"content":{"rendered":"<div class=\"hc-wide hc-icon-pilot-content hc-service-structure hc-website-offer hc-website-guide\" data-hc-website-review=\"website-design-system\">\n<nav class=\"hc-shell hc-website-breadcrumb\" aria-label=\"Breadcrumb\"><a class=\"hc-text-link\" href=\"https:\/\/www.heavycampaigns.com\/en\/revenue-website-system\/\">Website packages<\/a><\/nav>\n<section class=\"hc-section hc-wide hc-section--white\" id=\"guide-section-0\">\n<div class=\"hc-shell\">\n<h2>A design system goes beyond a homepage mockup.<\/h2>\n<p>A single composition does not explain how the next service page, form or content block should work. A website design system defines repeated visual decisions and behaviours: type, colour, spacing, cards, controls and their states. These rules make future content more consistent.<\/p>\n<p>That does not require a new corporate identity for every project. Existing brand guidelines can be an excellent starting point. We check whether they address digital use, contrast and the range of content lengths the site needs.<\/p>\n<\/div>\n<\/section>\n<section class=\"hc-section hc-wide \" id=\"guide-section-1\">\n<div class=\"hc-shell\">\n<h2>Reuse the foundation without replacing the brand.<\/h2>\n<p>Our component foundation is a technical starting point. Typography, imagery, hierarchy, colour and composition give the resulting website its own character. Entirely new interactions or design systems need additional design, development and testing; the proposal makes that distinction visible.<\/p>\n<p>For example, a service card can appear in an overview and a detail context. Its content changes while spacing, link behaviour and focus remain consistent. This is an illustrative pattern, not a quantified claim about time saved.<\/p>\n<\/div>\n<\/section>\n<section class=\"hc-section hc-wide hc-section--white\" id=\"guide-section-2\">\n<div class=\"hc-shell\">\n<h2>Include accessibility in the component states.<\/h2>\n<p>A palette has to work beyond a brand presentation. Text, links and controls need suitable contrast against their backgrounds. Focus, errors and selected states should not depend solely on a difficult-to-distinguish colour.<\/p>\n<p>Responsive design also means that information remains usable when enlarged or viewed at a narrow width. Agreed components are checked with realistic long titles and form states. A single screenshot cannot demonstrate all of that behaviour.<\/p>\n<\/div>\n<\/section>\n<section class=\"hc-section hc-wide \" id=\"guide-section-3\">\n<div class=\"hc-shell\">\n<h2>Bound the design decisions before the build.<\/h2>\n<p>Name the layouts and components before production. Two consolidated feedback rounds are more manageable when the visual direction is approved using representative content. Replacing that direction after implementation is a new design task, rather than a minor copy correction.<\/p>\n<ul>\n<li>Review existing guidelines, fonts and relevant licences.<\/li>\n<li>Choose representative pages and components.<\/li>\n<li>Describe default, focus, error and applicable selected states.<\/li>\n<li>Include mobile, medium desktop widths and long content.<\/li>\n<\/ul>\n<\/div>\n<\/section>\n<section class=\"hc-section hc-wide hc-section--white\" id=\"guide-section-4\">\n<div class=\"hc-shell\">\n<h2>Hand over a system that can be used.<\/h2>\n<p>The engagement covers the agreed usable components and an explanation of their editorial application. It does not automatically commission a complete brand manual, typeface development or print collateral.<\/p>\n<p>The objective is a practical system that your team understands. An appropriate, maintainable set of components is more useful than a large library that nobody can keep consistent.<\/p>\n<\/div>\n<\/section>\n<section class=\"hc-section hc-wide \" id=\"guide-sources\">\n<div class=\"hc-shell\">\n<h2>Sources and boundaries<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-patterns\/\">WordPress: Block patterns<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/contrast-minimum.html\">W3C WAI: Contrast<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/reflow.html\">W3C WAI: Reflow<\/a><\/li>\n<\/ul>\n<p>This is a planning guide, not a certification, legal assessment or promise of rankings, revenue or conversion gains.<\/p>\n<\/div>\n<\/section>\n<section class=\"hc-section hc-wide hc-section--white\" id=\"guide-next\">\n<div class=\"hc-shell\">\n<h2>Put this into your website scope<\/h2>\n<p>We review your existing visual guidelines first. Adapting a dependable foundation is priced differently from developing a new visual system.<\/p>\n<div class=\"hc-actions\"><a class=\"hc-button\" href=\"https:\/\/www.heavycampaigns.com\/en\/revenue-website-system\/\">Compare website packages<\/a><\/div>\n<p><a class=\"hc-text-link\" href=\"https:\/\/www.heavycampaigns.com\/en\/wordpress-editorial-components\/\">Make WordPress content manageable with clear components<\/a><\/p>\n<p><a class=\"hc-text-link\" href=\"https:\/\/www.heavycampaigns.com\/en\/website-quality-accessibility-wcag\/\">Check website quality and accessibility with useful evidence<\/a><\/p>\n<p><a class=\"hc-text-link\" href=\"https:\/\/www.heavycampaigns.com\/en\/b2b-website-audit-checklist\/\">Review an existing website<\/a><\/p>\n<\/div>\n<\/section>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Turn brand guidelines into responsive components, including typography, interaction states, accessibility and a bounded design scope.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1366","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.heavycampaigns.com\/en\/wp-json\/wp\/v2\/pages\/1366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heavycampaigns.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.heavycampaigns.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.heavycampaigns.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heavycampaigns.com\/en\/wp-json\/wp\/v2\/comments?post=1366"}],"version-history":[{"count":1,"href":"https:\/\/www.heavycampaigns.com\/en\/wp-json\/wp\/v2\/pages\/1366\/revisions"}],"predecessor-version":[{"id":1390,"href":"https:\/\/www.heavycampaigns.com\/en\/wp-json\/wp\/v2\/pages\/1366\/revisions\/1390"}],"wp:attachment":[{"href":"https:\/\/www.heavycampaigns.com\/en\/wp-json\/wp\/v2\/media?parent=1366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}