Brand

Hendri van Niekerk

Design Engineer, Lisbon. Brand owns the raw assets and what they mean. The design system owns the semantic roles and the mechanics. Brand Primary the colour is brand; Background Primary is system.

The mark

A wordmark and a scribble. The scribble is the constant.

Fixed across every project

The orange scribble is the favicon and the web-clip icon on every site Hendri ships. It is two assets, not one: the SVG for the browser tab so it stays crisp at 16px, and the 512 PNG for Apple, which does not accept SVG. Never design a new one.

Misuse

Do not recolour the wordmark, do not stretch it, and do not set the scribble in anything but Brand Secondary. The logo is a single SVG with two fills, so both are addressable.

Colour

Four brand colours. Two of them may never be text.

Brand Primary

links and button fills

Brand Ink

body links

Brand Ember

large text and rules only

Brand Secondary

decorative only, never text

Typography

Three faces, each with one job. The system owns the scale; brand owns the faces.

Space Grotesk

Carries the interface. Every heading, every body line, every label. 400 for prose, 500 for headings.

Alpha Lyrae

The pixel voice. Display and Note - Pixel only, which is where the product-interface conceit lives: the version tag, the machine pages, the big page titles.

Caveat

The hand. Annotation only, on article markup, where a note should read as written rather than set.

Voice

Reference voice: Pablo Stanley. Short punchy sentences. Heavy first person. Concrete objects over abstract nouns.

Say

“Design Engineer.” “Hendri van Niekerk”, always in full. “Shhhcribble”, three h’s and no trailing s. “Lisbon.”

Never

“UX over UI.” “User-centered.” “I craft experiences.” “Designer who codes.” Bare “Hendri” on its own.

No em dashes in body copy. Zero, site-wide.

The 2026-08-10 audit found 348 and removed all of them. Do not substitute a semicolon, an en dash or a double hyphen; those are the same move in a disguise. If a sentence needs a dash to hold together, it is two sentences.

The tells to avoid

Setup then payoff then restate the thesis. Triadic lists on every page. The negation-correction (“it is not X, it is Y”). The coaching “you”. Abstract claims with no receipts. Write what you did, not what the reader should know.

Application

Where the brand meets the world, and the rules that keep it the same everywhere.

Title separator

The separator in a page title is a middot, not a dash. “About · Hendri van Niekerk”. The machine-page template already used it, so the site was mixing both until it was standardised.

The share image is per project

The favicon is brand and never changes. The share image is the opposite: it should show the product, so it is authored per page and set on both the page and rootNode.

Motion

One spring, everywhere: spring-duration 0.4s 0.2 0s. Every code component carries its own reduced-motion guard rather than relying on a global.