Phone game tools: art brief
5 Oct 2026. Art for the power-ups and tools in the phone-game tools mockup. Coordinate Drop's items are required, because the mockup draws its crate in CSS and the pack has nothing for it. Odd One Out's are optional, because the build can ship on SF Symbols and swap the art in later.
1. Deliverables
RequiredCoordinate Drop
Drop these beside the existing sheets in Image-Assets/Phone-Games/Coordinate-Drop/coordinate-drop-1x-production/.
| Request | File | Native size | Frames |
|---|---|---|---|
| CD-4a | cd_crate.png | 96 × 16 | six 16 × 16 |
| CD-4b | cd_chute.png | 64 × 16 | two 32 × 16 |
| CD-4c | cd_powerups.png | 64 × 16 | four 16 × 16 |
| CD-4d | cd_reticle_armed.png | 16 × 16 | one |
| CD-4e | cd_given.png | 8 × 8 | one |
| CD-4f | cd_meteor_big.png | 96 × 24 | four 24 × 24 · nice to have |
OptionalOdd One Out
Drop these in Image-Assets/Phone-Games/Odd-One-Out/tools/.
| Request | File | Size | |
|---|---|---|---|
| OO-T1 | ooo_tool_freeze.png | 160 × 160 | Freeze badge |
| OO-T2 | ooo_tool_clear.png | 160 × 160 | Clear One badge |
| OO-T3 | ooo_tool_alibi.png | 160 × 160 | Alibi badge |
| OO-T4 | ooo_tool_overtime.png | 160 × 160 | Overtime badge |
| OO-T5 | ooo_tool_twostep.png | 160 × 160 | Two-Step ×2 badge |
| OO-T6 | ooo_ring_frost.png | 384 × 384 | Frost over the clock ring |
2. Coordinate Drop file format
This is the same contract as the existing 1× pack.
- Native 1×, never pre-scaled. The game draws every pixel as 2 × 2 points, so one 16 px tile is one grid unit (32 pt) on screen.
- Every pixel is alpha 0 or 255. Clear pixels are RGB (0, 0, 0). No anti-aliasing.
- Outline in ink
#0B0D3C, one pixel, as the meteor and marker do. - Frames run left to right, with no padding or gutters.
- The importer checks the exact size, the alpha rule and the color guard, and names the first bad pixel if one fails.
Only the pack's 18 colors:
sky0 #1B1F4A
sky1 #202653
sky2 #252F63
sky3 #2A3570
sky4 #2E3A7A
white #DDE3FF
grass #4CAF3E
grass_dark #2F7D2A
dirt #7A4B2A
dirt_dark #5A3520
stone #5B5F6B
stone_dark #41444D
cave #12163E
core #FFF6E0
fire #FF5A1F
fire_dark #C8310F
cyan #4FE3F0
ink #0B0D3C
Two colors change from the mockup. The pack has no yellow, amber or gold, so Payload and anything armed switch from gold to fire #FF5A1F. Survey's given points switch from gold to white, so they never look like the cyan answer marker.
3. Coordinate Drop assets
The diagrams below are drawn at 6× (each frame is 16 px wide, shown 96 px). Orange dots mark anchors.
CD-4a · Supply crate · cd_crate.png · 96 × 16
1
2
3
4
5
6
| Frame | What it shows |
|---|---|
| 1 | Closed and upright: the falling pose under the chute |
| 2 | Closed, tilted about 10° left (sway) |
| 3 | Closed, tilted about 10° right (sway) |
| 4 | Landed squash: 16 wide × about 12 tall, sitting on the bottom row |
| 5 | Lid popping: lid lifted 2–3 px, with a core #FFF6E0 light line in the gap |
| 6 | Burst open: lid gone, a core and white flash rising out of the box |
- Body: dirt planks with dirt_dark seams and a dirt_dark cross brace or band. A 1 px white highlight on the top-left edges, and an ink outline.
- A small cyan diamond on the front (3–5 px), like the answer marker, ties the crate to the game's "hit" color.
- Anchor: bottom center, (8, 15). The chute hangs from the crate's top edge.
- After frame 6 the game flies the power-up icon (CD-4c) to the cargo slot, so no icon is drawn inside the crate.
CD-4b · Parachute · cd_chute.png · 64 × 16
1
2
The cyan bars mark where the cords end: x = 8 and x = 23, the crate's top corners.
- Frame 1 leans slightly left, and frame 2 slightly right. The game alternates them as the crate drifts down, and drops the chute on landing.
- A half-dome canopy about 28 px wide and 9–10 px tall, in alternating white and cyan panels, with an ink outline.
- Two cords run from the canopy's lower corners to the bottom row, ending at x = 8 and x = 23 so they land on the corners of a 16 px crate centered below.
- Anchor: bottom center, (16, 15), placed on the crate's top edge.
CD-4c · Power-up icons · cd_powerups.png · 64 × 16
1 Payload
2 Big Rock
3 Survey
4 Mirror
| Power-up | Idea |
|---|---|
| Payload | A meteor head with a fire trail, or a fire diamond with a core center. It should read as "hot". |
| Big Rock | A round boulder in stone and stone_dark, filling the 16 px nearly edge to edge so it looks heavy. |
| Survey | Two hollow white diamonds joined by a dotted line: two points plotted. |
| Mirror Line | A diagonal line with one solid dot on each side of it: a point and its reflection. |
- Shown in the cargo slots at 32 pt, on the slot's navy chip
#1B1F4A, and on the armed slot's fire border. Keep the ink outline all the way round. - Nothing thinner than 1 px, and no detail that needs 2 px to read.
CD-4d · Armed reticle · cd_reticle_armed.png · 16 × 16
- The same geometry as
cd_reticle.png, pixel for pixel, with the ring in fire and the center dot in core. It replaces the reticle while Payload or Big Rock is armed. - If one reticle can't serve both, keep this one for Payload. Big Rock shows through its meteor (CD-4f) or a larger ring drawn in code.
CD-4e · Given point · cd_given.png · 8 × 8
- Survey's marker for a point the prompt gives you: the same diamond footprint as
cd_marker.png, hollow. A white ring with an ink outline and a clear center. - It must never be mistaken for the answer marker, which is a filled cyan diamond.
Nice to haveCD-4f · Big meteor · cd_meteor_big.png · 96 × 24
- Big Rock's meteor: the same four-frame flight and angle as
cd_meteor.png(head down-left, trail up-right, head in a fixed spot), with a head about half as big again. - A stone-toned head (stone and stone_dark, with a core highlight), with the trail in fire and fire_dark.
- Without it, the game scales
cd_meteorup 1.5× for Big Rock drops.
4. Odd One Out assets Optional
Odd One Out's pack is painted, not pixel, so these match the portraits and backdrop, not Coordinate Drop.
- PNG, RGBA, with soft edges allowed, on a transparent background.
- The only color rule is the house one: nothing near amber
#E8A33D, Live Wire#E4574Cor the Desk ground#221D14.
field #0B0F1E
frost #EAF0FF
blue #9DB8FF
glow #6F8FE8
accent #FF3B5C
muted #8A93B0
OO-T1 to OO-T5 · Tool badges · 160 × 160
Each one is a round badge filling about 150 px, with one glyph in the middle. On screen they show at 34 pt in the tray and 46 pt on the pick cards, which is up to 138 px on a 3× phone. Linework under about 4 px at 160 won't survive.
| Request | Tool | Badge | Glyph |
|---|---|---|---|
| OO-T1 | Freeze | Pale ice, frost to #CFF4FF | A snowflake, or a stopped clock hand |
| OO-T2 | Clear One | Blue #9DB8FF | A tile sliding aside, or a tile with a check |
| OO-T3 | Alibi | Frost white | A shield |
| OO-T4 | Overtime | Glow #6F8FE8 | A clock with a plus |
| OO-T5 | Two-Step ×2 | Accent #FF3B5C | "×2", or two stacked steps |
OO-T6 · Frost ring · 384 × 384
- An overlay for the clock ring while Freeze is live: frost creeping round a ring 122 pt across, which is 366 px on a 3× phone, with an inner hole of about 300 px.
- It sits over the existing ring, so keep the middle 260 px clear for the countdown number.
5. After delivery
Tell me when the files are in. The Coordinate Drop import script gains the six new sizes, the game loads them, and the mockup's CSS crate is replaced by the real one. Odd One Out's badges go in through its own import script.
Source: docs/mockups/2026-10-05-phone-tools-art-brief.md · Mockup: docs/mockups/phone-game-tools.html