Laying the foundations
Before even starting with Atoms, Molecules, and Organisms, I had to lay some ground rules for the Radix Labs design system- the foundations, or “subatomic particles” that make up the atoms: typography, colour, and grid systems.
While staying true to Radix Labs existing brand guidelines, I put together basic design elements like like typography and colour. I focused a lot of time on laying these foundations early in the process with design tokens, to ensure that the design system was maintainable and scalable.
I implemented these foundations into a design library using Figma’s styles and variables.
From my audit, I found that there were several weights and sizes used across our designs. Keeping in mind the use cases I documented in my audit, I streamlined this into a collection of just 7 text styles.
Radix Labs’ main suite of products had a generally cohesive colour scheme, with a lot of redundancy. I made some major decisions to narrow down and update the colourspace:
Keep neutrals to a limited range, only darkest and lightest values, to create a minimal and clean interface.
Leverage brand colours to make semantic colours for warnings, errors, and CTAs. This ensured that our interface would remain cohesive with the brand.
Ensure accessibility by checking colour contrast according to WCAG guidelines- many of the older colours failed contrast tests.