Five blocks cut out of a solid square: two unbroken bars top and bottom, and a three-step stair falling from the top right to the bottom left. Together they make a Z. Every block is the same colour and the same weight — nothing is singled out.

All type is converted to outlines, so nothing depends on a webfont loading. The knockout and mono files use fill-rule="evenodd", so the blocks are real holes — whatever is behind the logo shows through the Z.

Module 100, seam 6, no corner radius. The Z is four modules wide by five tall (418 × 524); the bars run the full width unbroken, and the three stair modules sit at columns 4, 3 and 2 on rows 2, 3 and 4.

The tile is 724 × 724 — one module of ground above and below, with the extra width split evenly left and right. Clear space outside the tile is one further module, 14% of its width. Scale it with the logo rather than fixing it in pixels.

The badge holds down to about 24 px. Below that the seams close up, so switch to zio-blocks-mark-favicon.svg — same grid with a 40-unit ground, so the Z fills more of the box.

In the horizontal lockup the wordmark cap height is 300 against a 724 badge, set 76 units clear of the tile edge and optically centred on it, not baseline aligned. Don't re-space the two.

• Break the bars back into separate cells, or add a fourth stair step.
• Recolour a single block. Every block is equal; picking one out breaks that.
• Round the corners of the tile, or set it on a circle.
• Add a gradient, shadow, stroke, or rotation.
• Fill the knockout blocks with a solid colour over a photo — that is what the opaque zio-blocks-mark.svg is for.
• Rebuild the wordmark by typing it in Manrope; the tracking is hand-set (ZIO +0.012 em, Blocks +0.004 em, word space 0.30 em).

Ink ground, headline upper left, with the module pattern enlarged and bleeding off the right edge at low contrast.

The headline uses the standard lockup, so the badge carries the Z here as it does everywhere else. The tile's left edge — not the Z's first module — sits on the text column. Upload the PNG — GitHub's Settings → General → Social preview field does not accept SVG, and neither do most link unfurlers.

Both sizes are generated from one layout, so edit the copy in the SVG and re-export if the tagline changes. Everything sits inside a 7.5% margin, which keeps it clear of the crop Twitter and LinkedIn apply.

Manrope — ExtraBold for ZIO, Regular for Blocks. SIL Open Font License, so it works for docs and site headings too.