LiquidPro UI Kit for Sketch App
Last Updated on August 26, 2026 by Editorial Team
This is the Sketch version of the amazing LiquidPro UI Kit for Photoshop by DTAIL STUDIO. In includes a multitude of professional-looking layouts and GUI elements.
Look closely at the grid of cards and you can see exactly why this kit earns its name: nearly every screen is built around a slab of deep navy blue, almost black, punctuated by a single bright cyan accent. That two-tone discipline is the backbone of LiquidPro. Card headers, notification lists, file attachments, progress rings, bar charts and profile panels all sit inside rounded rectangles with generous padding, soft shadows and consistent corner radii. The dark cards handle titles and primary data (that “975”, “907”, “745” numeric display shows up again and again as a hero stat), while the lighter, white cards carry secondary content like body copy, comment threads and long-form text such as the “American Gods” and “Alien: River of Pain” list items you see scattered through the preview. It is a genuinely mature dashboard aesthetic, closer to what you would find in a polished fintech or productivity app than a generic wireframe kit.
What makes this useful beyond the visual style is the sheer range of component types packed into the grid. There are notification feeds, attachment lists with document icons, user profile cards complete with avatar placeholder, location and stats (“34k”, “7519”, “73 450”), survey and feedback modules, small toggle switches, circular progress indicators with percentage labels, simple bar and line charts, and comment sections. Each one is drawn at actual UI scale, so you are looking at real interface density rather than oversized demo art. That level of detail is exactly what makes a Sketch UI kit worth grabbing: you are not starting from a blank canvas, you are rearranging pre-styled, production-ready pieces.
Where LiquidPro Fits
This kit is built for screens that need to communicate data and status at a glance: analytics dashboards, admin panels, SaaS product interfaces, finance or reporting apps, and any mobile or web project where user profiles, notifications and document management coexist on the same screen. The dark card treatment reads especially well for app onboarding screens, account summaries and settings panels, while the lighter cards slot naturally into content feeds, help centers or messaging views. If your project needs a dependable design system for a productivity tool, a CRM, a survey app or a personal finance dashboard, this is a strong starting skeleton.
Because the palette is so tightly controlled, it also works well as a base for rebranding. Swap the cyan accent for your own brand color, keep the navy or drop it for a different neutral, and the entire kit will still hang together. The rounded corner radius and card-based structure make it flexible enough to restyle without redrawing the layout logic underneath.
Customizing the Components
Since everything is organized into distinct cards and modules, editing is mostly a matter of isolating the piece you need and adjusting it in place:
- Duplicate the specific card or module rather than building from scratch, then reposition it into your own artboard grid.
- Recolor the accent blue as a single swap; because it repeats across toggles, progress rings, highlighted list items and chart bars, changing it once and applying it consistently will retheme the whole kit fast.
- Replace placeholder text and numbers (the sample stats, file names and profile details) with your real content, keeping the same type hierarchy of large numeral, small label pattern used throughout.
- Adjust card padding and corner radius uniformly if you want a tighter or looser feel; the existing spacing is generous, so tightening it slightly can suit denser dashboards.
- Group related modules, like the notification list and attachment list, so you can drag entire sections between screens without losing alignment.
Pair these components with a clean sans-serif typeface for body copy and a slightly heavier weight for the numeral displays, since the kit already leans on strong numeric hierarchy to communicate data. Icons should stay simple and line-based to match the minimal document and chart icons already present. If you need additional screens beyond what is here, such as onboarding flows or empty states, building them in the same card-and-accent language will keep the whole product feeling like one coherent system rather than a patchwork of styles.