Delivery Club Design System
Systematizing and developing design system for the first and largest food delivery company in Russia.
As the process of development was rapid, the need for ‘building blocks’ was obvious. Also, it was clear that when the design team increases it will be harder to maintain a consistent look, and to keep the same development speed. That’s why in my spare time I made the design system.
X-Height of the main text was 8px. Other styles were obtained by upscaling and downscaling it using Perfect Fourth ratio, and then tweaked to look well in the UI with 8px paradigm in mind.
Every case of text style usage was integrated into working files, to create limitations for keeping styles coherently over time. Also, to make their usage easier and more adaptable for the new team.
We needed a contrast color palette to minimize color decisions. For better understanding, I researched cartographers and graphics data papers. This way main, light and dark colors were picked in CIE-Lab color space using chroma.js picker. Here, each column was interpolated vertically with Chroma.js Color Scale Helper, and then the whole palette was interpolated horizontally to balance color distribution.
72 icons in total. Each has 24×24 px base, 20×20 px safe zone, and 2 px grid.
96×96 icons were used in communication. Each one had a grid, and no safety zone.
Patterns were made the product looked less boring. They had three levels of detailing: 1) Background color, defines mood. Green – everything is fine, yellow – something went wrong, and red (we never used it) – everything is bad; 2) Pattern style that reflects its context usage i.e. food, delivery, etc. 3) An overlay illustration (optional) made the message more precise.
Beauty was sacrificed to speed-up the production of the tiles so all illustrations were applied onto 8px grid.
2. COMPONENTS & LAYOUTS
All components were made to maintain the same optical margin everywhere, and double it if needed to maintain constant rhythm over the app.
I took a concept of a list as a basis, so all the elements are components of the list.
This let most of the screen be multivariate and modular without worrying about wrong margins.
Besides list screens, we had screens to communicate with the user. Restaurants translated their voices with food photos, and we translated our voice via our patterns, colors, and illustrations.
All above was applied onto android tablets as well.