Everything you need to put hakluke on a page.

hakluke is the personal brand of Luke Stephens — dad, hacker and entrepreneur, founder of Haksec Group. It looks like a dark arcade cabinet: pixel art, Player 1 green, Player 2 pink, no rounded corners. This page is for anyone putting the brand on a slide, an article, a podcast tile or a conference badge — logos, colours, type, voice and the rules for using them.

The logo is pixel art recovered as true vectors from the original banner artwork. Scale it in whole multiples and keep image-rendering: pixelated — never smooth or fractionally scale it.

Lockup — full colour

SVG PNG 1x 2x 4x

Mark — full colour

SVG PNG 1x 2x 4x

Wordmark — full colour

SVG PNG 1x 2x 4x

Lockup — white

SVG PNG 1x 2x 4x

Mark — black

SVG PNG 1x 2x 4x

Wordmark — black

SVG PNG 1x 2x 4x

Clear space & minimum size

Keep clear space of at least 2 logical pixels (one avatar-eye width) on all sides — at 4× scale that's 8 px. Never render below 1 CSS pixel per logical pixel: the mark's minimum height is 35 px, the wordmark's minimum width is 62 px (124 px recommended).

Don't

Every text/background pairing above meets WCAG AA — ratios were computed, not eyeballed; the lowest is Chalk 3 on Void at 4.86:1. Hairlines are decorative and carry no text. The artwork's own palette (skin, maroon, lens green, banner navy #1d1d29) lives inside the logo files and brand-tokens.json — don't use it for UI.

Preferred terms

hakluke — always lowercase, even at sentence start · Luke Stephens — the human · Haksec Group, HackerContent, Ironbark Cyber, TRIAGERS™ — exact capitalisation · Australian English: colour, optimise, maths · "cybersecurity", one word.

Radius 0 everywhere · Borders 1–2px, --hair-2 · Card shadow 6px 6px 0 (--void-3 at 85%), hover 8px 10px 0 (--p1 at 22%) · Button shadow 4px 4px 0, :active presses down 3px and drops the shadow · Buttons & labels Silkscreen, uppercase · Section padding clamp(3.5rem, 9vw, 7rem) · Gutter clamp(1.1rem, 5vw, 2.75rem) · Max width 76rem.