The story behind our visual identity

We set out to make Design System Diaries stand out with a visual identity that’s playful, engaging, and capable of growing alongside its readers—all while staying true to the core principles of any great newsletter: clarity, accessibility, and high performance.

We created four key elements:

Design systems occupy a niche within a niche. Most companies have just one team, often working in isolation with limited access to peers or best practices. That’s why sharing insights isn’t just valuable—it’s essential for moving the industry forward. Trailblazers like Dan Mall, Brad Frost, and Nathan Curtis have paved the way, generously sharing their knowledge as open-source contributions to help others learn and grow. Our logo is a skeuomorphic nod to them. It represents the blank page and blinking cursor that every writer starts with, and the tools we’ve used—keyboards, code, and creativity—to turn into something tangible and educational.

Our keyboard inspired logo

Each issue of the newsletter will feature a variation of the logo, inspired by a keyboard from the history of modern design—a segment we call A Key Event. It’s our way of honoring the tools and people that have shaped where we are today.

A Key Event #1 : Our current logo is a representation to the 1983 Apple Lisa, one of the first personal computers with a graphical user interface (GUI), allowing the rendering of typefaces.

Connected abstract shapes

We wanted visuals that reflect the vibrancy and personality of this community. The abstract shapes we created represent the core and foundational parts of a design system—while their interconnectedness symbolizes the unity and collaboration within our field.

An abstract representation of key design system elements

Vibrant color scheme

We combined these shapes with a three-colored palette with three shades of each to ensure variety and flexibility. Every shape has its own color to represent its individuality whilst still being cohesive in the system.

  • Purple - Symbolizes introspection, creativity, and unity

  • Blue - Reflects trust, calmness, and connection

  • Orange - Evokes fun, passion, and community

The complete color palette

Color palette applied to each foundational shape

Abstract shapes used asymmetrically in graphical backgrounds

Type pairings

To honor the unsung hero of every design system—code—we chose a monospaced font for the headlines. It’s purposeful, functional, and a nod to the building blocks behind the interfaces we design every day. For the body text, we opted for the crowd-favorite Inter—a beautifully versatile font that’s as readable as it is elegant.

Is this a Museum for ants?

Example of the font pairings

Thanks for stopping by

I hope you enjoyed reading about of design process as much as we did creating it. Like a design system itself, it will grow and adapt as the newsletter evolves. For now, we’ve built a baseline that connects with our audience and reflects the thought and care behind every word we deliver.

If you haven’t subscribed to the newsletter then please click the button below, you’ll get weekly reads of key design system topics that are insightful and actionable - let’s grow together.

Lewis x

Got 2 minutes? Let us know what you want to read in future newsletters

What did you think of today's email?

Login or Subscribe to participate in polls.

Reply

or to participate.