Compose styles
Rather than blending styles toward a middle, this gives them roles. The first one carries the structure, the next comes in as the accent, and anything after that shows up in a single detail. Where they fight each other, 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 Breeze's lettering (Let type carry the hierarchy. Open a wide gap in size and weight between heading and body, and never separate them with ornament) 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 Breeze (Build on flat fields with no shading or gloss and hold the palette near monochrome. Push contrast hard, then derive light and dark from the same assets).
- Colour
- Build on #3584e4, #f6f5f4, #241f31 and admit one accent from #3DAEE9, #EFF0F1, #232629.
Where they fight
- Adwaita and Breeze both belong to Platform Screen Languages, so the difference is small. Push the roles further apart than feels comfortable.
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.
- Breeze Softening the contrast breaks the premise, because a flat surface has nothing but contrast left to separate one element from the next.
Image prompt
Produce four original images that take their structure from Adwaita (style, 2011–) and their accent from Breeze (style, 2014–). ## What to make Make the kind of thing Adwaita exists for: building a Linux desktop app that has to hold the same structure in both the light and the dark setting, or adding a custom widget by riding on the existing style classes and colour variables instead of hard coding values. Choose one subject and hold it across all four. ## Structure comes from Adwaita - 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 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. ## Accent comes from Breeze, used sparingly - Flat surfaces with no modelled shading, where edges are carried by contrast alone - Icons and graphic assets reduced toward monochrome, with a tight colour count - Type contrast doing the work ornament would otherwise do, so layout reads through text - The same assets existing as a matched light and dark pair Let one material quality come from it: Build on flat fields with no shading or gloss and hold the palette near monochrome. Push contrast hard, then derive light and dark from the same assets. ## Colour and feeling Build the ground on #f6f5f4, carry the structure in #3584e4 and #241f31, and let a single accent come from #3DAEE9. These are read off real works, so a direction rather than a fixed palette. Feeling to carry: technique, calm, trust. ## Where they fight - Adwaita and Breeze both belong to Platform Screen Languages, so the difference is small. Push the roles further apart than feels comfortable. ## What goes wrong - 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. - Breeze: Softening the contrast breaks the premise, because a flat surface has nothing but contrast left to separate one element from the next. ## Across the four Keep the roles fixed in all four. Vary the framing, the scale and the arrangement so the set shows what this pairing can do rather than four versions of one picture. ## Constraints - Do not imitate, reference or name any specific artist, studio, brand, character or copyrighted work. - Do not reproduce the composition of an existing work. - Produce original compositions 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.
- Breeze 2014– / Style / Platform Screen Languages
The default visual style KDE introduced with Plasma 5, described in its own announcement as a high contrast, flat theme for the workspace. Graphics assets are simpler and more monochromatic, and layouts lean on typography rather than ornament so elements stay recognisable. Light and dark variants shipped as a matched pair from the beginning.
Share this composition:https://indexstyle.org/compose?ids=adwaita+breeze