Slate Inventory Slots — 64px grid

Inventory slots at 64px with four states and the rarity frames. The empty socket is recessed with a light edge along the top and a shadow along the bottom, which is the whole trick: an inventory grid is read as a grid of holes, and a slot that does not look like a hole reads as a button.

An inventory grid does not need a panel, it needs a square that tiles: 7 files at 64×64, all with the same outer bounds, so a row of them lines up with no gap arithmetic. Put them 68 px apart and the borders read as a single grid rather than a row of separate boxes.

The states are drawn as structure, not colour. The selected slot gets corner ticks, the locked slot gets diagonal hatching, the hover slot lifts its border a step. This is deliberate: the inventory screen is the noisiest surface in most games, sitting under item art in every hue at once, and a state that is only a border colour is invisible the moment a red sword is sitting in the slot.

The three rarity frames reuse the health, mana and stamina colours from the rest of the family, each with a corner marker as well as a coloured border — so a player sorting by rarity is reading two signals, and neither of them is competing with the item art in the middle of the slot.

Everything is included as editable SVG and as flat transparent PNG at 1x, 2x and 4x. The slot interiors are transparent, so whatever you render behind the grid shows through instead of a baked background colour.

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