Sketch Panel UI Kit — double-framed panels and buttons

Every edge in this kit is slightly wrong on purpose. The outline is sampled along its length and each point nudged, so no line is truly straight and no two corners bend the same way — the thing a ruled rectangle can never do. Shading is cross-hatching rather than a gradient, which is what keeps it reading as drawn rather than as a rounded rectangle with a filter over it.

Two nine-slice panels — a double-framed window frame with 18 px corners and a recessed inset frame with 12 px corners — cover almost every box a menu needs: dialogs, inventory grids, list backgrounds, tooltips and stat panels. Two concentric borders with a gap between them read as carved rather than drawn, which is what separates a crafted interface from a rectangle with a stroke. Both stretch cleanly to any size because the corners never scale and the centre is a flat fill.

On top of the panels sit four square button states: default, hover, pressed and disabled. They are drawn on the same 132×46 base with 10 px corners, so you can swap the texture on a single button widget and get the whole interaction loop without moving a rectangle. The pressed state drops its face two pixels and removes the top highlight rather than just darkening, which is what makes a button feel clicked rather than merely recoloured.

Everything ships twice. The SVG sources are the files the kit was drawn in — open them, change the six off-white paper tones or the single ink blue accent, and re-export. The PNG exports are flat, transparent and pre-scaled at 1x, 2x and 4x for engines that want bitmaps, with no premultiplied alpha and no baked-in shadow outside the sprite bounds.

Creative Commons Attribution 4.0 — Free for commercial use. Credit required. Full terms · What this means in practice