2026-10-04-piece-artwork

Decision

The pieces are twelve SVG files of our own under .context/designs/brand/pieces/, one per side and piece, referenced by every screen.

Why

Three options were on the table.

• Lucide's chess icons are what the app uses today (ChessKing and the rest, from lucide-react-native). They are not in lucide 0.544.0, the version the whole estate pins for its design sets, so a wireframe cannot ask for them by name. They are also line icons: filled in, the queen and the knight lose their shape.
• Unicode chess glyphs are drawn by whatever font the phone has. The set would look different on every device, and the outline needed to read a white piece on a light square is not something a glyph can carry.
• Files under brand/ are the house rule for a mark lucide cannot supply. One source, the same on every device.

So: files. The shapes are flat silhouettes on a 48-point grid with one shared base. White is ivory with a dark outline; Black is near-black with a pale outline. Each reads on a light square and a dark square, in the light theme and the dark one, without a second set.

The colours are baked into the files, because an <img> cannot read a CSS variable. They match --side-white and --side-black in shared.css. Change one and change the other.

Impact

• pieces shows the whole set on both squares.
• The app icon and the splash mark use the same knight: designs/brand/icon.svg and designs/brand/splash-icon.svg.
• assets/icons/*.png are the current app's icons and have no source in brand/. They are replaced by exports of icon.svg only after the design review.
• The app renders pieces from lucide today. Moving it to these files is part of the rebuild.
• This is a first set, drawn to be legible, not a finished Staunton set. Replacing the artwork later changes twelve files and no screen.

Status

Active. The set itself is under review with the rest of the designs.

Sources

• .context/designs/brand/pieces/white-knight.svg
• .context/designs/mobile/patterns/pieces.html
• src/utils/pieces.tsx