Velonto Food Delivery - UI Styleguide

Hello everyone 🚴🏻‍♂️

We want to show you our Velonto Product Styleguide. Styleguide is a cool tool to check yourself during the project and use it later to build a design system for the whole product.

The Styleguide usually includes: Colors, Typography, Imagery (photos, illustrations, icons), Grids, and Spacing System. We built our Styleguide on the Atomic Design methodology. The methodology consists of atoms, molecules, organisms, templates, and pages.

The idea is that smaller elements are the part of the bigger ones and everything is tightly linked. It means that atoms (buttons, inputs) make molecules (search box that is made with button and input) and molecules make organisms (top navigation that includes the search box). Check it in the shot.

What rules do you use when creating your Styleguide? Write in the comments!

During this project, we provided the following services: Strategy, Branding, UX/UI design, Front-end development.

📩 Check our full story about working with food delivery and contact us [email protected]