October 15, 2021

Issue 06: The case for a personal Design System 🎛

Hi there friend 👋

First and foremost, I want to thank some of the new subscribers of this newsletter who took the time to write to me to introduce themselves and ask some very interesting questions. It was so nice to read from you and interact with you! Your support is very much appreciated!

---

For this issue, I wanted to focus on Design Systems, and more importantly on what I dubbed “personal Design Systems” (for lack of a better term):

A smaller scoped Design System focused solely on personal branding and personal use.

You can see this as your own personal Lego set, where you get to build your own set of pieces and rules for how to assemble them.

Note: I love Legos, and Design Systems, and comparing Design Systems to Legos 😛.

I’ve been putting a lot of work (but also having fun) into building one of those personal Design Systems for myself, on and off for about five months now, and have been slowly rolling it out on my blog: one design token/component at a time.

So far, it’s been a great learning experience as I’ve only worked on Design Systems in a professional context where there was a well-defined need and a team of excellent designers and engineers. In this case, I’m alone 😱 which can make the task even more daunting.

Why even bother with such a task?

I didn’t need a Design System for the longest time, but slowly but surely, as I was improving my blog, building more interactive experiences, or tried to have my different UIs look consistent, I wished I had one. Here’s why:

• ✨ Brand — I’m trying (hard) to build a unique and ever-improving identity on the web. There’s an endless sea of developers’ blogs/websites looking the same. I want mine to be recognizable from afar whether it’s through colors, typography, or playfulness. My objective is to build delightful yet accessible experiences with my own building blocks.

• 📐 Consistency — Throughout the past year, I created and accumulated a lot of components. These do not follow the same guidelines, some of them were created “on the fly” because I needed them for content. However, this starts to slow me down, especially when maintaining and updating my UIs. Through this project, I want to find ways to be more “intentional” with the pieces I’m creating.

• 🚀 Scalability — I see this project as an investment. Not only having a Design System will allow me to build original content with interactive experiences faster, but it can also act as the backbone of any future project. For example, if I ever come with a side-project/micro-SaaS idea, having this Design System ready to be used will allow me to focus 100% on the product aspect of the project.

• 🎉 Fun — Building these pieces feels to me like coming up with my own toys: a set of standardized blocks that allows me to build anything and experiment endlessly. Pretty much like Legos. Legos are fun, and I see Design Systems the same way. Oh, did I mention I like Legos?

• 📖 Learning — Obviously! (see the next part 👇)

Learning opportunities and challenges

In any project I start, I try to see what I can learn from it. Thankfully, Design Systems are a universe on their own, and a treasure trove of knowledge (and potential future content 😉)!

On top of that, I’m building it alone. Thus, not only do I get to experiment on the technical side of this project by trying out new patterns/solve new problems, but also on the UX/design side by coming up with my own design tokens and learning fundamentals.

I started this project by breaking down blog.maximeheckel.com and maximeheckel.com into their most fundamental pieces. One of those foundational work items was defining proper design tokens representing color 🌈, typography 💬, and spacing for both websites. As of today, I have tokens for colors such as:

• the different color palettes

• the brand color, background color, typography colors, etc

• shadows

for both light and dark mode, that also allows for proper contrast ratios for accessibility! This, on its own, was incredibly difficult to define, and I still, to this day, keep tweaking and adjusting these design tokens so they remain relevant and useful as I add more and more components and rules to my Design System.

On the more technical side, coming up with the different rules that your components need to follow and the variants/shapes they can take while keeping a high level of developer experience (DX) is mind-blowingly difficult 🤯. Should a Button be polymorphic? How many variants shall I define? Should I go for compound component patterns?

Here’s an example of some of the DX choices I made so far to answer these questions:

All that is a lot of work, but thankfully, these efforts are already paying off! I’m already able to ship content with interactive experiences faster with just the few components/rules I built so far, like the OpenAI playground featured in my intro to GPT-3 for frontend developers which only took about an hour and a half to build and ship!

I don’t know yet how far I’m going to push this. I still have a couple of components to define, and some guidelines to write. The objective would be to treat this like a real product like I do with my blog, so expect a lot more to come!

Where to get started?

Does my work pique your interest? Want to start experimenting with Design Systems but don’t know which resources to check out to get started? Don’t worry, I got you! Here are some of my favorite resources that I keep going back to:

• Brad Frost’s Atomic Design Methodology. I recommend reading this one first if you’re new to Design Systems. You may already apply some of the patterns introduced here today, but it’s still a good read and can act as a “guide” throughout the development of your Design System.

• Lee Robinson’s Design System guide. In this post, Lee gives you a curated set of tools and patterns.

• Radix UI. This is my main inspiration. I’m dissecting their Github repository and learned tons of things from their team.

I’m looking forward to introducing/sharing more components and write about some of the cool micro-interactions/animations I sprinkle around to make them look unique (there are already some cool ones 👀). In the meantime, do not hesitate to reply to this email to share your thoughts, feedback, or even just say hi!

– @MaximeHeckel

---

Did you like this Maxime’s ideas issue? Click here to spread the word and share this newsletter on Twitter. I really appreciate your support!

Want to check out other topics I wrote about? There’s a lot of great content waiting for you on my blog 👉 blog.maximeheckel.com