I consider myself a bad designer. I will say it once and move on, because that is not the subject. The subject is that I still had to design an entire portfolio, and I used the method anyone who does not know how to design would use—find references and work from them—with one rule of my own that seemed sufficient at the time to keep me from copying: a different reference for every page.
I finished the last page, opened it beside the first one, and found something I did not expect. They were not the same page. But they came from the same place, and that place was none of my references.
The method: one reference per page
On July 10, I finalized the site’s definition: which pages it would have, whom they were written for, and four visual references I liked. The next day I initialized the repository and started designing.
The rule was the one I mentioned: a different reference for each page, taken from Pinterest and design sites. If each page came from somewhere different, I thought, each page would end up different. I designed them in this order: Home first, then Projects, then Articles.
It was not slow. About, the blog, and the command palette came together in a single afternoon: those mockup files are dated between 5:09 p.m. and 6:23 p.m. on July 11, with a second About version halfway through. That same day, I documented the site’s background and motion systems.
I make that clear because the problem that follows was not speed or a lack of documentation. I was producing plenty.
My references were different; my pages were not
When I finished Articles, I placed it next to Home and stared at them. These two screenshots are from those days: the July 11 Home and an Articles hero from the blog redesign batch, while the current Home was still exactly the one shown here.
The first thing they share is the mold. Both heroes occupy the entire screen, not one pixel less. Both
have a fixed vertical bar against the left edge—74 pixels in one, 88 in the other—with the LC monogram on
top and my name written vertically. Both solve the background the same way: violet radial gradients
stretched across the whole surface. Both place a small monospaced, uppercase, letter-spaced label above
the title, paired with an aqua mark—a dot on Home, a small square on Articles. Both titles are fluid-size
h1 elements with tight line height. Both continue with the same rhythm: supporting paragraph and then
something—buttons in one, signature and reading time in the other. Even the exact palette values are the
same: the same violet, the same aqua, the same nearly black background.
And yet they are not the same page. It is worth being precise because the screenshots above would contradict me otherwise. Home centers its content in two columns, with the mini editor on the right, the giant monogram behind it, and a strip of technologies across the bottom. Articles anchors a single column to the lower left, with decorative corners and a much more saturated wash. The compositions are genuinely different.
What repeats is the repertoire of gestures, not the layout. The same repertoire of gestures in a different composition. That is more uncomfortable than if the pages were identical, because it means the effort went where it mattered least: I moved the boxes, which is the visible part. What I could not move was the vocabulary I used to build them.
It took me time to accept the explanation, and it is fairly simple: gestures are the only thing you can copy by looking. A reference shows decisions already made, not the judgment that produced them. From each of mine, I could extract what was visible and nameable—the hero fills the screen, there is a fixed bar on the left, a monospaced label goes above the title. None of that was the reference itself. It was what that reference shared with every other reference in the same genre. The part that made it distinct—why that hierarchy and not another, what it was trying to make me look at first, what it deliberately left out—was not on the surface. And that was precisely the part I did not know how to read.
That is the whole mechanism. When you copy without judgment, you do not take the reference with you; you take your own average. The average of everything you have seen, which remains the same no matter what you look at because it is made from exactly what all of those references share. That is why my pages converged even when their references looked nothing alike. Three different references, one result, and the result was mine.
It is clearer in reverse. I made these two mockups days apart, looking at different things and carrying different intentions for each page. The constant was not the reference. It was me.
Why I did not correct it at the time
I saw it, wrote it down, and kept going. Today I am more interested in that last part than in the mistake itself, because it was not carelessness: I had no basis for deciding whether it was wrong.
A design system creates similarity on purpose. The aside, palette, and typography are shared by decision, and that decision is what makes three pages feel like one site rather than three sites taped together. Without it, a portfolio reads like a folder.
The problem is that from the outside, similarity-by-system and similarity-by-copy look the same. My two heroes shared an aside, palette, and typography by decision—that was right—and shared the hero mold and repertoire of gestures by copying—that was wrong. At a glance, it is the same picture. I could not separate one from the other, so I did the only thing you can do without judgment: wrote it down and moved on.
That uncertainty is the symptom. If you cannot decide whether two pages look alike because they are coherent or because you made them the same, what is missing is not a better eye. It is the rule that says what must be different and what must be shared.
The uncomfortable part is that I had already written the rule myself, on July 11, as soon as I finished the first complete mockup:
IDENTITY BY SECTION (new and key rule): every section must have its own visual identity—different layout, background treatment, composition, and use of accent (…) NOT every section looking alike.
It was dated, it was mine, and it was there on day one. But I wrote it at the section level within a page, and the same problem appeared days later at the page level, where I did not recognize it. Writing the rule was not enough. A rule you do not know how to apply at the adjacent scale is still a sentence, not judgment.
The same mistake at two other scales
This was not an anecdote about two heroes. The same mistake appears twice more, one scale above and one below.
An entire page. Between July 12 and 13, I redesigned the blog with a full-screen hero carousel and magazine-style bands. The feedback was “the page stopped looking like a blog,” and the diagnosis was too much image and too little text. I discarded the entire design and wrote the version that remained on July 14. What I had designed was not a blog; it was a magazine.
A token. The ambient violet in the background grew until it stopped being atmosphere and became the page’s field. The result was recorded this way: “there is LESS color, not more.” If violet is the background, it can no longer be the accent; nothing contrasts with itself.
In all three cases—the heroes, the page, the color—the mistake was not poor execution. Each piece was reasonably well made. The mistake was not having written down what each one was for, which is exactly what a reference does not give you.
What was missing had a name
Between July 22 and 24, I redesigned Home, and those days largely became two or three days spent fighting with a single hero. I wore myself out, stopped, and began studying design. The diagnosis that stayed with me from that pause was the same one I had been unable to name: lack of differentiation.
The North Star came from that. It replaced two sections—the stack and an About snapshot—with a constellation of eleven small boxes that expand on click. The mechanism took about six algorithm redesigns and left five written invariants. The working file with the pseudocode was lost, and I had to recover those invariants from project memory. It also displaced the mini editor in the first screenshot: today that space holds an echo of the North Star, a miniature replica tied to scroll.
Here is my own reading mistake, and it is mine to name: I understood North Star as something large and prominent at the start of the page, when a North Star is the criterion guiding the entire page. The section works. What failed was my understanding of what it was. Today I see it this way: it could have been something simple reflected across the whole site instead of an imposing section seen only once.
The redesign also came with a bill, and I know because I measured it on July 24. Home ended up brushing against its own ceiling: about 14.3 of the 15 KB of blocking JS established by my performance budget. The global background ended up with two infinite CSS animations, contradicting another rule of mine: zero sustained work. Both facts surfaced because I measured them—a measurement of mine that ended up contradicting a rule of mine, and that is what I take from the episode.
The background is the best example that my judgment was still not fully formed. It is a vanilla WebGL shader shared across Home, with real progressive enhancement: if WebGL fails, the usual background remains. My judgment on it is exactly this: it turned out great, but it does not connect to the North Star. I kept it because it serves its function. Backgrounds were difficult for me, and still are.
The tools arrived at the end
Only after implementing Home did I begin using Figma and Canva in depth and writing structured prompts for the agents I work with. The improvements were real and immediately visible. I say that first because what follows is not a criticism of the tools.
What interests me is why they worked then and not earlier. By that point, there was something written for them to execute: the identity-by-section rule, the background system, the motion system, the differentiation diagnosis, and the North Star even if I only half understood it. A design tool does not decide how your page should look; it makes what you already decided much faster. Had I opened Figma on July 11, I would have produced those same two heroes in half the time.
The corollary comes from the agent side, and it is the part that helped me most. I had been delegating design to agents that were not configured for it, and what came back was mediocre. I always ended up correcting it by hand. For a while, I read that as a problem with the agents. It was not. I was delegating judgment that had never been written anywhere, while a structured prompt works precisely because it carries the judgment inside it. When the judgment is absent, what comes back is—again—the average.
I noticed something else while studying that sounds like bad news but is not: the more I learned, the more mistakes I found in work I had already done. I can list three causes, and all three are mine: I had no structure, I did not know how to design, and I was delegating both.
What stayed with me
A tool amplifies the judgment you already have; it does not replace the judgment you lack. That is the one thing I take from all of this. I write it in that order deliberately because the inverted version— “tools are useless”—is false and not what happened. Figma, Canva, and structured prompts visibly improved the site. The point is not their usefulness; it is the sequence. They arrived when there was already something to amplify.
Copying is not wrong either, and I do not want this to read that way. Copying is how you begin. What does not work is copying without knowing what you are copying, because then what sticks is not the reference but its surface, and every reference shares a surface.
None of this is finished. It is the path, not the destination. The difference from July 11 is not that I now know how to design. It is that now, when two of my pages look too much alike, I know what to ask myself.