Cardiovascular medical communications
A website and a single design system for a cardiovascular medical communications group: publishing, events and digital learning, set on one 4px grid from the homepage to the developer handover.
A respected name in cardiovascular education, with a website that no longer matched the work. Pages built one at a time, patterns that had drifted apart, and nothing a development team could build from cleanly.
We set the whole thing on one system. Every spacing value, every component and every page measured and put on a shared 4px grid, then designed in full and handed to development as a documented library.
The site
Semantic tokens on a 4px grid, named and consistent, so home, platform pages, news and contact all draw on the same components.
The work
We started by reading what was already there. We audited every page, desktop and mobile, and measured the real spacing, type and components behind them. That became the system: semantic tokens on a 4px grid, named and consistent.
Then we designed the site. Home, About, What We Do, the platform pages, news and contact, each one drawing on the same components so the experience holds from the first scroll to the enquiry.
Last, we made it buildable. A complete component inventory, variants documented, and a developer handover that lets design and build work from the same source of truth.
What We Do
Therapy Areas
News & Insights
The brand carries a clear signature: a deep navy ground, a magenta to purple accent, and a calm editorial layout that lets dense clinical content breathe. We held that line across every template, from the homepage hero to the therapy area sub-brands.
The result is a site that reads as one piece of work, and a system the team can extend without it coming apart.
Built to hand over
A design system is only as good as its handover. We documented the whole thing in one place: a complete reference covering global styles, the token system, page specifications, layout, micro-interactions and assets.
Every colour, type style and spacing value is defined as a CSS custom property, ready to drop straight into the stylesheet. Design and build work from the same source of truth, so the team can build from it and extend it without it coming apart.
The developer handover document
The design token system, defined once