the mark · a staircase in a square

For a long time this site shipped a wordmark: the letters DD, drawn once for light mode and again for dark, exported as six image files that had to be kept in step by hand.

It looked fine at the top of a page. That’s the one place a logo almost never gets looked at.

In a browser tab it was a grey smudge. Pinned next to eleven other tabs it was indistinguishable from a loading spinner. As an app icon it was two blobs. And every time I touched it I had to re-export both versions and hope they still matched, which is a maintenance job I had given myself for no reason.

So I redrew it. This is the whole decision, including the directions that lost, because a post that only shows the winner is an advert.

The test was sixteen pixels

Where does a logo actually get looked at? A favicon in a crowded tab bar. An avatar the size of a thumbnail. An app icon on a home screen someone is already swiping past. Sixteen pixels, thirty-two on a good day.

That reframes the whole job. At four hundred pixels every direction looks competent, so at four hundred pixels you learn nothing. Almost every decision that feels important there is invisible in a tab, and almost every problem invisible there is fatal in a tab.

So each direction got drawn properly, exported to a real sixteen-pixel PNG, and dropped into the favicon slot. Then I opened eleven tabs and looked for mine. Whatever I could still find decided it.

What it means

A fixed frame, and a climb inside it.

• The staircase: two steps, equal in every dimension. The same effort, on a schedule that never gets more heroic. Height comes from doing it again, not from doing it bigger.
• Steps rather than a curve: smooth growth curves are something you draw afterwards. Progress arrives in flat stretches with an occasional jump.
• The frame: the constraint you keep. The walk you take whether or not you feel like it, the chapter that ships weekly, the rule you don’t renegotiate at 6am.
• The gap: the staircase never touches the frame, on any side. A constraint that presses in on the work is a cage. This one gives the work a shape to climb inside.
• The seal: enclosed marks read as stamps. Something pressed into a thing once it’s finished.

I should say the honest part out loud, though. No mark carries meaning on its own, and nobody decodes a logo unaided. You pick one sentence, attach it to a shape, and repeat both for years until they fuse. This is just the sentence I’m willing to repeat.

How it’s drawn

Everything sits on a 120-unit grid divided into 24s, which is what lets it be redrawn at any size without being redrawn by eye.

Two decisions there took the longest and look like nothing.

Two steps, not three. Three steps is more obviously a staircase, which is why the first sketch had three. But three steps make the shape wider than it is tall, and once that happens the gap to the frame goes unequal: tight at the sides, loose above and below. Dropping one step makes the staircase square. A square shape centres on its own coordinates, the gap comes out at 15 units on every side, and that even gap is the thing your eye actually registers even though nobody could name it.

One stroke weight for both parts. The frame and the staircase are both 9 units. Giving the frame a lighter stroke reads better at large sizes and disappears completely at small ones, and the mark has to hold together at small ones.

The corners

The frame is rounded, at 19 units on a 96-unit box, which is roughly the corner radius iOS puts on an app icon.

I fought this for a while, because a hard square reads as a stamp and a rounded one reads as a button. The square lost on evidence. At 32 pixels and below the sharp corners caught the light wrong and the mark read as a border drawn around nothing, more like a table cell than a logo. The rounded version reads as an object at every size, and it sits properly next to the rest of this site, which is built out of rounded panels.

The steps stay hard. Square caps, mitred joins, no radius anywhere on the path. The soft frame and the hard climb inside it are the whole picture.

How it behaves

The main drawing holds down to about 24 pixels. Below that the 15-unit gap starts filling in and the mark turns into a solid block, so there’s a second cut for favicons: the same shape with a heavier stroke and a slightly tighter frame, which keeps the gap open when the renderer only has sixteen pixels to spend.

On a solid tile the frame comes off completely and only the staircase is reversed out. The tile is already a frame, and drawing a second one inside it looks like a mistake. The exported app icons are square rather than rounded, because iOS applies its own mask and rounding a file it is about to round again gives you a pale rim.

What didn’t survive

Six directions went into the tab test. Keeping the five that lost is the honest version of the story, since the one that won is not the one I liked most on the first afternoon.

The squat one is the one that stings. It beat the winner on the only test I said mattered, and I still passed on it, because a mark you have to apologise for every time you put it next to your own writing is a mark you’ll quietly stop using. I’m aware that’s me overruling my own criteria. It’s the one call here I might get wrong.

The rules

A mark this simple only breaks in a few ways.

• Clear space: a quarter of its width on every side, and nothing crosses that line.
• No second frame: never put it inside another box, card, or bordered avatar. Two frames read as an error.
• One ink: no gradient, no tinted frame, nothing filled inside the square.
• No transforms: don’t rotate it, don’t stretch it, don’t square the corners off or round them further.
• On a solid tile: frame off, steps only, reversed out of the tile.

On the site itself it inherits the surrounding text colour rather than shipping as two files, so light and dark are the same drawing and can’t drift apart again.

Two steps. Same size. Take the next one.