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

UI Design System

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


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!


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


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.


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


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


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


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


Use alerts to give users quick feedback on performed tasks.

UI Design System - Alerts


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

UI Design System - Avatars


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


Add a tag to give context to your content.

UI Design System - Tags


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


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


Use pagination for content that are listed accross multiple pages.

UI Design System - Pagination


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


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

UI Design System - Gauges


Use a bar chart or line charts to visualize data.

UI Design System - Charts


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

UI Design System - Sliders


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

UI Design System - Tables


Using tabs is a great way to toggle between content.

UI Design System - Tabs


Use a notification to give users feedback.

UI Design System - Notification


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

UI Design System - Popovers


Show additional information on top of an element.

UI Design System - Tooltips


Use a modal to display content over a current page.

UI Design System - Modals


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