The recent news that Ubuntu will shortly be dropping Unity in favor of GNOME Shell has caused a big stir through the open-source community. Here at System76, we’re no exception, and a lot of talk lately has been focused around what we can do to ensure we have the best experience possible. This isn’t to say that the team at GNOME delivers bad software; quite the contrary. But for a long time we put up with a bit of a dated look in stock Ubuntu because of the promise of great things to come. Indeed, the Unity 8 mockups looked very modern and clean, and I was personally quite excited to use it on a daily basis.

Then we heard the big news, and now we’re looking at a very different future with GNOME shell. So we got to thinking; if we’re going to be making this enormous change with GNOME Shell anyway, why not take a step back an evaluate how we can deliver a software experience to our community that really represents System76? Let’s take the time now, before this big change drops, and see if we can set up a System76-based look.

System76 Pop Theme

Introducing Pop. It’s a semi-flat, modern, clean theme based on Adapta (therefore also loosely based on Google’s Material Design). While it’s a “flat” theme, it breaks some of the recent flat trends in that it has a lot of dimension, particularly Z-depth, which helps bring structure and relation to the UI. We have dark titlebars, which help draw your focus into the content and provide a contrast between whats part of the “App”, and what’s a grabbable item that you can snag to move things around. All of the color elements in the theme were chose not only to bring a distinctive System76 feel, but also to contribute positively to the usability of the OS. There are three main colors in Pop, which is a break from the more traditional two. We believe that three is a good number for communicating varius levels of information in a context-aware way, while keeping the information from becoming cluttered with too much.

Orange

The first color you’re likely to notice is the Orange, taken directly from the System76 Website. Orange in Pop is intended to indicate status, place, or context. As an example, the orange “shelf” under the active folder in the pathbar in Files indicates where in the browsing tree you’re currently viewing. This effectively conveys heirarchy while also keeping the UI lightweight and clean. The current location in the sidebar is also tinted orange, since that’s a relevant context for that information. We also use it as a selection color in Contacts, to help visually locate the current view in the list on the left:

Orange is also used in many UI controls that indicate a binary state or context to the user, like switches, checkboxes, and toggle-buttons. It can also indicate an action, like with a button.

Blue

The next major color used is our blue, which is bright and really gives the theme its name of “Pop”. Pop uses blue to convey information about content and importance. For example, the selection highlight is in blue because it pertains to the content you’re currently working with. Another good example is in Maps, where the currently selected direction is lit in blue, which helps draw your eye to it. (You’ll also notice the orange bars under the direction buttons, indicating what context of the app you’re working with)

We also use blue for UI controls that vary gradually or can indicate multiple levels. Progress bars are a predominate example, but they’re also used for sliders, faders, grab-handles.

Warm Grey

Our System76 warm grey is one of my favorite colors. It’s calming and mellow, and provides a great backdrop for large, heavy, ever-present elements like headerbars. It’s also visually distinct from a lot of trends present in UI design, which is a bit of a metaphor for our new Phase 3 plans and doing things that are distinct from the rest of the hardware industry. When combined with Orange, the brownish, warm grey also ties together our link to Ubuntu, since that’s a very core part of our identity as a company.

Designed for Better Sleep

Another nice benefit to using primarily warm colors in the UI is that warm colors fall towards the lower-energy side of the visible light spectrum. This focus on warmer colors helps reduce the amount of high-energy blue light that reaches the eye, which can disrupt sleep cycles and circadian rhythms by mimicing daylight, which can trick the brain into believing it’s still light outside. This effect is amplified when using the night-light feature that now comes built into GNOME, or with other screen-tinting apps like Redshift, F.Lux, and more.

Dark Themes

Pop also utilizes GNOME’s built-in support for dark theme variants, so that apps that request a dark palate can automatically use it. The Dark variant can also be applied system-wide for all apps, which is nice at night for reducing the brightness of the display.

The majority of apps that request dark themes are creative apps, like GIMP, Inkscape, and Builder. These represent the bread and butter of our core audience of Creators, Makers, and Builders

What’s in a Fork

One thing a couple of people have pointed out is that we chose to fork our upstream projects, rather than contribute to them. That is admittedly true, but there’s a very good reason for it. Let’s take a look at our upstream GTK theme, Adapta. Adapta is a great theme, and one of their goals is to very closely follow the design guielines for Material Design. Adapta is one of the most accurate and complete Material-Based themes available, so they’re clearly doing something right in that regard.

Our goals are a little bit different. While Material Design is great on a phone, it’s not always perfect for a full Desktop OS. There are also a couple of things that work really great in Material, but not very well in GNOME. As an example, some apps, like Maps, put a text box into their headerbars.

While this is a smart use of space, it means you can’t grab the text box and drag the window around to move it, like you can with other headerbar widgets. Otherwise, it wouldn’t be possible to drag and select text! While this could be worked around at the toolkit level, that would take time since adoption can be slow. Instead, we add a visual indication that it’s a text box, so that if the user tries to grab it to move the window and instead selects text, they can more easily realize why that is.

There are a couple other, more subtle tweaks. We use more rounded corners on the top of our titlebars. This again helps to solidify our connection to Ubuntu, while also making the bars software, more inviting, and a bit less robotic.

Our icons specifically are forked in such a way that leaves all of the base files intact, while applying our changes on top of them in our packaging. This allows us to recolor the icons to match the overall feel of the Pop theme without needing a change upstream; however, it also means that we can pull in changes from our upstream icons or push changes back their way with minimal effort to either end, allowing for a slightly more collaborative take on a traditional fork.

It’s What Open Source Is About

It’s still early in the development of Pop, but we’re very excited about the opportunities this brings for the future. All of the work we’re doing on Pop is open-source, and available through our Github pages. Feel free to download the latest working version of the theme from our PPA:

sudo add-apt-repository ppa:system76-dev/stable

sudo apt update

sudo apt install system76-pop-theme

If you have issues or suggestions to make the theme better, we invite you to file an issue on our the github page or open pull requests. We hope that you’ll join us in crafting the most beautiful Open Desktop experience on the planet.