There are many ways to structure and build a design system library. I prefer to split out the layers of my design systems into separate files to make it easier to organize.

• Tokens
• Elements
• Components
• Unique Components
• Icon Library
• Illustration Library

Lego bricks

Here is a screenshot of common Elements in my design systems, styled in accordance to the brand and purposes of those using the product. I can easily modify color tokens that will cascade through all these elements, restyling them consistently.

Delight

I always want the things I design to be aesthetically pleasing, but I balance out being trendy with being useful. In the case of AIDN, I knew that we were trying to replace existing tools and that users of our software would spend a great deal of time using it. I was also mindful of other factors like time to action, stress levels, and accessability.

Color Concepts

Dark mode was a requested feature and we had some studies backing up its use. Our users would be spending a great amount of time in dimly lit control rooms, so I wanted to decrease eye strain and fatiuge as much as possible.

The brand colors informed the palette I would be using, but I was also trying to counteract the stressful situations our users typically found themselves in, so I went with a green base. Blue is a strong color associated with "technology", but with AI as a primary core compoenent, I wanted to come across as "grounded" and "practical" and steer clear of the over-hyped imagery flooding the market due to the rise of LLMs.

Typography Concepts

AIDN is a monitoring tool that handles an extremely dense amount of network information. I used an 8px grid as my base and decided that 16px would be the default font size for increased legability. I used a service like Typescale to help me choose the size scaling of headers down to captions. I ultimately chose a 1.125 Major Second since it fit my desire for clear hierarchy with minor increments to accomodate the limited space.

I chose the Roboto font family as its clean, san-serif style was easy to read, scale, and present a modern, technology feel.

Shape Language

Shapes language is critical in laying a good foundation. Having a strong shape language will enable the design to speak clearly to the user and convey context and brand personality.