hackercontent · brand
Brand kit
Logos, colours, type and voice for HackerContent — everything you need to represent the brand correctly.
HackerContent is a specialist cybersecurity marketing agency — built by hackers, for hackers — and the brand is built to be believed by the most marketing-resistant audience on earth. It looks like a calibrated instrument, not a brochure: dark panels, one orange signal, monospace labels, measured claims. This page is the single source of truth for anyone using the brand — download the assets, copy the values, and follow the rules below. If you only remember one: one accent, rationed.
logo
The mark
The HC monogram and the stencil wordmark, in three colourways. SVG is the canonical format; PNGs are supplied at 1x, 2x and 4x with transparent backgrounds.
Download all assets (zip, 396 KB)
Lockup
Mark stacked over the wordmark. The default for social images, title cards and anywhere the brand stands alone.
Mark
The HC monogram alone. Navigation, favicons, avatars, and tight spaces.
Wordmark
The stencil HACKERCONTENT. Wide, short spaces: footers, banners, document headers.
Clear space & minimum size
Keep clear space of at least 25% of the mark's height on every side — the dashed line below. Minimum sizes: mark 24px tall, wordmark and lockup 120px wide. Below that, use the mark alone.
Don't
colour
One accent, rationed
The instrument is dark; the documents it produces are light. Orange appears only where something is live. Click any value to copy it. Colours are authored in oklch — the hex, RGB and HSL values are their sRGB renderings.
Primary — the trace
trace --trace
THE accent. One accent, rationed: active states, measured values, drawn traces. Pair with ink-900 text (7.49:1). Never use as text on paper — it fails AA at 2.46:1; use trace-ink instead.
trace-hot --trace-hot
Hover / heated accent. Pair with ink-900 text (9.64:1).
trace-dim --trace-dim
Pressed / deep accent, gradient tail on the scroll progress line.
trace-ink --trace-ink
The accent when it must be read: links and accents on paper surfaces. AA on paper at 6.39:1.
Neutrals — the instrument (dark)
ink-900 --ink-900
Page base — the bezel. Use chalk text on it (17.35:1, AAA).
ink-850 --ink-850
Panel. Use chalk text (17.02:1, AAA).
ink-800 --ink-800
Raised panel.
ink-700 --ink-700
Inputs and raised chrome.
ink-600 --ink-600
Scrollbar thumb, subtle furniture. Never text.
chalk --chalk
Primary text on dark.
mute-300 --mute-300
Secondary text on dark (8.71:1 on ink-900, AAA).
mute-500 --mute-500
Muted labels on dark. 4.67:1 on ink-900 — AA for body text, but leave no margin: never use it on lighter grounds.
Neutrals — the documents (paper)
paper --paper
Document surface: long-form reading, quotes, logo strips. Use paper-ink text (16.32:1, AAA).
paper-2 --paper-2
Raised paper: cards and asides on paper.
paper-ink --paper-ink
Text on paper.
paper-mute --paper-mute
Muted text on paper (6.54:1, AA).
Semantic
notice-ok --notice-ok
Success text, on a 10% tint of oklch(0.7 0.15 150) with a 40% border of the same.
notice-bad --notice-bad
Error text, on a 10% tint of oklch(0.65 0.2 25) with a 40% border of the same.
Contrast — computed, not guessed
WCAG 2.x ratios for every pairing the system uses. AA requires 4.5:1 for body text and 3:1 for large text; AAA requires 7:1. The one deliberate failure is listed so nobody rediscovers it: raw trace is never used as text on paper — on paper surfaces the CSS remaps --trace to trace-ink.
| Pairing | Used for | Ratio | WCAG |
|---|---|---|---|
| chalk / ink-900 | Body & headings on the page base | 17.35:1 | AAA |
| chalk / ink-850 | Body & headings on panels | 17.02:1 | AAA |
| mute-300 / ink-900 | Secondary text on dark | 8.71:1 | AAA |
| mute-500 / ink-900 | Muted labels on dark | 4.67:1 | AA |
| trace / ink-900 | Accent text & eyebrows on dark | 7.49:1 | AAA |
| ink-900 / trace | Button text on solid orange | 7.49:1 | AAA |
| trace-hot / ink-900 | Hover accent on dark | 9.64:1 | AAA |
| paper-ink / paper | Body text on paper | 16.32:1 | AAA |
| paper-ink / paper-2 | Body text on raised paper | 14.90:1 | AAA |
| paper-mute / paper | Muted text on paper | 6.54:1 | AA |
| trace-ink / paper | Links & accents on paper | 6.39:1 | AA |
| trace / paper | Raw trace on paper — never do this | 2.46:1 | fails AA |
typography
Two families, both variable
Bricolage Grotesque carries display and body; JetBrains Mono carries every label, stat and line of code. Both are self-hosted — no font CDNs.
Bricolage Grotesque
Open font (SIL OFL 1.1). Self-hosted via Fontsource; also on Google Fonts.
JetBrains Mono
Open font (SIL OFL 1.1). Self-hosted via Fontsource; also on Google Fonts.
The scale, live
A fluid modular scale (ratio ≈ 1.2) from 320px to 1440px viewports. What you see below is the real CSS rendering at your current viewport.
display — hero headlines · clamp(2.75rem, 1.1rem + 8.2vw, 8.5rem)
Signal, not noise
h1 · step-5 · clamp(2.49rem, 1.9rem + 2.95vw, 4.71rem)
Signal, not noise
h2 · step-4 · clamp(2.07rem, 1.7rem + 1.85vw, 3.5rem)
Signal, not noise
h3 · step-2 · clamp(1.44rem, 1.3rem + 0.7vw, 1.94rem)
Signal, not noise
h4 / lede · step-1 · clamp(1.2rem, 1.12rem + 0.4vw, 1.44rem)
Signal, not noise
body · step-0 · clamp(1rem, 0.96rem + 0.21vw, 1.13rem) · line-height 1.65
Security audiences instantly spot inaccurate or hype-driven content. Body copy runs at a 68ch measure with generous leading, because the fastest way to lose a technical reader is to make reading feel like work.
small · step--1 · clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem)
Fine print, captions and secondary descriptions.
label / code · step--2 · clamp(0.69rem, 0.67rem + 0.09vw, 0.75rem) · JetBrains Mono
// calibration · [soc] [blg] [str] [vid] [seo] [bsp] · 14x · $2,000
voice
Say it like an engineer
HackerContent sells marketing to people who are professionally trained to distrust marketing. The voice survives that audience by never sounding like marketing: it is direct, technically literate and measured. We write as "we", address the reader as "you", and keep sentences short. Claims come with numbers and qualifiers attached — "on average, in the first month" — and are never rounded up. We say what we don't do ("No fluff. No SEO spam.") as plainly as what we do. Dry humour is allowed in small doses ("Don't launch to crickets!"); exclamation marks are rationed like the accent colour. Hype adjectives — revolutionary, cutting-edge, game-changing, world-class — never appear: if a claim needs an adjective, it needs evidence instead.
Before / after
- Not: "Unlock unprecedented growth with our cutting-edge strategies!" But: "On average, accounts we manage see a 14x increase in impressions in the first month."
- Not: "We craft world-class thought leadership." But: "We write technical blogs that security engineers actually want to read."
- Not: "Leverage synergies across your channels." But: "Each channel feeds the others: blogs give social something to say, and SEO compounds both."
- Not: "Our team of passionate storytellers…" But: "Our writers are real people who hack real things."
Preferred terms & spellings
- HackerContent — one word, camel case. Never "Hacker Content" or "hackercontent" in prose (the lowercase form is reserved for mono labels and the domain).
- hakluke — always lowercase, even at the start of a sentence. Formal contexts: Luke "hakluke" Stephens.
- cybersecurity — one word. Never "cyber security" or "cyber-security".
- US English spelling throughout: optimization, color, analyze.
- Twitter/X when naming the platform; a "Twitter/X account" is managed, not "tweets are posted".
- a haksec.io company — lowercase, exactly as written, in the footer credit.
- Acronyms stay uppercase and unexplained for this audience: SEO, GEO, CISO, ABM.
imagery
Instrument, not stock photo
The visual language is measurement instrumentation: calibration grids, waveform traces, gauge readouts, terminal panels. Not "hacker movie green-on-black" — this audience mocks that costume.
Illustration & graphics
Drawn from the system, not decorated onto it: ruled calibration grids, a single orange trace on dark, corner registration marks, halftone grain. Generated imagery (blog banners, OG images) uses the ink plate, the grid, the mark and real type — never gradients-and-padlocks clip art.
Photography
Real people and real screenshots only: author headshots, founder photos, actual product output. No stock photography — a keyboard-and-hoodie photo has never convinced a security engineer of anything.
Client & third-party logos
Shown desaturated (grayscale, ~75% opacity) as a survey of the field, restored to full colour on interaction. Never recolour a client's mark; never crowd them.
Iconography
No icon library. Icons are hand-set inline SVG on a 24px grid: 1.5px strokes, round caps and joins, drawn in currentColor so they inherit the text colour. Icons are functional (menu, close, social) — never decorative filler.
ui
Components, rendered live
Everything below is the site's own CSS — not a picture of it. Radius 4px on controls, 10px on containers; depth comes from 1px borders and surface steps, not drop shadows. The one glow in the system is the button's hover bloom.
Card title
Cards are quiet: a 1px border, 2% white fill, and a 3px lift with an orange border tint on hover.
On paper surfaces the accent automatically deepens: this link is trace-ink #9e3800, keeping AA contrast on the document ground.
downloads
Every file in the kit
Or take the lot: brand-assets.zip includes everything below plus a README.
usage
Using the brand
You're welcome to use these assets to reference HackerContent in articles, talks, directories and integrations, provided they aren't altered and don't imply endorsement or partnership where none exists.
Questions about brand use, co-marketing, or a format you need that isn't here: contact us or reach out on X / LinkedIn.
// brand kit v1.0 · last updated 21 August 2026