A color palette summarizes all the colors used across the web application. Each color was selected carefully to work harmoniously with one another. They are also grouped conceptually into hierarchical layers. There will be an order that has to be applied to the different layers in the web app, creating a scale from the less important to the most relevant information. This hierarchical order is used by the general structure, and the concepts have also been applied such that elements in the workspace can (in most cases) simply follow the colors established in the UI Elements guidelines.
Colors give hierarchy to elements. The color combination establishes logical layers that imply the visual importance of each element, guiding the users' eyes to what is more relevant in the UI.
Establishing a fixed and well defined visual hierarchy using colors, but only at a structural level, ensures a precise visual order of the information displayed and eliminates potential problems of consistency and subjectivity.
In special cases, colors can give meaning to elements. Each color has a meaning, and should be applied to elements that need to transmit an implicit message. This approach is used primarily in popups or dialogues, ensuring that both the tone and the message will be emphasized by using a visual resource.
-
Wrong Red: This red is used to inform the user that something is wrong.
-
Positive Green: Positive means that a specific task was achieved as expected, or that there are no problems.
-
Informative Blue: This blue is used just to inform users of something.
-
Insecure Purple: When something needs an answer of any kind, insecure purple appears.
-
Action Brown: Color that has to do with performing an action.
-
Grey Scale: These three greys are used to guide users.
*Refer to the color palette to relate colors to explanations.
Roboto is a font extensively tested in many devices. It guarantees legibility, clarity, and readability.
Evergreen will use this typography only in two weights: regular and bold. Every text will be written in regular, titles of modules and contexts will be in bold.
As mentioned before (Page Layout and Structure - Metrics), the guide supports three screen resolution ranges. There are three different text sizes used within each range; here is a table showing where to apply each size related to the range:
1366x768 to 1600x1200 |
1600x1200 to 1920x1080 |
1920x1080 to 2560x1440 |
|
General Type size (body) |
16px |
18px |
20px |
Context Title |
20px |
22px |
24px |
Subtitle’s Context |
14px |
16px |
18px |
Title’s Actions (Context Actions) |
14px |
16px |
18px |
Title (Title/Action Bar) |
20px |
22px |
24px |
Tabs (Title/Actions Bar) |
16px |
18px |
20px |
Footer |
14px |
16px |
18px |
-
When the background color is white or a light color: Roboto Normal 400 will be dark grey (#231F20).
-
When the backgrund color is a dark color: Roboto Normal 400 will be in white (#FFFFFF).
You can download Roboto Normal 400 from: Google Fonts
There are two types of icons used in the web staff client: Bootstrap Glyphicon Halflings set and FatCow Icon set.
Bootstrap Glyphicon Halflings set will be use in the whole web staff application.
FatCow Icon set will be use in the Context Bar to illustrate each action that can be applied to a particular context and in the home page.