Brand System — Motion Toolkit
Brand System —
Motion Toolkit
Brand System —
Motion Toolkit
Overview – Legendary brand agency Wolff Olins created a modular brand system for a top-secret client. Our team then transformed the guidelines into an interactive tool that enables everyone to generate limitless logo variations and animations.
Overview – Legendary brand agency Wolff Olins created a modular brand system for a top-secret client. Our team then transformed the guidelines into an interactive tool that enables everyone to generate limitless logo variations and animations.
Overview – Legendary brand agency Wolff Olins created a modular brand system for a top-secret client. Our team then transformed the guidelines into an interactive tool that enables everyone to generate limitless logo variations and animations.
Toolkit
Toolkit
Toolkit





A Motion Toolkit is an invaluable asset within a brand system. It enables anyone in the client organisation, no matter their design expertise, to easily generate visuals & animations that perfectly follow brand guidelines.
A Motion Toolkit is an invaluable asset within a brand system. It enables anyone in the client organisation, no matter their design expertise, to easily generate visuals & animations that perfectly follow brand guidelines.
A Motion Toolkit is an invaluable asset within a brand system. It enables anyone in the client organisation, no matter their design expertise, to easily generate visuals & animations that perfectly follow brand guidelines.
After diving deep into the 60-pages-long guidelines Wolff Olins shared with us, our team come up with an intuitive interface to help generate countless unique logo variations. A crucial aspect for a client made by hundreds of different business units.
After diving deep into the 60-pages-long guidelines Wolff Olins shared with us, our team come up with an intuitive interface to help generate countless unique logo variations. A crucial aspect for a client made by hundreds of different business units.
After diving deep into the 60-pages-long guidelines Wolff Olins shared with us, our team come up with an intuitive interface to help generate countless unique logo variations. A crucial aspect for a client made by hundreds of different business units.
The brand is a circle made of spokes. The system supports a variable number of spokes, creating a thinner or thicker outline.
The brand is a circle made of spokes. The system supports a variable number of spokes, creating a thinner or thicker outline.
The brand is a circle made of spokes. The system supports a variable number of spokes, creating a thinner or thicker outline.
Starting from 12 colours (across the entire spectrum) and 5 colour pairing rules, the client uses the interactive colour wheel to try all options and see the logo preview update live. The tool supports RGB, CMYK and Pantone colour systems in output.
Starting from 12 colours (across the entire spectrum) and 5 colour pairing rules, the client uses the interactive colour wheel to try all options and see the logo preview update live. The tool supports RGB, CMYK and Pantone colour systems in output.
Starting from 12 colours (across the entire spectrum) and 5 colour pairing rules, the client uses the interactive colour wheel to try all options and see the logo preview update live. The tool supports RGB, CMYK and Pantone colour systems in output.
Starting from 12 colours (across the entire spectrum) and 5 colour pairing rules, the client uses the interactive colour wheel to try all options and see the logo preview update live. The tool supports RGB, CMYK and Pantone colour systems in output.
Hit next and you land in the Lock-up section, where – given the logo design chosen – the client can enter the Wordmark on one or multiple lines.
Hit next and you land in the Lock-up section, where – given the logo design chosen – the client can enter the Wordmark on one or multiple lines.
Hit next and you land in the Lock-up section, where – given the logo design chosen – the client can enter the Wordmark on one or multiple lines.
Hit next and you land in the Lock-up section, where – given the logo design chosen – the client can enter the Wordmark on one or multiple lines.
The last section is all about Motion. Together with the team at Wolff Olins, we developed 4 logo animation styles, including both loops and in&out animations. Here’s a selection of our favorites outputs:
The last section is all about Motion. Together with the team at Wolff Olins, we developed 4 logo animation styles, including both loops and in&out animations. Here’s a selection of our favorites outputs:
The last section is all about Motion. Together with the team at Wolff Olins, we developed 4 logo animation styles, including both loops and in&out animations. Here’s a selection of our favorites outputs:
The last section is all about Motion. Together with the team at Wolff Olins, we developed 4 logo animation styles, including both loops and in&out animations. Here’s a selection of our favorites outputs:
A few months after final delivery, the client decided to cancel the entire brand refresh. It happens. We’re still very proud of the work done. We hope you liked it too.
A few months after final delivery, the client decided to cancel the entire brand refresh. It happens. We’re still very proud of the work done. We hope you liked it too.
A few months after final delivery, the client decided to cancel the entire brand refresh. It happens. We’re still very proud of the work done. We hope you liked it too.
A few months after final delivery, the client decided to cancel the entire brand refresh. It happens. We’re still very proud of the work done. We hope you liked it too.
Want to try the interactive tool? You can find it here. Need to turn a brand guideline or motion guideline into a video making machine? You’re in the right place. Book a demo.
Want to try the interactive tool? You can find it here. Need to turn a brand guideline or motion guideline into a video making machine? You’re in the right place. Book a demo.
Want to try the interactive tool? You can find it here. Need to turn a brand guideline or motion guideline into a video making machine? You’re in the right place. Book a demo.
Want to try the interactive tool? You can find it here. Need to turn a brand guideline or motion guideline into a video making machine? You’re in the right place. Book a demo.
Credits ✶ For Wolff Olins: Direction Jan Eumann + Creative Director Quae Luong + Producer Raphael Picciarelli — For Algo: Direction Luca Gonnelli + Dashboard Design Camille Pagotto + Dashboard Development Nima Farzaneh & Mattia Giordano + Automation Marco Oggero + R&D Director Matteo Ruffinengo + Producer Marina Echer Barbieri
Credits ✶ For Wolff Olins: Direction Jan Eumann + Creative Director Quae Luong + Producer Raphael Picciarelli — For Algo: Direction Luca Gonnelli + Dashboard Design Camille Pagotto + Dashboard Development Nima Farzaneh & Mattia Giordano + Automation Marco Oggero + R&D Director Matteo Ruffinengo + Producer Marina Echer Barbieri
Credits ✶ For Wolff Olins: Direction Jan Eumann + Creative Director Quae Luong + Producer Raphael Picciarelli — For Algo: Direction Luca Gonnelli + Dashboard Design Camille Pagotto + Dashboard Development Nima Farzaneh & Mattia Giordano + Automation Marco Oggero + R&D Director Matteo Ruffinengo + Producer Marina Echer Barbieri
Credits ✶ For Wolff Olins: Direction Jan Eumann + Creative Director Quae Luong + Producer Raphael Picciarelli — For Algo: Direction Luca Gonnelli + Dashboard Design Camille Pagotto + Dashboard Development Nima Farzaneh & Mattia Giordano + Automation Marco Oggero + R&D Director Matteo Ruffinengo + Producer Marina Echer Barbieri
Sign up for our newsletter to get updates on projects, technologies, data-viz and automation.
Site built in Framer