Inkwell UI Controls — checkbox, toggle and slider

Controls at 24px with the same ink outline as the panels and the same hard terminator on the face. The checked state fills with the accent and keeps the outline weight identical, because on a light ground a state told only by hue disappears in a printed screenshot — and this style is built to look printed.

The set covers the four controls a settings screen actually needs: a checkbox, a radio button, a toggle switch and a slider with a separate knob. Each stateful control ships both states as its own file, at a 24×24 base — the toggle is 48×24 and the slider track is 192 px wide so it can be nine-sliced to any length.

On and off are drawn as different shapes, not different colours. An unchecked box is an empty recess; a checked one is a filled surface with a tick cut into it. That matters because a settings screen is exactly where a player is most likely to be running a colourblind mode, a greyscale shader, or a heavily tinted post-process — and a state you can only read by hue disappears under all three.

The slider ships as a track and a knob rather than a single sprite. Animating a one-piece slider means redrawing it per value; with two pieces you stretch the fill and move the knob, which is what every UI toolkit already expects. The knob carries a centre notch so its rotation and position stay readable at small sizes.

Everything is included as editable SVG and as flat transparent PNG at 1x, 2x and 4x, drawn from the same six flat poster tones as the rest of the Inkwell family.

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