• Sketch
  • Figma
  • Illustrator
  • Photoshop
  • Print
  • HTML
  • Sass

UI Design System

Design awesome desktop apps with our starter kit for Sketch and Figma.

Download

Our desktop design system for Sketch and Figma includes over 200 responsive symbols, charts and an extensive style guide. It’s the perfect tool to work faster, smarter and to save precious time. Components are responsive and they all share the same goal: to evoke simplicity. This leaves your interface with more power and makes it the perfect starter kit for any project built in Sketch or Figma.

  • 200+ responsive symbols: Distorted symbols is a thing of the past, they all adapt when resized.
  • Style guide: A guide covering all UI elements to keep you and your team up to date.
  • Flexible charts: Includes a collection of bar charts, line charts, pie charts and gauges.
  • Nested symbols: They can all be overridden with various content, leaving your interface with more power and control.
  • 8-point grid: Everything is following a consistent grid, this makes the design consistent. It also helps maintain a quality rhythm between your elements. Read more about 8-point grid over here.
  • Icons: This UI kit is using the material icons by Google. Best of all, you can easily download SVGs from their online library.
  • Organized: All layers are grouped and well-named, this is one of our core value!

Symbols

All symbols are responsive, organized and follows a simple design language. They can be overridden with various content, leaving your interface with more power and control.

UI Design System - Symbols UI Design System - Figma

Styles

UI Design System includes an extensive typography guide. This makes it a perfect starter kit for any project built in Sketch or Figma.

UI Design System - Styles

Style Guide

Below is an overview of all important styles and elements that defines UI Design System.

Grid

Based on the 8-point grid, note that it’s not the width of the columns that counts but the spacing in-between. In the example below there is a 16px margin.

UI Design System - Grid

Colors

The color scheme aims to be simple without too many variations. Displayed in both HEX, RGB and a production variable (VAR).

UI Design System - Colors

Typography

We use Lato as primary typeface. The hierarchy is divided in three parts: headings, bold and regular body styles. There’s also a paragraph style with larger font size and line-height.

UI Design System - Typography

Icons

The easy to use material icons by Google are excellent for web, Android and iOS projects. Based on the 8-point grid, they are preferably displayed at a multiple of 24px.

UI Design System - Icons

Alerts

Use alerts to give users quick feedback on performed tasks.

UI Design System - Alerts

Avatars

The avatar is available in three types: icon, initials and profile picture.

UI Design System - Avatars

Buttons

Buttons are pre-defined by type: default, icon left, icon right and icon only.

UI Design System - Button Types

There are three button states: primary, secondary and disabled.

UI Design System - Button States

Each button type is also available in three sizes: large, medium and small.

UI Design System - Button Sizes

Tags

Add a tag to give context to your content.

UI Design System - Tags

Forms

Just as with buttons there are three sizes per type of input field: large, medium and small.

UI Design System - Input Types

You can resize and add labels or a description below input fields for instructions.

UI Design System - Input Area

You can easily customize input fields to create various states.

UI Design System - Input States

There are also checkboxes, radios and toggles for true / false.

UI Design System - Input Checkboxes

Dropdowns

There are two types of dropdowns in three sizes: buttons and links.

UI Design System - Dropdowns

Dropdowns are used for menus and other components such as datepickers.

UI Design System - Datepickers

Pagination

Use pagination for content that are listed accross multiple pages.

UI Design System - Pagination

Cards

A card is composed of a header and a container. Headers may include a title, tabs, buttons or dropdowns for additional actions.

UI Design System - Cards

Progress Bars

Progress bars are used to monitor progress towards a specific target.

UI Design System - Progress Bars

Gauges

Similar to progress bars, a gauge indicate where your data falls over a particular range.

UI Design System - Gauges

Charts

Use a bar chart or line charts to visualize data.

UI Design System - Charts

Sliders

In some occasions, a slider works better than a regular input.

UI Design System - Sliders

Tables

Built with headers and rows, a table is useful to display many items or content with measurable data.

UI Design System - Tables

Tabs

Using tabs is a great way to toggle between content.

UI Design System - Tabs

Notifications

Use a notification to give users feedback.

UI Design System - Notification

Popovers

A popover is a pop-up box that appears when the user clicks on an element.

UI Design System - Popovers

Tooltips

Show additional information on top of an element.

UI Design System - Tooltips

Modals

Use a modal to display content over a current page.

UI Design System - Modals

Navigation

A sidebar and top bars are the two main components for navigation.

UI Design System - Navigation

UI Design System is using Lato as a font. If it’s not already in your collection you can download it for free over here.

All Access $99 / year
  • Download all our assets.
  • 1 year access to new releases.
  • 1 year access to updates.
  • Unlimited downloads.
  • Priority support.
All Access $79 / 6 months
  • Download all our assets.
  • 6 month access to new releases.
  • 6 month access to updates.
  • Unlimited downloads.
This Asset Only $48
Join All Access Join All Access Purchase