Slate Panel UI Kit — single-framed panels and buttons
=====================================================

Single-framed nine-slice dark slate window panels, inset list frames and four
square button states, as SVG plus transparent PNG at 1x, 2x and 4x.

A small, deliberately plain interface kit for games that need a readable menu
without a whole art direction attached to it. The palette is six neutral slate
tones plus one warm accent: it sits under white or light grey text at
comfortable contrast, and it does not fight whatever colour your game already
uses, which is the main reason it is this dull on purpose.

Two nine-slice panels — a single-framed window frame with 24 px corners and a
recessed inset frame with 16 px corners — cover almost every box a menu needs:
dialogs, inventory grids, list backgrounds, tooltips and stat panels. A single
continuous border keeps the panel quiet enough to sit behind dense text. 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 128×40 base with 12 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 neutral slate tones or the single warm gold 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.

HOW TO USE

  - In Unity, import the PNGs, set Texture Type to Sprite (2D and UI), and set
    the border to 24, 24, 24, 24 for the window panel and 12, 12, 12, 12 for
    the buttons; then set Image Type to Sliced on the UI component.
  - In Godot 4, use a NinePatchRect and set the patch margins to the same
    numbers, or drop the SVG straight in and let Godot rasterise it at the
    scale you set in the import options.
  - In Unreal, import as a Texture2D, create a Slate Brush with Draw As set to
    Box, and enter the margin as a fraction of the texture size — 0.25 for the
    96 px panel and 0.09375 for the 128 px button.
  - For crisp results at non-integer UI scales, use the 2x or 4x PNG rather
    than upscaling the 1x, or point your engine at the SVG source and let it
    rasterise at the final size.

License: CC-BY-4.0 — see LICENSE.txt
Page: https://www.colorosse.com/assets/2d/ui/slate-panel-ui-kit
More free assets: https://www.colorosse.com
