Compose two styles
Rather than blending two styles into a middle, this assigns them roles: one carries the structure, the other appears as an accent. Where the two fight, it says so before you start.
How to divide the work
- Composition
- Follow Adwaita: 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.
- Type
- Set in Adwaita's manner (Identify a control with either an icon or a label, not both. The exceptions are sidebar rows and view switchers.), and let Material Design's lettering (Build the hierarchy from one type family and separate levels by weight and size.) appear only where you want the eye to catch.
- Material
- Ground in Adwaita's 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.); bring in exactly one thing from Material Design (Give surfaces elevation and show front and back by the density of the shadow.).
- Colour
- Build on #3584e4, #f6f5f4, #241f31 and admit one accent from #e9e6dd, #67635d, #171615.
Where they fight
These two are already listed as related, so the join should come easily.
Caution
- Adwaita 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.
- Material Design Do not add shadow as decoration. The moment the elevation rules break, the hierarchy is telling a lie.
Image prompt
An original image that takes its structure from Adwaita (Style, 2011–) and its accent from Material Design (Style, 2014–). Structural 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. Accent cues, used sparingly: Hierarchy and shadow expressed by elevation; Surfaces overlapping like sheets of paper; Motion that shows cause and effect; A standardized unit of spacing. 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.. Type and lettering: Identify a control with either an icon or a label, not both. The exceptions are sidebar rows and view switchers.. Let one material quality come from the second style: Give surfaces elevation and show front and back by the density of the shadow.. Mood: Technology, Calm, Trust, Play. Color: build on #3584e4, #f6f5f4, #241f31 with a single accent drawn from #e9e6dd, #67635d, #171615. Constraints: do not imitate, reference or name any specific artist, studio, brand, character or copyrighted work. Produce an original composition in the general period languages described above.
Related entries
- 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.
- Material Design 2014– / Style / Google UI
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.
Share this pairing:https://indexstyle.org/compose?ids=adwaita+material-design