What has changed?
The new SUSE rebrand comes with new colors, typography, and iconography, among others. Many of those amazing guides work excellent in marketing materials, presentation slides, and more, however, when implementing the new brand in product UI’s we made sure that user experience stays at the top of our priorities. This made the process slightly more difficult for us, having to reject colors like "Coral" from the new brand, which could very easily be confused with the "danger" red our applications require. At the same time, we couldn't select Coral to replace Red, as this would change the direction that Product Marketing wanted for this new color in SUSE's palette. Similarly, we also made other decisions as described below:
Typography: Lato will continue being the main (body) font for all SUSE products, while we introduce the new font "Work Sans" to be used only for headers and subheaders. Why two fonts? Work Sans is a beautiful font and it works perfectly in titles, however, Lato has smaller glyphs and tighter kerning for easier legibility on screens. Lato is one of the recommended fonts to use together with Work Sans. It is very space-efficient, and this is what our products with high volumes of data require. Go to the Typography page to learn more.
Colors: The majority of new colors from the rebrand were introduced, with some exceptions. Coral is one of them (already explained in the intro paragraph). The main SUSE colors have been introduced to the palette and layout, but we also took the opportunity to reduce the spectrum. We realized that we only require 3 shades for all of our components. The jump from the 100 - 500 - 900 shades provides more contrast.
Same layout, new colors: The layout's responsiveness and main feature remain, but literally all colors have changed to fit the new brand. The new layout is very well aligned with suse.com and brings a renewed interface to our customers.
Buttons: There has been a slight change in the UI of our previous buttons, which are now rounded. In addition, we've removed the extra small buttons and large buttons in order to preserve consistency. You know what they say, less is more. Go to the buttons page for more information.
Migrating custom components/ui from 9 shades to the new 3 shades system
If you have created custom components or elements using the previous 9 shade colors here is how you need to replace those shades systematically:
- 200 and 300 shades should be replaced for 100
- 400 and 600 should be replaced for 500
- 700 and 800 should be replaced for 900
There will be scenarios in which you may need to look for the better option yourself. For example, if you had a component using 200 and 300 together, then you would want to have a better contrast ratio. In that case, the better replacement would be 200 -> 100 and 300 -> 500.
The gray color shades have changed too. How to replace them:
We have removed 4 shades of gray: 200, 400, 600, and 800. If you are using the NPM package, you have nothing to worry about, just update your dependencies. If you implemented the components manually or create your own components and still have those shades, follow this guide:
- gray-400 should be replaced for gray-300,
- gray-200 should be replaced for gray-100,
- gray-600 should be replaced for gray-700,
- gray-800 should be replaced for gray-700, too, because these 2 shades were merged.
We can answer your questions
If you have any questions about the implementation of the new brand, reach out to us on (OneSUSE)[https://one.suse.com/s/suse-design-system-eos/] or send an email to Cynthia Sanchez, or Kenneth Wimer (emails undisclosed to avoid spam).
Help us spread the word about the work we do in open source by sharing our tweets or following us at https://twitter.com/eosdesignsystem
Written by: Cynthia Sanchez https://twitter.com/cyntss