Adwaita

アドワイタ / 2011– / Style / Platform Screen Languages

Adwaita is the name GNOME gives its default visual style, defined in the project's Human Interface Guidelines. One set of components has to carry a light style, a dark style and a high contrast style, so colour arrives as named variables that switch rather than as fixed values. A header bar crosses the top of every window holding buttons drawn with no background and no border, and interface icons are monochrome symbolics built on a 16 by 16 pixel grid.

Adwaita — Nathan Hadley, GNOME Settings 48, 2025 — Wikimedia Commons / CC BY-SA 4.0 · © Nathan Hadley (Pigeon) — Nathan Hadley, GNOME Settings 48, 2025 — Wikimedia Commons / CC BY-SA 4.0 · CC BY-SA 4.0 · © Nathan Hadley (Pigeon)

Adwaita — Nathan Hadley, GNOME Text Editor 47, 2025 — Wikimedia Commons / CC BY-SA 4.0 · © Nathan Hadley (Pigeon) — Nathan Hadley, GNOME Text Editor 47, 2025 — Wikimedia Commons / CC BY-SA 4.0 · CC BY-SA 4.0 · © Nathan Hadley (Pigeon)

Adwaita — Frap, GNOME Files screen, 2025 — Wikimedia Commons / CC0 — Frap, GNOME Files screen, 2025 — Wikimedia Commons / CC0 · CC0

At a glance

Visual cues

A single header bar across the top of the window, laid out on three alignment points with the window heading in the centre
Header bar buttons carry no background and no border, leaving only the symbol and the label on the surface
Monochrome symbolic icons drawn at 16 by 16 pixels with 2 pixel strokes and no perspective
A published palette of five steps per hue, including Blue 3 at #3584e4

Best used for

Building a Linux desktop app that has to hold the same structure in both the light and the dark setting
Adding a custom widget by riding on the existing style classes and colour variables instead of hard coding values

Use this style

Take the compact brief into a project or hand the structured version to an AI tool.

design.md image prompt JSON API MCP & machine access Compose

open in ChatGPT open in Claude open in Google AI

Detailed guidance and sourcesProduction rules, reference works, comparisons, research and citation formats

Dictionary entry

Type: Identify a control with either an icon or a label, not both. The exceptions are sidebar rows and view switchers.
Composition: Put a header bar at the top, main actions at the start, the heading in the middle, menus at the end. Always leave blank area so the bar can be dragged. Group buttons with spacing rather than by linking them.
Material: Take colour from the published palette and hold it as variables that swap for light, dark and high contrast. Draw icons as monochrome SVG and recolour them programmatically.
Caution: Hard coded colour values only break once someone switches to the dark or high contrast style, which is exactly the state the author never looks at.
Further study: the list of libadwaita style classes and the CSS variables they map to / why the GNOME palette carries five steps per hue, and how each step is used / the consequence of a design in which the contents of the header bar swap as the displayed content changes

Related entries

Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)Shared effects: Trust.Compare Adwaita and Flat Design / Vector Minimalism
Material Design (マテリアルデザイン)Shared effects: Trust / Technique.Compare Adwaita and Material Design

Often confused with

Breeze (ブリーズ)compare

Cite this entry

The dictionary is meant to be linked to. Take whichever form fits where you are writing.

Link: https://indexstyle.org/styles/adwaita
Markdown: [Adwaita — IndexStyle](https://indexstyle.org/styles/adwaita)
HTML: <a href="https://indexstyle.org/styles/adwaita">Adwaita — IndexStyle</a>

Back to index position