// identity & asset library
STEPHEN
MILLER
BUILD. BREAK. SECURE.
Freelance developer, security researcher, tinkerer. This is the visual system behind the site — marks, type, color, and iconography, plus where each asset belongs.
// 01 — logo & monogram
The SM mark, explored
Four directions built from the same two letters. All share Chakra Petch and the electric accent. The boxed mark is canonical — it reads best at favicon scale.
Boxed
PRIMARY · favicon
Prompt
TERMINAL · nav
Bracket
TAG · inline
Slash
DIVIDER · watermark
// 02 — wordmark lockups
Name treatments
STEPHEN MILLER
build. break. secure.
STEPHEN
MILLER
STACKED · avatar / card
stephen.zdfop.com
$ whoami
DOMAIN · footer / cli
// 03 — favicon & avatar
The mark at every size
The boxed monogram scales down cleanly. It ships as the browser tab icon, apple-touch icon, PWA maskable, and round social avatar. Two color treatments — line on dark, and solid fill.
// 04 — color
Palette & tokens
Surfaces
Deep
#0a0a0f
--bg-deep
Surface
#12121a
--bg-surface
Elevated
#1a1a2e
--bg-elevated
Text
#e4e4ef
--text-primary
Accents — electric, used sparingly
Cyan
#00f0ff
--accent-cyan
Magenta
#ff00aa
--accent-magenta
Amber
#ffaa00
--accent-amber
Green
#00ff88
--accent-green
Red
#ff3355
--accent-red
// 05 — typography
Three voices
Chakra Petch
DISPLAY · headings
Build. Break. Secure.
400 · 500 · 600 · 700 / ABCDEFGHIJKLM abcdefghijklm 0123456789
Space Grotesk
BODY · prose & UI
Twenty years of reading languages, breaking systems, and building things that work. Not a specialist — a tinkerer. The kind of person who finishes a client website, then cracks a box for fun.
400 · 500 · 600 · 700 / ABCDEFGHIJKLM abcdefghijklm 0123456789
JetBrains Mono
CODE · terminal & labels
$ nmap -sC -sV 10.10.11.42
PORT STATE SERVICE
22/tcp open ssh
80/tcp open http
400 · 500 · 700 / ligatures on · => != >= -->
// 06 — iconography
Custom icon set
Line icons on a 24px grid, 1.6px stroke, round joins — they sit naturally beside JetBrains Mono. Currentcolor throughout, so they inherit any accent.
Navigation
Difficulty badges
Technique tags
Social & contact
Interface
// 07 — placement on site
Where each asset lives
Everything above is deployed on the live site — this is the map. The social card below is generated at request time from the same system.
Boxed monogram — navbar, favicon, apple-touch, OG image, footer.
Prompt mark — interactive terminal, CLI easter eggs, loading states.
Difficulty badges — writeup cards & writeup headers, filter chips.
Nav icons — navbar, mobile menu, footer sitemap, section dividers.
Technique tags — writeup metadata, filter bar, related-writeup lists.
Social icons — contact page, footer, GitHub pulse widget header.
Social / OG image — 1200×630, generated live at /opengraph-image