August 14, 2026
The CSS Zen Garden dream, finally shipped
Rebuilding Firefox.com with Mozilla and Lincoln Loop on modern, native CSS with no pre-processors, and what that means for design systems today.
Back in 2008, fresh out of college, I discovered CSS Zen Garden, Dave Shea’s project where one HTML file could be restyled into something completely different using nothing but CSS. It was a vision of the potential of CSS to create clean, reusable designs, fully separated from content.
At the time, CSS was far less mature than it is now. There were no CSS variables. The properties available couldn’t express a full-fidelity design, so we leaned on server-side processing, images, table-based layouts, and endless hacks. Every browser rendered things differently, so much of the work was just making one design behave across all of them. Zen Garden showed what was possible in theory. But the reality in production still had a lot of catching up to do.
But over the last few years, CSS has finally caught up. CSS now supports variables with Custom Properties, complex layouts are far easier to implement without using hacks and fighting against the medium, thanks to Grid and Flexbox. The properties CSS lacked in 2008 now exist, and they’re implemented consistently enough across browsers that you can rely on them to build full-fidelity designs without hacks.
The Dream Realized
When our team started building Firefox.com, one of our goals was to prove that CSS has matured to the point where modern designs can be fully implemented in pure CSS, supporting all modern browsers, without pre-processors. And we achieved that goal. Together we built a design system of more than 70 components and 25 page templates, implemented as Wagtail components so the site’s content team can create pages for any locale without engineering help. All of the styles written purely in native CSS with no special syntax1, design tokens exported directly from design files into Custom Properties, and full support across modern browsers without hacks2.
Some have argued that the dream of the CSS Zen Garden was radically different designs with the same markup, and they don’t see the connection when Firefox.com only has a single design. While CSS Zen Garden demonstrated the vision using different designs with the same markup, the vision was always about “showing people how amazing CSS really can be”, made possible by strict separation of design from markup, and showing “how well various browsers have implemented CSS”, and what we’ve done with Firefox.com is to show how far CSS has matured as a technology, and how far browser support has truly come. We’ve proven that with a clean separation of design from markup, it’s now possible to implement full-fidelity designs that work in any browser with pure CSS. (And if you want to, you can write your own stylesheet to re-style Firefox.com just like you could with the CSS Zen Garden.)
Proving that, along with the talented folks at Mozilla, one of the leaders of web standards, meant a lot to me. It’s hard to think of a better place to find out whether the platform is really ready. And it is.
Gratitude
I owe a debt to the people who shaped how I think about this craft: Nicole Sullivan, Rachel Andrew, Jen Simmons, Chris Coyier, Kasey Kelly, who connected me to the Mozilla project, and Eric Meyer, my hometown hero. Their work taught a whole generation of us to think about CSS as a system.
I’m Open to Work
I’ve been building design systems using CSS since 2008, when I built a design system for a network of realtors using CSS 2.0 and PHP to help people quickly launch new sites for their businesses. And I’ve spent my career building design systems using various web technologies that help teams move fast and stay consistent. The tools are always changing, and faster and faster these days with AI, but what doesn’t change is the value of understanding how design systems work, and the ability to build them with any technology.
If your team is building things quickly, and wanting to ship even faster while staying consistent and providing a good user experience, I’m open to working with mission-driven and innovative teams looking for front-end expertise. If that’s you, don’t hesitate to get in touch.
Updated September 16, 2026.
Footnotes
-
Native
@importworks in all modern browsers, but still has serious performance issues. We did end up using PostCSS in production to inline@importstatements. But the authored CSS is still plain, native CSS. Nothing in it depends on a build step to be valid or to make sense. The build only flattens what the browser would otherwise fetch serially. ↩ -
All of the modern browsers listed on this browser support matrix under “Enhanced support” are supported without hacks. Legacy browsers listed under “Degraded support” are supported using a basic accessible branded stylesheet. ↩