start

Summary

The first screen: the app mark, four mode cards, and the two footer links.

Raw wireframe

• .context/designs/mobile/home/start.html

Why it is drawn this way

Mode and difficulty are one choice, not two screens. Local Battle is one card; the computer is three. A second screen to pick difficulty would put a decision between the player and a two-minute game.

The header is the app's own mark, drawn rather than loaded. It used to be lucide's generic Grid3x3 in a sky plate — a picture of a grid, sharing neither shape nor colour with the icon the user had just tapped. BrandMark renders the launcher icon's two gradients as SVG, which costs nothing because react-native-svg is already in the graph.

The difficulty ramp stays green → amber → red. That ramp is information, not decoration; recolouring it to the brand would throw the meaning away. Local Battle takes the brand gradient instead.

The card gradient is a 0.12 tint, not a fill. At 0.2 over a white card it washed the row out to a pastel smear and dragged the body copy under 4.5:1.

The footer buttons scroll with the content rather than pinning under it. Pinned, the header plus four cards plus two buttons plus the ad banner could not all fit above the fold on a short phone, and the cards — the only scrollable part — got squeezed to a two-row window.

The ad slot is always present and always 320×50. A banner that arrives late pushes everything down mid-tap.

Related

• reserved-colour
• monetisation
• board

Sources

• .context/designs/mobile/home/start.html