Project Overview
VINE.ds ( is a self initiated project I began developing during the first national lockdown.
It was a passion project of mine to create a single design system that was easy to pick up by any UI or UX designer, and flexible enough to be used for any number of projects, both big or small.
Having experienced the frustrations of constantly creating a new design system for every company, and sometimes every project I worked in, I wanted to remove this tireless repetition and build something that was ready to use for any project straight out of the box.
See the design system in action
The 3 Layer approach
This design system uses a method called the 3 Layer approach. It is a system of applying three distinctive layers or building blocks to create your design
– the VINE.ds (design system layer) + Page layout (design layer) + Brand setup (brand layer).
A simple example of these 3 steps would be:
1. Selecting the desired elements from the VINE.ds design system (layer 1).
2. Arrange them accordingly to create a page or screen layout (layer 2).
3. And then apply a specific brand font and colour system to it for the desired outcome (layer 3).
See how it works
Example designs created using VINE.ds - a single design system
Mock up of the Airbnb website
Mock up of the Nike website
Mock up of the Valorant game website
Back to Top