Visual identity

Explore my latest brand book coming with this 2025 refresh, detailing the principles, systems, and tokens that shape my online presence across all platforms and formats.

Foundations

The strategic frame that drives all visual and editorial decisions.

Brand Principles

  • Functional first

    Every visual choice should help orientation, comprehension, or action.

  • Technical with warmth

    Precise grids and code references are balanced with approachable language and color.

  • Consistent across formats

    The same system must scale from docs pages to portfolio stories and social assets.

Logo System

The signature mark is the primary identifier and should stay clean, centered, and contrast-safe.

Preferred presentation on neutral gradient backgrounds.

Usage Rules

  • Preserve proportions and never distort the mark.
  • Maintain clear space around the logo equivalent to the inner bar thickness.
  • Use neutral or soft-gradient surfaces to preserve contrast.
  • Do not add outer strokes, glow effects, or unapproved recoloring.
  • Use either on dark or light backgrounds, but avoid busy imagery or strong chromatic contrasts that can obscure the details.

Color System

Accent colors provide identity and hierarchy, while the neutral scale handles surfaces and legibility.

Core Palette

Chromatic accents for links, highlights, statuses, and expressive moments.

  • BluePrimary accents--blue
  • MagentaGradient pairing--magenta
  • CyanInteractive highlights--cyan
  • GreenSuccess and balance--green
  • YellowWarnings and callouts--yellow
  • OrangeWarm secondary accents--orange
  • RedError states--red

Neutral Scale

Semantic greys adapt across themes to preserve contrast and visual rhythm.

  • Grey 900Highest contrast text--grey-900
  • Grey 700Secondary content--grey-700
  • Grey 400Muted interfaces--grey-400
  • Grey 200Borders and separators--grey-200
  • Grey 100Page background--grey-100
  • Grey 000Elevated surfaces--grey-000

Typography

Three complementary font families define the voice for interface, reading, and code contexts.

Font Families

  • UI

    Craft clear interfaces with consistent rhythm.

    Navigation, labels, controls--font-ui
  • Reading

    Tell meaningful stories with calm, readable prose.

    Long-form text and editorial sections--font-reading
  • Code

    const identity = { concise: true, expressive: true };

    Snippets, tokens and technical metadata--font-code

Type Hierarchy

  • Visual Identity / Brand Book

    DisplayPage hero and chapter headlines

  • Color System

    HeadingSection titles and card headings

  • Readable, calm paragraphs for long-form content.

    BodyArticles, descriptions, narrative copy

  • --token-name

    MetaLabels, technical metadata and short annotations

Interface Tokens

Radii and shadows support tactile depth while keeping UI components precise and reusable.

Radii

  • Radius 100--radius-100
  • Radius 200--radius-200
  • Radius 300--radius-300
  • Radius 400--radius-400

Shadows

  • Shadow 100--shadow-100
  • Shadow 200--shadow-200
  • Shadow 300--shadow-300
  • Shadow 400--shadow-400

Accessibility Guardrails

Inclusive defaults are required for every component and piece of content.

Quality Checklist

  • Keep body copy and UI text contrast at or above WCAG AA.
  • Ensure focus states are always visible on interactive elements.
  • Respect reduced-motion preferences for all transitions and reveals.
  • Use semantic headings and landmarks to keep screen-reader navigation predictable.