Insight #1 – Consistent use of color systems
Mailchimp’s major strength is it’s use of consistent color systems across the board. Their design system website doesn’t just show the colors they want to use in their color palette. They take great care to explain and show examples of what TO do and what NOT to do with the use of those colors.
For each color, they include examples of overlayed text to show legibility.
They also use psychological data to explain when to use certain colors from their palette. For example, their color “pumpkin” is often used to alert the reader.
Insight #2 Flexibility Creates More Opportunities
Audi’s design system is focused on flexibility to create more opportunities for design that is constrained to different device sizes, systems, and allows for easy integration of animation. One initial example of this is creating a series of logos that incorporate different stroke weights that can either be used stagnant, or can animate from thin to thick.
Another thing I appreciate about their design system website is that they have mockups of their brand guide applied to different types of technology. If a designer just started working for Audi and was learning how to apply the design system, this quick visual overview would be incredibly helpful to set the tone and define the vision.
Animation is so important to the design system that it has it’s own page in their guide. Here they show examples of ways they have used animation in the past, as well as a series of technical drawings that explain “best practices” for animating elements.
Insight #3 Layout Design
Since The Guardian is a news outlet, their website intuitively reflects a modernized version of a newspaper. They rely heavily on the use of a grid system, incorporating containers and cards that can be repeated and re-arranged.
The Guardian’s design system website breaks down each component of the grid: fronts – articles – containers – story cards. Once someone clicks on a card’s image or headline they are taken to a fully flushed out article page to read more about the topic.
The grid system also applies to smaller devices, like tablet and phone. Here they show examples of the use of the grid system for different device sizes.
One thing I would love to see on this site is mockups that show finished versions of applying these principles.