Oak Panel UI Kit — double-framed panels and buttons

A warm wooden frame for the kind of game that has an inventory grid and a quest log. Two concentric borders with a gap between them give it a carved look instead of a flat brown rectangle, and the tab-shaped buttons sit on a brass baseline so a row of them reads as a set of pages rather than a row of separate controls. Everything here is a size up from a standard kit, because a fantasy menu is usually looked at, not glanced at.

Two nine-slice panels — a double-framed window frame with 32 px corners and a recessed inset frame with 20 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 tab button states: default, hover, pressed and disabled. They are drawn on the same 160×48 base with 16 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 wood-brown tones or the single polished brass 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