Design system & build • 2026

BUILDING THIS SITE

My portfolio, planned, systemized and designed in Figma, then built by hand.

My old site showed my work as promo tiles across a lot of brands. It never got to the brief, the decisions or the outcome. So I set myself a new brief: a dark, minimal base with one signal color, and case studies that walk through the problem, the thinking and the results.

I started with notes and references, turned the decisions into a published Figma library of foundations and components, designed every page from that library, and built the site with Claude as a coding partner. Here’s the whole process, from the messy first page to the shipped site.

View the Figma file

Planning & ideation

What my old portfolio got right and wrong, notes on what makes a design portfolio work, and early type, color and spacing experiments. For type and spacing, I started from a baseline worked out with Claude, then made the calls myself.

Screenshots of other designers’ work are blurred.

Old portfolio landing page with a welcome message over a black and white basketball photo — Old portfolio: landing page

Old portfolio: work as promo tiles

Notes board reviewing what worked and what fell short on the old portfolio — Notes on my old portfolio

Notes board on USP, layout and social proof, with reference screenshots blurred — Design portfolio notes

Early neutral, primary and dark mode color ramps — Early color palette

Complete type scale table with sizes, tracking, weights and use cases — The type scale

Notes on the role of each font family and when weights drop at smaller sizes — Why each style does its job

Working it through with Claude

I used Claude to get a baseline for type and spacing: what each style could be for, how sizes might scale down for phones, and when to use each spacing step. It was a reference point, not a rulebook. Every decision from there was mine.

Draft type scale notes for display and text styles — Type scale draft

Draft display sizes and their uses — Display sizes

Note on scaling Display XL down for phones — Mobile display sizes

Note on swapping two type styles on mobile frames — Mobile overrides

Note on letting frames grow vertically while the grid governs width — Frame height

When to use each spacing step, from XS to 3XL — Spacing scale

Spacing scale rules written out in Figma — Spacing rules

Figma typography panel showing size, line height and letter spacing — Type settings in Figma

Foundations

The decisions locked in as a published library: Signal Orange against a near-black background, two type families doing two different jobs, a seven-step spacing scale and a 12-column grid (four on phones).

Color palette: Signal Orange, Signal Hover, Signal Tint and five neutrals — Color palette

Typography: Big Shoulders Display and Archivo styles with sizes and weights — Typography

Spacing scale from XS 8px to 3XL 128px with usage notes — Spacing scale

Desktop grid: 12 columns with 120px margins and usage guidelines — Grid: desktop

Mobile grid usage guidelines and rules — Grid: mobile

Components

Every repeated piece of the site built once, with its states: navigation, buttons, case study cards, Next Project and the footer, plus reusable image blocks and animation players.