Foreword by Matthew Ström

Of all the ways the internet has changed in the last 20 years, the most stark is how quickly it's become so big, so all-powerful, and so everywhere. In its early days, the internet was screeching modems serving static pages to 1024x768 CRT monitors in suburban homes and offices; now, it's an ever-present global commodity that fills billions of glowing screens in sizes as small as postage stamps and as large as skyscrapers.

Since their humble beginnings, websites have transformed from well-defined, heavily-constrained, text-and-image-based documents into ... "experiences". Apps. Journeys. Multi-modal, multi-screen, multi-media, multi-metric megaplexes. We, the designers and developers of the web, have seen our tools evolve alongside the things we build. The winding road we've taken is littered with dead ends, signposts, shortcuts, and monuments. But one landmark moment has always been special to me: in 2010, Ethan Marcotte published "Responsive Web Design". It defined the end of one era and the beginning of another.

"Responsive Web Design" starts with a quote from another seminal piece, John Alsopp's 2000 essay "A Dao of Web Design":

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn't have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.'

Marcotte revisits Alsopp's call to action 10 years on and asks: are we there yet? Yes, the years 2000-2010 saw the end of the first browser wars, which set the stage for the introduction of CSS3 and HTML5. But according to Marcotte, the new growth in browser tech hadn't quite achieved Alsopp's vision. "Our work is defined by its transience, often refined or replaced within a year or two," Marcotte wrote. The proliferation of new kinds of devices was showing just how fragile and restrictive the old way of creating websites was.

Fortunately, a breakthrough was just peeking over the horizon of working groups and experimental browser releases. Media queries, a feature written into the CSS3 spec, would allow websites to truly respond to "the ebb and flow of things." With responsive web design, Marcotte showed us how.

In the 12 years since "Responsive Web Design" was published, media queries and the technology that followed them have served as the foundation for a whole new way of designing and building for screens. Today, responsive design is the norm.

But like the accelerating expansion of the universe, the web keeps growing. In 2010, Marcotte bemoaned "inconsistent window widths, screen resolutions, user preferences, and our users' installed fonts"; in 2022, our apps and sites need to run on millions of different devices, online or offline, on tiny microcomputers, distributed cloud platforms, and blisteringly powerful silicon chips, and they need to work for pointer fingers, mouse cursors, eye trackers, voice assistants, and machine learning algorithms.

It's the paradox of modern interface design: the products you build today will be used in ways that you can't imagine.

What if responsive design can't respond fast enough?

—

History repeats itself: stress and strain has been the mother of invention.

In 2016, Jina Anne and Jon Levine introduced the concept of "design tokens" to the audience of SalesForce's Developer Conference. I wasn't in that room, but I've since seen many designers and developers find the concept for the first time; the reaction is often something along the lines of: "so what?" It's strikingly similar to how designers and developers responded to media queries in 2010. But just as media queries were the harbinger of a new kind of website design, design tokens are the seed for a new way to create any digital experience.

If Atomic Design is the way we build design systems, design tokens are the quarks, gluons, and other subatomic particles that we're just now detecting in our supercollider. Guides like the one you're reading are the periodic tables that will help us make sense of what we find.

In it all, the most exciting aspect of design tokens is this: we're just at the beginning. The kinds of experimentation that we're doing today with design tokens leads to more branching paths, more questions, more new ideas and more what-ifs. Each new discovery builds on the last, and all of them stand on the shoulders of inventions like design systems, responsive web design, style sheets, web browsers, and even the internet itself.

It's a great time to start building.