UI Packs

Inkwell Panel UI Kit — single-framed panels and buttons

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

  • ui
  • svg
  • transparent png
  • nine-slice
  • panel
  • button
  • menu
  • plain
  • comic
  • cartoon
  • bold
  • light ui
inked comic game menu panel with a signal red title strip and a recessed list area, next to a column showing the same square button in default, outlined hover and pushed-in pressed states
1600×800 previewtransparency shown as checkerboard

About this pack

A comic kit that gets its weight from ink, not from lighting. Every surface is a flat fill inside a heavy dark outline with a hard offset shadow underneath — no bevels, no gradients, nothing that pretends the screen has a light source. That is what makes it sit next to hand-drawn character art without looking like a different game.

Two nine-slice panels — a single-framed window frame with 26 px corners and a recessed inset frame with 18 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 152×52 base with 18 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 flat poster tones or the single signal 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.

Download

Direct link · no sign-up · no wait page
Download ZIP69 kB

Complete kit — SVG sources, PNG exports at 1x/2x/4x, licence and readme

Files included in this pack
FileFormatSizeDownload
Complete kit — SVG sources, PNG exports at 1x/2x/4x, licence and readmeZIP69 kBGet →
Window panel, editable SVGSVG1.2 kBGet →
Button (default state), editable SVGSVG798 BGet →

How to use it

  1. In Unity, import the PNGs, set Texture Type to Sprite (2D and UI), and set the border to 26, 26, 26, 26 for the window panel and 18, 18, 18, 18 for the buttons; then set Image Type to Sliced on the UI component.
  2. 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.
  3. 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.23214 for the 112 px panel and 0.11842 for the 152 px button.
  4. 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.
  5. The outline is four pixels at 1x and it is the whole style — if you scale the kit down below 1x the outline collapses and the panels stop reading as inked, so use the 1x export as the floor and grow from there.

License

Creative Commons Attribution 4.0 — Free for commercial use. Credit required. Full terms · What this means in practice

Copy-paste credit line
"Inkwell Panel UI Kit — single-framed panels and buttons" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/inkwell-panel-ui-kit