Neon Panel UI Kit — bracket-cornered panels and buttons
=======================================================

Bracket-cornered nine-slice high-contrast neon window panels, inset list
frames and four chamfered button states, as SVG plus transparent PNG at 1x, 2x
and 4x.

A sci-fi console kit built on cut corners and open frames. There is no
continuous border anywhere — four corner brackets mark the bounds and the rest
stays open, which is what makes a HUD read as an overlay on the world rather
than a window covering it. Chamfers do the rest: they read as machined metal
where a border radius reads as a mobile app.

Two nine-slice panels — a bracket-cornered 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.
There is no continuous border at all — four corner brackets mark the bounds
and the rest is open, so the panel frames content without boxing it in. 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 144×36 base with 10 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 space blue tones or the single cyan 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 10, 10, 10, 10 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.14286 for
    the 112 px panel and 0.06944 for the 144 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.
  - The corner brackets are the only border, so the panel needs a readable
    background behind it — over a bright skybox, drop a 40% black plate
    underneath rather than thickening the brackets.

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