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

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

Flat design with the radius pulled almost all the way in. The light flat
family runs a 20px corner and pill buttons because it is aimed at casual play;
this one runs 8px and square buttons because a strategy screen is mostly rows
and a generous radius wastes the width where the numbers go. There are no
outlines and no shading anywhere — depth is three stacked shadow passes and
nothing else.

Two nine-slice panels — a title-barred window frame with 8 px corners and a
recessed inset frame with 6 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 120×36 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 blue-grey tones or the single mint green 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 8, 8, 8, 8 for the window panel and 6, 6, 6, 6 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.09091 for
    the 88 px panel and 0.05 for the 120 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: CC0-1.0 — see LICENSE.txt
Page: https://www.colorosse.com/assets/2d/ui/mint-panel-ui-kit
More free assets: https://www.colorosse.com
