Design Starter Kit Guide

The set is built on the principles of the atomic system. Thanks to pre-prepared guides and symbol structure, it helps you to create projects as quickly as possible. And with the help of well-designed styles, you can easily customize the pack for your project

👉 https://www.ls.graphics/dsk

This guide will explain how to work with this set.

First of all, make sure that you can see a page list in the left panel. If you don’t have the list, click on the Expand icon.

There will be six sections, but we’ll cover the most important of them:

  1. Setup page
  2. UI Starter Kit
  3. Illustrations Starter Kit
  4. Skeleton Starter Kit

1. Customize Colors and Typography

Switch to the Setup page. Here you can adjust the system’s visual style.
We used Shared Styles for each element. All styles are interconnected, and it’s easy to readjust the project according to your needs.

Change typography:

  1. Go to Customize Fonts artboard
  2. Select all text styles you want to change
  3. Change font in the right panel
  4. Then click on the appearance tab and press to update all text styles

The same process is with color styles. You can change each detail, shadows, colors, outlines — we set the whole system so you could customize design up to your needs

Also, it’s straightforward to change the logo:

  1. Go to Logo artboard
  2. Paste your logotypes in color and white versions inside this artboards
  3. Setup resizing constraints, pin to the left and fix size
  4. Logos will be changed across all system

2. UI Starter Kit

We built this set on the principles of an atomic system. It’s a massive library of symbols that we used for creating components

Of course, each detail has resizing constraints.

Nested Symbols and Overrides:

Each element that is used several times is made through symbols. Use overrides to customize symbols.

3. Illustrations Starter Kit

It’s a set with illustrations. We divided them into Items, Objects, Scenes, and Background artboards.

You can use elements separately, together or create your scenes like this:

Another thing that all premade scenes are built with symbols, so it’s easy to make changes with overrides

4.Skeleton Starter Kit

It’s the third pack of elements that are waiting for you in this kit — Skeleton Starter Kit. Do you need to design loading page before all UI elements appear on the screen? We got ya!

By changing the primary UI colors and updating styles, skeleton screens will be updated too, which means that you will always have an actual looking version

Thank you!

That’s it; we’ve covered the main points. Write to us at info@lstore.graphics if you have any other questions.

👉 Preview and Download

🔥 Design Tools