Why I Chose a CAD-Inspired Design System

DesignCSSUI/UXPortfolio

Every developer portfolio looks the same. Gradient blobs, glass cards, smooth rounded corners. I wanted mine to feel different — like opening a technical blueprint or an engineering specification document.

The Inspiration

I've always been fascinated by the precision and clarity of CAD drawings. There's something beautiful about dimension lines, crosshair markers, hatching patterns, and monospaced annotations. They communicate information with zero ambiguity.

Design Tokens

The entire design system is built on a minimal set of CSS custom properties:—`--line-stroke` — Primary construction lines
—`--line-stroke-accent` — Emphasized borders and dimensions
—`--line-fill` — Subtle background tints
—`--line-hatch` — Diagonal hatching patterns
—`--nav-link` / `--nav-link-hover` — Interactive element states

Typography

I use Geist Mono as the primary typeface — its monospaced grid aligns perfectly with the technical drawing aesthetic. Font sizes are deliberately small (9-12px) to mimic annotation text on blueprints.

Interactive Elements

Every interactive element follows the CAD metaphor:—Crosshair markers (+) at component corners
—Dimension annotations showing container sizes
—Section indices (01 // ABOUT) mimicking drawing sheet references
—Status badges inspired by revision control markers
—Hatching patterns using CSS repeating-linear-gradient

The Result

The final design stands out precisely because it doesn't try to look "modern." It looks technical, precise, and intentional — which is exactly what I want my work to communicate.

NODE: LOG-002 // TYPE: ARTICLEWORDS: ~227