Felucca Online

The format every icon of the build system follows (#147–#150, contract § 3.4 of docs/builds-implementation.md). Stream I1 paints the weapon abilities, I2 the other groups in the same format, U puts them in the HUD. The shared kit is tools/pixel/icons/abilities/kit.px.js (pxl, the pixel-art DSL): palette, element ramps, slot frames and the escape mark. Other groups include() it instead of copying it, so a colour changes in one place.

Format

24 × 24 px, RGBA PNG, sRGB, hard pixels (no semi-transparent pixels, no smoothing).
The HUD draws them at × 2 (48 px at UI scale 1), nearest-neighbour; any other size is a whole multiple. Tooltips and tables may show them at × 1.
One file per key: assets/ui/icons/<group>/<key>.png, key = the catalogue's key (docs/builds/catalog.py).
Each group is also packed into assets/ui/icons/<group>.png + <group>.json by tools/pixel/icons/abilities/pack.py <group> (keys in alphabetical order, 16 to a row, no padding):
```
{ "w": 24, "h": 24, "icons": { "cleave": [0, 0, 24, 24], "sidestep": [24, 0, 24, 24] } }
```
Rects are [x, y, w, h] in sheet pixels. The packer reads every PNG in the group's folder, so a group two streams paint (weapon and armour abilities) is packed once after both land.

Layout

 0  outline (near-black k), the whole edge
 1  border: the slot frame (below)
 2..21  glass: the picture's 20 x 20 field, top half b, bottom half c

The picture stays inside x, y = 2..21 (the kit clips it there). The corners of the glass belong to the frame, drawn over the picture (E brackets 3 px, armour rivets 1 px): keep important art clear of them.
Top-right 6 × 6 (x 16..21, y 2..7) is the escape tab: only background art may go under it.
The glass is dark, so pictures are read by their light tones: draw the shape in its mid and light tones and use the dark tones inside it, never as an outline against the glass.
Light comes from the top left (as the frames' bevel). 2–4 tones per material, no 1 px islands, no gradients.
An icon says what the ability does (a spin, a dash, a burning circle, a wall), not only what it is used with. The weapon may appear, smaller, as the actor.

Slot frames

Slot	Frame	Colours (light / dark)
Q	square, steel	`#9c968a` / `#5c5850`
W	copper, corners cut diagonally	`#c07a4a` / `#6a3a22`
E (ultimate)	gold, a bright bracket in each inner corner	`#e6bc5c` / `#8a6420`, brackets `#fff0b8`
R body, D head, F feet	pewter, a rivet in each inner corner	`#9a9cb0` / `#4a4a5a`

Shape and colour both differ, so the six-key bar reads at a glance and without colour vision. States, items and buckets choose their own frame in this spirit (same size, same outline, same glass), one per group.

Elements

The picture's effect is drawn in its element's ramp. The effect sprites (assets/vfx, § 3.3) use the same four tones, so an icon and its effect look alike.

Element	Dark	Mid	Light	Highlight
Physical (steel)	`#3c4149`	`#6f7884`	`#aeb6bf`	`#e4e8ea`
Fire (ember)	`#6e2214`	`#c4481e`	`#f08c30`	`#ffd47c`
Cold (ice)	`#1e4a70`	`#3c8cc4`	`#8cd0ee`	`#e4f7ff`
Lightning (violet-white)	`#4a2c80`	`#8c64dc`	`#c8b6ff`	`#f8f2ff`
Poison (green)	`#284a1c`	`#4e8a2c`	`#94c64c`	`#daf09c`
Holy (gold)	`#6e4c14`	`#c48c2c`	`#f0ca5c`	`#fff4bc`
Arcane (blue)	`#1c2c70`	`#3c54c8`	`#709cf0`	`#c6deff`

The element is the ability's first element tag; an ability with none takes its family's damage element (Nature and Curse heals green, Holy gold, the melee families steel).
Two elements (rain and lightning, a wet net): the second takes keys 5–8 in the kit.
Weapons and tools keep their materials (steel #3c4149 … #e4e8ea, wood #3e2614 #6e4526 #a2703f); stone walls #4a4038 #7c6e5e #b0a08a; blood #6e1a22 #b8323a; marks that are no element (taunt, buffs, arrows of movement) ivory #e8dfc8 / #fffaf0.
Water (rain, a wet net, Soaked) is drawn in the Cold ramp: it is what turns into Frozen.
Figures follow the notoriety colours of the UI (#59): you ivory #e8dfc8 #b0a08a, enemies crimson #b8323a #6e1a22, allies teal #7cc8bc #2f7a74, a former place (a dash's start, a feint) grey #9c968a #5c5850. A figure drawn in an element (frozen, cursed) takes its ramp.
Debuff and buff marks: chevrons down (slowed, weaker) and up (faster, stronger), stars over the head (stunned), a crossed circle (silenced), a reticle (marked).

Escape mark

Abilities tagged Escape (and every F) carry the escape tab: a dark tab in the top-right corner with an ivory arrow pointing out of the frame. It is the only mark on the frame; ultimates are told by the E frame, not by a mark.

Making them

Weapon ability sources: tools/pixel/icons/abilities/ — kit.px.js (format), parts.px.js (figures, weapons upright / leaning _d / pointing right _h, effect pieces: drops, skulls, hearts, pluses, shields, flames, flakes, bolts, bricks, crystals…, and drawn helpers swoosh, burst, zone, hop, tiles, loop, pointer, aura, crack, fig), abilities.px.js (one icon(...) line per ability, by family). Other groups may include parts.px.js too.
Sources: tools/pixel/icons/<group or stream>/*.px.js, built with pxl (node <pxl>/bin/pxl.js build <file> --out <scratch>); icon(key, slot, element, items, { escape, el2 }) from the kit makes one icon. Reuse parts (_name sprites, helper functions) for weapons and effects, so a set stays one style and a change is one edit.
pack.py <group> copies the built PNGs, packs the sheet and checks the keys against the catalogue; --contact writes a review sheet at × 1 and × 2 on the HUD's glass colour.
Look at every icon at × 1 and × 2 before handing over.