Admix design system is based on the atomic design principles and it is used across multiple ad tech products for public user base, but also in internal applications.
Implementing the design system improved the development efficiency, but mostly it affected positively the reliability and consistency across all products.
Typography
Inter
Inter is a typeface carefully crafted & designed for computer screens that also superbly matches our Admix brand and presents our technology platforms in a modern and simple way.
No secondary font is used in this design system. UI uses only 3 font weights. Generate font family and include code directly from the Google Fonts
Font variants
Font variants that are used across all our components are defined in this Figma file 👇
Principles
Grid
- 8px - Let’s use multiplies of 8 in all possible cases like in sizes, paddings and margins
Sizes, paddings and margins
- 4px - minor padding inside tags to fine-tune spacing between close elements
- 8px - the gap between text and icon
- 16px - the gap between inputs in multiple columns
- 24px - the height of the tag element in input or select
- 32px - padding for wrappers, modals | it could be a smaller input or button
- 40px - the height of inputs and buttons
Border radius
- 4px - small elements like inputs or buttons
- 8px - larger elements like sections or modals
Layout
The layout consists of the header, menu and content. It was designed to cover all requirements of the publisher, advertisement and admin platforms.
Main layout design example
Header
The header as a top bar will contain a logo, a button for collapsing the menu, breadcrumbs, notifications, a user card with his current balance, and the dropdown to relevant subpages like settings or log out.
Menu
The main navigation will sit in the sidebar and it will contain all main links to other subpages. For minor ones or subpages, we could have expandable items.
1.0 vs 2.0 – Merged menu We decided to merge menu with the sidebar we had in the publisher and advertisement platform. In this case, the menu will have special menu state for app and campaign detail that will cover items like ad placements or ad groups. Check the image below 👇
Do you need a Design System?
Feel free to get in touch.