Adwaita (design language)#GNOME Human Interface Guidelines (HIG)

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.{{cite interview |last1=McCann |first1=Jon |last2=Perry |first2=Jeremy |interviewer=Harries, Daf |title=How We Got Here: Part I of a Design History of GNOME 3 the Shell |work=The GNOME Journal |date=April 6, 2011 |url=https://thegnomejournal.wordpress.com/2011/04/06/how-we-got-here-part-i-of-a-design-history-of-gnome-3-the-shell |access-date=January 3, 2022}} 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.{{cite web |url=http://live.gnome.org/Boston2008/GUIHackfest/WindowManagementAndMore |title=Window Management and More |publisher=GNOME |access-date=January 2, 2022 |archive-url=https://web.archive.org/web/20081102030046/http://live.gnome.org/Boston2008/GUIHackfest/WindowManagementAndMore |archive-date=2 November 2008 |url-status=dead}} 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.{{cite web |url=https://people.gnome.org/~mccann/shell/design/GNOME_Shell-20090705.pdf |title=GNOME Shell: A design for a personal integrated digital work environment |last1=McCann |first1=William Jon |last2=Perry |first2=Jeremy |publisher=The GNOME Project |date=July 1, 2009 |access-date=January 3, 2022 |archive-date=November 24, 2020 |archive-url=https://web.archive.org/web/20201124033230/https://people.gnome.org/~mccann/shell/design/GNOME_Shell-20090705.pdf |url-status=dead }} In February 2010, GNOME designers met again, and produced several more publicly-available mockups.{{cite web |url=https://arstechnica.com/information-technology/2010/02/task-pooper-could-revolutionize-gnome-desktop |title="Task Pooper" could revolutionize GNOME desktop |author=Paul, Ryan |publisher=Ars Technica |date=February 26, 2010 |access-date=January 2, 2022}}

Also produced from the 2010 meeting was the decision to use Cantarell as the default typeface.{{cite web |url=https://thegnomejournal.wordpress.com/2011/04/06/fonts-in-gnome-3-cantarell-tweaking-and-trailblazing |title=Fonts in GNOME 3: Cantarell, Tweaking, and Trailblazing |author=Spalinger, Nicolas |publisher=The GNOME Journal |date=April 6, 2011 |access-date=January 3, 2022}} 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,{{cite web |url=https://afaikblog.wordpress.com/2011/02/15/gnome-3-getting-better-by-the-day |title=GNOME 3: Getting better by the day |author=Day, Allan |date=February 15, 2011 |access-date=January 3, 2022}} 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.{{cite web |url=https://mail.gnome.org/archives/gnome-doc-list/2011-January/msg00035.html |title=Adwaita finished |author=Garnacho, Carlos |publisher=The GNOME Project |date=January 19, 2011 |access-date=January 2, 2022}}

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.{{cite web |url=https://arstechnica.com/information-technology/2011/05/first-look-fedora-15-arrives-with-gnome-30-and-systemd |title=First look: Fedora 15 arrives with GNOME 3.0 and systemd |author=Paul, Ryan |publisher=Ars Technica |date=May 25, 2011 |access-date=January 2, 2022}}{{cite web |url=https://www.zdnet.com/article/fedora-15s-five-best-features/ |title=Fedora 15's five best features |author=Vaughan-Nichols, Steven |publisher=ZDNet |date=May 24, 2011 |access-date=January 2, 2022}}

Due to GTK's strong ties with GNOME, Adwaita's theme had replaced "Raleigh" as the default GTK theme in 2014;{{cite web |author=Clasen, Matthias |date=June 13, 2014 |title=A New Default Theme for GTK+ |url=https://blogs.gnome.org/mclasen/2014/06/13/a-new-default-theme-for-gtk |access-date=January 3, 2022}} 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.{{cite web |author=Mikhaylenko, Alice |date=December 31, 2021 |title=Libadwaita 1.0 |url=https://blogs.gnome.org/alicem/2021/12/31/libadwaita-1-0 |access-date=January 3, 2022 |publisher=The GNOME Project}} 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.{{cite web |last1=Proven |first1=Liam |title=Heaps of tweaks and improvements incoming with GNOME 42 |url=https://www.theregister.com/2022/03/16/gnome_42_rc/ |website=The Register |access-date=15 September 2024 |date=16 March 2022}}{{Cite web |date=2021-12-31 |title=Libadwaita 1.0 – Just another blog |url=https://blogs.gnome.org/alicem/2021/12/31/libadwaita-1-0/ |access-date=2024-09-13 |language=en-US}}

With the release of the GNOME 48 Alpha release in January 24th, 2025, it was announced that Cantarell would be replaced as the default font by the brand new font Adwaita Sans, based on the popular font Inter; as well as the default monospaced font switching from Source Code Pro to Adwaita Mono, based on Iosevka.{{Cite web |title=GNOME / Adwaita Fonts · GitLab |url=https://gitlab.gnome.org/GNOME/adwaita-fonts |access-date=2025-02-01 |website=GitLab |language=en}}

{{See also|KISS principle|Worse is better|Principles of user interface design}}

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|date=September 2024}}

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.{{Cite web |title=Libadwaita - GUI development with Rust and GTK 4 |url=https://gtk-rs.org/gtk4-rs/stable/latest/book/libadwaita.html |access-date=2024-09-13 |website=gtk-rs.org}}

{{Main|GNOME Mobile}}

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.{{Cite web |date=2022-12-15 |title=Libadwaita in the Wild |url=https://puri.sm/posts/libadwaita-in-the-wild/ |access-date=2024-09-13 |website=Purism |language=en-US}}

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

{{Expand section|date=October 2024}}

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.{{Cite web |title=Design/HIG - GNOME Wiki! |url=https://wiki.gnome.org/Design/HIG |access-date=12 September 2024 |website=wiki.gnome.org}}

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.

{{Colort}}

{{Colort/Color|hex=99C1F1|r=153|g=193|b=241|name=Blue 1}}

{{Colort/Color|hex=62A0EA|r=98|g=160|b=234|name=Blue 2}}

{{Colort/Color|hex=3584E4|r=53|g=132|b=228|name=Blue 3}}

{{Colort/Color|hex=1C71D8|r=28|g=113|b=216|name=Blue 4}}

{{Colort/Color|hex=1A5FB4|r=26|g=95|b=180|name=Blue 5}}

{{Colort/Color|hex=8FF0A4|r=143|g=240|b=164|name=Green 1}}

{{Colort/Color|hex=57E389|r=87|g=227|b=137|name=Green 2}}

{{Colort/Color|hex=33D17A|r=51|g=209|b=122|name=Green 3}}

{{Colort/Color|hex=2EC27E|r=46|g=194|b=126|name=Green 4}}

{{Colort/Color|hex=26A269|r=38|g=162|b=105|name=Green 5}}

{{Colort/Color|hex=F9F06B|r=249|g=240|b=107|name=Yellow 1}}

{{Colort/Color|hex=F8E45C|r=248|g=228|b=92|name=Yellow 2}}

{{Colort/Color|hex=F6D32D|r=246|g=211|b=45|name=Yellow 3}}

{{Colort/Color|hex=F5C211|r=245|g=194|b=17|name=Yellow 4}}

{{Colort/Color|hex=E5A50A|r=229|g=165|b=10|name=Yellow 5}}

{{Colort/Color|hex=FFBE6F|r=255|g=190|b=111|name=Orange 1}}

{{Colort/Color|hex=FFA348|r=255|g=163|b=72|name=Orange 2}}

{{Colort/Color|hex=FF7800|r=255|g=120|b=0|name=Orange 3}}

{{Colort/Color|hex=E66100|r=230|g=97|b=0|name=Orange 4}}

{{Colort/Color|hex=C64600|r=198|g=70|b=0|name=Orange 5}}

{{Colort/Color|hex=F66151|r=246|g=97|b=81|name=Red 1}}

{{Colort/Color|hex=ED333B|r=237|g=51|b=59|name=Red 2}}

{{Colort/Color|hex=E01B24|r=224|g=27|b=36|name=Red 3}}

{{Colort/Color|hex=C01C28|r=192|g=28|b=40|name=Red 4}}

{{Colort/Color|hex=A51D2D|r=165|g=29|b=45|name=Red 5}}

{{Colort/Color|hex=DC8ADD|r=220|g=138|b=221|name=Purple 1}}

{{Colort/Color|hex=C061CB|r=192|g=97|b=203|name=Purple 2}}

{{Colort/Color|hex=9141AC|r=145|g=65|b=172|name=Purple 3}}

{{Colort/Color|hex=813D9C|r=129|g=61|b=156|name=Purple 4}}

{{Colort/Color|hex=613583|r=97|g=53|b=131|name=Purple 5}}

{{Colort/Color|hex=CDAB8F|r=205|g=171|b=143|name=Brown 1}}

{{Colort/Color|hex=B5835A|r=181|g=131|b=90|name=Brown 2}}

{{Colort/Color|hex=986A44|r=152|g=106|b=68|name=Brown 3}}

{{Colort/Color|hex=865E3C|r=134|g=94|b=60|name=Brown 4}}

{{Colort/Color|hex=63452C|r=99|g=69|b=44|name=Brown 5}}

{{Colort/Color|hex=FFFFFF|r=255|g=255|b=255|name=Light 1}}

{{Colort/Color|hex=F6F5F4|r=246|g=245|b=244|name=Light 2}}

{{Colort/Color|hex=DEDDDA|r=222|g=221|b=218|name=Light 3}}

{{Colort/Color|hex=C0BFBC|r=192|g=191|b=188|name=Light 4}}

{{Colort/Color|hex=9A9996|r=154|g=153|b=150|name=Light 5}}

{{Colort/Color|hex=77767B|r=119|g=118|b=123|name=Dark 1}}

{{Colort/Color|hex=5E5C64|r=94|g=92|b=100|name=Dark 2}}

{{Colort/Color|hex=3D3846|r=61|g=56|b=70|name=Dark 3}}

{{Colort/Color|hex=241F31|r=36|g=31|b=49|name=Dark 4}}

{{Colort/Color|hex=000000|r=0|g=0|b=0|name=Dark 5}}

|}

File:Cantarell2.svgBeginning with GNOME 48, Adwaita adopted a new typeface family known as "Adwaita Fonts".{{cite web |author=Larabel, Michael |date=January 31, 2025 |title=GNOME 48 Switches Over To "Adwaita Sans" As Default Font |url=https://www.phoronix.com/news/GNOME-48-Adwaita-Sans |access-date=February 6, 2025 |publisher=Phoronix}} The Adwaita Fonts family is a slight modification of the Inter typeface family, however it also includes a monospaced font known as "Adwaita Mono", which is a modified version of Iosevka.{{cite web |author=Sneddon, Joey |date=February 2, 2025 |title=GNOME Introduces New UI & Monospace Adwaita Fonts |url=https://www.omgubuntu.co.uk/2025/02/gnome-introduces-new-ui-monospace-adwaita-fonts |access-date=February 6, 2025 |publisher=OMG! Ubuntu}} With this change, the default typeface for GNOME will be known as "Adwaita Sans".

Previously, Adwaita used 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.

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.{{Cite web |title=App Icons - GNOME Human Interface Guidelines documentation |url=https://developer.gnome.org/hig/guidelines/app-icons.html#symbolic-app-icons |access-date=2022-08-11 |website=developer.gnome.org}}{{Cite web |title=UI Icons - GNOME Human Interface Guidelines documentation |url=https://developer.gnome.org/hig/guidelines/ui-icons.html |access-date=2022-08-11 |website=developer.gnome.org}}

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.{{Cite web |title=Design Principles - GNOME Human Interface Guidelines documentation |url=https://developer.gnome.org/hig/principles.html |access-date=2022-09-26 |website=developer.gnome.org}} They are not meant to be flat, but rather simplistic, and can contain some depth. However, shadows are to be avoided. App developers can request an icon from the GNOME Design Team in [https://gitlab.gnome.org/Teams/Design/app-icon-requests/ a GitLab repository].

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.

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.

• GNOME
• GNOME Project
• GNOME Core Applications

{{reflist|2}}

• [https://developer.gnome.org/hig GNOME Human Interface Guidelines]
• [https://cantarell.gnome.org Cantarell typeface official site]

{{GNOME}}

Category:Design languages

Category:GNOME