Carbon Panel UI Kit — bracket-cornered panels and buttons

The same five-stop specular gradient and brushed line pattern as the neutral steel family, over a much darker palette and with the body opened up into corner brackets. That last change is what turns a panel into an instrument bezel: a closed border reads as a window, four brackets read as something bolted to a dashboard. The rivets stay, because a cockpit panel that is not fixed to anything is a rendering.

Two nine-slice panels — a bracket-cornered window frame with 10 px corners and a recessed inset frame with 8 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 152×44 base with 4 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 near black tones or the single warning amber 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.

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