Surface by surface
The same surface from all three directions, side by side. Tier 1 is where the choice is made, tier 2 is what makes it complete, tier 3 is the system documenting itself.
Tier 1, the ones that make the choice
-
The profile blockThe only surface every visitor passes. Avatar at its real size, display name, the four bio lines, the link button, the highlight row.
-
The pinned threeThe only place the relaunch is stated, because nothing gets deleted and the grid stays mostly old work for months. Three tiles that read as one triptych.
-
The cover set, four type casesWhat replaces a logo, at 156 to 208 a year. The same system under four loads, plus the reel canvas that the grid crops again.
-
The quest ladder as one designed objectTwenty one rows in six bands, in the three media it actually ships in. A system that works in one of the three is not a system.
-
The story frame setThe documented first step of every lead he has taken. Draw the platform safe bands as a dimmed overlay so it is clear the type survives the chrome.
-
The challenge landing pageWhere the ten to fifteen signups come from. Scrolled and shot at full length, phone first.
-
The quest cardThe atomic unit of the product, 210 to 315 issuances in the first intake. Two cards, because the baseline items carry no number and the quests do.
-
The DM attachment cardThe highest frequency designed artefact in the business at 2,600 to 4,160 sends a year, and it was never on the list. It arrives at about 250px wide, which is the test.
Tier 2, the ones that make it complete
-
Carousel, three structural typesHis best format at 1.33x median engagement. Three different shapes, not one shape three times: a story slide, a method slide, an argument.
-
Five highlight coversPermanent profile furniture. Authored full bleed, then cropped to the circle at real size on the profile mock. The circle crop is the hardest identity test in the set.
-
Twelve tile grid montageThe whole, judged by eye at the size a phone serves it. Written by scripts/render-mocks.mjs, not by this pipeline.
-
Level completion badgeThe only proof loop that needs no consent, and he has consent for nobody. The most purely graphic object in the set: no photograph, no long copy.
-
Weekly recognition cardGreenlit 24 August, 52 a year, and Jonny already runs the format.
-
Sign up form and confirmationThe only interactive surface in the set, and where cheap design shows immediately: field height, focus state, button weight, error state.
-
Burned in caption style876 of his 1,194 posts are video and the caption look is a CapCut default, which means nobody has decided it.
-
Lead magnet spreadThe only surface that tests body copy at length on a fixed page with no scroll and no photograph to carry it.
Tier 3, the ones that make it a folder, and their reader is a designer rather than a man on a phone
-
The type specimenLayer 3. Every style in the scale set in its own face, at its own size, with its own tracking, in real locked strings, so a designer can see the whole ladder at once and pick from it. The second board is the measured detail the token file already carries: the ratio, the tracking band by band, and both canvases.
-
The misuse boardLayer 12. What this system must never do, drawn wrong on purpose with the right version beside it, both labelled. A rule written as prose is read once; a rule drawn is what a builder recognises at speed, which is when the mistake is actually made.
-
The handover sheetLayer 14. A4 at 150dpi, two sides. The pasteable tokens on the first, then what is built, what the rules are and what a builder checks before publishing on the second. The contract's phrase is a folder anyone can open.