# Adwaita (アドワイタ)

> 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.

- IndexStyle No.520 — https://indexstyle.org/styles/adwaita
- Kind: Style · Family: Platform Screen Languages · Era: 2011–
- Mood: Technology, Calm, Trust
- Color cues: #3584e4 / #f6f5f4 / #241f31 (cues taken from reference works, not a fixed palette)

## Defining characteristics

- 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

## Composition recipe

- Typography & lettering: Identify a control with either an icon or a label, not both. The exceptions are sidebar rows and view switchers.
- Layout & structure: 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 & texture: 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.

## What to avoid

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.

## Application checklist

Before calling a piece an application of this style, check it against the defining characteristics:

- [ ] 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
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)** — Reduces information to plain planes and color, portable across screens and media. → https://indexstyle.org/styles/flat-design
- **Material Design (マテリアルデザイン)** — A design system that reduces the physical metaphor of paper and ink to rules of shadow and overlap. Elements are given elevation, shadow states the hierarchy, and motion carries physical cause and effect. It became the model for UI design being distributed as a system. → https://indexstyle.org/styles/material-design

## Further study

- libadwaita の style class 一覧と CSS 変数の対応
- GNOME パレットが色相ごとに5段階を持つ理由と、その使い分け
- 表示内容が変わるとヘッダーバーの中身も差し替わるという設計の帰結

## Reference works

- Nathan Hadley《GNOME 設定 48》2025年 — Wikimedia Commons / CC BY-SA 4.0 — https://commons.wikimedia.org/wiki/File:GNOME%20Settings%2048.png
- Nathan Hadley《GNOME テキストエディター 47》2025年 — Wikimedia Commons / CC BY-SA 4.0 — https://commons.wikimedia.org/wiki/File:GNOME%20Text%20Editor%2047.png
- Frap《GNOME Files の画面》2025年 — Wikimedia Commons / CC0 — https://commons.wikimedia.org/wiki/File:Screenshot%20Nautilus%20hidden%20file.png

## Source of record

- GNOME Human Interface Guidelines — UI Styling — https://developer.gnome.org/hig/guidelines/ui-styling.html

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/adwaita
- Image-generation prompt (legally clean): https://indexstyle.org/styles/adwaita/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compose_styles; prompts: image-prompt, apply-style)