University pass in Tino

2026

This page is a template. Every paragraph on it describes itself, so nothing here can be mistaken for finished writing — replace it section by section as the real piece comes together.1

The column is 552px wide, which lands at roughly seventy-five characters a line at this size. That measure is what the whole page is built around: figures match it, the footnotes match it, and the side index sits outside it so it never competes for attention.2

Below are all three figure treatments, a set of footnotes, and the navigation that closes every article.

Where it started

Open with the context a reader actually needs, and stop there. The temptation is to explain the whole org chart before getting to the thing you made; resist it. Two paragraphs of setup is usually one more than necessary.

This second paragraph exists only to show what two stacked paragraphs look like at this measure — where the rag falls, how much air sits between blocks, and whether the leading holds up once there is more than one line to read.

A framed figure. Screenshots and mockups get a tinted container and a rounded corner, so they read as an artefact rather than as part of the page.

Making it feel right

Anything with chrome of its own — a browser window, an editor, a device — goes in the same container at the same radius.3 Consistency between figures is what stops a long article from feeling like a scrapbook.

If a figure needs explaining, the caption does it. If the caption is running to three lines, the explanation probably belongs in the body instead.

The same container, holding something with a very different shape. The padding and the radius do not change between figures.

Little big details

Device mockups sit in the frame like everything else. Export them at twice the width they will render at and let the container do the rest.

This is placeholder copy. It sits here so the measure, the leading and the rhythm between blocks can be judged honestly — a column of Lorem ipsum tells you nothing about how a real paragraph will breathe.

Portrait artwork works the same way; the frame takes whatever proportions you give it.

Did it work

Charts are the exception. They get no container at all, because a chart is mostly whitespace already and a box around it just fences off the space it is using.

A bare figure. The chart draws straight onto the page background, in both light and dark.

Acknowledgements

Close by naming the people who actually did the work with you. It costs you nothing and it matters more than the rest of the page.4

  1. Footnotes are for the asides that would derail a paragraph — the caveat, the second thought, the thing you would say out loud but not write into the body. Disclaimers live here. Click anywhere on this note to go back to the line that called it.
  2. Every note links both ways: the marker in the body jumps down here, and the note jumps back up. Both travel rather than teleport, and mark where they land.
  3. Notes hold links as comfortably as prose. An external one looks like this: Figma — clicking it opens the link instead of jumping back.
  4. And a last one, to show what four stacked notes do to the bottom of the page. Delete the ones you do not need — the numbering is generated, so it renumbers itself.