All new 2018 version of our tools have been updated to be consistent with Visual Studio Shell provided icons, colors, and other visual concepts. The changes we’ve made adhere Windows desktop applications design principles that are presented in this article.
New colors and iconography
All icons are updated using colors and styling according to the Microsoft UX guidelines. Furthermore, all icons that appear in commands, dialogs, templates, etc. are inherited from the 1,000+ images in the Visual Studio Image Library. We took many of the images from the library and redesigned them creating our own custom icons that are more intuitive, simple and are easily recognized symbols.
All applications use three base colors:
|Usage||Value (Light theme)||Swatch|
|Background/Dark||424242 / 66,66,66|
|Foreground/Light||F0EFF1 / 240,239,241|
|Outline||F6F6F6 / 246,246,246|
In addition to these colors, icons may contain one additional color from an extended palette. For example, green is used for action modifiers like “Add” (), “Run” (), etc.
Icons have no gradients or drop shadows. You’ll see modern-style icons across multiple apps which have clean geometry and a 50/50 balance of positive/negative (light/dark theme), and use direct, understandable metaphors in order to make icons appear properly in dark theme.
Example of icons that have had their colors inverted is shown below:
In SSMS 17.0 release, Microsoft updated icons to be consistent with VS Shell provided icons, inheriting the modern VS appearance. What this basically means is that ApexSQL add-ins integrate well into both host applications, see a few examples below:
To alert the user when necessary e.g. to illustrate a status notification, gain the user’s attention, etc. the following icons are used under different circumstances:
Examples of notification icons shown below:
These visual concepts are applied consistently to identify common elements like status bars, dialogs, etc.
Example of a status bar placed at the bottom of the main application window:
Example of the batch formatting dialog shown below:
Also, if you’re wondering how is SSMS set to the dark theme also available in VS for some time now, check out this article and join the dark force.
April 13, 2018