{"id":"adwaita","no":520,"name":"Adwaita","ja":"アドワイタ","era":"2011–","family":"プラットフォームの画面言語","kind":"スタイル","collection":"Dictionary expansion 26","addedAt":"2026-08-19","source":{"title":"GNOME Human Interface Guidelines — UI Styling","url":"https://developer.gnome.org/hig/guidelines/ui-styling.html"},"reference":{"status":"verified","pageUrl":"https://developer.gnome.org/hig/guidelines/ui-styling.html","credit":"GNOME Human Interface Guidelines — UI Styling","gallery":[{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/GNOME%20Settings%2048.png?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:GNOME%20Settings%2048.png","credit":"Nathan Hadley《GNOME 設定 48》2025年 — Wikimedia Commons / CC BY-SA 4.0"},{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/GNOME%20Text%20Editor%2047.png?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:GNOME%20Text%20Editor%2047.png","credit":"Nathan Hadley《GNOME テキストエディター 47》2025年 — Wikimedia Commons / CC BY-SA 4.0"},{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/Screenshot%20Nautilus%20hidden%20file.png?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:Screenshot%20Nautilus%20hidden%20file.png","credit":"Frap《GNOME Files の画面》2025年 — Wikimedia Commons / CC0"}]},"essence":"GNOME が自分の既定の見た目に与えた名前で、指針書は明るい版と暗い版と高コントラスト版を同じ部品で成立させると定める。窓の上端をヘッダーバーが1本横切り、そこに載る釦は背景も枠も描かれない。アイコンは16x16pxの単色シンボリックに統一される。","cues":["窓の上端を横切る1本のヘッダーバー。左と中央と右の三点に寄せ、中央に窓の見出しが座る","ヘッダーバーの釦は背景も枠も持たず、記号と文字だけが面に浮く","16x16px で描かれた単色のシンボリックアイコン。主要な線は2px幅で、遠近を付けない正面の形","Blue 3 の #3584e4 を含む、色相ごとに5段階そろえた公開パレット"],"intents":["技術","静けさ","信頼"],"works":["Linux デスクトップ向けのアプリを、明るい設定でも暗い設定でも同じ骨格で見せたいとき","自作の部品を足すのに、色の値を直に書かず既存の色変数と style class に載せて作りたいとき"],"recipe":{"type":"釦は記号か文字のどちらか一方で示す。両方を並べるのは側面の一覧と表示切替に限る。","layout":"上端にヘッダーバーを置き、主要な動作を左、見出しを中央、メニューを右へ。掴んで動かすための空きを必ず残す。連結した釦の代わりに間隔で群を作る。","material":"色は公開パレットから採り、明るい版と暗い版と高コントラスト版で自動的に振り替わる変数として持つ。アイコンは単色の SVG で描き、着色は後から当てる。"},"avoid":"色の値を直に書き込むと、暗い版と高コントラスト版に切り替えたときだけ壊れるので、普段使っている画面では最後まで気づけない。","colors":["#3584e4","#f6f5f4","#241f31"],"motif":"graphic","pair":["flat-design","material-design"],"study":["libadwaita の style class 一覧と CSS 変数の対応","GNOME パレットが色相ごとに5段階を持つ理由と、その使い分け","表示内容が変わるとヘッダーバーの中身も差し替わるという設計の帰結"],"en":{"essence":"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.","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"],"works":["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"],"recipe":{"type":"Identify a control with either an icon or a label, not both. The exceptions are sidebar rows and view switchers.","layout":"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."},"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.","study":["libadwaita の style class 一覧と CSS 変数の対応","GNOME パレットが色相ごとに5段階を持つ理由と、その使い分け","表示内容が変わるとヘッダーバーの中身も差し替わるという設計の帰結"]}}