UIDE Kit free UI kit and style guide

Last Updated on June 29, 2026 by Editorial Team

UIDE Kit is a Style Guide Sketch template created by Mateusz Dembek

What the kit includes:
– color palette
– typography
– buttons
– text inputs (regular, hover, active + validation)
– dropdowns (normal, hover and active)
– switch (on/off)
– checkbox (off, hover, on)
– radio (off, hover, on)
– slider
– tooltips
– calendar & date picker
– 4 different graphs
– tables
– nav bars & menus (lots of them 😉 )
– alerts

Reading the Chart Module in the UIDE Kit

The four chart cards in this preview show how the kit handles data visualization, and they follow a consistent visual language: white cards with generous padding, a small gray label in the top left, and a flat four-color system running through pie, donut, bar, and line formats. Blue, green, amber, and red repeat across every chart, which means once a user learns what a color means in one graph, that meaning carries over to the next.

Each card keeps its chart centered with legend dots and labels sitting quietly underneath. Nothing competes with the data itself. There is no drop shadow drama, no gradient fills, no 3D tilt. This restraint is what makes the module usable inside a real dashboard rather than just a nice-looking mockup.

Pie and Donut Charts

The pie chart uses solid, saturated fills with white percentage labels placed directly on each segment, which works well for quick-glance reporting where the exact number matters more than the trend. The donut chart takes a different approach: instead of solid wedges, it renders each value as an arc against a faint gray track, similar to a loading ring or progress indicator. This makes the donut version better suited to KPI panels or goal-tracking widgets where you want a sense of “how full” something is rather than a strict share-of-total breakdown.

Bar and Line Charts

The bar chart uses the same four colors but assigns one color per bar rather than per category, which works cleanly when each bar represents a distinct item being compared side by side. Grid lines are light and unobtrusive, and value labels sit above each bar. The line chart reuses three of the four colors to track separate series across four points on the x-axis, with small circular markers at each data point. The crossing lines in the preview show the kit can handle overlapping trends without the chart turning into visual noise.

Where This Style Guide Fits in a Real Project

A style guide like this earns its keep on projects where consistency across many screens matters more than any single hero design. It suits admin panels, SaaS dashboards, internal tools, analytics platforms, and onboarding flows where forms, alerts, and charts all need to look like they came from the same designer, even if three different people are building the screens.

• Admin and dashboard products that need repeatable chart components alongside form controls
• SaaS marketing sites that want a consistent design language between the landing page and the in-app experience
• Design system starter kits for teams that need to agree on color and component states before building a full pattern library
• Client presentations where a defined style guide reassures stakeholders that the visual system has been thought through

Adapting the Charts to Your Own Data

Because the charts are built from simple geometric shapes rather than photographic or textured elements, they are straightforward to rework in any vector or design editor.

• Select individual arc or wedge shapes and adjust their sweep angle to reflect new percentages, keeping the stroke width consistent across segments
• Recolor the four-value palette as a group first, then spot-check individual charts so blue, green, amber, and red keep the same meaning everywhere they appear
• For the bar chart, resize each bar’s height individually while keeping the baseline anchored, then nudge the value label to sit flush above the new height
• For the line chart, move the anchor points of each path and let the connecting line update, then reposition the circular markers to sit exactly on the new points
• Update legend text and dot colors last, once the chart values are final, so the labels always match what viewers see

Pairing the Charts With the Rest of the Kit

The real value of this asset shows up when the charts sit next to the other components mentioned in the kit, like tables, dropdowns, and alerts. A dashboard screen rarely needs charts alone; it needs a filter dropdown above the chart, a table below it breaking the numbers down by row, and an alert banner ready to flag when a metric crosses a threshold. Because the color palette and spacing rhythm are shared across all these pieces, dropping a bar chart next to a data table feels like one continuous system rather than two components stitched together.

Tooltips from the kit also pair naturally with charts, since hovering over a bar or line point is one of the most common places a tooltip gets used in a real interface.

Practical Questions About Using This Kit

Can I use just the charts without the rest of the style guide?
Yes. The chart cards are self-contained modules, so you can lift them into a project even if you are not adopting the full button and form system, though matching the surrounding UI to the same flat color palette keeps things visually coherent.

Why does the donut chart look so different from the pie chart?
They are built for different jobs. The pie chart communicates a full breakdown of parts to a whole, while the donut’s ring-against-track style reads more like a progress or completion metric, similar to a battery or loading indicator.

How many data series can the line chart realistically handle?
The preview shows three lines crossing over four points, which is close to a practical ceiling for this style. Flat, thin lines without shadow or depth cues start to blur together past four or five series, so it works best for comparing a small number of trends at once.

Do I need to keep the same four colors?
You can swap the palette to match a different brand, but keeping it to four clearly distinct hues, one of them typically reserved for alerts or negative values like the red shown here, preserves the readability that makes this chart set work.