Ranking My Favorite Design Systems by Recreating Them in CSS
This article rates my favorite design systems based on how easy they are to replicate in CSS.
My Neocities website has been around for almost a year. It has undergone numerous redesigns, at least every few weeks, whether it’s a layout change or a complete overhaul of the look and feel. However, I never developed my own design language for the website; instead, I always use an existing one and replicate it in plain CSS. And so with that, why not rank them?
3. Material Design 3.0
Early version of Artist Corner blog (formerly Tawnsent’s Blog) using the version 8 stylesheet. - Hapapanopo
For versions 4, 5, 8, and maybe the current version of my website as of writing (13th March 26), MD3 was my choice. Material Design has long dominated the web, with the Material Design Lite library, tutorials on YouTube, and the various Bootstrap templates inspired by the design language. You might still see some remnants of it today if you stumble upon some random sites.
APKMirror has a stylesheet so similar to the original version of Material, just without the shadows. You might even come across some of them online, but Google has largely migrated most of its sites. You might even find some Material 2.0 sites, but it’s even rarer to come across one using proper Material 3.0, not even from Google themselves.
Replicating Material 3.0 components is relatively easy, even down to the color theming with the Material Theme Builder and CSS variables. But if we get to Material 3.0 Expressive, however, good luck. Google hasn’t created any templates or ported Expressive components to the web, as all of it is specific to Android. Bummer.
And that’s why it ranks third on the list; some are making tutorials on how to make it possible, like this one. If it weren’t for Expressive components only native to Android, I would probably rank it much higher.
2. elementaryOS Granite
Snapshot of version 3 of my Neocities, replicating the Pantheon desktop of elementaryOS 8 Circe - Pernicketybot
This one, I am not sure if it’s called Granit,e but I’ll call it that anyway, this stylesheet has been used for versions 3 and 6 on my website and remains to be one of my favorites. It’s simply a great blend between looking modern without looking flat and boring, and not looking like it was a snapshot of the 2000s.
Replicating Granite components is easy, actually! Granite’s stylesheet itself does use a CSS-based syntax (SCCS-based, more specifically); if it can be done there, why can’t it be done here? And dang it proved me kind of right, the majority of the components were easy to replicate, buttons, radio buttons, text styles, textboxes, segmented buttons, the dock, and so on.
A recent attempt at replicating Granite’s stylesheet for another version of the ‘Tawnsent’s Blog’ site. - Tawnsent
Though I was stumped on components like progress bars, sliders, and avatars. The avatars component I managed to make it work by digging into the elementary.io website and using inspect element, but progress bars and sliders I haven’t gotten into replicating just yet, and probably will not for a good while. If I manage to finish creating my replica of it, I will definitely share it ASAP!
1. Libadwaita
Version 7 of the website replicates the Libadwaita stylesheet with a big header at the top showing the mascots: Kurt, Arka, Sally, and Nat - Hapapanopo.
This one is definitely my most controversial pick. I’m not a fan of GNOME and the people within the organisation, but their stylesheet is so far the easiest one to replicate, yet somehow looks fun (even if I prefer Granite and Material Design). All of its components are unsurprisingly easy to replicate in plain CSS, and websites under the organisation, like the GNOME.org website and its Circle initiative website, showcase it well. It is virtually 1:1 with apps using Libadwaita and some UI components of GNOME Shell.
I virtually faced zero stumps attempting to replicate most of its widgets, largely because I didn’t replicate all of them, just the ones that I needed for my website. It looks impressive what I got so far; it’s virtually foolproof.
Honestly..?
Even if I ranked Libadwaita highly on this list, I’d honestly just advise you just ignore the Expressive components of M3E and just got with Material Design, the Material Theme Builder is gonna be your best friend, and if you’re new to CSS variables, in my opinion it’s one of the best ways to learn how powerful CSS variables are because you can replace the color themes on the spot and even provide light and dark stylesheets on demand.
If you want something less flat, ‘airy’, and you might like to work on a little more CSS, the Granite stylesheet is my favorite to replicate manually. I’ll work on a CSS file and hopefully get it done ASAP before I can send it off. My semester is ending soon, and I can’t wait to work on it.