Reliquary Panel UI Kit — title-barred panels and buttons

The carved frame with the warmth taken out of it. Oak reads as a tavern; this reads as a crypt, and the difference is not only the palette — the header band replaces the second concentric frame, and a chamfered button replaces the rounded tab. The corner finials and the gems set into them are the same geometry in both, which is what keeps them the same style rather than two unrelated fantasy kits.

Two nine-slice panels — a title-barred window frame with 12 px corners and a recessed inset frame with 10 px corners — cover almost every box a menu needs: dialogs, inventory grids, list backgrounds, tooltips and stat panels. A title band is built into the top of the panel, so a dialog header needs no second sprite and no manual alignment. 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 chamfered button states: default, hover, pressed and disabled. They are drawn on the same 128×56 base with 6 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 deep indigo tones or the single pale silver 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