MySolidWorks uses a specific color palette to communicate meaning, convey visual differenciation, and provide consistent look and feel. When designing and developing new projects and features, trying to use the existing colors, avoid of introducing new colors.
The major colors on MySolidWorks site are red, blue and dark gray. Red is SOLIDWOKRS brand color while blue is DS brand color. Dark gray is the body text font color on MySolidWorks site.
$mysw-red (#da291c)
$mysw-blue (#005686)
$mysw-darkgray (#333333)
The major background colors on MySolidWorks site are light blue, light gray and dark blue.
Footer background (#003553)
Navigation bar (#005686)
Sub-navigation bar (#f0f0f0)
Body background (#fff)
MFG landing page category section (#313d45)
Instruction pane on Create Account Information page (#f0f7ff)
Support landing page - News section (#eee)
Drive landing page - marketing description (#f5f5f5)
MySolidWorks currently has following 4 background hover colors applied to mouse-over events on different pages.
Tab boxes on homepage (#f0f7ff)
List view items (#d1ebfa)
Data table alt rows (#f0f0Ff0)
Utility menu dropdown (#ccc)
MySolidWorks currently has following 8 border colors applied to different UI blocks and components.
Search box (#333)
Tab boxes on homepage (#c4c4c4)
Tiles view boxes with shadow (#e1e0e0)
Filter box with shadow(#c6c6c6)
Account level - subscription table (#a9a9a9)
Lesson detail - lesson video box (#c6c6c6)
List view - items with thumb image box (#ccc)
Taining landing page - wiget box (#d3d3d3)
Certain colors have inherent meaning for a large majority of users, although there are cultural differences for interpretation, for example, red is to communicate an error.
$normal-text: #333
Body text for page title, description, section headings, labels and data.
$subtle-text: #555
Sub level of titles, headings, or lables for disabled input fields.
$ghost-text: #ccccc8
Hint text in placeholder for search box and input fields.
$tagline-text #fff
Marketing descriptions and tag lines on image banners.
$error-text: #c41200
Consider this is an error message text.
$info-text: #31708f
Consider this is an info message text.
$warning-text: #8a6d3b
Consider this is warning message text.
$success-text: #3c763d
Consider this is a success message text.
Best Practice: Define Colors
Don't define color with color name, set color with hex code. (e.g. {color: red} | {color: #ff0000} )
 |
For brand consistence, MySolidWorks site colors should be selected in tone with those specified on 3D Experience Colors Visual Guidelines. |
Accessibility: Color Usage
It’s important that our products meet all web accessibility standards, including the minimum contrast ratios that the WCAG 2.0* specifies for text and background color combinations. This adherence helps users who are color blind or have low vision to better interact with Salesforce, but it also improves usability and readability for all user.
*The Web Content Accessibility Guidelines (WCAG) 2.0 make web content accessible to people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, and others.
