Evolving a government service brand without losing its users
The constraint wasn't just the design system. It was the expectation that comes with a government URL.
The platform
Crown Commercial Service manages government procurement on behalf of the entire UK public sector. The website serves three fundamentally different user groups: buyers navigating commercial frameworks, suppliers seeking contract opportunities, and corporate users managing agreements and compliance, all within a single public-facing service.
The existing site had been built incrementally on the GOV.UK Design System: accessible, functional, and unmistakably government. What it wasn’t was distinctively CCS. As the organisation matured commercially, the question became whether the website could develop a visual identity of its own without compromising the trust signals that make a government service legible to its users.
The work was prototype-first: rapid iteration through the GOV.UK Prototype Kit, each decision documented and systematised before anything was proposed for the live product.
The colour problem
The most significant single decision on this project was what to do with the primary brand colour.
The existing CCS identity was built around a deep burgundy. It had presence. It was visually distinct in the GOV.UK landscape. But presence isn’t the same as the right signal. Burgundy communicates authority and heritage, exactly the correct register for a formal institution, but CCS is primarily a service. Its users need to trust it, not be impressed by it.
The shift to Cornflower Blue (#699AFF) was a deliberate repositioning. Blue is the dominant trust signal in digital products. It is what users associate with reliability and safety: the colour of banks, NHS services, and government portals. For a platform handling procurement decisions worth billions annually, that association is not incidental to the design. It is the point.
But changing a primary colour is not a colour decision. It is a system decision.
Building the semantic colour system
The move from burgundy to blue created an opportunity to address a structural problem in the existing palette. The site had previously used four pillar colours (for Building, Corporate Solutions, People, and Technology) that operated independently of each other and of the primary brand colour. The result was a site that could look visually incoherent depending on which section you were in.
The new system replaced the ad hoc pillar colours with four semantic roles, each assigned to a distinct brand value:
Cornflower Blue is the primary: navigation, headers, trust indicators. The colour users see when they arrive, and the one they associate with CCS as an organisation.
Sapling Green handles progress and success states: live agreements, completion confirmations, positive outcomes. When something is done or working, green says so.
Vibrant Yellow is reserved for attention. Secondary calls to action, featured content, highlights. Yellow on this site is a signal that something matters, used sparingly to preserve that meaning.
Professional Claret replaces the legacy burgundy in a demoted role: authority content, formal communications, serious topics. The old primary becomes a supporting character.
Each colour was tested against WCAG 2.1 contrast requirements. The shade variants (blue at #4F74BF (7.2:1) and green at #7D8A06 (7.1:1)) both reach AAA for normal text with white, giving flexibility in content-dense areas.
Redesigning navigation
The existing navigation had been built to accommodate the breadth of CCS’s offering, which is extensive. The consequence was a header that tried to communicate all of it simultaneously, with two rows of navigation links competing for the user’s attention on arrival.
The redesign worked from three principles.
Primary and secondary separation. The navigation was restructured into two distinct tiers. Primary links serve the core content destinations (agreements, suppliers, buyers). Secondary links serve utility tasks (account access, search, help). On desktop these layers read as a single coherent header. On mobile they collapse in defined order: primary first, secondary beneath a visible separator.
Mobile as a first-class decision. The mobile menu was designed independently, not retrofitted from the desktop layout. The toggle button uses explicit aria-expanded state management, correctly exposing the menu state to assistive technology. Touch targets meet the 44px minimum. Maintaining the full brand-blue background in the mobile dropdown panel was deliberate: it keeps the CCS identity intact even when the navigation occupies the full screen.
Multiple variants for research. The prototype included distinct header configurations: a standard version, a beta variant with the GDS phase banner, a hero version integrating a search bar directly into the header, and dropdown-capable navigation. These weren’t edge cases. They were research instruments, each variant available for parallel testing against specific tasks so navigation decisions could be grounded in evidence rather than preference.
The footer taxonomy
The footer redesign started from an information architecture problem, not a visual one.
The existing footer reflected the organisational structure of CCS rather than users’ navigational needs. Content that users thought of as related was separated. Content that users rarely accessed had equal visual prominence to critical links. It was an org chart with hyperlinks in it.
The new structure organised footer content into four logical groupings: Products and support (what the site helps users find and do), For buyers and suppliers (task-oriented entry points for the two primary audiences), Corporate information (institutional content for those who need it), and Digital platforms (sign-in and tool access, consolidated rather than scattered across the page).
The visual treatment reinforced this: a light grey footer (#C8C8C8) on dark text (#0B0C0C), reversing the previous dark treatment. The contrast meets WCAG AA comfortably. The shift from dark to light was also a signal: the footer is navigation, not a brand moment. It should be clear and functional.
The before and after
The visual difference between the two states is clearest at the page level: the header shifts from a rich burgundy to the new cornflower blue, the navigation consolidates from two competing rows to a single organised tier, and the footer opens up from a dense two-column block into a structured four-column layout in a lighter key.
The prototype kit as design tool
This project was built entirely in the GOV.UK Prototype Kit before any production decisions were made. That choice shaped the process throughout.
The kit made global changes fast. SCSS variables meant a primary colour swap propagated across the entire prototype in minutes. Multiple layout configurations could be instantiated and compared without engineering cost. The prototype behaved like a real service (real navigation, real content, real interaction), which meant research findings were trustworthy rather than filtered through the gap between a wireframe and a working product.
The result was a documented design system: twelve component and foundation specifications covering colour, typography, spacing, buttons, cards, navigation, and footer. Each specification included exact hex values, contrast ratios, spacing constants, and implementation-ready code. Design decisions were traceable to their rationale.
Outcome
A tested brand system covering colour, navigation, and global UI patterns, built as a working prototype and documented for implementation.
The colour system moved CCS’s primary identity from authority to trust. The navigation gave primary and utility tasks distinct, researched homes. The footer gave users a taxonomy that reflects how they think about the service, not how the organisation is structured internally.
The prototype kit documentation remains the specification of record for the brand system.