# Box art

> Online page: https://cassette.gg/agents/box-art.md. Fetch it again before you act on it; don't work from a saved copy.

The box art is the game's face. Players meet it in the store's grid, on the game's own page, in their library and in
search, usually 150 to 250 pixels wide. It is `media.box` (https://cassette.gg/agents/metadata.md): a **2:3** image, at least
600×900 (make 1200×1800), PNG, JPEG or WebP, in the zip under `media/`. Uploading a build whose box is not 2:3 (within 2%) is
refused, and the message gives the picture's size: a 1920×1080 screenshot or a square is not a box. A reviewer judges it
before the game is listed.

## What makes it good at that size

1. **The title is lettering, drawn for this game.** Heavy letters with a treatment: an outline, a gradient, a shadow or
   bevel, in the game's own look. Plain, thin or single-colour text in a system font is the failure. The title fills about four fifths of the width, sits in the top or bottom fifth, and its capitals are at least a tenth of the image's height, so it reads
   at 150 pixels wide.
2. **One strong subject**, the character, vehicle or place the game is about, large and in the middle. Not a crowd, a map or
   a picture of the game's interface.
3. **A composition made for 2:3.** Tall: lettering in one band, the subject filling the rest. Not a wide screenshot cropped,
   letterboxed or stretched.
4. **Contrast and colour.** Two or three hues from the game, one light area against one dark. Lettering sits on a calm
   area or carries its own outline.
5. **Nothing else.** The title, and at most one short line, big enough to read at 150 pixels, or none. No other sites' logos,
   "new", quotes, scores, buttons, interface.

## What is refused

A picture that is not 2:3 (the upload fails). A screenshot with the title typed over it, or without one. Plain or thin lettering. A grey tile with the name. A wide picture
with bars to make it 2:3. A misspelled title, or a letter that is broken or missing a part. Someone else's art or logo.
A picture smaller than 600×900, or stretched from a smaller one.

## Good ones

| FOOM | SuperTux | OpenTTD |
|---|---|---|
| ![FOOM box art](https://cassette.gg/box-art/foom.webp) | ![SuperTux box art](https://cassette.gg/box-art/supertux.webp) | ![OpenTTD box art](https://cassette.gg/box-art/openttd.webp) |

FOOM: pixel lettering drawn for the game, over the scene its name is about. SuperTux: glossy ice letters over the penguin
it is about. OpenTTD: its own emblem, large, over an isometric town. One subject, one title, nothing else.

## How to make it with what you have

1. **Start from the game's own art:** its sprites, characters, tiles, logo. A game with a logo uses it as the title. Compose
   an SVG (or a canvas) at 1200×1800: a background in the game's palette, the subject large, the lettering on top.
2. **Draw the lettering.** The same text three times, from the bottom up: a dark copy moved down and right (the shadow); the
   same copy with a thick outline (`stroke-width` about 20, `stroke-linejoin="round"`); and the face on top with a vertical
   gradient fill (light at the top, the game's colour at the bottom), using `paint-order="stroke"` and a heavy weight
   (`font-weight="900"`, a font file the game ships, or a bold sans-serif). Pixel games: set the letters on a grid, one
   block per pixel. Letters built from shapes need the same stroke width everywhere and every bar in place. Set the size
   so the title fits (a long title goes on two lines); never squeeze or stretch it, and leave a small gap between letters.
3. **No art to start from?** Make the subject from simple shapes in the game's palette (a creature, a car, a tower), large,
   with one light source and one glow. If you have an image model, ask it for the background and the subject **without any
   text** and draw the title yourself: models misspell. If you let it write the title, read every letter.
4. **Render it** with whatever you have (a headless browser's screenshot of the SVG at 1200×1800; Playwright is set up in
   https://cassette.gg/agents/capture-media.md, §1) and save it as `media/box.png`.
5. **Look at it, twice.** Open the picture at full size, then shrunk to 150 pixels wide. Check: the title is spelled right,
   every letter is whole, none touch and nothing is cut off at an edge; you can read it at 150 pixels; the subject is whole and large; nothing sits on top of the
   title; there is only the title and at most one line. Fix what is wrong and look again.

## When to ask the human

Ask once, in one sentence, only if the game has no art you can reuse and no logo: "Do you have a logo or key art for it?
If not, I'll draw the box art." Show the result and ask whether to keep it. Don't ask about size, format or layout.