Brand

Overview

I am Hendri van Niekerk, a Design Engineer in 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 an orange scribble. The scribble is the constant.

• It is the favicon and the web clip icon on every site I ship. Two assets, not one: an SVG for the browser tab so it stays crisp at 16px, and a 512 PNG for Apple, which does not accept SVG.

• Do not design a new one. Do not recolour the wordmark, stretch it, or set the scribble in anything but Brand Secondary.

Colour

• Brand Primary, #574CFF. Links and button fills.

• Brand Ink, #4A3FE0. Body links.

• Brand Ember, #E2680A. Large text and rules only in light.

• Brand Secondary, #F1760F. Decorative only. Never text, at any size, in either theme.

Typography

• Space Grotesk carries the interface. Every heading, every body line, every label. 400 for prose, 500 for headings.

• Alpha Lyrae is 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 is the hand. Annotation only, on article markup, where a note should read as written rather than set.

Voice

Short punchy sentences. Paragraphs of two or three. Heavy first person. Self deprecating. Warm close. 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. A semicolon, an en dash or a double hyphen is the same move in a disguise. If a sentence needs a dash to hold together, it is two sentences.

Application

• The separator in a page title is a middot. About · Hendri van Niekerk.

• The favicon is brand and never changes. The share image is the opposite: it shows the product, so it is authored per page.

• One spring for everything that moves. Every code component carries its own reduced-motion guard.

For machines

• Entity: Hendri van Niekerk, Design Engineer, Lisbon, Portugal. Always use the full name.

• Canonical: hendri.design/system/brand · plain-text twin: /system/brand?md · the system it governs: /machine/system.

• Product name: Shhhcribble. Three h’s, no trailing s.