This is a streamlined style guide for designers working on Mercedes-Benz brands, developed by Mark Abramov (Software Engineer) and Andrey Balbekov (Creative Designer).
By adding custom code to the Webflow CMS, we created interactive tools to bring the Mercedes style guide to life. We aimed to give designers working on websites associated with the Mercedes brand easy but comprehensive tools which would increase the quality and speed of prototyping. It was designed for 768×1024 screens as those are most commonly used by our designers, although we do provide support for responsive elements in our styleguide.
Some of the assets are still placeholder as we are still working out and standardizing copy and styles.
Feel free to look through the website to check out the set of tools we created.
A few examples of these tools are:
Our ADA Color Compliant Tool allows designers and developers to see how to apply Mercedes brands' colors in design, ensuring contrast conforms to ADA guidelines.
By selecting brand platform and foreground color, the user can see which background colors are compliant, and how different fonts and font-sizes appear with those colors. The tool also offers the ability to quickly copy the selected compliant colors.
The Typeface Usage Selector tool is a filter system to help designers and developers quickly select typeface usage in work, both on mobile and desktop. It also offers design samples to demonstrate the typefaces in use.