SM Brand System
The identity system behind stephen.zdfop.com — boxed SM monogram, three typographic voices, an electric five-accent palette, and a custom icon set, designed and shipped end-to-end into the site.
Every pixel of this site sits on a designed identity system, not defaults. I built the brand the same way I build software: spec first, then implementation, then everything downstream consumes it.
What it covers
- The SM mark — four explorations from the same two letters (boxed, prompt, bracket, slash), with the boxed monogram as canonical. It ships as the favicon, apple-touch icon, PWA maskable icon, navbar mark, and footer lockup.
- Wordmark lockups — primary horizontal, stacked, and domain treatments, each with a defined home (header, avatar, footer/CLI).
- Color — three dark surfaces plus five electric accents (cyan / magenta / amber / green / red), used sparingly and only through CSS custom properties. No hardcoded hex in components.
- Typography — three voices with strict roles: Chakra Petch for display, Space Grotesk for prose, JetBrains Mono for terminal, labels, and code.
- Iconography — a custom line-icon set on a 24px grid at 1.6px stroke: navigation, difficulty badges (Easy → Insane with bar/star glyphs), bracket-style technique tags, social, and interface icons. All currentColor, so they inherit any accent.
Implementation
The system lives in code, not in a style guide PDF. A BrandMark component renders every monogram variant from one source of truth; the icon set is a tree-shakeable module; the favicon, apple-touch icon, maskable icon, and the social share card are all generated at request time with next/og from the same tokens and vendored brand fonts — change the system, and every asset follows.