Geri Reid: Creating design systems

In week 3 of Spring term, we were joined by design systems and accessibility consultant Geri Reid. Geri divulged information about life not always going the way you expect and the journey she took to be where she is today. Geri’s path is relatable to young people and the struggles that they face, with a positive outcome.


Early life

Geri comfortably shared her experience of parental expectations and the struggle with undiagnosed OCD, leading to her dropping out of school and getting a tattoo. She then chose to travel around the world, flicking between random jobs, with the feeling of being lost and struggling with the sense of being left behind due to everyone around her graduating and getting jobs, while she still worked on understanding what she wanted to do. The Internet came about and had Geri hooked; to this day, it “still feels like magic” to be able to code HTML and create a whole web site. Geri then felt ready to take on Uni and received a BA at UAL, learning how to code and design before working an entry-level coding job. She found success through someone taking a chance on her, and she likes to do the same for undergrads today. She proceeded to work in the UX/UI design field, and reflected with positivity that the job she has today wasn’t even invented until she reached her 40s. Things we study today didn’t exist when she began her education.

‘The job you end up enjoying probably hasn’t been invented yet’ – Geri Reid  

Design systems

A design system is a collection of reusable elements, guided by a clear set of standards, that can be assembled to make stuff.

Massimo Vignelli was famous for his redesign of NYC subway signage, a design system he created to aid people through their everyday journeys. Up until mid-1960s, subway signage was unclear and disorganised; signage was overcrowded and overlapping. Vignelli used rational shapes, which are the result of deep cultural sensitivity, with shapes and colours to create an understanding of direction. The work of Vignelli indeed shows a timeless validity housed in its pragmatic, rational, and visually forceful nature.


the1970 New York City Transit Authority Graphics Standards Manual ...

‘Standards Manual’ –  by Massimo Vignelli 


When Geri worked at large companies like Lloyds Bank, she noticed that the headers were never the same size or placement, which made it look like a scam website due to a lack of consistency. Design systems work when you break the designs into small, reusable chunks. This works for all aspects of design, not just UX/UI. An important thing to note is that when you break down the design, each element becomes known as an ‘Atom’; they are smaller components that create larger products. Brad Frost had the idea of atomic design, and to find out more, Geri suggested buying his book, Atomic Design. It stems from the metaphor of small atoms forming into molecules and then organisms to create templates, pages, or products. With further research, it has become known to us as designers that there is a layer before atoms, called design tokens, the foundation of a system: colour, typography, grid, and spacing.


The Atomic design process using instagram example steps.


When working on your design system, you will begin with your brand colours and create a design system ramp, a great website to use that was suggested during the talk by Geri is Leonardo ( Good colour contrast is essential for accessibility, this is beneficial to the 2.2 billion people worldwide with forms of visual impairments are able to read the content. Colour Contrast Checker will give you an instant pass or fail result for how well your contrast is working with your background. A useful way of scaling your typefaces for websites comes from free websites such as Typescale – Create stunning typography, generate CSS, and find inspiration. Another website that will be useful to you as a designer is Gridlover it is another free tool that Geri loves to use to help her split up the CSS and show her the underlying grid. A system that Geri helped design and shape herself is the NewsKit design system, made from code libraries to help create news formats for companies like TheSun, etc. NewsKit provides information on how to structure and utilise visual appearance to create fluidity and enables agile project management scheduling for designers, giving them objectives to complete, similar to Padlet for students.


Digital accessibility

It is all about removing barriers that prevent interaction with or access to websites, digital tools, and technologies by people with disabilities. Disabilities are not always visible and can be situational or temporary, for example, a broken arm or being outside with light glare. Geri expresses the importance of being thoughtful with your design. Web Content Accessibility Guidelines (WCAG): Understanding WCAG 2.2 – Service Manual – GOV.UK ( The four main principles of WCAG  are Perceivable, Operable, Understandable and Robust. Being excluded is like a punch in the gut, and leaving people out does not meet accessibility standards. Ability bias is unintentional and typically typically because we base our designs around ourselves and people we know. You will make mistakes and won’t make a perfectly accessible product the first time around, but this is how, as designers, we learn and improve. Be messy and experiment; before having a system, test and test and test again. Geri personally takes the approach of creating whole screens before breaking things down into her atoms and molecules, especially as some elements are reusable.

‘ You can apply a system to any sort of design’ – Geri Reid.

Below are examples of websites and books Geri shared that are very good at helping you understand and implement accessibility:




Geri’s talk was relatable and extremely valuable for students of all years, particularly for UX/UI projects. Her presentation was informative, covering her journey, design systems, and accessibility in design. She shared her wisdom and supplied lots of free websites that will be valuable to projects across students studies, and they spoke of wanting to watch the recording again as it was so informative. Geri ended her presentation by saying, ‘Everything you design and build leaves a legacy. Make yours a good one.’


‘Excellent and highly informative. Truly riveting.’  – Part 1 student 

‘Amazing speaker, and relevant to our practice across design disciplines.’  –  Department Lecturer