This site started as an AI-led exploration of web design. I thought I might just dust off my old site and update the design template. I quickly found myself creating something entirely new for myself.
I was blown away by the design exploration experience and have tried to bring that experience to life here — not as documentation, but as a tour you can actually walk through. This is the story of how a personal site went from a half-finished experiment to a full design language, told chapter by chapter, ending with the complete system running live.
Every design process starts somewhere. Mine started with a LinkedIn profile, a half-finished experiment, and a conviction that whatever came next shouldn't look like a template.
I didn't write a formal brief before any of this started — most of what follows emerged in conversation, question by question. But laying it out this way tells the story more clearly than the messier truth would, and it's not far from what was actually in my head. Here's what I'd have written, if I'd written it.
An extension of my LinkedIn presence, but deeper. LinkedIn is professional and constrained by format. This site should go further — into the thinking, the making, the things that don't fit a résumé. It should feel like the person, not the profile.
I'm also exploring an ongoing video series called In the Moment — short conversations about the future of experience and technology. The site needs to hold that, alongside music production I've been doing quietly for years, and a place to house digital experiments. All of these things are, in their own way, about making moments. The name isn't accidental.
A Squarespace site. Two domains — iamken.me and thismoment.io — both pointing at the same place, both underutilizing what they could be.
There's a live experiment at thismoment.io right now. No copy, no sections — just a canvas with water waves that follow your cursor. Clean type. Ambient interaction that responds to you but never demands attention. That experiment is the aesthetic starting point. Whatever comes next should feel like it grew from that sensibility.
Tone: Clean but interesting. Subtle surprises. The site should reward attention without requiring it.
Structure: Sections for writing, for music, for interactive experiments, and a main feed that surfaces the latest from each. Each section should have its own identity without the site fragmenting.
Feel: Not a portfolio. Not a blog. Something closer to a studio — a place where things are being made, shared, explored. Technology serves storytelling, not the other way around.
A template. Something that looks like every other personal site. A design that announces itself before the content does. Anything corporate, over-explained, or built to impress recruiters.
Move your cursor over the frame above — this is a faithful recreation of the original canvas experiment: a sweeping cursor-driven vortex, ambient shimmer, and slow idle ripples on a pale morning-sky gradient. Warm coral text, cool blue motion. Nothing else on the page. This was the entire design system, before there was one.
The first real design decision was the simplest one: give each section a color, use it with total consistency, and let it do the wayfinding work navigation menus usually do.
Coral became the spine — the brand color, the default state, the thing that says this moment before you've gone anywhere. From there the logic extended outward: warm amber for Thoughts, because ideas should feel considered and paper-adjacent. Teal-green for Sounds — harder to explain, but immediately right, something alive and resonant.
Experiments took longer. I wanted something vivid and electric — a color that felt like a live wire, not a corporate accent. We rendered two candidates side by side in actual context rather than debating them in the abstract:
Vivid blue won. Against coral it forms the most fundamental complementary contrast in color theory — the two colors sit almost directly opposite each other. It didn't look like a safe choice. It looked like a decision.
The rule that followed was equally simple: one section color per view, never two. The cursor ripple, the nav underlines, the card accent lines, the logo dot — everything responds to where you are. Scroll into Thoughts and the whole page shifts to amber. The site knows where you are, and it tells you without a label.
This is the story I keep telling, because it shows how the best outcomes in this kind of exploration often come from happy accidents — and from looking closely enough to notice one.
Before any accident could happen, there was an actual brief: two distinct fonts, no more. A serif for display moments with real character — something that could hold a headline. And a sans-serif for the body that needed to be tech-forward and highly readable, but not anonymous. Every readable grotesque looks the same at a glance. I wanted one with a personality I'd notice.
Syne settled that half of the brief almost immediately. It's a sans originally commissioned by a Belgian art space, and it has what I'd call gallery confidence — clean enough to disappear in long runs of text, distinctive enough that you notice it when you actually look. The detail that sold it wasn't abstract. It was one letterform.
The lowercase g. Most grotesques give you a plain single-story g and call it modern. Syne's g has real shape to it — enough character that it reads as designed rather than defaulted, without tipping into novelty. That one glyph told me more about the typeface's personality than the whole specimen sheet did.
For the serif, I'd been exploring Fraunces — a variable font with an optical size axis that changes the letterforms' character depending on size. At display sizes it's supposed to have real personality: flared stems, dramatic stroke contrast, expressive curves. But something was off. The distinctive slants I kept noticing in my own browser weren't showing up in the comparison files being built for me.
We spent real time on this before figuring out why. I opened DevTools, inspected the rendered heading, and sent over what I was actually seeing. The detail that cracked it was buried in the Rendered Fonts panel — a PostScript name reading Fraunces-Regular_opsz680000_wght12C0000.
The browser had auto-selected optical size 68 for the hero text at that render size — not the axis maximum of 144, which is what the comparison files had been using, and not the restrained default smaller sizes use. Just 68. And at 68, Fraunces is exactly the typeface I'd been seeing and wanting.
The difference is subtle everywhere except three letters — look at the shoulders of the h, n, and m as the optical size climbs. That's the whole discovery, sitting in three lowercase letterforms.
The lesson underneath: Fraunces's personality lives at a specific point on its optical size axis, and that point isn't the maximum — it's the range where the display settings start asserting themselves without overreaching. We ultimately locked opsz 100 for hero text and opsz 72 for section titles — deliberate numbers, set explicitly, never left to auto. A little more assertive than the accidental 68 that started the whole conversation, but built on exactly what that accident revealed.
Fraunces and Syne together read like a wall label next to a painting. The serif sings. The sans holds structure.
The cursor interaction that started as my original experiment went through its own evolution before it became the ambient signature of the whole site. Three versions, each teaching something the last one didn't.
The original — the one shown in Chapter 01 — was a full-canvas water simulation: shimmer layers drifting on their own, ambient ripples firing on a random loop, and a dense cursor-driven vortex that swept across the whole frame the instant you moved. It was the entire page. Beautiful on its own, but built to be the whole show, not a supporting layer underneath real content and real type.
Carrying that sensibility into a full site meant figuring out how much of it could recede into the background without disappearing. The jumping-off point was direct: keep the idea of rings expanding from a point, keep the cursor as the source, and lose everything else — the drifting shimmer, the ambient random loop, the multi-band vortex. What was left had to work quietly, in the corner of your eye, while type and content did the actual talking.
The first real version for the site was velocity-driven: move the cursor and rings trail continuously behind it, faster movement spawning more rings. It felt alive and responsive immediately. It also, in my own words at the time, was going to get old.
That single reframing — react to stillness, not movement — was the whole redesign. Move your cursor anywhere on the page and nothing happens. Stop, and 600 milliseconds after you stop, a single ring expands outward from exactly where you are. A second ring, in a complementary color, follows a beat behind. Then silence until you stop again.
The effect is different in a way that's hard to describe without feeling it, which is exactly why it's sitting above this paragraph rather than only described in it. The constant trail announces itself constantly. The idle pulse feels like the site noticing you. One is decoration; the other is a moment — which, on a site named for exactly that idea, mattered more than it might have anywhere else.
Because the whole site is keyed to section colors, the pulse shifts as you scroll. Amber in Thoughts. Teal in Sounds. Blue in Experiments. The site doesn't just know where you are — it shows you, quietly, every time you pause.
This chapter is really two things happening at once — finding the words, and finding the register those words needed to be said in. Neither one worked without the other.
The words themselves weren't written so much as excavated. The process was consistent: a question, an unguarded answer, and then the shaping of that answer into something that could sit permanently on a page. I answered loosely, without editing myself in the moment, and the best lines survived almost exactly as spoken.
The hero headline came out of a question about what I believe about technology and people that most people in my industry won't say out loud. My answer, roughly: I believe technology sometimes does replace people, and I don't always want to interact with a person — but human interaction is essential, it just has to be for the right things. From that answer, one line surfaced:
Technology works. People are the hard part.
It's a provocation, not a conclusion. The italic on People is doing real work — it's the emphasis that keeps the line from reading as hostile, that says this is the interesting part rather than this is the problem. The subhead that follows opens with "Hi. I'm Ken." — a disarmingly casual register right after a confident headline. That contrast is the voice, in miniature: push, then step back and smile.
Once that contrast existed in one place, it needed to exist everywhere — which meant defining a voice deliberately rather than trusting it to stay consistent by accident. The rule that emerged: warm, curious, direct, and a little self-aware. Never corporate. Never over-explained. If a line sounded like it belonged in a pitch deck, it was cut.
The voice itself is mine — it's meant to represent me, not a brand standing in for me. But I put real guardrails around it rather than trusting every sentence to land right on its own: it has to stay on task, it has to stay a little provocative, and it has to actually say something rather than just sound nice. Those guardrails aren't a filter on my voice. They're closer to an editor who knows what I'm going for and won't let a line through just because it's pleasant.
The section intros came from the same excavation process, and one in particular is worth showing in full, because the unedited version is better than anything a first draft would have produced on purpose:
Sometimes I get found in it is the kind of line you say when you're not performing for anyone. We kept it nearly verbatim — the section intro for Sounds today reads almost exactly as it was first spoken, because rewriting it "better" would have made it worse.
That became the test for every line on the site afterward, copy and voice as one question: does this sound like something I'd actually say, or something a website would say on my behalf? The first kind stayed. The second kind got rewritten until it wasn't.
Design exploration didn't stop when the build started. Some of the most interesting decisions happened after the plan felt settled, once real fingers were tapping a real screen.
The mobile navigation was designed as a small departure from convention: no hamburger, no drawer. Four dots in a persistent bar at the bottom of the screen, one per section, each in its section color, with swipe gestures to move between them.
It took a few passes to feel right. The first version of the swipe worked in theory and did nothing in practice — a frustrating stretch of "fixing" a gesture that turned out not to be running at all, for reasons buried deep in how the framework bundles scripts. Once that was sorted, there was a second, more design-shaped decision buried in the same feature: on a section page, should a swipe move you to the next section, or take you back where you came from? We settled on the latter for individual posts — a swipe on an article always acts like a back button, while a swipe on a section landing page moves you through the dots. Small distinction, but it's the difference between the gesture feeling predictable and feeling arbitrary.
The logo dot that shifts color as you scroll — coral to amber to teal to blue — looks like a simple scroll listener until you actually use it. It's easy to get the color to update correctly as you scroll down into a new section. It's much easier to miss that the same thing has to happen cleanly scrolling back up — the dot has to notice you've re-entered the section above just as reliably, without lagging a beat behind or skipping past it if you scroll quickly. Getting that to feel equally responsive in both directions took more tuning than the effect deserves credit for, precisely because it's supposed to be invisible when it's working.
The subscribe button carries a small pulsing dot, and getting its rhythm right turned into one of the more instructive back-and-forths of the whole build. The ask was simple to say and surprisingly easy to mishear: make it feel like a heartbeat — beat, beat, pause — without changing anything about how the pulse itself looked.
The first attempt changed the style — a scaling dot instead of a soft ring. Rejected. The second attempt kept the ring but compressed its timing to fit two beats into the same window. Also rejected: "I want the pulse to stay exactly as it was. I just want the rhythm to change." The actual fix, once it landed, was almost embarrassingly simple — leave the original ring completely alone, and add a second one behind it, offset by a fraction of a second, so two soft pulses land close together and then everything rests. Only the pause between beats got tuned after that, shortened until it landed around 1.1 seconds. The whole arc is a good reminder that "change the rhythm" and "change the pulse" are not the same instruction, even when they sound like they might be.
The subscribe modal went through a similar kind of care, aimed at a specific tension: it needed to be nearly frictionless to join, while still letting someone say what they actually want to hear about. The first screen asks for nothing but an email — no password, a hidden field to catch bots quietly instead of an intrusive CAPTCHA, and a magic link to confirm. The second screen, reached only after that's done, offers three toggles — Thoughts, Sounds, Experiments — plus a fourth option to keep access without any notifications at all. Speed first, and then a real choice, not the other way around.
Working iteratively like this isn't like using a design tool, and it isn't quite like working with a designer either. It's closer to working with someone who can execute quickly, holds the context of every decision you've made together, and pushes back when something is inconsistent — but who needs you to know what you want, or at least to know what you're trying to find out.
The things that came out best were the things where I had a real, specific reaction: the ripple was going to get old. The pull quote shouldn't be italic. The blue needed to be vivid, not just blue. Those instincts, even half-formed, were the actual starting points. The exploration gave them somewhere to land.
Not AI building a site. Not me building a site. Something more like a new kind of collaboration that's still finding its shape.
What follows is that shape, made explicit — and made to outlive this one site.
Every token, type rule, motion pattern, and component from everything above — running, not just described. This is also where the story takes its last turn: the system stopped being this site's design system and became a portable one.
Once the first real experiment shipped — the earlier version of this very page — it became obvious the system underneath it was worth keeping separate from the site that produced it. It was extracted into its own file, in its own repository, with one job: stay canonical, and grow every time an experiment needs something it doesn't already have.
When an experiment needs a component, pattern, or token this system doesn't already define — stop. Don't improvise it inline and move on. Five experiments improvising five slightly different modals is how a system quietly fractures. Instead: pause, check what already exists, design the smallest addition that fits, confirm it, build it, and write it back in.
That last step is the one that makes it a system instead of a folder of files: a new or shifted design that isn't written back into the canonical spec is treated as a bug. The whole point is that the next experiment — possibly a completely different project — inherits everything this one figured out. Two changelog entries from the actual record:
Added the Timeline / lanes component. Generalized a DAW-style timeline built for a music-sample experiment into a reusable temporal visualization — label column, ruler, colored segments, a click-to-seek playhead. Added because the system had nothing for time-based data, and the need turned out to be broader than music.
Moved to its own canonical repository. Extracted from this site into a standalone, portable spec with a live showcase and a starter template — so it can be pulled into any future experiment, and pushed back to, rather than copy-pasted and slowly drifting.
What follows is that living spec, rendered in full.
Categorical palette — for telling many data series apart (timeline lanes, charts). Never used as a section accent.
Technology doesn't tell the story. It takes you somewhere the story couldn't go on its own.
Hi. I'm Ken. I spend my time figuring out how technology works — and then figuring out how to make it work for actual people.
Every experiment uses these tokens, type, motion, and components so it reads as part of one family.
font-variation-settings: 'opsz' 100Every value is a multiple of 8px. No off-grid values, anywhere, ever.
The cursor ripple you've been seeing behind this entire page is the same idle-pulse implementation from Chapter 04 — the reference version lives in the showcase, unchanged.
Buttons
Links
Technology brings depth to storytelling you can't get to without it.
Form elements
Get notified when I publish. Only the sections you care about.
The original experiment, living where it belongs.
Sound made visual.
Added after the system shipped, when a music-sample experiment needed a way to show time-based data. A fixed label column, a ruler, stacked colored lanes, and a click-to-seek playhead — generalized so it works for audio, video, or any sequence, driven by a single position value from any source.
This is the exact moment the pull-then-push loop earned its keep — a component built for one experiment became something every future one can reach for.
All SVG, never glyphs — stroke="currentColor", 1.5 weight, round caps.
The persistent audio player + queue, the subscribe modal, the mobile dot-nav, and the top nav are defined for this site, not yet lifted into the portable spec. They only get generalized the moment a future experiment actually needs one — that's the gap loop working as intended, not a gap left open by accident.