Designing design systems

“A design system can create value on at least two levels. At the team level, it can create a more streamlined, predictable process that reduces design and engineering time. At the UX level it helps deliver consistency and predictability in the interface, and to raise the quality of the experience overall when designers and engineers are freed up to think about higher-order tasks.” – Nick Stamas, Creative Lead at WeWork

What is a design system?

A design system offers a library of visual style, components, and other concerns documented and released by a team or community as design tools so that adopting products can be more efficient and cohesive. It is the canonical source of truth for product design and development. A design system breaks down the most fundamental and common parts of your interface such as colour, layers, typography, icons, interactions etc into simple, predictable elements that can be reused to build larger and more complex structures.


  • Increased velocity and time to market
    A element-based toolkit accessible in one place allows for a more ‘copy and paste’ Agile process, speeding up releases without compromising quality.
  • Increased product value
    Reusable components build upon each other, which creates a consistent look, feel, and behavior to the product. As consistency increases, so too does user efficiency.
  • Increased collaboration and knowledge sharing
    Because the shared design system includes approved assets and conventions, designers and developers are more autonomous without closing off into silos.
  • Less time and money wasted
    Because designers and developers aren’t caught up in redundant questions or repetitive work, they’re freed up for projects that deliver more business value.


Taken from Principals of designing systems

  1. Systems solve the easy problems so products can solve hard problems more easily
  2. Include what’s shared, omit what’s not
  3. Products own their destiny, systems equip them to realise that destiny
  4. Favour community over control
  5. Favour elegance of simple things over flexibility of complex things
  6. Make documentation first as a tool to use, then as pictures to show, then – if needed – as words to read
  7. Measure success on dependency
  8. Favour quality over quantity

What is the Jisc design system?

Our design system offers
visual style, UI components, and accessibility procedures
released as
Downloadable design assets, imagery and written guidance
This is documented at


and produced by
The ux team of 1 UX specialist (lead) and 2 UX developers,
in order to serve
≤ 5 web-based services currently, with the potential to grow to ~50
products and experiences.

This will cover

  • Principals – Our underpinning approach to design for the web
  • Grid – How elements are structured and flow within a responsive grid
  • Layers – How to build depth and visual hierarchy
  • Spacing – How to ensure consistent vertical and horizontal rhythm
  • Colour – What colours to apply in different contexts and use cases
  • Typography – Making pages clear and simple to understand
  • Icons – What icons we use for common / repeated interactions
  • Interaction – the states and motion of clickable elements

If you’d like to know more get in touch via or for further reading check out Nathan Curtis’ excellent medium posts.

By Benjamin Perry

As user experience specialist my role is to ensure that the user experience is maintained and preferably enhanced as content and services that currently sit on separate websites are brought together as part of a unified web project. Specifically I am leading on the design of a global experience language that will govern the whole of the Jisc web presence, creating a unified and consistent user experience and customer offer.

I work closely with the sector intelligence team, leading on primary research activities around the Jisc web presence. And support the digital content and UX manager on content strategy, content design and wider UX strategy.

I am responsible for designing information architectures, user interfaces, atmospheres, page templates and functionality that meets user and business needs and are simple and a delight to use. Creating customer journeys, user stories, sketches, sitemaps, wireframes and rapid development of clickable prototypes to visualise design concepts.

1 reply on “Designing design systems”

Award winning wine cellar designer Lisa Weiss will design and build the Custom Wine Cellars of your dreams. Specializing in wine cellars, tasting rooms and custom bars, Lisa works with you every step.

Leave a Reply

Your email address will not be published. Required fields are marked *