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 twelve tab button sprites: default, hover, pressed and disabled, each drawn three times — a standard 160×48 bar, a square icon button and a compact button for toolbars and inline actions. The three sizes are separate files rather than one scaled sprite because the drawing is size-dependent: the chamfer computed at 48 px is recomputed at the smaller ones, not shrunk. 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.

Four smaller parts cover what a menu needs between the panels: a tooltip with a pointer tail, a header bar that sits along the top of a panel, a section divider with a centre mark, and a label chip for counts and status tags. None of them are the window panel at another size — a nine-slice already stretches to any size, so a second file at a different width would be filler rather than a component.

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