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

Dashboard UI Kit 2.0

Design the next-generation app with Sketch and Figma; including HTML, CSS and well-organized Sass files.

Buy Now Live Preview

Create beautiful dashboards and web apps with a totally redesigned interface. It is not only designed for Sketch and Figma but as a fully featured HTML template. This UI kit leaves your interface with more power and makes it the perfect design kit for Sketch, Figma and web development. Dashboard UI Kit 2.0 is built on a custom framework making it light and super fast.

  • Sketch & Figma: All modules and components have been designed in Sketch and Figma.
  • Custom framework: With a simple grid and global classes, build consistent pages with ease.
  • Sass: Available in CSS but also shipped with well-organized Sass files.
  • Style guide: Maintain a consistent style and visual language across all areas of your product.
  • Onboarding screens: Signup, login and forgot password screens are available.
  • 8-point grid: Everything is following a consistent grid to help maintain a quality rhythm between 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.

Dashboard UI Kit 2.0 - Screens

Sketch & Figma

Dashboard UI Kit 2.0 takes advantage of the latest features in Sketch 52. Text and layer styles in symbols can now be overridden.

Dashboard UI Kit 2.0 - Sketch

With styles functionality, you can now build and maintain every part of your design system in Figma.

Dashboard UI Kit 2.0 - Figma

Custom Framework

The code doesn’t rely on any third party framework or tool. Everything is neatly organized in Sass and has been heavily focused on performances. And if you’re not used to Sass, no worries, plain CSS is also available.

Opalin HTML Template - Custom Framework

Style Guide

The style guide gives an overview of all important styles and elements that defines Dashboard UI Kit 2.0. Everything is linked with symbols in Sketch and components in Figma, thus, changes will propagate throughout the file.

Colors

Colors are displayed in both HEX, RGB and a production variable (VAR).

Dashboard UI Kit 2.0 - Style Guide (Colors)

Typography

Lato is the primary typeface. The hierarchy comes in three parts: headings, bold and regular body.

Dashboard UI Kit 2.0 - Style Guide (Typography)

Below are bold and regular styles.

Dashboard UI Kit 2.0 - Style Guide (Typography)

With a slightly increased font-size and line-height, the paragraph style is great for readability. There is also a lead style to support headings as a subtitle.

Dashboard UI Kit 2.0 - Style Guide (Typography)

Icons

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.

Profile Pics

Photos should be square and at least 400 × 400 pixels.

Dashboard UI Kit 2.0 - Style Guide (Profile Pics)

Buttons

Buttons are available in three pre-defined types: primary, secondary and disabled.

Dashboard UI Kit 2.0 - Style Guide (Buttons)

There are three sizes: large, medium and small.

Dashboard UI Kit 2.0 - Style Guide (Buttons)

Forms

Just as with buttons there are two sizes per input field: medium and small.

Dashboard UI Kit 2.0 - Style Guide (Forms)

Dropdowns

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

Dashboard UI Kit 2.0 - Style Guide (Dropdowns)

Notifications

Use alerts to give users quick feedback on performed tasks.

Dashboard UI Kit 2.0 - Style Guide (Notifications)

Tooltips

To show additional information a tooltip can be displayed on hover. Various directions are possible based on position: top, right, left and bottom.

Dashboard UI Kit 2.0 - Style Guide (Tooltips)

Cards

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

Dashboard UI Kit 2.0 - Style Guide (Cards)

Bar Chart

To present categorical data, use a bar chart. Bars are proportional to the values that they represent.

Dashboard UI Kit 2.0 - Style Guide (Bar Chart)

Progress Bars

Progress bar chart can help you to monitor progress towards a target.

Dashboard UI Kit 2.0 - Style Guide (Progress Bars)

Tables

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

Dashboard UI Kit 2.0 - Style Guide (Tables)

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

All Access $89 / year
  • Download all our assets.
  • 1 year access to new releases.
  • 1 year access to updates.
  • Unlimited downloads.
  • Priority support.
All Access $75 / 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