The History of Themeable User Interfaces
This post is an excerpt from our comprehensive online course, Subatomic: The Complete Guide To Design Tokens. The course digs into _everything_ that goes into creating design token systems and themeable user interfaces to help Multi All-The-Things organizations meet the multifarious needs of their digital products.
Design tokens may be the latest incarnation, but software creators have been creating themeable user interfaces for quite a long time! As with all things, we can study history to learn from our past to inform our future. So let’s dig in!
## 1970s: The first commercial GUIs
The history of the graphical user interface (GUI) is fascinating and naturally involved a lot of research, iteration, and development before being unleashed upon the world. The first commercial computer featuring a GUI was the Xerox Alto in 1973. Behold it in all its glory:
GUIs ultimately hit the market in 1981 in the form of the Xerox Star. The Star was similar to bands like CAN and Fugazi in that sense that it wasn’t a commercial hit, but was massively influential to everything that followed.
The 70s also saw the rise of video games, especially with the runaway success of Pong. Galaxian by Atari was released in 1979 and was the first successful game that made use of a full-color RGB display.
Game & computer designers were contending with extremely limited processing/memory resources, so they were forced to get extremely creative in order to support full-color screens. Sprites were used to manage the graphics and different states for UI elements, and color themes cleverly transformed the same shapes into different characters. Themed UI elements!
## 1980s: Color, games, and the PC age
The 1980s ushered in an era of full-color displays, which opened many new opportunities and challenges for designers. Just look at this glorious sprite showcasing from Nintendo’s 1985 era-defining video game, Super Mario Brothers:
**It’s _wild_ that two of the most iconic characters in the history of pop culture — red-clad Mario and green-clad Luigi — are themeable UI elements born from pragmatic ingenuity to overcome technological challenges**. Freaking amazing.
**This ingenious sprite theming is a masterclass in creative constraints.** One thing you absolutely can’t unsee once you know is learning that **the clouds and the bushes in Super Mario Bros are the exact same shape, just themed differently!**
To put a finer point on this: the creators established the game’s structure and functionality and understood that **duplicating all of that structure & functionality merely to achieve different aesthetic results would be wasteful, expensive, and imprudent.** **So instead they created a themeable design system toachieve this critical separation of concerns between structure/functionality & aesthetics.** Incredible!
### The PC Era
Naturally, full-color displays found their way into personal computer operating systems in the 1980s. Several full-color computers hit the market in the mid-80s, and the iconic Apple II released its first full-color display in 1987.
## 1990s: OS-level theming, The Web, and CSS
Microsoft introduced color schemes with the release of Windows 3.1 in 1992. Users (including a young me!) could go into their preferences, choose a theme for the Windows UI, and even customize the colors. Easily the best theme was named “Hotdog Stand“:
This was**one of the most sophisticated, large-scale theming implementations that truly introduced the concept of real user preference and customization to the masses**. This UI customization and themeability became even more robust with the release of Windows 95.
These new operating systems unlocked new opportunities for software like Winamp to give users the ability to create their own music player skins, truly putting the “personal” in “personal computer.”
A glorious collection of Winamp skins courtesy of the Winamp Skin Museum
Of course, the World Wide Web also exploded onto the scene in the 1990s. 1993 saw the release of Mosaic, the world’s first commercial internet browser, but it was really the introduction of Netscape Navigator in late 1994 that made the web an absolute phenomenon.
The browser opened a portal into a million worlds, with **each website providing its own unique user experience and interface.** It was during this era that I found myself with my best friend making Dragonball Z fan websites on Geocities. I’ve been in love ever since.
Note: check out the brilliantly-curated and thoughtful Web Design Museum for more web history!
An example of a Dragonball Z Geocities fan website. I wish I could find my own; I remember tiled background images, Goku and Vegeta animated GIFs, fire graphics, hit counter, and a guestbook
Accomplishing custom designs in the early web relied on hard coding styling information into the HTML using elements like `<font>` tag. Thankfully, **CSS hit the scene in late 1996**, which provided a dedicated language for styling and revolutionized how we create for the web.
## 2000s: The Web Grows and Native Hits The Scene
The web continued to take off and the technologies to create it continued to improve. Books like Jeffrey Zeldman‘s _Designing with Web Standards_ and CSS books by pioneers like Molly Holzschlag and Eric Meyer helped the world’s emerging web community create beautiful and expressive web experiences.
In 2003, Dave Shea created the CSS Zen Garden, which beautifully demonstrated the concept of separation of concerns as it applies to the languages of the web.
Using the exact same HTML file, designers could use CSS to design radically different aesthetics. For me and countless others, the CSS Zen Garden drove home the importance of the separation of concerns and unlocked the real creative potential for the web as a design medium.
The web field marched into the Web 2.0 era bursting with creative expression, which was put on full display on websites like MySpace.
This customization started entering into more functional software, like then-new tools like Google Personalized Homepages (later renamed iGoogle).
Up until this point, authoring CSS to achieve sophisticated theming was extremely laborious, hard-coded, and fraught. Adding to the complexity was that the whole industry was thrust into a brand-new mobile era as soon as Steve Jobs muttered “and one more thing…” in 2007.
## 2010s: Sass, Design Systems, Design Tokens
CSS pre-processors like Sass and Less hit the scene in the mid-2000s, and Sass 2.0 introduced this wild little idea called variables in 2010. This was embraced by designers and developers who finally had a DRY way of defining a design language.
$primary-color: #3498db;
button {
background-color: $primary-color;
}
This unlocked new opportunities for themeability and more dynamic styling on the web. These new capabilities coincided with the emergence of responsive web design, modular CSS methodologies like OOCSS, SMACSS, BEM, and others. In May of 2013 I introduced a thing called Atomic Design. A few months later, React was introduced. The zeitgeist was flexibility, modularity, and component-driven design/dev, which ultimately coalesced under the label “**design systems.”**
Design systems like Google’s Material Design emerged in 2014-2015 and had themeability in mind right out of the gate.
These design systems demonstrated to the world how its possible to deliver a unified design language to multiple products, platforms, and businesses. Holy crap was it ambitious! Still is! In order to support these vast and multifarious product UIs, the concepts, technology, and tooling around theming needed to evolve.
### Design tokens origin story
While Sass variables gave designers & developers a great way to define and use a design language, Jina Anne and Jon Levine at Salesforce delivered a talk that gave the concept of these low-level design decisions a more potent name: **design tokens**.
> Design tokens are the sub atoms — the smallest pieces — of the design system. They’re an abstraction of our UI visual design and store style properties as variables.
>
> Jina Anne
There are a number of definitions and explainers about what design tokens are, which can be summarized like this. **Design tokens are:**
* **The smallest (subatomic) elements of a design system**
* **Design decisions for a design language**
* **Design properties stored as variables**
* **Implementation/technology agnostic source of truth** that can be converted into any format
* **A common language for design** used to connect people, disciplines, tools, and systems
* **The engine of themeable user interfaces**
In the mid 2010, code tools like Theo from Salesforce and Style Dictionary from Amazon emerged to transform implementation-agnostic JSON or YAML token definitions into technology-specific formats like Sass variables, iOS & Android formats, JS objects, and an important new native web technology called CSS custom properties.
Our Subatomic design tokens course introduces core concepts for creating token systems, provides sample architecture, and detailed walkthroughs for how to set up a token system in Figma & code then successfully adopt it in your org’s product ecosystem.
CSS custom properties give the web theming superpowers — and to do it live! Seriously, check out this amazing website by Abban Dunne:
There’s a whole lot to design tokens! And a whole lot of opportunity Perhaps that’s why a Design Tokens W3C Community Group was established in 2019 to help wrangle and standardize some of the structure, naming, and architecture around design tokens.
## 2020s: Multi-All-The-Things, AI, and beyond
### Tokens in Figma
Achieving elegant theming in design tools like Adobe Photoshop/Illustrator/XD, Sketch, and Figma has been elusive until very recently. Styles existed in tools like Sketch and Figma, but were insufficient for the level of customization digital orgs had to account for. In 2022, Tokens Studio was released to help bring more sophisticated theming to Figma, and in the summer of 2023, Figma released Figma Variables, a tool-native way to define and wield design tokens. This created the opportunity to design UIs that can more easily support multiple themes. The magic trick is really cool!
### The rise of AI and themeability on demand
Of course, at the time of this writing, generative AI exploded onto the scene and is introducing a brand-new paradigm that will influence the world, including how to support themeable user interfaces. These tools are still emerging, but already we’ve found many ways AI tooling can help in the creation and adoption of design token systems (we get into all of it in our course!). It’s also easy to imagine that thes new technologies can help usher in a new era of hyper-personalized user experiences. My user experience may look and behave wildly differently than yours, which introduces all sorts of fascinating opportunities and challenges.
### Our Multi-All-The-Things Reality
It’s been a hell of a journey that’s gotten us here, but we are here. We are alive in a moment where we’re responsible for designing and building for a Multi All-The-Things reality.
We have more websites, apps, screens, flows, products, ecosystems, technologies, and paradigms than at any other moment in human history. And it doesn’t show any sign of slowing down anytime soon.
No one can predict the future, but **I strongly feel that organizations that have sturdy foundations, infrastructure, and systems in place will be in a better place to navigate whatever the future may bring.**
## Consider checking out our design tokens course
**There’s SO MUCH technology, architecture, tooling, cross-disciplinary collaboration, orchestration, and gold old-fashioned human processes involved in creating robust, successful, and themeable UI systems.** Achieving balance in these systems is truly an art form: constrained-yet-expressive, systematic-yet-extensible, considered-yet-customizable.
We’ve devoted the last 12 years of our lives to helping teams establish these systems, and spent 6 months distilling all of these concepts, best practices, hard-earned lessons into a comprehensive online course called Subatomic: The Complete Guide To Design Tokens.
Our course covers everything your team needs to create & maintain a successful themeable design systems at your organization. Order our course and you’ll get:
* Over 13 hours of in-depth video
* Figma & code sample architecture
* Naming & governance workflows
* PDF slides with over 150 resources
* Access to our Slack community
* Certificate of completion
* Free updates
WHEW! I suppose this post is a history lesson slash infomercial for our course. But walking through this history, I’m struck by the fact that my personal journey on this Earth coincides with much of the history of themeable user interfaces. I am so incredibly grateful that I’m on this planet during such a time of technological innovation and convergence between technology, design, and art. I’ve now spent literally half of my life professionally designing cool-looking things for the World Wide Web. And I think that’s pretty badass.
![TECH SPEC TUESDAY Xerox Alto [Image of a Xerox Alto computer] About this machine: The Xerox Alto was a tremendously influential computer. Designed by Xerox at the “Palo Alto Research Center” (or PARC) and released in 1973, it combined many standard-settings features in one extraordinarily expensive computer: $32,000! It had a custom micro-coded processor, a Graphical User Interface, a mouse, Ethernet networking including e-mail, file sharing, and network boot, and “What You See Is What You Get” desktop publishing. The Xerox Alto was seen as the future of computing in Silicon Valley. CPU: Custom micro-coded processor Memory: 128–512 KB Storage: Removable Disk Packs Graphics: 606 x 808 bitmap graphics, integrated CRT Networking: Ethernet Notes: Introduced, GUI, mouse, WYSIWYG, networking vintage.computer](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:fmlya2riurqmai3pdjh6mfhx/bafkreicgbrj24bk7m7ujbw4dg4dh6fb2ob37lr4onyfcu24shenblhlzpm)
