The most honest portfolio piece we have is our own. It is self-initiated, nobody briefed it, and we own every part of it — so we can show all of it, including the decisions that were harder than they look.
The mark
A Cape buffalo, drawn rather than assembled: eight shapes, none of which touch.
That last detail is the whole engineering problem. A mark made of separate shapes does not fail at small sizes by going soft — it fails by its gaps closing. At some size the space between the face mass and the mouth simply fills in, and the animal becomes a blob. So the constraint was found by measurement rather than by squinting: the tightest gap is 1.90% of the mark’s height, which puts a hard floor at 80 pixels.
An earlier version failed asymmetrically, which was worse than failing outright — one horn’s curl welded to its sweep while the other stayed open, so it read as a mistake rather than as a style. Joining that curl deliberately retired the problem at every size.
What that means in practice: this mark does not go in a website header. A header gives a logo 32 to 40 pixels, and the honest answer was to draw a wordmark-only cut for small sizes and give the animal somewhere with room. Look at the bottom of this page — that is where it lives.
The name
Syncerus caffer is the Cape buffalo. The name was chosen for behaviour rather than for imagery: strong without aggression, not violent unless provoked, and strongest as part of a group rather than alone. Strength reserved — power present and deliberately not spent. There is more on that in about.
The palette
Nine colours, and every pairing measured. The useful output was not the swatches but the limits:
- Three of the nine can never be text on a light ground. One of them looks exactly like an accent colour and fails on every light background in the system — precisely the trap someone would fall into later.
- Neither of the two accent colours survives on the dark ground. Not “looks dim” — 1.92:1 and 1.64:1, which is illegible. So the dark version changes its accent rather than inverting the palette.
- The two accents are 1.06:1 apart under deuteranopia. To a red-green colourblind viewer they are the same colour. Which means colour can never be the only thing carrying a meaning here — a rule, not a preference.
None of that is visible in the finished identity. All of it would have surfaced later, in print or in a support ticket.
The type
Spectral SemiBold for display and Figtree for text, both under the SIL Open Font License.
The licence is not a footnote. The face this system originally paired with is a commercial one that ships with macOS — and that bundled copy is a desktop licence which does not cover serving the font from a website. The failure mode is nasty: it looks correct on every machine you test on and falls back to something else for most of your visitors. It was replaced by measurement rather than by taste, choosing the open-licence face that matched the original letterforms most closely and set to within 0.3% of the same width — so nothing in the layout moved.
This is the kind of thing we mean by a style guide that someone else can apply: it identifies which fonts you may embed and which you may not, before it costs you a rebuild.