BRANDON HUBBARDSenior Web Developer
01. Home02. Branding03. Blog04. Contact05. Tools
[ BRANDING SPECIFICATION // DESIGN.MD 1.0 ]STATUS: IMMUTABLE

BRAND WHAT MATTERS.

A deliberate exercise in self-definition—stripping away fluff to showcase genuine engineering skills, structural character, and software craftsmanship.

SECTION 01

Core Principles

Structural standards applied across software engineering and visual system design.

01

Intentional Velocity

Speed is nothing without direction. We move fast because we know exactly where we are going. No guessing.

02

Code as Craft

The code you don’t see is as critical as the pixel you do. Clean, scalable, and engineered to survive growth.

03

Radical Ownership

Every line of code, component structure, and design decision is owned, defended, and delivered.

SECTION 02 // IMMUTABLE BRANDMARK

Logomark & Construction Blueprint

The geometric anchor. Simple, bold, and balanced. It represents structural stability and engineering precision.

BH

PRIMARY / LIGHT ON DARK

BH

SECONDARY / DARK ON LIGHT

TECHNICAL BLUEPRINT PARAMETERS
ASPECT RATIO1 : 1 PERFECT SQUARE
BADGE DIMENSIONS125PX × 125PX
TYPOGRAPHY WEIGHTPLUS JAKARTA SANS 800
ALIGNMENT OFFSET-5PX LEFT MARGIN OFFSET
CAPTION FONT WEIGHT400 REGULAR (LOCKED)
CAPTION TRACKING0.10EM UPPERCASE
SECTION 03 // TYPE SYSTEM & FONTS

Brand Fonts & Typography Architecture

Curated font families and mathematical type scale balancing geometric display punch with data legibility.

PRIMARY DISPLAY, HEADINGS & BRAND LOGOMARK TYPEFACE

Plus Jakarta Sans

var(--font-display)

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9 & ( ) [ ] { } . , : ; ! ?

WEIGHTS:800 ExtraBold / 700 Bold / 600 SemiBold / 500 Medium / 400 Regular
ROLE:Primary hero headlines, section titles, card headers, navigation controls, logomark badge construction, and UI interface typography.
TECHNICAL MONOSPACE & TELEMETRY

JetBrains Mono

var(--font-mono)

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9 const BRAND_MARK = "BH";

WEIGHTS:700 Bold / 500 Medium / 400 Regular
ROLE:Code blocks, system telemetry, status chips, table metadata, API tags, and technical specs.
TYPE HIERARCHY SCALE

Mathematical Scale Matrix

H1 DISPLAY4.00rem / 64px
Brand What Matters.
Plus Jakarta Sans 800 ExtraBoldTracking: -0.04em
H2 SECTION2.35rem / 38px
Logomark & Construction
Plus Jakarta Sans 700 BoldTracking: -0.03em
H3 CARD1.60rem / 26px
Intentional Velocity
Plus Jakarta Sans 600 SemiBoldTracking: -0.02em
BODY LEAD1.15rem / 18px
A deliberate exercise in self-definition and software engineering craftsmanship.
Plus Jakarta Sans 400 RegularTracking: 0.00em
BODY REGULAR1.00rem / 16px
Clean, scalable code built to survive growth and deliver radical ownership.
Plus Jakarta Sans 400 RegularTracking: 0.00em
MONOSPACE0.875rem / 14px
const BRAND_MARK = "BH";
JetBrains Mono 400Tracking: 0.00em
CAPTION0.75rem / 12px
PRIMARY / LIGHT ON DARK
Plus Jakarta Sans 400 RegularTracking: 0.10em
SECTION 04

Voice & Tone Standards

Communicating with engineering clarity, radical ownership, and zero fluff.

DO

Direct & Confident

“I build high-performance web systems that scale.”

State facts directly. Focus on engineering outcomes and architectural ownership.

DON’T

Vague or Hyperbolic

“I am a passionate code ninja crafting digital magic.”

Avoid buzzwords like ‘ninja’, ‘guru’, ‘rockstar’, or ‘magic’.

NORTH STAR

Antoine de Saint-Exupéry

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”

Design Philosophy: strip away visual clutter, leaving only clear form, function, and engineering purpose.

SECTION 05 // BESPOKE ACCENT PALETTE

Color Architecture & WCAG Contrast

Monochrome core palette paired with 4 custom Titanium architectural accent pops (Amber, Electric Cyan, Emerald, Crimson) for high-contrast accessibility compliance.

CLICK TO COPY#0a0a0a

Void

#0a0a0a

Primary Dark Surface / Deep Void

AAA 21:1
CLICK TO COPY#121212

Charcoal

#121212

Elevated Cards & Grid Panels

AAA 19.5:1
CLICK TO COPY#262626

Concrete

#262626

1px Hairline Dividers & Grid Lines

AA 15.2:1
CLICK TO COPY#ffffff

Titanium

#ffffff

High Contrast Headlines & Badges

AAA 21:1
CLICK TO COPY#888888

Steel

#888888

Secondary Body Text & Labels

AA 7.2:1
CLICK TO COPY#3B82F6

Cobalt Accent

#3B82F6

Primary Action & Focal Tech Accent

AAA 8.5:1
CLICK TO COPY#06B6D4

Electric Cyan

#06B6D4

Technical System & Route Badges

AAA 10.2:1
CLICK TO COPY#10B981

Signal Emerald

#10B981

Operational Uptime & Success Indicators

AA 4.8:1
CLICK TO COPY#F43F5E

Precision Crimson

#F43F5E

System Alert & Attention Target Accent

AA 4.6:1
SECTION 06

Component UI Kit

Standardized interface controls, inputs, status badges, and grid panels.

Buttons

Form Controls

Status Chips

● ACTIVE▲ STAGING✖ DEPRECATED

Hairline Separators

Thin Divider
Fade Through
SECTION 07 // DESIGN.MD DIRECTIVES

AI Agent Guardrails

Technical directives for AI coding agents to preserve brand identity integrity.

❌ STRICT PROHIBITIONS
  • NO PURPLE/VIOLET ACCENTS: Do not introduce purple (`#8b5cf6`), neon gradients, or glow effects.
  • NO ROUNDED CARDS: Do not apply 1rem+ rounded corners to containers; enforce sharp 0px radius.
  • NO FLUFF WORDS: Avoid marketing clichés ("ninja", "rockstar", "magical", "supercharged").
  • NO HEAVY BLURRED SHADOWS: Rely strictly on 1px concrete hairline borders.
✅ MANDATORY DIRECTIVES
  • PRESERVE BRANDMARK: Keep the 1:1 square BH badge with 4rem 800 ExtraBold font and -5px left offset.
  • LOCK CAPTION FONT WEIGHT TO 400: Logomark captions must always be `font-weight: 400`.
  • SWISS MONOCHROME GRID: Use Void (`#0a0a0a`) background and Concrete (`#262626`) hairline grid lines.