Evergreen UI Style Guide

1366 x 768 to 1600 x 1200

From now on "Range #1". Taking 16px as the default typography size of the body, 1em is going to be equal to 16px always.

1600 x 1200 to 1920 x 1080

From now on "Range #2". Taking 18px as the default typography size of the body, 1em is going to be equal to 18px always.

1920 x 1080 to 2560 x 1440

From now on "Range #3". Taking 20px as the default typography size of the body, 1em is going to be equal to 20px always.

The UI without context will be composed of five main elements:

Program Bar: It is important for the project to locate its logo permanently within the web application so that users know where they are even though it is a tool used often. This section will always be located at the very top of the page. Evegreen’s logo will be located on the left side. It also shows a user/library button that will allow the user to log out, switch between different accounts, apply configuration options, or perform any other action related to the user’s account. This button is located on the right side of this header.

The general structure is the same with and without context, the only difference is that a new bar is displayed. The UI with context will be composed of six main elements:

Context Bar: This bar will appear only when an action set could be applied to a specific context. The actions will be represented with icons from the FatCow icon set.

Horizontal margin will be 3em on both sides of the UI.

The general structure is divided into three main columns. These columns define the location of the content in the workspace. There are secondary baselines that create a smaller subarea if neccessary.

Depending on the presence or absence of context the workspace region will vary. With context:

Without context:

Metrics apply to all types of popups. Their structure:

Popups will be divided into two areas:

There will be five different types. The major difference between them will be the title´s background color and its icon:

This is the general color palette of Evergreen’s web staff client:

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.

*Refer to the color palette to relate colors to explanations.

You can download Roboto Normal 400 from: Google Fonts

Buttons are a stylized text or image that illustrate an action and invite the user to click it. There are three types of buttons:

Specs

Primary buttons will be:

Accent buttons will be:

Flat buttons will be:

Button Content

Buttons of any type can contain only text, only an icon (Bootstrap Glyphicon Halflings set) or both. They can also function as a dropdown menu trigger. Here are the possible combinations (for both, with background and flat buttons):

Metrics

All buttons will have fixed heights, while the width will vary according to the word or icon each button contains.

As said, text will be 16px (Range #1), 18px (Range #2), 20px (Range #3) in a center alignment. Margins will be 1em.

If the button is a combination of text and an icon:

If the button contains only an icon:

If the button functions as a dropdown trigger:

Distance between buttons:

State

Not pressed:

When pressing:

Gradient will be eliminated, so the background color will change to:

Disabled:

When a button is not available it will look like:

This is achieved by applying opacity=0.5 to the text/icon/both in primary, accent and flat buttons. In the first two the background will retain its color as established.

Checkboxes allow the user to select one or more options from a set. Checkboxes should be located:

The default input type="checkbox" should be used to apply this element to the UI. Every checkbox will be located 1em from the word (to the left or right side) or in a center alignment.

State

Unchecked:

Checked:

When there is lack of space, or there is information that can be hidden momentarily to perform other actions yet remain easily accessible, this concept should be applied. This control is illustrated by an icon from the Bootstrap Glyphicon Halflings set:

The icon will have 1em of width. Its color will vary depending on the backgruond color: if the background color is white or a light color, use #231F20 (dark gray); if the background color is a dark color, use #FFFFFF (white).

The way in which the information is shown when expanding should vary depending on the place the icon is located.

Inside a bar:

Information will be within a white rectangle with a faint shadow around it. Notice that the content in the workspace is not covered; it was adjusted to fit in the remaining space.

In the workspace:

Dropdown menus allow the user to select an item at a time and perform different activities. It is also a way to save space. There are two types:

Specs

Metrics

There are no specific measurements for the menu size; it will depend on the content of each dropdown menu. But metrics do determine with margins between objects:

When pickers are used to select a date, the information is consistently formatted and input into the system.

The picker will be composed of a calendar of the current month and toggles to select different months.

Metrics

The picker itself will be # 0 Blue (# 137DAB), and its measure will be 1em square:

In context:

Toggles allow the user to cycle through options one by one. The arrow pointing to the left symbolizes going backwards; the arrow pointing to the right represents going forwards. There are two different types:

Metrics

Common toggles will measure:

Each arrow will be center aligned. They will measure:

Tips toggles will measure:

States

Tips toggle inactive (by default):

Tips toggle active (by clicking it):

Text fields allow users to enter data. They can allow either a single line or multiple lines of text. There are different types.

Specs

Metrics and Types

Single line:

Text fields with a single line can have a help text to guide the user to enter the correct information in them. The text will be 1em from the left border:

Multiple lines:

These metrics are defined as a default. The text field would have the possibility of being manually resized according to the user needs (with the resize handle represented in the bottom right corner).

Dropdown Field:

When users can choose between a set of options, a dropdown field will be displayed.

Toggle Field:

This type of text field allows users to cycle through consecutive options, giving the possibility of going backwards and forwards.

Distance between fields:

States

Default: When the text field is in its default state, it will look like:

Filled: Once it is completed or the option is selected (in the dropdown or toggle field types), it will look like:

The difference is the text color: light gray (# BCBEC0) turns into dark gray (#231F20).

Clarification: In the multiple lines text field, the text will be written always in dark gray (#231F20). It doesn´t have different states.

Forms allow a user to enter data which is sent to a server for processing. They can also be used to retrieve information from a server. They are composed of labels, text fields, and buttons, though in some cases, the labels can be omitted.

Specs

Metrics and Types

Single Row: When only one or two fields are needed to perform a specific action, they may be displayed in a single row. In such cases, help text may be placed within the field to guide the user in lieu of a label. Distance between fields and buttons will be 0.5em.

With Label: A label should be used next to each text field when the form requires three or more fields. That label will be the indication of the information to enter in the text field. Labels are left aligned to facilitate scanning for a particular field. Help text inside the text field can work as an example of what to introduce or to specify that the field is required or optional. It is not neccessary to use it in every case, but only when additional clarity is required.

In forms of three or more fields, the fields will be arranged into a single column. Buttons are located at the bottom of the form in a right alignment.

Large forms: Forms that are divided into more than one related sections are called large forms. They are composed of subheaders, lables, text fields, and sometimes buttons. (Remember: if forms or other large UI elements occupy the entire workspace, actions that are applied to it (i.e. the entire page) should be located in the title/action bar.)

Large forms need space, so they are located in the workspace and are not accompanied by any other content due to the large number of elements involved in the page. They are presented in a single column. Metrics of fields, subheaders and labels are:

There are a table of contents, a search field, and some filters to the upper right of the large form. Those elements help users find specific fields, or manage the visualization of needed fields. It is most useful when forms are too large and exceed the height of the screen. By clicking each item in the table of contents, users can get to that specific portion of the form.

Radio buttons are used when you want to let users select one - and just one - option from a set of alternatives. Every radio button will be located 1em from the word (left or right side) or in a center alignment.

When there is only one option the radio button will be located at the right side of the text:

When there are more than one option, the radio button will be located at the left side of the text:

State

Unchecked:

Checked:

Feedback is a very important source to use in user interfaces. Users need to know what is happening with every interaction they make. A spinner will let the user know that the system is working, which avoids frustration.

The network indicator activity element will be composed of a spinner, a message, and will be shown as a popup.

Specs

Metrics

The alert will measure:

The spiner will be:

Effect

The spiner will have an effect of clockwise rotation. The three orange rectangles will be moving around the green ones until the action or activity is ready:

This element helps users know where they are by highlighting the pane of a menu or tab displayed on the screen. It is going to be adapted to the different sizes of menus or tabs. This UI element will also add a 4px border to the bottom of the highlighted row.

Specs

Metrics

Menu selector metrics will vary according to where they are. In menus, they will have the menu´s height and margin=1em; in tabs, the tab´s height and 0.5ems of margin on both sides:

Module Bar:

Context Bar

Title/Action Bar (Tabs):

States

Selected:

On hover over:

On hover over the color changes to:

A tooltip allows a user to see hints when they hover over an item indicating the name or purpose of the item.

Specs

Dividers are thin gray lines that help divide spaces or regions of the UI to organize and make the information display more clearly.

Specs

Subheaders function as subtitles within a module. They are located only in the workspace and alerts. There are two types:

Specs

Primary Subheader:

Secondary Subheader:

The table UI element is one of the most frequently used within the Evergreen web staff client. It retrieves required information and shows all the results in an orderly way. Tables are resizable; they adapt to the whole screen width or to the remaining space in the workspace. One can also resize the default width of individual columns.

Structure

Tables are composed of three main areas:

Something important to highlight is the action set. It is composed of up to three buttons; the first two will be the most common actions, and the third is a trigger button to open more actions (shown as a dropdown menu).

Metrics

Table bar: Height of 2.25em. #-2 Green background color. Each icon used in this bar will have width=1em.

Columns Bar: Height of 2.25em.

Table Results: Each row will have 2.25em of height. As a visual detail, every other row should have a #-2 Green background color with opacity=0.2 to help the visualization of the information, starting from the first row. The number of columns will always be 8 (without the number of column and the checkbox columns) as a default.

Results States

Table results have two posible states.

Default: Checkboxes are unchecked and the actions set is disabled.

Selected: One or more checkboxes will be checked and the actions set will be enabled.

Combination

One common combination will be buttons/checkboxes/text fields + table. Buttons can work as filters to the table, as an in-page menu, as a way to change the table’s results, or as a modifier. They should be located above the table so the user can see them quickly and know the possibilities, and because options at the bottom may end up off the screen. There can be cases in which buttons or checkboxes are placed at the bottom of the table, but this should happen only when more than three options are required:

Up to three buttons:

More than three buttons:

Grouping

When a specific UI element (or combination of elements) is completely related to a table, and is displayed in conjunction with elements not directly tied to the table, the related element (or elements) should be grouped with the table by a thin line. The line will be 1px, with a 5px rounded edges only in the upper corners, in a #-2 Green color.

When there is no more information displayed on the screen than the table and the related UI element (or combination of elements), is not neccessary to group them with a line.