Design System Starter Kit

A set of elements for building design systems. It is designed to speed up and simplify all routine work when creating a design system.

Design System Starter Kit

Figma version coming soon.

How to use

Design System Starter Kit is made for Sketch. When you download the kit file and open it, here are your steps:

1

Copy artboards from Starter Kit to your file

2

Fill in your data and add the ones you need

3

Create symbols and design tokens based on your system

No tokens for typography styles

The Starter Kit just show you how it might look. Because you will still have to change them in your design system — it's harder to do than creating styles from scratch in your system.

No symbols for buttons and inputs

You will copy artboards with buttons and inputs to your system, change their styles, and only then create symbols. It's more effective than changing existing symbols made by someone.

How it works

The Starter Kit is a manual, checklist and a set of prepared elements that exist in almost any system, so you just need to fill in your data.

How Design System Starter Kit works

Questions & Answers

Is the starter kit suitable for any project and for building any design system?

Generally, yes. One of the principles of the Starter kit is that all sizes and scales are based on css unit 1rem, which is equal to the line spacing of the body font size. All sizes and dependencies are based on this unit. This approach makes the system systematic. If the system you are designing uses a different approach, you can customize the Starter Kit to suit your needs, because it is a complete system approach.

Why is this not just a ready-made system with a set of everything possible, in which I can change everything and voila — use it?

The changing is harder than creating. Each project is unique, as well as each design system for it. Only the approach, principles and sets of base elements for system building can be unified. This is exactly what the Starter Kit is. That's why the Starter Kit does not contain ready-made tokens and symbols.

Here is the Starter Kit and the design system based on it, what next, how to implement it in html and css?

You can apply values, scales, sizes by creating your own CSS & HTML framework, or by using some already existing one. The best solution is to look at the Superkube Framework made by us. It was designed and created so that you can quickly write HTML and CSS code based on the design system.