Adwaita (design language)

Adwaita

The GNOME Shell's Activities Overview with several core apps in-use
Developer(s)	The GNOME Project
Initial release	April 6, 2011;13 years ago (2011-04-06)
Stable release	1.4.0 / September 14, 2023;6 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.

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

GNOME 3 and initial implementation

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]}

Design language and libadwaita

When Purism began development work on its Librem 5 smartphone in 2017, it needed adaptive, mobile-friendly components to be implemented into PureOS. Purism then began both design and technical implementation into a project that became known as "Handy", which focused around a library known as "libhandy" that extended GTK widgets.

Marking a major shift from Adwaita as a theme and icon set into its broader focus as a design language, the libadwaita project was created to further develop Adwaita as a more closely-adherent component of the GNOME Human Interface Guidelines. The previous libhandy project was used as the basis for libadwaita, but was now able to be extended beyond a mobile interface context. 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 41. ^[15]

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	#99C1F1	60%	76%	95%	213°	76%	77%	37%	95%
Blue 2	#62A0EA	38%	63%	92%	213°	76%	65%	58%	92%
Blue 3	#3584E4	21%	52%	89%	213°	76%	55%	77%	89%
Blue 4	#1C71D8	11%	44%	85%	213°	77%	48%	87%	85%
Blue 5	#1A5FB4	10%	37%	71%	213°	75%	40%	86%	71%
Green 1	#8FF0A4	56%	94%	64%	133°	76%	75%	40%	94%
Green 2	#57E389	34%	89%	54%	141°	71%	62%	62%	89%
Green 3	#33D17A	20%	82%	48%	147°	63%	51%	76%	82%
Green 4	#2EC27E	18%	76%	49%	152°	62%	47%	76%	76%
Green 5	#26A269	15%	64%	41%	152°	62%	39%	77%	64%
Yellow 1	#F9F06B	98%	94%	42%	56°	92%	70%	57%	98%
Yellow 2	#F8E45C	97%	89%	36%	52°	92%	67%	63%	97%
Yellow 3	#F6D32D	96%	83%	18%	50°	92%	57%	82%	97%
Yellow 4	#F5C211	96%	76%	7%	47°	92%	51%	93%	96%
Yellow 5	#E5A50A	90%	65%	4%	43°	92%	47%	96%	90%
Orange 1	#FFBE6F	100%	75%	44%	33°	100%	72%	57%	100%
Orange 2	#FFA348	100%	64%	28%	30°	100%	64%	72%	100%
Orange 3	#FF7800	100%	47%	0%	28°	100%	50%	100%	100%
Orange 4	#E66100	90%	38%	0%	25°	100%	45%	100%	90%
Orange 5	#C64600	78%	27%	0%	21°	100%	39%	100%	78%
Red 1	#F66151	96%	38%	32%	6°	90%	64%	67%	97%
Red 2	#ED333B	93%	20%	23%	357°	84%	57%	79%	93%
Red 3	#E01B24	88%	11%	14%	357°	79%	49%	88%	88%
Red 4	#C01C28	75%	11%	16%	356°	75%	43%	85%	75%
Red 5	#A51D2D	65%	11%	18%	353°	70%	38%	82%	65%
Purple 1	#DC8ADD	86%	54%	87%	299°	55%	70%	38%	87%
Purple 2	#C061CB	75%	38%	80%	294°	51%	59%	52%	80%
Purple 3	#9141AC	57%	25%	67%	285°	45%	47%	62%	68%
Purple 4	#813D9C	51%	24%	61%	283°	44%	43%	61%	61%
Purple 5	#613583	38%	21%	51%	274°	42%	36%	60%	51%
Brown 1	#CDAB8F	80%	67%	56%	27°	38%	68%	30%	80%
Brown 2	#B5835A	71%	51%	35%	27°	38%	53%	50%	71%
Brown 3	#986A44	60%	42%	27%	27°	38%	43%	55%	60%
Brown 4	#865E3C	53%	37%	24%	28°	38%	38%	55%	53%
Brown 5	#63452C	39%	27%	17%	27°	39%	28%	56%	39%
Light 1	#FFFFFF	100%	100%	100%	0°	0%	100%	0%	100%
Light 2	#F6F5F4	96%	96%	96%	30°	10%	96%	1%	97%
Light 3	#DEDDDA	87%	87%	85%	45°	6%	86%	2%	87%
Light 4	#C0BFBC	75%	75%	74%	45°	3%	75%	2%	75%
Light 5	#9A9996	60%	60%	59%	45°	2%	60%	3%	60%
Dark 1	#77767B	47%	46%	48%	252°	2%	47%	4%	48%
Dark 2	#5E5C64	37%	36%	39%	255°	4%	38%	8%	39%
Dark 3	#3D3846	24%	22%	27%	261°	11%	25%	20%	28%
Dark 4	#241F31	14%	12%	19%	257°	23%	16%	37%	19%
Dark 5	#000000	0%	0%	0%	0°	0%	0%	0%	0%

Typography

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. ^{[16] [17]}

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. ^[18] 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 canonical implementation of Adwaita for application programming is in the libadwaita project, which provides a library, that extends the GTK widget toolkit in a manner conformant with the GNOME Human Interface Guidelines. The original basis for libadwaita was the libhandy library that was developed by Purism in order to have GTK widgets that could be used for in a mobile-first, desktop convergent hardware system. ^[19] For this reason, Purism continues to maintain and serve as primary developers of libadwaita.

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.

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. 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 . 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. Larabel, Michael (March 31, 2021). "GNOME 41 To Introduce Libadwaita For Helping To Define GNOME Apps". Phoronix. Retrieved January 3, 2022.
16. "App Icons - GNOME Human Interface Guidelines documentation". developer.gnome.org. Retrieved 2022-08-11.
17. "UI Icons - GNOME Human Interface Guidelines documentation". developer.gnome.org. Retrieved 2022-08-11.
18. "Design Principles - GNOME Human Interface Guidelines documentation". developer.gnome.org. Retrieved 2022-09-26.
19. Sneddon, Joey (December 31, 2021). "Libadwaita 1.0 Arrives to Kickstart a New Era of GTK App Development" . Retrieved 2022-01-24.

External links

• GNOME Human Interface Guidelines
• Cantarell typeface official site