Design Systems: Foundations Pt. 1
When I started research on Design Systems a few years back, I sprinted through my findings to fit into a 30-Day DS discovery. I am again revisiting this idea, this time by attempting to document my observations weekly, while rediscovering how design systems are built.
Conducting an analysis of design systems has helped me gain a bit of confidence early in my career as a way to get comfortable when collaborating with developers. Any new UX designers starting out could benefit from learning the basics of interaction design and auditing design systems. Google’s Material.io, Atlassian Design System and IBM’s Carbon Design System are ones that I highly recommend.
For week 1, I plan on focusing heavily on how existing design systems are built based on their foundations. Most systems call it visual identity, visual language or style guidelines. In my current project team, we call it the “atoms” from the Atomic Design System book by Brad Frost.
I scoped out existing Design Systems starting with a crowd favorite, the Atlassian Design System. I did a design challenge using the components and gleaned a few discoveries in my exploration.
Day 1: Atlassian DS as the Best in Class in Simplicity
Observation #1 Simplicity wins. Atlassian stands out with their short and sweet documentation. To be able to distill such a complex system in a simple way is very tough but do we expect less from the makers of Trello? I am sure there were many iterations before it came to this point, but you can tell that the system is mature and its solutions very scalable. I know it because I tried testing it on this simple design challenge.
Observation #2 Accessibility is highlighted as part of foundations. This speaks volumes — that tells you every product is keeping with all aspects of accessibility standards. My favorite is how they displayed their color pairings — using the letter “A” in dark and light color text, against their proposed 24-set color palette. In Accessibility, color contrast between text and background is a basic requirement and it is creatively shown as a top-of-mind guideline for them.
Observation #3 Fun and relatable naming convention. From a grey palette including labels such as “Snorlax,” to grid systems categories “cozy”, “comfortable” and “compact” — ADS does not disappoint with easter eggs of puns. Not only their documentation is a delight, it also uses designer lingo, effectively making it more memorable for reuse and adoption.
Day 2: Typographic Style: Source Sans Pro
I’ve obsessed about one particular typeface for this project: Source Sans Pro. Source Sans is Adobe’s first open source typeface family, and is designed by Paul D. Hunt. As a web font, it packs a punch in form and function.
Observation #1: Compared to other popular open-sourced fonts, Source Sans Pro is designed with a narrower width, which makes it effective to use for content-heavy design and utility apps.
This versatile font can be used standalone with no other font pairings like how Idealist has formed their type style — harmonious yet still evoke variety with subtle changes in size and stroke weights.
Observation #2: After my first audit of a good utility app (Idealist.org) I ended up in a rabbit hole of many other design system discoveries and Source Sans is what they all have in common.
Observation #3: Another observation I made is that it pairs well with other popular font families, and Figma featured those pairings with details on the creator of Source Sans. (Enough said.)
[You can download the type specimen link here]
Fortune Cookie for your thoughts: I have not gotten into another basic topic in Typography which is Type Scaling. You can play with a calculator here for now and will edit this topic in in the future. Perfect Fourth is the widely used Type Scale.
These topics I have shared is a good tip of the iceberg, watercooler talk when it comes to typography. You’ll definitely get your fill the deeper you get into audit work! Highly recommended.
Day 3: Spacing and Layout
Observation #1 Design by use case
This is perfect for very small number of project to be audited. One good example I found is he Indigo Design System. https://indigo.universalservice.org/guidelines/sample-pages#composed-examples
Observation #2 Design down to the technical details
What is the design system for but a documentation for building blocks? If scaleability and consistency is your goal, guidelines from the BOLT DS is your best bet. It contains robust examples of ready to use design tokens and details how foundational elements could be implemented in the dev side — something tech leads daydream about.
Fun fact, this was the DS that Atomic Design System first built. (Have to fact check this, but it was called Pattern Labs when it was first released)
Observation #3 Have fun like Fanduel: I have seen many a basic guidelines for spacing, but this is one of my top 3. Usually you’d be set with a baseline 8px/4px grid system but Fanduel gets into this with exactness and familiarity.
Here are just a few examples:
In the coming days, I will wrap up with 2–3 more foundation items such as Color, Iconography and Accessibility. Stay Tuned!
