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

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

A light interface for games that do not take place at night: puzzle games,
management sims, card games, anything that reads better on paper than on a
screen. Everything is inverted from a normal game kit — the panel body is the
lightest tone and the borders are the darkest — and the buttons are full
pills, which is the shape that stops a light rectangle from looking like an
unstyled div.

Two nine-slice panels — a single-framed window frame with 20 px corners and a
recessed inset frame with 14 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 pill button states: default, hover, pressed and
disabled. They are drawn on the same 140×44 base with 22 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 warm paper tones or the single rust red 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 20, 20, 20, 20 for the window panel and 22, 22, 22, 22 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.19231 for
    the 104 px panel and 0.15714 for the 140 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.
  - This is the only light kit in the catalogue, so it wants dark text on top
    — the ink value in the SVG is the one the contrast was tuned against, and
    swapping it for pure black actually lowers legibility on the warm paper
    tone.

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