Slate HUD Bars — health, mana and stamina

Three status bars and the frame they sit in, drawn to match the Slate panel kit. Nothing here is decorative — the frame is the thinnest border that still reads as a container at 24 pixels tall, and the fills carry all the colour.

The frame is a nine-slice with 8 px end caps, so it stretches to any width without the ends deforming — a full-width boss bar and a 40 px enemy nameplate bar use the same file.

The fills are separate sprites rather than baked into the frame, which is the part that matters in practice: you scale the fill's width from zero to full and the frame never moves. Each fill is drawn in three horizontal bands — a bright top band, a mid tone and a dark bottom edge — so it still reads as a bar at small sizes where a flat rectangle turns into a smear.

There are three colours, one per resource: health, mana and stamina. They are spaced apart in brightness as well as hue, which is the part that survives a greyscale screenshot and the most common forms of colour blindness. A set tuned to identical lightness looks balanced in a swatch row and collapses into one grey block on screen.

The segmented variant adds 9 notch lines over the same frame, for games that count discrete pips — hearts, charges, ammo — rather than a continuous percentage. It is a separate file rather than an overlay, so you can drop it in without changing your bar widget. Everything is included as editable SVG and as flat transparent PNG at 1x, 2x and 4x.

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