Create beautiful dashboards and web apps with a 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.
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.
With styles functionality, you can now build and maintain every part of your design system in Figma.
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.
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 are displayed in both HEX, RGB and a production variable (VAR).
Lato is the primary typeface. The hierarchy comes in three parts: headings, bold and regular body.
Below are bold and regular styles.
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.
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.
Photos should be square and at least 400 × 400 pixels.
Buttons are available in three pre-defined types: primary, secondary and disabled.
There are three sizes: large, medium and small.
Just as with buttons there are two sizes per input field: medium and small.
Dropdowns are used for menus and other components such as datepickers.
Use alerts to give users quick feedback on performed tasks.
To show additional information a tooltip can be displayed on hover. Various directions are possible based on position: top, right, left and bottom.
A card is composed of a header and a container. Headers may include buttons and dropdowns for additional actions.
To present categorical data, use a bar chart. Bars are proportional to the values that they represent.
Progress bar chart can help you to monitor progress towards a target.
Built with headers and rows, a table is useful to display many items or content with measurable data.
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.