Before the system
From graphic design to Flash, Flex and rich internet applications, and why a blog has a design system at all.
I started out as a graphic designer. Before I wrote a line of code I spent my days on type, grids and colour, nudging things a pixel at a time until a layout felt right. I didn’t know it yet, but I was learning the thing I’d keep coming back to for the rest of my career: how lots of small decisions add up to one coherent feeling.
Then I opened Flash, and the page got a fourth dimension. There was a stage, a timeline and those little black dots called keyframes. You drew where something started, you drew where it ended, you chose Create Motion Tween, and the software filled in everything in between. I was hooked. I spent whole evenings with the Ease slider, learning that the gap between “it moves” and “it feels alive” is about a hundred milliseconds and the right curve.
Flash also handed me my first component library, though nobody called it that. Every file had a Library panel full of symbols: buttons, graphics and movie clips you drew once and reused everywhere. Edit the symbol and every instance on every frame changed with it. A button symbol had its Up, Over, Down and Hit states. Movie clips nested inside movie clips, each with its own timeline. That panel taught me more about systematic design than any book: define it once, reuse it everywhere, make every state explicit.
The Library panel was my first design system. I just didn’t have the word for it.
Tweens weren’t enough for long. I wanted things to react, so I started writing ActionScript: a stop() on a frame, then an onEnterFrame handler, then Robert Penner’s easing equations like everyone else at the time, then whole classes. That’s how a designer quietly turns into a programmer. One small script at a time, because the thing you imagined needs it.
Then came RIAs, rich internet applications, and with them Flex. Flex was Flash grown up for software. You described an interface in MXML, styled it with CSS, bound it to live data, and declared its states and the transitions between them. These were applications, not banners: dashboards that animated as numbers arrived, forms that rearranged themselves, desktop apps on Adobe AIR. For someone who loved design and code in equal measure it felt like the future had arrived early, and I loved that era more than I probably should admit.
It didn’t last. In April 2010 Steve Jobs published Thoughts on Flash, the iPhone never ran it, and within a few years the platform faded. Flash Player was switched off for good at the end of 2020. I had long since moved on to JavaScript, C# and .NET, then to architecture, and eventually to building a company.
But the ideas didn’t die. They moved. Components with explicit states are how we build every interface now. A transition is one line of CSS. The kind of BitmapData.perlinNoise() experiment we all ran in Flash now lives as a two-kilobyte WebGL shader behind the introduction on this site’s home page. Even the reveals on these essays are keyframes on a timeline; the timeline just happens to be your scrollbar.
So why a design system for a personal blog? Partly because it’s how I think. I can’t build anything without seeing the system underneath it. And partly as a small tribute. This page is my Library panel. It reads the site’s real stylesheet every time it renders, and every specimen on it is the same code that renders the essays, so it can’t drift from the truth. I named it Keyframe, after the little black dot where all of this started.
