Dusk Panel UI Kit — title-barred panels and buttons
===================================================

Title-barred nine-slice dusk purple window panels, inset list frames and four
square button states, as SVG plus transparent PNG at 1x, 2x and 4x.

A hard-edged kit for pixel games that still want a real menu, with the title
bar built into the panel rather than bolted on. There are no rounded corners
and no anti-aliasing anywhere: every border is a single flat pixel row, which
is the only way a panel keeps its shape when a player runs the game at 3x on a
4K monitor. The violets are cool enough that amber reads as an alert without
needing red.

Two nine-slice panels — a title-barred window frame with 16 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. 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 square button states: default, hover, pressed
and disabled. They are drawn on the same 96×32 base with 8 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 night-violet tones or the single amber 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 16, 16, 16, 16 for the window panel and 8, 8, 8, 8 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.2 for the
    80 px panel and 0.08333 for the 96 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.
  - Every edge lands on a whole pixel and nothing is anti-aliased, so import
    the 1x PNG with filtering set to Point (Unity), Nearest (Godot) or
    Nearest-Neighbour (Unreal) and scale by whole numbers only.

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