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 includes an extensive typography guide. This makes it a perfect starter kit for any project built in Sketch or Figma.
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.
The color scheme aims to be simple without too many variations. Displayed in both HEX, RGB and a production variable (VAR).
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.
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.
Use alerts to give users quick feedback on performed tasks.
The avatar is available in three types: icon, initials and profile picture.
Buttons are pre-defined by type: default, icon left, icon right and icon only.
There are three button states: primary, secondary and disabled.
Each button type is also available in three sizes: large, medium and small.
Add a tag to give context to your content.
Just as with buttons there are three sizes per type of input field: large, medium and small.
You can resize and add labels or a description below input fields for instructions.
You can easily customize input fields to create various states.
There are also checkboxes, radios and toggles for true / false.
There are two types of dropdowns in three sizes: buttons and links.
Dropdowns are used for menus and other components such as datepickers.
Use pagination for content that are listed accross multiple pages.
A card is composed of a header and a container. Headers may include a title, tabs, buttons or dropdowns for additional actions.
Progress bars are used to monitor progress towards a specific target.
Similar to progress bars, a gauge indicate where your data falls over a particular range.
Use a bar chart or line charts to visualize data.
In some occasions, a slider works better than a regular input.
Built with headers and rows, a table is useful to display many items or content with measurable data.
Using tabs is a great way to toggle between content.
Use a notification to give users feedback.
A popover is a pop-up box that appears when the user clicks on an element.
Show additional information on top of an element.
Use a modal to display content over a current page.
A sidebar and top bars are the two main components for 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.