Skip to content

Draw the feature graphic as the format itself - #104

Merged
octopranav merged 1 commit into
mainfrom
feature-graphic
Oct 3, 2026
Merged

octopranav merged 1 commit into
mainfrom
feature-graphic

Conversation

@octopranav

Copy link
Copy Markdown
Owner

A new feature graphic for the Play listing, still drawn by design/build-icons.mjs from the tokens.

Why

Play's guidance for the feature graphic asks for three things the old one missed:

  • branding that extends the icon rather than repeating it (the old one was the icon's four bars);
  • a ground that doesn't blend into the store's white (it was the page's near-white ground);
  • a picture of what the app is for.

The graphic is also the cover of the listing's video. When the video doesn't play by itself, Play lays its play button over the centre, which was on the bars.

What it shows

How a code works. Every character names one of 25 parts of the cell before it, five by five, so a code is a place inside a place.

  • Three cells are drawn cut into their 25 parts, each lighting the part the next is drawn from, down to one doorway in brass.
  • The lit parts are the real ones for St. Lawrence Market's north door, #G3RJM-8X3L1, the place in the listing's screenshots: its 3, L and 1, as the reference implementation places them.
  • It uses the icon's four tints: level 1 is the ground, and levels 4, 7 and 10 are the cells. The brass is the dark theme's, which is meant to be read on a ground this deep.
  • No words, so nothing to translate.
  • Play's play button falls on the middle cell and leaves the door showing.

Verified

  • node design/build-icons.mjs --check: 20 icons match design/tokens.json. The output is deterministic, and CI compares it byte for byte.
  • 1024 × 500, 24-bit RGB with no alpha, as Play requires.
  • audit/markdown.py passes. PLAY.md's graphics table describes the new graphic.

Play asks for a feature graphic that extends the icon rather than repeats
it, on a ground that does not vanish into the store's white, and that says
what the app is for. The old one was the icon's four bars on the page's
near-white ground.

The new one is how a code works: every character names one of 25 parts of
the cell before it, five by five. Three cells are drawn cut into their parts,
each lighting the part the next is drawn from, down to one doorway in brass.
The parts lit are the ones St. Lawrence Market's north door, #G3RJM-8X3L1,
is drawn from, as the reference implementation places them. It keeps the
icon's four tints, level one as the ground and levels four, seven and ten
as the cells, and has no words. Play's play button, laid over the centre
when the listing's video does not play by itself, falls on the middle cell.

It is still drawn by design/build-icons.mjs from the tokens, with no image
library, and --check still compares it byte for byte.
@octopranav
octopranav merged commit 3d7e253 into main Oct 3, 2026
22 checks passed
@octopranav
octopranav deleted the feature-graphic branch October 3, 2026 01:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant