Sumi Inventory Slots — 76px grid
================================

76×76 ink wash inventory slots: empty, hover, selected and locked states plus
three rarity frames. SVG and transparent PNG.

Slots at 76px with nine segments on the matching bars. An action game shows a
small hotbar rather than a full grid, so the slot is large and the selected
state uses corner ticks that survive over bright ability art.

An inventory grid does not need a panel, it needs a square that tiles: 7 files
at 76×76, all with the same outer bounds, so a row of them lines up with no
gap arithmetic. Put them 80 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.

HOW TO USE

  - Lay the slots out on a 80 px pitch — the 76 px sprite plus a 4 px gutter —
    and the borders stay one pixel apart instead of doubling up.
  - Draw the item icon centred in the slot at roughly 53 px; the inner recess
    is 70 px, so anything larger will touch the border and lose the frame.
  - Swap the whole slot sprite for the selected and locked states rather than
    overlaying a tint, because the corner ticks and hatching are part of the
    sprite.
  - The rarity frames are drop-in replacements for the empty slot — same
    bounds, same recess — so a rarity change is a single texture swap with no
    layout change.

License: CC-BY-4.0 — see LICENSE.txt
Page: https://www.colorosse.com/assets/2d/ui/sumi-inventory-slots
More free assets: https://www.colorosse.com
