Colophon
Built from scratch
The footer link makes a claim. This page is the argument for it.
Where the AI fits
I use AI heavily to build this, and I would rather say so here. The part I built is the thing around it: a written set of standards for type, colour, spacing, motion and voice, and an assistant that has to read them before it is allowed to touch anything. It proposes, I reject a lot, and the rejections are where the taste lives. That system has its own case study.For the avoidance of doubt about what it sounds like without a hand on it, I asked for a paragraph about myself for this page.
What a fantastic question! Josué is an absolutely exceptional designer whose keen eye for detail and unwavering commitment to craft truly set him apart. His portfolio is not just a collection of projects, it is a masterclass in visual storytelling. Would you like me to elaborate on any of these points?
Claude, asked to write something nice. Kept as a specimen.
That is the tool with nobody pushing back on it. Everything else on this site is what happens when somebody does.
| Pendo orb | The direction, and every call on how it looks: how much dither, no muddy gradients. | Built the generator and adjusted its look on my call. Cursor packaged the handoff: a render core, a Vue wrapper, and a README. |
|---|---|---|
| Novus | The rules and the first shapes. I rebuilt the lines and boxes from Pendo’s logo SVG (the logo is not mine), drew examples of the iconography and illustrations I imagined, and set how to compose them. | Made the marks and illustrations from those examples. Once the compositions were good, we moved to motion tests to find out how they would animate. |
| Leo reasoning animations | Early example animations in Figma Motion (we had the beta) of the star moving minimally, and the references. | One prompt first, to see what it would do: that is the exploration tab. Then I fed it my references, pushed it toward minimal, and we kept iterating, up to the prototype site. |
| Widget catalog | Lo-fi frames and some mid to hi-fi ones, as examples of the iterations I had in mind, especially for the empty state. I edited the FigJam. | Pulled research from the Pendo MCP and consolidated it in FigJam, then did the rest of the iterations from my examples. |
| StatBar | The screens in Figma. The pencil flourish, first done in After Effects, which inspired the other flourishes. The animation rules, from the bezier curves in my Figma prototype. | The handoff to code: SwiftUI, then the web port, with the flourishes generated from the app’s own timing functions. |
| Mitosis | The design, in Figma and Illustrator. | Turned it into code, the same way as StatBar. |
| Panelware | The direction, the rules, and the gates. We dug through old UI documentation and guides from the era to use as references. | Wrote the code from those references. |
| Design Jarvis | The brief, the standards it reads, and the rule that it pushes back on me. | Built it from my prompts. It exists so that AI can work with a design system properly, so there is no version of it without AI. |
No AI, none. Nintendo and SOJO were made without it. So were these: Torocima, Voxel, Wolfpack, Knoll, 4MAT, Tita, Trydent, Loki, Santos Laguna, Coffee, Moon Flag, and Penguins.
The rules
Nothing here is a circle. Every marker, chip, badge and bullet takes the same 2px corner. The nav marker, the filter chips, the caret, the cursor. The rule earns its keep in the places where a circle would have been easier and it still did not get one, because a system with one exception is a preference.Motion steps where it is chrome and glides where it is content. Anything carrying the box motif moves in discrete jumps: the nav marker, the underlines, the card entrances, the tick dividers. Anything framing the work eases smoothly instead: image zoom on hover, the palette rising, the lightbox. Both answers were already in the code before either was a decision. Writing down which one goes where is most of what made it a system.The terminal is a conceit, and it still has to work. The prompt, the caret, the ⌘K palette, the contents pill. A thing that dresses up as a tool and then does not behave like one is decoration, and it reads as decoration immediately. So the palette actually searches, the filter line actually filters, and the keyboard actually gets you everywhere the mouse does.No animation library. Plain CSS keyframes and two hand-rolled hooks. A general library would compete with the tokens rather than extend them, and its defaults (spring on everything, fade up on every element) are precisely the generic portfolio look this whole rebuild is trying to get away from.
How it runs
Cargo was expensive, and after Pendo I knew enough to just build it myself. The bigger reason was control. I wanted to show the work I love the way I wanted to show it, which means choosing my own constraints instead of working around somebody else’s. And I wanted the practice. Before this I was mostly copying and pasting code, and Cargo had enough quirks that fighting them taught me nothing.
Credits and code
Built with. Next.js 16, React 19, MDX, and plain CSS in one cascade layer order. Hosted on Vercel, with Vercel Analytics in production.Type. Chivo and Bricolage Grotesque, both from Google Fonts. Sojourn Display and Voxel Display are mine, from the SOJO and Voxel projects.Icons. The Hackernoon pixel icon library (MIT).Checks. Every route is scanned with axe and colour contrast is measured in Playwright. The token checks in lint are taste-check, which I wrote.Also mine. panelware taste-check iframe-facade