CALM: A Design System
A self directed project that imagined the charity Campaign Against Living Miserably (CALM) did not have an existing design system.
Process Overview
Background
I wanted to test my ability to construct a design system from scratch, imagining that the Campaign Against Living Miserably’s (CALM’s) design team had lost access to their design files. I took on the role of Designer and gave myself three weeks to create what I could. In the design system I wanted to include foundations, components, and both a light and dark mode.
Starting from scratch
(Click to enlarge!)
Having nothing to work from aside from the website itself, I started to cut and paste some elements into Figma. I constructed a mood board of buttons, typography, and cards, trying my best to gather one of each element.
From colour to type
(Click to enlarge!)
CALM had more than 20 colours on their website – some of which were quite similar to each other. The use of colour was quite sporadic, so I categorised and narrowed down the current scheme.
Before considering a dark mode for CALM, I establised the typography using Google’s inspect tool and found other useful foundations. This would give me a better base for testing out a dark colour palette later on.
Components
(Click to enlarge!)
Using my initial mood board, I replicated all the buttons and cards present on CALM’s website. I split the buttons and cards into different categories and adjusted their colours slightly based on my revised palette.
Dark mode
(Click to enlarge!)
I began by playing around with different colours and mock web pages to find the perfect dark mode counterparts to my original hues.
Final design system
(Click to enlarge!)
Reflection
Overall, this was an incredibly insightful project. It was interesting to see how efficiently I could create a design system in a comparatively shorter time frame than what I’m used to. I had a lot of new challenges to overcome.
To start with, managing my time was difficult as I was unsure how much of it to dedicate to each task. I have learned during this to not spend so much time on colour picking, for example, as there are tools out there that can help with that (such as the CSS overview I used for typography).
Having not had much experience in design systems prior to this, this project has certainly increased my awareness on the need of such systems. It is something I am excited to try again.
Outcomes
– Scalable design system – Guidelines have been created to allow for future growth.
– Inclusive design – Accessibility principles were considered to ensure usability of CALM’s website is enhanced.
– Enabled collaboration – The new framework allows designers and other potential collaborators to contribute.
Chloe Crxxs 