Pathfinder Design System

Most design system portfolio pieces show either the Figma file or the shipped code. Almost none show the seam between them. That seam is where systems actually break. A value reads fine in Figma and fails contrast in a real browser. A rule holds on a dark canvas and was never checked against light mode. A component gets specced and never built.

So I set myself a constraint that couldn’t be satisfied by polish: invent a brand, build the token pipeline, build the Figma library, build a coded layer that genuinely consumes those tokens, and log every decision along the way. If the seam leaked anywhere, the log had to say so.

Pathfinder is a planner for people who navigate their work rather than just list it. The imagined user holds a lot of parallel threads and needs to see, in one glance, which of them is actually due today. That’s why the system’s center of gravity is the task row and the date chip rather than a dashboard. The product’s whole job is telling you where you are, so the components that answer “what now” get the most attention and everything else stays quiet behind them.

Choosing a fiction rather than a client was a deliberate trade, and it’s worth being clear about which half I gave up.

One file is authored by hand. tokens.json holds three tiers: primitives, semantic tokens that resolve per theme, and a thin component tier used only where it earns its place. A build script generates the CSS custom properties the components consume, and the Figma variables mirror the same file. The pipeline runs one direction only, so nothing can drift back upstream.

The documentation is downstream of it too. The four foundations pages in the published Storybook import tokens.json and render whatever is in it, which means they can’t fall out of date with the system they describe.

Each of those beats turns on a number, so here are the numbers as the thing they actually describe: real type on its real ground, and the real control edge, at the sizes they ship at.

The first direction I liked was a constellation: converging trail lines running to a north star. Directional, and it read as wayfinding without being literal. I had the AI rebuild it as vector on a precise grid.

It still failed. Not the concept, the line quality. What came back was traced, not constructed. Pencil sketching where the mark needed built shape. Open the path and the coordinates say so. That’s fine in an illustration and fatal in something that has to hold together at sixteen pixels.

So I asked for the thing that would fix it: proportions set on a Fibonacci progression, so the relationships between parts were deliberate instead of eyeballed. That request is where the tool quit. Not a wrong answer, an abandoned one.

The lesson was about routing. Constructed geometry belongs in a program built for it, and the skill is noticing that early instead of spending another hour rephrasing the same request. I moved the mark into Figma and built it there.

Seventeen components in Figma, nine of them carried into working code, and two composed screens in the published Storybook. The second one filters live on query and tag and hands off to an empty state when the results empty, so the components get exercised under change, not in a fixed snapshot.

This is a concept system. There were no users, no analytics and no stakeholders, so there’s nothing here to claim about product impact, and I am not going to invent any. What it does demonstrate is whether I can carry a system from a brand decision to shipped tested code alone, measure instead of assuming, and keep an honest record while doing it.

The record is the part I’d point at first. It includes the decisions that were superseded, the arithmetic that had to be corrected, and one occasion where a review was wrong and the original call stood.