Please login to the form below

What are design systems and how can they help you elevate your digital products?

Design Systems aren’t new, but the potential to utilise them to improve the way in which teams produce digital products is still untapped for many in the pharmaceutical and healthcare industries. A design system's success doesn't just come down to its design team; its results depend on the three pillars of any functional design system — design, development and documentation.

This article looks at what a design system is, why they’re so valuable and what support can be put in place to ensure its success for years to come.

What is a design system?

You may have Googled ‘design systems’ and seen various examples or definitions, but to me, the most accurate is "a collection of reusable components, guided by clear rules, that can be used to build digital solutions at any scale."

You could think about it using a lego analogy— that the design system is the box containing all the pieces that can be put together in any number of ways to create something. Of course, we still need structure and logic to ensure that the end result still has meaning and serves its purpose.

Knowing a design system's purpose helps us to ensure that the building blocks we make are suitable for use — we wouldn’t build a house out of jelly, nor would we want to build a website or an app out of something that isn’t going to stand up to the job.

A design system doesn’t just live on a design software to make it faster for designers to come up with websites or apps. It is something that is replicated and developed in code, so that two of the pillars of the design system, design and development, are synchronised. This relationship is where we are able to reap some of the benefits of having a design system.

Read more about design systems.

Why are they so valuable in the context of healthcare and pharma?

The core benefits of a design system come down to three C’s — consistency, cadence and cost.


Having a single source of truth allows us to be able to produce visually consistent websites that meet a high level of standards. When we think of this in the position of a pharma company, which has many websites across many brands or therapeutic areas, we can make something that our users can easily navigate, and which feel and look familiar to them. The goal: to make a more holistic ecosystem for users to engage with. That doesn’t mean, however, that it all needs to look the same.

This is especially important when working globally or with multiple markets. That source of truth sets the standards for all markets to work with and can be effective in ensuring that omnichannel marketing is being viewed and consumed effectively, everywhere.


The initial setup of a design system may take slightly longer than custom designing a single website, but if the intention is to go on to produce one too many websites, then setting up these building blocks gives us a head start every time. The speed of producing a website with a design system is significantly faster to get to market than having to produce a custom solution every time.

This can also be the case when it comes to getting regulatory approval. By creating pre-approved components — such as a preapproved method for displaying prescribing information — we can be confident that when we reuse that element across future websites that it will gain approval on a page without complications. Putting the effort in early will pay off later down the line.


Build it once, then reuse it as much as you like. Creating a design system will help reduce the cost on development by producing components that can be reused for different solutions, instead of having to develop and build a new solution every time.

With development often the chunkiest cost of your digital product build, this can lead to significant savings.

What makes up a design system?

Design systems as part of their life cycle will go through continuous change and improvement, but the fundamentals should remain the same. A design file may be made up of lots of different UI elements, like accordions, cards, buttons, form elements etc. But many of these are made using any given set of base components, this follows a structure called Atomic Design.

Atomic Design Principles

We recommend producing a system that follows Atomic design principles. What that means is having multiple levels of components that can be pieced together to make another bigger component.  Atoms make a molecule, a molecule can become an organism, which can turn into a blueprint, a blueprint becomes a page, and so on.

The benefit of working in this way is that we can make changes at any point in the cycle, and they can be updated consistently in all places that component is used. Changing the style of a CTA (call to action) button can be implemented at atom level, and instantly applied to hundreds of locations across multiple websites or platforms. The ‘single source of truth’ provided by a design systems allows for complete consistency and control.


You may be thinking, with all these things linked together, does that mean everything is always going to look the same? But that is not necessarily the case.

The goal is to create consistency in the way a user engages with elements across sites. That way, every time a user lands on a site using the design system, the familiarity is already there and the user can get on with their task intuitively, without having to waste time getting accustomed to the way something looks or functions.


Brands are a good example of this. Each brand has its own individual style, and we want to encourage marketing teams to take advantage of building their brand's impact.

Within the design system, this could be as simple as updating fonts and colours.

But it also goes beyond that as you start to see how your choice of imagery makes an impact, or the way you structure your pages or content.

The design system acts as the canvas and enables marketers to get creative. The level of customisation a design system owner wants to encourage really comes down to them. For example, they may want everyone to use the same font, or have some elements always appear the same way. Alternatively, total freedom may be encouraged, but base components should remain consistent in terms of their anatomy.

To help with this, one of the most important elements of a design system is its documentation.

The importance of documentation

A design system is only as good as its documentation.

Documentation is the key to communicating the functionality of individual site elements. To do this, there are multiple online documentation tools which can be integrated with design softwares, like figma. These tools help us to communicate in a way that we can highlight updates to developers, but fundamentally to highlight where and how a component can be used, its rules and do’s and don'ts.

Having good documentation really unlocks the power of a design system. You can spend all the time in the world getting the look and feel of components right, but if the end users, markets or developers don’t know how any of it works or pieces together then the end result may not be as expected.

How to support a design system

In order to support a design system properly, there are a few structures to put in place to help ensure that it is as effective as possible.

  1. Team 
    A product team is needed to help with the upkeep of the design system, this would be made up of people in contact with marketing teams, the design system creators which could be an AOR and developers. These teams would work together closely to build and maintain the future of the design system and any new needs/requests that come in and also to police the use of the design system to ensure proper usage.
  2. Documentation
    I’ll mention this again, but having this helps with policing and ensuring that people are using components in the way they are intended.
  3. Blueprints
    These templates make the first step for a marketing team or their agency much easier. If there is a point to start and go on to customise we will speed up the process while maintaining standards and encouraging consistency across sites and their use
  4. Internal comms
    How else are people to know what a design system is, what it's used for and how it can benefit them if they are not first made aware of it? Internal comms should be run regularly and effectively to encourage the uptake of the design system and how it can help them.

Design systems allow you to create solutions that are scalable and can be seamlessly rolled out across multiple digital platforms or products.

They’ll help your team connect every part of your product or service, across all markets where you have a presence, allowing you to grow and maintain a global ecosystem of digital products with brand consistency.

Our expertise in design systems

At Graphite, we are well-versed in the world of design systems and have been working to create, grow and upkeep design systems for our clients for years.

We’ve been working with a top 10 global pharma company for over 6 years, creating the first iteration of their design system, and then continually evolving and improving it and scaling across brands and markets.

We’re also currently collaborating with another top 30 pharma organisation to establish a design system that empowers them to manage their web projects efficiently. This organisation is presently struggling to handle and modify their 400 customised websites. The new design system promotes teamwork among designers, developers, and other parties, enabling the company to expand its design initiatives as it introduces new products and services.

7th March 2023



Company Details

Graphite Digital

+44 (0) 1273 603 032

Contact Website

Floor 6 Tower Point,
North Road
East Sussex

Latest content on this profile

What are design systems and how can they help you elevate your digital products?
Design Systems aren’t new, but the potential to utilise them to improve the way in which teams produce digital products is still untapped for many in the pharmaceutical and healthcare industries. A design system's success doesn't just come down to its design team; its results depend on the three pillars of any functional design system — design, development and documentation.
Graphite Digital
The impact of mindset on digital product success: Download our new whitepaper
Six months on from releasing our research report, we reflect on the themes raised and offer practical advice on how contradictions can be overcome to enable digital success in pharma and healthcare.  With perspectives from Graphite, as well as leaders and changemakers from across the sector.
Graphite Digital
Demonstrating the value of UX research in pharma and healthcare
Demonstrating the value of UX research in pharma and healthcare can be difficult. Here, Graphite's Senior Clinical UX Researcher, Jack Burton, explains the importance of user research within the digital product design process, and gives advice on how you can articulate the 'ROI' of research internally.
Graphite Digital
Overcoming challenges in digital pharma to get to launch quicker
We take a look at why it can take pharma businesses so long to get their digital products into the hands of patients or HCPs, and what can be done to accelerate the process.
Graphite Digital
The Contradiction Conundrum: New digital pharma report
New research, based on the views of 450 pharma professionals, reveals contradictions in how pharma organisations are approaching their digital products and strategies.
Graphite Digital