Numbered steps with screenshots
Spec
Steps to follow on a phone: adding Adjustmint to the home screen (issue 149), on adjustmint.com/install, the app's /install page and the app's "Before you start" card. Each step is a short heading, one line of help and a cropped screenshot at the phone's real size, with a tap circle on what to tap. Not in Figma yet.
Look
- Full form (a page): a numbered circle, 36px, surface-selected with text-inverse in the button style, beside each step; the heading in the heading style; the line in text-secondary; the screenshot under them with a 1px border and radius xl. Steps are space 2xl apart.
- Compact form (a card): an ordered list in body text, "1. Tap Share", the heading bold and any words after it plain; the screenshot under it with radius lg. Steps are space lg apart.
- Screenshots keep their width and shape before they load, and shrink to fit a narrow screen.
Rules
- One action per step, said as a heading ("Tap View More"), with one line saying where it is or why.
- The screenshot is cropped to what matters, at the size it is on the phone, with the tap circle drawn in. Retake them when the browser's screens change.
- An ordered list, so screen readers hear the count; each screenshot's alt text says what it shows.
- Pictures are of the real browser and app, never drawn.
Built 1.0.0
The app's own component, version 1.0.0, live. Fake data; nothing is saved.
Changes
- 1.0.0, Oct 26 2026: First version, for adding Adjustmint to the home screen: a numbered list, each step a heading, one line and a cropped screenshot at the phone's real size with a tap circle; a compact form for a card. Not in Figma yet. (#149)