The system behind this portfolio

Every page sits in a max-w-shell (1280px) container with px-[6vw] side margins, so gutters scale with the viewport instead of snapping between fixed breakpoints. Vertical rhythm between major sections is py-16 md:py-24. Corners use one radius token, rounded-ds (2px) - sharp enough to read as structural, not soft/decorative. Borders are almost always border-paper/10 to border-paper/18, never solid paper.

A fixed dark shell, no light mode, built around one paper-on-ink text pairing and three accent colors. I check every accent's contrast ratio against the ink background against WCAG 2.1 before I let it carry text. If a color only passes at large sizes, it's restricted to labels and headlines, never body copy.

Archivo carries every weight of the interface, from body copy to the heaviest display headlines. Caveat, a handwritten accent face, only shows up for a single emphasized word here and there. I never let it carry a full sentence.

Four variants, two sizes. primary is the only filled button in the system - use it once per view for the one action that matters most.

Three small pill patterns cover every "label on top of content" need in the system.

Every top-level homepage section (Work, Approach, About, Contact) opens with this exact pattern: a violet index number, a lime mono eyebrow, then the display headline. Copy this block verbatim and renumber it for a new section.

One bordered card shape, two ways to fill it: an icon + title + body (Approach, case-study principle cards), or plain content. Both use rounded-ds border border-paper/12 p-6.

These are the actual components (components/case-study-template.tsx) that every case study on this site is built from - imported here directly, not recreated, so there's zero drift from production. Compose a new case study (or any long-form page) by stringing these together.

type: "text"

A text block

The default building block - a heading (optional) plus one or more paragraphs. Use it for narrative sections: the challenge, a reframe, a reflection.

type: "list"

A bulleted list

Pink-dot bullets, used for scannable enumerations:

• First point
• Second point
• Third point

type: "quote"

A large pink-bordered pull-quote - only ever real copy pulled verbatim from research, testing, or product text, never invented for effect.

Attribution or context line

type: "stat"

Headline numbers

Big Archivo-900 figures for scannable stats, instead of burying a number in a paragraph.

86%

expected a behavior the product didn't support

+45%

task success after the fix shipped

2.3x

faster completion time

type: "tradeoffs" · Negotiations & trade-offs

A real constraint, decision, and resolution

Surfaces the negotiation behind a decision - never a hypothetical.

Constraint

What forced the decision - a deadline, a technical limit, a research finding.

Decision

What was chosen because of that constraint.

Resolution

How it was validated or why it held up.

type: "tiers" · MVP / ideal scoping

Tiered solution options

Single-patty-to-3x3 style scoping, so a reviewer can see the range considered.

Single

MVP

The smallest version that solves the core problem.

Shipped for MVP

Double-double

Next iteration

Adds the highest-value follow-up, still scoped tightly.

3x3

Long-term vision

The full-featured version, for later.

type: "process" · numbered steps

A numbered process

1. Step one

   What happens first, and why it comes first.

2. Step two

   What gets decided or discovered at this stage.

3. Step three

   How the previous step changes what happens next.

type: "cards" · icon grid

Principles or takeaways

First principle

One sentence explaining why it matters.

Second principle

One sentence explaining why it matters.

Third principle

One sentence explaining why it matters.

type: "metrics" · results table

A/B or usability results

Row-level results, with a highlight color for the standout win.

Task	Success	Time	Ease
Task A	+45%	2.3x faster	2.2x more direct
Task B	—	22% faster	Fewer misclicks

An optional footnote for context that doesn't fit in the table.

type: "compare" · before/after

Before and after

Two images side by side, each with its own caption - the clearest way to show what changed.

Before

After

type: "split" · alternating text + image

Text next to its supporting visual

Pairs an insight directly with a screenshot instead of always stacking full-width blocks. Pass flip: true to mirror which side the image sits on.

Image caption

type: "placeholder" · honest "coming soon"

Visual coming soon

For a visual that doesn't exist yet - never a broken image.

• Every animation (orbs, blink, view transitions) is wrapped in a prefers-reduced-motion: reduce media query in globals.css that forces durations to ~0 - motion is never load-bearing for understanding content.
• Focus states use focus-visible:outline focus-visible:outline-lime - keyboard focus is always visibly distinct from hover.
• Text selection is styled (::selection) to lime-on-ink instead of the browser default, so it stays legible against the dark shell.
• Every accent color is contrast-checked against ink (see the palette above) before it's allowed to carry text, not just used decoratively.

This site isn't hand-coded line by line, and it isn't a no-code builder either. Every page here, including this one, is built through direct AI pairing - I decide what should change and why, an agent edits the actual files in this repo, and nothing ships without a check.

A simple wordmark, built entirely from the type system above. No separate illustration tool, so it scales and recolors exactly like the rest of the interface.

I didn't build a separate high-fidelity mockup for this one. The system is implemented directly on the live, shipped site, so the homepage link below is the high-fidelity design. It's already built and deployed with the exact tokens and type scale documented on this page.

For the showcased project, I'm linking the SoundCloud UX Research case study. It's the most complete one right now, with final copy, layout, and visuals all done. The Cotality/OneHome capstone is still in progress, and it'll take over this slot once the final report lands.