Reference screens

Forty screens from the 46-app, 315-screenshot study behind the design language. Every file is a publicly published App Store marketing screenshot, kept here as internal design reference and credited to its publisher below. They are not Konjo assets and must never appear in Konjo's UI, marketing, or store listing.

Agents: open these. Read renders a .jpg and you will actually see it. When you have built a screen, open the closest reference and find the specific difference in spacing, weight, or ratio. "Roughly similar" is not the bar.

Ratings are App Store US at time of capture (2026-08-22) and are context, not proof — the calibration record explains where the evidence for each claim actually comes from.

Do not measure pixels off these files. They are downsampled, and several are keystoned marketing mockups rather than real screens. The adversarial review pass found individual measurements taken this way off by anywhere from 35% to 3×. Read them for mechanism — what is loudest, what order things appear in, what carries hierarchy — and take every number from Konjo's own tokens.

Athletic

The register Konjo lives in. Bold, high-contrast, one loud thing per screen.

Craft and restraint

Where 'obviously easy to use' comes from. Type doing the work of boxes.

Operational software people love

For Studio and the Teach tab: dense data kept calm.

Community, events, motivation

For Social, Events, and the progress mechanics.

Anti-patterns — the category we beat

Konjo's actual competitors. Study the mechanism, never the look.

Konjo target mockups

Not references — these are the target, built from Konjo's own tokens during the calibration. Open them before implementing the pattern they show.

Konjo's own screens

Real shipped screenshots live at apps/site/public/img/screens/, captured by scripts/site/capture-screens.mjs. Look at those before redesigning anything: most of the anti-patterns in the skill's reference list are visible in stale captures — re-run the capture script before citing any of them as current evidence.

form-target-{light,dark}.jpg — added 2026-08

The form reference the set was missing. Thirty-three screens and not one form, while the skill's self-review step ends with "compare yours to the closest one" — for the most common screen type after the index and the detail, there was no closest one, and a blind test found that instruction was a dead end.

Unlike the other targets these are generated, not drawn: node scripts/design/render-form-target.mjs renders them from packages/design-tokens/tokens.ts, so the target cannot drift from the palette. Regenerate after any token change.

What it shows: the tinted page with white inputs; the eyebrow-per-section grouping; the label row with Optional marked (never Required); the select trigger in both its empty and populated forms; a field in its error state; the repeating note group with a checkbox per line, unchecked by default; the summary line naming the person; the consequence line above the primary; and one filled primary with nothing else competing. Red appears once, as the error, and the belt swatches carry their ring.

The copy is load-bearing and is not invented. The consequence line and the note-sharing model are quoted from product-facts.md. Do not paraphrase either from this image — read the source. An earlier version of this target carried a single free-text notes field, the helper "The student can read this", a consequence line that omitted the head instructor and correctability, and the placeholder "Choose the sensei" — which hardcodes one lineage's honorific into a screen every dojo sees. All four were wrong, and all four were persuasive precisely because they were rendered.

promotion-certificate-target.jpg — known deviations, do not copy them

This target was drawn before several rules existed, and a blind test found three places where copying it faithfully produces a defective screen. It is kept because its composition is right — the certificate as the one loud moment, the rank as the subject, the sensei named — but these three are wrong and the rules win:

A reference image is evidence about layout, not authority over the laws. Where an artefact and a chapter disagree, the chapter wins and the artefact gets a row in this table until it is redrawn.

studio-table-target.jpg — added 2026-08

The Studio reference the set was missing. Nine Konjo targets and every one was a phone, while the skill's self-review step says "compare yours to the closest one" — so for a Studio screen the closest thing on disk was a competitor's phone screenshot carrying vertical rules, which studio/tables.md bans.

Generated, like the form target: node scripts/design/render-studio-target.mjs --spec renders it from packages/design-tokens/tokens.ts and studio/metrics.md, so it cannot drift from the palette. Regenerate after any token change.

What it shows: the 236px ink rail; the page frame at spacing.s32; a panel on the tinted page; the toolbar with a search field, wrapping filter chips and the count; a 36pt header row in eyebrow with the sorted caret; 46pt rows with the subject in rowTitle and everything else in body; the belt swatch at swatchSize.roster with its border.control ring; and status as pills rather than chips. No vertical rules, no zebra, no shadow.

It has a second job. --live renders the same markup against the real apps/studio/globals.css, with the Tailwind at-rules stripped. Diffing that before and after a stylesheet change is the only visual verification of Studio available without a running server, and it is what the 171-declaration ramp migration was checked against.