Also, looking at screenshots of 12.04 which inspired the LibreOffice icons, I note that Firefox has an orange squircle:
So maybe one of the lighter shades for orange on the Suru palette would work here:
3 Likes
Orange with Suru fold:
2 Likes
I like Suru yellow behind the logo, but it helps to have a fold to lighten the top right corner so the tail doesn’t melt into it:
EDIT: This might look a bit more balanced if the fold cuts the squircle in half:
EDIT #2: You know what, lol… I rejected white at the start because it made the scaled logo look ugly (pixellated) around the edges. But when I revisit it now with the newly scaled logo, I think it’s definitely an option:
In fact, if someone held a gun to my head and said I had to choose one tonight, I’d say white.
4 Likes
I like this, I only expected to see an horizontal fold, like the libreoffice one, what do you think?
2 Likes
Yes, I’ll try non-diagonal folds tonight in yellow and orange. @madsrh is your preference for the orange glyph on the blue background? If so I can do svgs of that too 
1 Like
Attempts to do yellow and orange with horizontal folds:
1 Like
@madsrh’s idea looks great with some edging/gradients to make the glyph stand out:
EDIT: We might need to tweak the shade of blue but this one is my favourite, if it’s not a trademark problem!
3 Likes
This very slightly different version uses a Suru blue:
EDIT: Bottom half can be darker rather than lighter:
3 Likes
It might be helpful to see all the mockup close together to make a choice
2 Likes
I’m travelling tonight/tomorrow day but will put them together either tomorrow night or Thursday night
1 Like
Looking at those screenshots, and given that Firefox appears at the top of the launcher, I think I should nick the exact blue gradient from the recycle bin.
But do we really want to keep the blue gradient from the recyle bin? Sounds really out of place to me…
3 Likes
My thinking was the blue on the Firefox icon mockup is “almost” identical to the blue on the bin, so I should try cloning it for maximum consistency (or maybe go the other way and make it less similar?). I can have a play and see what looks good when I’ve got my laptop
Okay, the recycle bin gradient was too light when I tried it on the glyph version of the icon. Suggestion withdrawn!!
Here are the main options in contention, as I understand them to be:
Full icon on “white” (actually now a gradient of the two lightest Suru greys, @mr.tech ):
Glyph icon with Firefox colours, @madsrh:
Full icon on yellow with horizontal fold:
Full icon on orange with horizontal fold:
Full icon on the dark shade used for the iOS squircle, @eaglers:
My favourites are the first two. I think the iOS colour would have been best for maximum consistency with the brand elsewhere, if the colour had worked with the default launcher (and I think it’s too dark sadly).
I think the yellow/orange shades are quite nice, but it’s hard to pick a good (light) shade to go around a full colour logo that has maximum contrast at all points and looks nice. And we could spend forever faffing around with the gradients and fold to make them look nice and professional and consistent with Suru.
I think the “almost white” version looks fine and sets a great precedent that we could use for other third party icons (time allowing) while respecting their brands 100%. It’s basically just “manually masking” the icons into a shape like other UIs can do automatically. I would be happy to try to do the same for other major apps like GIMP if people wanted those doing as svgs in this style. Even if I just did one a week, we would have many tens of apps after a few months Also, it’s a simple task that other Inkscape users could help with, if we did a version of the Suru template with the off-white background?
Lastly, I think the blue/orange version with the fox glyph looks really nice. I’m quite pleased with the work I did bringing out the edges and contrast. However, even we chose that one, it’s the biggest departure from the established brand (effectively using the glyph as a starting point for a new flat version of the icon) and there’s a chance that Mozilla would prefer us to use the one with the full icon on a neutral white-ish background.
So, my two votes go for the white version, or the two colour glyph version. What does everyone else think? Also, happy to tweak any of the icons in response to feedback (e.g., if someone prefers the yellow version but thinks it should be lighter/darker/have a smaller logo, etc.).
3 Likes
There is a new/old problem that will occur with GNOME 3.30+ … I call it:
“Pathbar buttons vs stackswitcher buttons vs buttonbox buttons vs normal buttons vs text-buttons… inside the headerbar”
Currently we have the following groups (all are flat, so I leave “flat” out of this):
I just put the window controls on the list to not miss them but I think they are something special and do not need to be 100% consistent.
But the rest is pretty chaotic imho. Especially when we need a new pathbar styling in 19.4 .
To give you a little history why the previous orange underline design was “broken” in consistency:
-
We re-discovered/realized that the buttons in gnome-software are actually not a stackswitcher even if the function is the same (exchanging the content inside the window). We realized this because the container for those buttons is actually a “buttonbox”, which can also be used anywhere else in the headerbar (we’ve seen it only in the app “Glade” but it can happen everywhere else). So we needed a buttonbox styling for all possible occurences and ended up with this:
-
Nautilus 3.30 uses a new pathbar, which does not work with our current styling
@godlyranchdressing had a good idea for the pathbar and I really like it
But could we return one more time to the “drawing board” and find a solution for every type of button we have in the headerbar? In the end, all are buttons 
As you know I am not a big adwaita fan, but adwaita has 1 style for all (excluding window controls, like we do). (Edit: and excluding the new pathbar…)
@madsrh @luxamman @c-lobrano @jaggers if you have time it would be great if you could come up with something.
Edit 2: just for the record… this is the current stackswitcher button styling
2 Likes
Good recap, @frederik-f
Stachswitcher and buttonbox are similar to each other, they are basically special toggle-buttons
Pathbar is also the search bar in Nautilus 3.30, so it’s a toggle-button + entry
The three widgets differ by their active state:
- pathbar: bold font, since the background is always highlighted
- stachswitcher: orange underline, since the background is always highlighted
- buttonbox: background highlight
buttonbox has the most basic style, but is not enough for pathbar, since it is important to keep the full path highlighted
stackswitcher his always highlighted, but the orange underline is overkill in pathbar
pathbar style, the new one I mean, looks the more versatile. I believe it could look good for all three widgets
1 Like
Hm, we could also leave everything as it is, wait for gnome-software to use a stackswitcher, and try find a solution for the pathbar for 3.26 AND 3.30+
I really like the orange underline design 
Update: we fixed it by unifying stackswitcher and buttonbox styling
plus Having 1 look that works for nautilus 3.26 + 3.30 pathbar
1 Like
Could you make a PR with your LibreOffice and Firefox/Thundebird icons?
The “script-solution” by carlo is “on pause” right now if I understood him correctly
The automatic solution requires some more system work, yes. Eventually if you like the results I can provide the automatic generated icons (but I believe @jaggers results would be better :D)