Adwaita (design language)

Last updated
Adwaita
Developer(s) The GNOME Project
Initial releaseApril 6, 2011;13 years ago (2011-04-06)
Stable release
1.4.0 / September 14, 2023;14 months ago (2023-09-14)
Repository gitlab.gnome.org/GNOME/libadwaita
Written in C, Sass
Operating system BSD, Linux, Unix
Included with GNOME
Predecessor Clearlooks
Type Design language software
License LGPLv2.1+ [1]
Website developer.gnome.org/hig

Adwaita is the design language of the GNOME desktop environment. As an implementation, it exists as the default theme and icon set of the GNOME Shell and Phosh, and as widgets for applications targeting usage in GNOME. Adwaita first appeared in 2011 with the release of GNOME 3.0 as a replacement for the design principles used in Clearlooks, [2] and with incremental modernization and refinements, continues with current version releases.

Contents

Until 2021, Adwaita's theme was included as a part of the GTK widget toolkit, but in an effort to further increase independence and divergent release schedules of GTK from that of GNOME, it has since been migrated to libadwaita, which as an overall project, serves to extend GTK's base widgets with those specifically conforming to the GNOME human interface guidelines. [3]

Development

Prior to version 3.0, the GNOME desktop environment utilized the Clearlooks theme. In October 2008, designers and developers met at the GNOME User Experience Hackfest in Boston. [4] During this event, the concept of a GNOME Shell was conceived. Some very early mockups were produced that entertained the possibility of differing design from the previous incarnation of GNOME. [5] Red Hat designers Jon McCann and Jeremy Perry authored a document, drawn from a broad consensus of collaborative effort, that aimed to set standards and direction for GNOME's design. [6] In February 2010, GNOME designers met again, and produced several more publicly-available mockups. [7]

Also produced from the 2010 meeting was the decision to use Cantarell as the default typeface. [8] Cantarell had been designed by Dave Crossland during his studies in the Department of Typography and Graphic Communication at the University of Reading the previous year. It was officially added to GNOME Shell in February 2011, [9] and the GNOME Project agreed to maintain and extend the font as needed.

On January 19, 2011, Carlos Garnacho announced his completion of a tangible GTK theme implementation of Adwaita that could then be utilized by GNOME. [10]

The first major Linux distribution to ship with GNOME 3.0 and Adwaita as a default was Fedora Linux when it released version 15 on May 24, 2011. [11] [12]

Due to GTK's strong ties with GNOME, Adwaita's theme had replaced "Raleigh" as the default GTK theme in 2014; [13] however, in preparation for the release of libadwaita, the theme was removed from GTK in favor of a divergent, simpler one on January 14, 2021. [14] [3] This clear demarcation allowed for both GNOME, with its own design needs, and GTK, with its need for a simple theme that could be extended by downstream projects, to simultaneously prosper. Libadwaita first shipped with the release of GNOME 42. [15] [16]

Design language

Adwaita is characterized by its clean, modern aesthetic and focus on usability. Adwaita's design principles are rooted in simplicity, consistency, and accessibility.[ citation needed ]

Libadwaita

The libadwaita library was created to further develop Adwaita as a more closely-adherent component of the GNOME Human Interface Guidelines. Libadwaita is a library augmenting the GTK widget toolkit in a manner conformant with the GNOME Human Interface Guidelines. It lets applications change their layout based on the available screen space, integrates the Adwaita stylesheet, allows runtime recoloring with named colors and adds APIs to support the cross-desktop dark style preference. [17]

Responsive design and Linux smartphones

Libadwaita offers tools for creating applications with responsive design, allowing applications to adapt their layouts based on the available screen space, which aids in the development of smartphone-compatible GNOME applications. [18]

Libhandy

Libhandy is a library sponsored by Purism, which was the predecessor of Libadwaita. The libhandy project was used as the basis for libadwaita.

GNOME Human Interface Guidelines

The GNOME Human Interface Guidelines (HIG) serve as a comprehensive guide to designing applications for the GNOME desktop environment. It helps with creation of user interfaces that align with GNOME's design philosophy. [19]

The GNOME Human Interface Guidelines can be found on developer.gnome.org/hig

Elements

Color

Adwaita's color palette is used in design of application icons and in illustrations. It consists of several color shade families that are not named beyond their number designations. Those lacking saturation are known as "light" and "dark". This naming convention extends into the applied concept of user interface styles, where users can choose a base style for on-screen widget components that creates a light or dark overall look and feel.

Colors
Name Hex
(RGB)
Red
(RGB)
Green
(RGB)
Blue
(RGB)
Hue
(HSL/HSV)
Satur.
(HSL)
Light
(HSL)
Satur.
(HSV)
Value
(HSV)
Blue 1#99C1F160%76%95%213°76%77%37%95%
Blue 2#62A0EA38%63%92%213°76%65%58%92%
Blue 3#3584E421%52%89%213°76%55%77%89%
Blue 4#1C71D811%44%85%213°77%48%87%85%
Blue 5#1A5FB410%37%71%213°75%40%86%71%
Green 1#8FF0A456%94%64%133°76%75%40%94%
Green 2#57E38934%89%54%141°71%62%62%89%
Green 3#33D17A20%82%48%147°63%51%76%82%
Green 4#2EC27E18%76%49%152°62%47%76%76%
Green 5#26A26915%64%41%152°62%39%77%64%
Yellow 1#F9F06B98%94%42%56°92%70%57%98%
Yellow 2#F8E45C97%89%36%52°92%67%63%97%
Yellow 3#F6D32D96%83%18%50°92%57%82%97%
Yellow 4#F5C21196%76%7%47°92%51%93%96%
Yellow 5#E5A50A90%65%4%43°92%47%96%90%
Orange 1#FFBE6F100%75%44%33°100%72%57%100%
Orange 2#FFA348100%64%28%30°100%64%72%100%
Orange 3#FF7800100%47%0%28°100%50%100%100%
Orange 4#E6610090%38%0%25°100%45%100%90%
Orange 5#C6460078%27%0%21°100%39%100%78%
Red 1#F6615196%38%32%6°90%64%67%97%
Red 2#ED333B93%20%23%357°84%57%79%93%
Red 3#E01B2488%11%14%357°79%49%88%88%
Red 4#C01C2875%11%16%356°75%43%85%75%
Red 5#A51D2D65%11%18%353°70%38%82%65%
Purple 1#DC8ADD86%54%87%299°55%70%38%87%
Purple 2#C061CB75%38%80%294°51%59%52%80%
Purple 3#9141AC57%25%67%285°45%47%62%68%
Purple 4#813D9C51%24%61%283°44%43%61%61%
Purple 5#61358338%21%51%274°42%36%60%51%
Brown 1#CDAB8F80%67%56%27°38%68%30%80%
Brown 2#B5835A71%51%35%27°38%53%50%71%
Brown 3#986A4460%42%27%27°38%43%55%60%
Brown 4#865E3C53%37%24%28°38%38%55%53%
Brown 5#63452C39%27%17%27°39%28%56%39%
Light 1#FFFFFF100%100%100%0°0%100%0%100%
Light 2#F6F5F496%96%96%30°10%96%1%97%
Light 3#DEDDDA87%87%85%45°6%86%2%87%
Light 4#C0BFBC75%75%74%45°3%75%2%75%
Light 5#9A999660%60%59%45°2%60%3%60%
Dark 1#77767B47%46%48%252°2%47%4%48%
Dark 2#5E5C6437%36%39%255°4%38%8%39%
Dark 3#3D384624%22%27%261°11%25%20%28%
Dark 4#241F3114%12%19%257°23%16%37%19%
Dark 5#0000000%0%0%0°0%0%0%0%

Typography

Cantarell is Adwaita's primary typeface Cantarell2.svg
Cantarell is Adwaita's primary typeface

Adwaita uses the contemporary humanist sans-serif Cantarell typeface that was designed by Dave Crossland. Corresponding with the 3.28 version release of GNOME in 2018, Cantarell was expanded to include light and extra bold weights.

The Cantarell family does not contain a monospaced font, and Adwaita does not specify an alternative. Oftentimes, where a monospaced font is beneficial, GNOME calls for simply using a monospaced style that is chosen by the operating system shipping GNOME.

Iconography

Adwaita defines two separate style classes of icons that are meant to differentiate between concepts used for applications and user interfaces. Whereas applications use full-color in their primary icons, "symbolic" icons, monochromatic by design, are meant for user interfaces. [20] [21]

App icons

Each app targeted for GNOME should have a primary icon. The GNOME Human Interface Guidelines prescribe that an app's icon should correspond to a simple, recognizable metaphor. [22] They are not meant to be flat, but rather simplistic, and can contain some depth. However, shadows are to be avoided.

Symbolic icons

In user interfaces, even simpler, monochromatic icons that work well when viewed at small sizes are used. If color is needed, it is expected that they should be programmatically re-colored.

Implementations

The GNOME Shell was the primary vehicle for the original development of Adwaita's theme and icons. It remains a major implementation. Similarly, Phosh, Purism's mobile shell, serves in the same role.

See also

Related Research Articles

In computing, a desktop environment (DE) is an implementation of the desktop metaphor made of a bundle of programs running on top of a computer operating system that share a common graphical user interface (GUI), sometimes described as a graphical shell. The desktop environment was seen mostly on personal computers until the rise of mobile computing. Desktop GUIs help the user to easily access and edit files, while they usually do not provide access to all of the features found in the underlying operating system. Instead, the traditional command-line interface (CLI) is still used when full control over the operating system is required.

<span class="mw-page-title-main">GNOME Web</span> Free and open-source web browser for Unix-like systems

GNOME Web, called Epiphany until 2012 and still known by that code name, is a free and open-source web browser based on the GTK port of Apple's WebKit rendering engine, called WebKitGTK. It is developed by the GNOME project for Unix-like systems. It is the default and official web browser of GNOME, and part of the GNOME Core Applications.

<span class="mw-page-title-main">Aqua (user interface)</span> User interface of macOS by Apple

Aqua is the graphical user interface, design language and visual theme of Apple's macOS and iOS operating systems. It was originally based on the theme of water, with droplet-like components and a liberal use of reflection effects and translucency. Its goal is to "incorporate color, depth, translucence, and complex textures into a visually appealing interface" in macOS applications. At its introduction, Steve Jobs noted that "... it's liquid, one of the design goals was when you saw it you wanted to lick it".

<span class="mw-page-title-main">Metacity</span> Window manager

Metacity was the default window manager used by the GNOME 2 desktop environment until it was replaced by Mutter in GNOME 3. It is still used by GNOME Flashback, a session for GNOME 3 that provides a similar user experience to the Gnome 2.x series sessions.

<span class="mw-page-title-main">Human interface guidelines</span> Software development documents

Human interface guidelines (HIG) are software development documents which offer application developers a set of recommendations. Their aim is to improve the experience for the users by making application interfaces more intuitive, learnable, and consistent. Most guides limit themselves to defining a common look and feel for applications in a particular desktop environment. The guides enumerate specific policies. Policies are genes sometimes based on studies of human–computer interaction, but most are based on conventions chosen by the platform developers preferences.

<span class="mw-page-title-main">GNOME Terminal</span> Terminal emulator from GNOME

GNOME Terminal is a terminal emulator for the GNOME desktop environment written by Havoc Pennington and others. Terminal emulators allow users to access a UNIX shell while remaining on their graphical desktop.

<span class="mw-page-title-main">Tango Desktop Project</span> Open source initiative

The Tango Desktop Project was an open-source initiative to create a set of design guidelines and to provide a consistent user experience for applications on desktop environments. The project created a set of icons known as the Tango Icon Library and that were described as a "proof of concept". The Tango Desktop Project was a project of freedesktop.org, and was closely linked with other freedesktop.org guidelines, such as the Standard Icon Theming Specification.

<span class="mw-page-title-main">Oxygen Project</span> Project for KDE 4 interface

The Oxygen Project is a project created to give a visual refresh to KDE Plasma Workspaces.

<span class="mw-page-title-main">Clearlooks</span> Theme for GTK

Clearlooks is a theme for GTK, the main widget toolkit used by the GNOME desktop environment. It is based on Red Hat's Bluecurve theme. It was the default theme for GNOME since version 2.12 until GNOME 3 when it was replaced by Adwaita. Many users have contributed themes that have changed the colors and some visual effects, leading to many derivative themes.

<span class="mw-page-title-main">GNOME 3</span> Third major release of GNOME

GNOME 3 is the third major release of the GNOME desktop environment. A major departure from technologies implemented by its predecessors, GNOME 3 introduced a dramatically different user interface. It was the first GNOME release to utilize a unified graphical shell known as GNOME Shell. It also introduced support for the Wayland display protocol and added integration with other key technologies such as Flatpak during its development lifecycle.

<span class="mw-page-title-main">GTK</span> Free and open-source cross-platform widget toolkit for creating graphical user interfaces

GTK is a free software cross-platform widget toolkit for creating graphical user interfaces (GUIs). It is licensed under the terms of the GNU Lesser General Public License, allowing both free and proprietary software to use it. It is one of the most popular toolkits for the Wayland and X11 windowing systems.

<span class="mw-page-title-main">GNOME</span> Desktop environment for Linux and other Unix-like systems

GNOME originally an acronym for GNU Network Object Model Environment, is a free and open-source desktop environment for Linux and other Unix-like operating systems.

<span class="mw-page-title-main">Cantarell (typeface)</span> Humanist sans-serif typeface

Cantarell is the default typeface supplied with the user interface of GNOME since version 3.0, replacing Bitstream Vera and DejaVu. The font was originated by Dave Crossland in 2009.

GNOME Project is a community behind the GNOME desktop environment and the software platform upon which it is based. It consists of all the software developers, artists, writers, translators, other contributors, and active users of GNOME. It is no longer part of the GNU Project.

<span class="mw-page-title-main">Cinnamon (desktop environment)</span> Desktop environment

Cinnamon is a free and open-source desktop environment for Linux and other Unix-like operating systems, which was originally based on GNOME 3, but follows traditional desktop metaphor conventions.

<span class="mw-page-title-main">GNOME 2</span> Second major release of GNOME

GNOME 2 is the second major release of the GNOME desktop environment. Building upon the release of GNOME 1, development of GNOME 2 focused on a greater design-oriented approach that simplified and standardized elements of the environment. It also introduced modern font and image rendering, with improved accessibility and internationalization, and improved performance. It was released on June 26, 2002 at the Linux Symposium.

<span class="mw-page-title-main">Phosh</span> Graphical interface for mobile devices

Phosh is a graphical user interface designed for mobile and touch-based devices initially developed by Purism. The project is maintained and developed by a diverse community and the default shell used on several mobile Linux operating systems including PureOS, Mobian and Fedora Phosh. It is also an option on postmarketOS, Manjaro, and openSUSE. Its components follow a six-week release cycle.

<span class="mw-page-title-main">GNOME Text Editor</span> Text editor for Linux

GNOME Text Editor is the default text editor for the GNOME desktop environment. The program is a free and open-source graphical text editor included as part of the GNOME Core Applications. GNOME Text Editor has been the default text editor for GNOME since GNOME version 42, which was released in March 2022. GNOME Text Editor replaces gedit as GNOME's default text editor, and was created due to the GNOME developers' intention of having all of their programs comply with the GNOME Human interface guidelines (HIG). The adherence to their HIG is done by using the libadwaita library, and making gedit compliant with that would have required an extensive rewrite of gedit's code, so a new program was written from scratch instead.

References

  1. "COPYING". GNOME GitLab. 2018-02-07. Retrieved 2022-09-26.
  2. Paul, Ryan (April 6, 2011). "A shiny new ornament for your Linux lawn: Ars reviews GNOME 3.0". Ars Technica . Retrieved January 2, 2022.
  3. 1 2 Plazas, Adrien (March 31, 2021). "Introducing Libadwaita" . Retrieved January 2, 2022.
  4. McCann, Jon; Perry, Jeremy (April 6, 2011). "How We Got Here: Part I of a Design History of GNOME 3 the Shell". The GNOME Journal (Interview). Interviewed by Harries, Daf. Retrieved January 3, 2022.
  5. "Window Management and More". GNOME. Archived from the original on 2 November 2008. Retrieved January 2, 2022.
  6. McCann, William Jon; Perry, Jeremy (July 1, 2009). "GNOME Shell: A design for a personal integrated digital work environment" (PDF). The GNOME Project. Archived from the original (PDF) on November 24, 2020. Retrieved January 3, 2022.
  7. Paul, Ryan (February 26, 2010). ""Task Pooper" could revolutionize GNOME desktop". Ars Technica . Retrieved January 2, 2022.
  8. Spalinger, Nicolas (April 6, 2011). "Fonts in GNOME 3: Cantarell, Tweaking, and Trailblazing". The GNOME Journal. Retrieved January 3, 2022.
  9. Day, Allan (February 15, 2011). "GNOME 3: Getting better by the day" . Retrieved January 3, 2022.
  10. Garnacho, Carlos (January 19, 2011). "Adwaita finished". The GNOME Project . Retrieved January 2, 2022.
  11. Paul, Ryan (May 25, 2011). "First look: Fedora 15 arrives with GNOME 3.0 and systemd". Ars Technica . Retrieved January 2, 2022.
  12. Vaughan-Nichols, Steven (May 24, 2011). "Fedora 15's five best features". ZDNet . Retrieved January 2, 2022.
  13. Clasen, Matthias (June 13, 2014). "A New Default Theme for GTK+" . Retrieved January 3, 2022.
  14. Mikhaylenko, Alice (December 31, 2021). "Libadwaita 1.0". The GNOME Project . Retrieved January 3, 2022.
  15. Proven, Liam (16 March 2022). "Heaps of tweaks and improvements incoming with GNOME 42". The Register . Retrieved 15 September 2024.
  16. "Libadwaita 1.0 – Just another blog". 2021-12-31. Retrieved 2024-09-13.
  17. "Libadwaita - GUI development with Rust and GTK 4". gtk-rs.org. Retrieved 2024-09-13.
  18. "Libadwaita in the Wild". Purism. 2022-12-15. Retrieved 2024-09-13.
  19. "Design/HIG - GNOME Wiki!". wiki.gnome.org. Retrieved 2024-09-12.
  20. "App Icons - GNOME Human Interface Guidelines documentation". developer.gnome.org. Retrieved 2022-08-11.
  21. "UI Icons - GNOME Human Interface Guidelines documentation". developer.gnome.org. Retrieved 2022-08-11.
  22. "Design Principles - GNOME Human Interface Guidelines documentation". developer.gnome.org. Retrieved 2022-09-26.