Look & Feel

We’ve always prided ourselves on the design of elementary OS. The very origins of elementary OS come from iconography and a bit of pixel-perfect-obsessive design. We don’t believe in drastic redesigns for the sake of redesigns — after all, good design is long-lasting — but we are constantly evolving, adapting, and improving the design of elementary OS. In Juno, we’ve continued that trend and refined the smallest details for a more pleasant experience.

Sound Design

For the first time, we’ve composed a unique set of sounds for various actions in elementary OS 5 Juno. Our goal was to use physical, real-world sounds that are audible and recognizable, but that wouldn’t be disruptive in most environments.

The notification sound is probably the most frequent and important. In Loki, this was a “pop” noise. For Juno, we’ve updated it to a lightweight bell ding. Since all notifications in elementary OS make a sound by default, we wanted to make sure it was light and unobtrusive, while still getting your attention. It also sounds just how the icon looks when it rings for a new notification coming in.

Next is what we call the “thud,” commonly known as a system bell. This is what you hear when elementary OS is telling you that you can’t do something, like backspace in an empty text entry or Alt+Tab with only one window open. In Loki this was an artificial “blip” or “drip” sort of noise. In Juno, this is now a physical, somewhat muted woodblock-sounding thud. It’s more gentle, while still clearly communicating that you’re hitting a limitation in some way.

Lastly, we’ve updated the volume indicator “pop” sounds. These let you know how loud the volume is, which is important to prevent you from blowing out a speaker, your ears, or the room full of coworkers when giving a presentation. The difference from Loki is subtle, but the new sound in Juno is fuller and sounds much better on higher end audio devices.

Iconography

elementary OS may have started over ten years ago as a set of icons, but we’re never done improving and refining them. In elementary OS 5 Juno, we’ve touched well over a thousand icons for more consistency in both form and color palette. This includes redesigns, new icons, updating icons to take advantage of the new palette and hinting icons to more sizes.

File type icons have especially seen some big changes in Juno. You can see that we’ve gone from a variety of styles with inconsistent colors to a more unified look with symbols that scale better to small sizes.

We’ve also introduced some new, development-related file type icons for things like translation files and programming languages.

There’s been a lot of work on increasing the consistency between icons at their various sizes and many icons are now fully-hinted in the six sizes we use across elementary OS.

Updating all of these icons has been a huge effort and we’d like to give special thanks to Micah Ilbery, Sam Hewitt, Simon Steinbeiß, and many others for all of their hard work.

Color

As of Juno, we also now have an official color palette that includes five shades per color. These colors are based in part off of the existing icon set, but have been tweaked to follow a more physics-accurate approach to light and shadow than simply modifying the brightness. The result is a more cohesive and realistic palette that is as versatile as ever.

This new expanded palette means greater consistently between our iconography and our stylesheet, and gives our third-party app developers a much better framework for making their apps feel native to elementary OS. And as of Juno, the elementary palette will be pre-installed by default as a .gpl file and ready to use in Inkscape, GIMP, or other design tools.

System Stylesheet

The system stylesheet defines how all of the widgets like buttons, toolbars, and text entries are actually styled. If you’re familiar with web CSS, it’s a similar story for elementary OS: the code itself defines the widgets, while the stylesheet determines how they look. In elementary OS Juno we’ve refined the system stylesheet in several areas.