Introducing VINE.ds

A powerful new design system for Sketch users.

Launching soon...

VINE.ds is multi-brand design system enabling a designer to quickly create websites and products for any brand using a single library.

Save countless hours of effort and duplication by using pre-made components – such as buttons, form elements and product cards – and apply ANY BRAND style to your design.

With a scalable, ready-to-use component library at your disposal (pre-made or combine them to create your own), designed meticulously with core UI principles to an 8pt grid, you can work faster, more accurately and spend more time doing what you do best – designing amazing websites and products.

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).

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).

Key features

Atomic Design Methodology

A design system created using the Atomic Design methodology.

Customisation

Customise each component to fit ANY brand style, including shape and colour.

Accessible

Built using ONLY native Sketch functionality. No plugins are required.

Responsive

Where technically possible, all components react responsively.

Build your own

Group any number of ‘atoms’ together to create your own local components.

Flexible

Alter the shape of any component for range and easy design diversity.

Clear categories

All components have been organised in simple to understand categories.

Clear labelling

All elements are clearly labelled with added emojis for easy to read overrides.

Default + Brand file setup

A fully built ‘brand template’ Sketch file you can customise and use with VINE.ds.

Multiple Grids

5 break point grids – all marked up – have been provided for responsive design.

Create content blocks

Swap out or design and create your own content blocks for all components.

Ready-to-use, out of the box

Fully functioning, vigouresly tested design system ready-to-use, out of the box.

One design system.
One hundred+ designs.

About the designer

Viren Parsotam

I’m a Lead UI/UX specialist with a range of industry experience and a real keen interest in product design and design systems for better work flows. This product was built to service designers everywhere to help build designs faster and reduce production time.

Also a keen gamer (STILL finding new things to do in Breath of the Wild!) and a big Marvel MCU fan!