---
title: Drawing the 23made mark
author: Martin May
date: 2026-10-01
summary: I wanted a mark I'd still enjoy looking at in ten years. Here's how ours came together, the rounds that didn't work, and a version of it you can pull apart yourself.
url: https://23made.com/thinking/drawing-the-23made-mark/
---

# Drawing the 23made mark

23made is where I build the things I want to exist: apps, tools, and the infrastructure that runs them. Before any of that goes out with our name on it, it needs a mark. Something that works as a 16-pixel browser tab and still feels like us on a poster.

Most logos start from a clever idea. I wanted ours to start from how it should feel, and I wanted to still like it in ten years. This is the story of how it got there, including the rounds that didn't work.

## Ideas first, and why that failed

The first round started where most logos start: with ideas. A globe tilted at 23.4°, a maker's stamp, a ring of 23 dots. Each one had a nice story behind it. Each one also looked like clip art.

## Taste first, and why that worked

So I threw that round out and started over from taste. I rated 47 company homepages, from Linear and Laravel to Teenage Engineering, and wrote down why each one worked for me or didn't. Two things came out of it. The site should do what The Browser Company and Ink & Switch do: say who we are, then get out of the way of the products. And the craft should hold up next to the developer tools I like best.

## Two, then three

With that as the brief, we generated about fifty rough candidates. Most were generic. One stuck: two rounded capsules and three dots, side by side. It doesn't draw the number 23. It counts it.

From there it was drawing, on a grid, in code. The capsules lean at 23.4°, the tilt of the earth's axis, so the one angle in the mark means something. The dots step back along the same slant, so the whole thing reads as one leaning shape instead of two piles. And the gap between the capsules and the dots is a little wider than the gaps inside each group, because that space is what lets you see two and three at a glance.

**Figure 1.** The construction. Capsules and dots share one slant, and the gap between the groups is wider than the gaps inside them. Units are those of the drawing, where a capsule is 32 wide.

The mark's construction, in the units of its drawing (the mark is 134.4 tall; capsules are 32 wide, dots 38.4 across):

| Measure | Value |
| --- | --- |
| Slant of capsules and of the column of dots | 23.4° |
| Gap between the two capsules | 13.4 |
| Gap between neighboring dots | 13.9 |
| Gap between the capsules and the dots | 16.6 |

Underneath, the mark is just four numbers: the slant, the size of the dots, and two gaps. Here they are. Move them around and you'll see pretty quickly why each one ended up where it did.

**Figure 2.** The mark from its four numbers, with t as the capsule width. Reset brings back the real one; Copy the SVG copies whatever you've made.

An interactive drawing of the mark from four numbers, with t the capsule width: slant 23.4°, dot size 1.2t, gap between dots 0.3t, gap between capsules 0.42t. The gap between the capsules and the dots is 0.62t. Moving any number redraws the mark; the defaults reproduce it exactly.

## One family

The wordmark is drawn in the same language. Every stroke has round ends, so every letter ends the way a capsule does, and the 3's diagonal leans at exactly 23.4°, parallel to the mark.

I tried making everything share one stroke width, so every round end would have the same radius. On paper that's the tidy answer. In practice the mark looked thin and small next to the letters. What we kept is a family resemblance instead: the mark is drawn at twice the stroke of the letters, with the same round ends and the same angle. That's what the drawing at the top of this post shows.

## The small stuff

The last rounds were about things you only notice when they're wrong. The spacing between letters was one of them. Where an upright stroke meets a round bowl, "ma", "ad" and "de" sat 6, 16 and 10 pixels apart at 600 pixels tall. Nobody would ever point at that, but you feel it as a word that doesn't quite sit right. They're all 13 now.

**Figure 3.** Where an upright stroke meets a bowl, before and after, measured with the lockup rendered 600 pixels tall.

Gaps where an upright stroke meets a bowl in the wordmark, in pixels with the lockup rendered 600 pixels tall:

| Pair | Before | After |
| --- | --- | --- |
| m to a | 6 | 13 |
| a to d | 16 | 13 |
| d to e | 10 | 13 |

Mean before 10.7 px, spread 10 px; after, all 13 px.

## Sixteen pixels

The hardest size turned out to be the smallest. Scaled down to a 16-pixel favicon, the vector turns to gray mush. So I drew it pixel by pixel instead, with two-pixel capsules and two-by-two dots, and for a while that was the favicon.

Looking at it again for this post, something felt off, and it took a minute to see what. On the pixel grid, the capsules step over one pixel every two rows and the dots one pixel every three. That's two different slants, about 27° and 18°, in a mark built around one. The fix was to stop fighting the grid: draw the mark's real shape and let each pixel's shade say how much of it is covered. Edges that land between pixels go gray, and everything leans at 23.4° again. Turn on the guides and you'll see it.

**Figure 4.** The favicon three ways: the vector scaled down, the first pixel drawing with its two slants, and the mark's real shape on the pixel grid.

Three versions of the 16-pixel favicon, a light mark on a dark rounded tile. First, the vector app icon scaled down to 16 by 16 pixels: the capsules and dots blur into gray. Second, the first drawing made pixel by pixel: the capsules step one pixel every two rows (about 27°) while the column of dots steps one pixel every three rows (about 18°), so the two groups lean at different angles. Third, the proposed favicon: the mark's exact shape, 0.0818 pixels per unit and 11 pixels tall, with each pixel's shade set by how much of it the mark covers, so capsules and dots keep one 23.4° slant.

## Why bother

Nobody is going to pick an app because the gap between the a and the d is right. But I think people notice when something was made with care, even when they couldn't tell you what they noticed. That's most of what 23made is about, and the mark seemed like a good place to start.