Digital Creative Envelope

The digital creative envelope is the environment boundaries that we set ourselves in order to maintain a consistent identity for the Replan Platform brand. The key styles, colours, layouts and execution of the brand as a whole is vital for brand stability and consistency.

Why Use Set Boundaries?

With the ever-changing digital landscape it is crucial that we have set boundaries to work in, to make our brand experience a positive one for all consumers. With the Creative Envelope in place, we are able to rapidly evolve the brand to stay in line with all current and future design and interface requirements.

Replan Brand Voice

Giving a brand a voice is basically giving it a personality and showing its uniqueness. A good brand voice will create a good impression, indicate stability and ultimately build trust. Think: Professional, Modern, Dynamic, Reliable, Innovative.

Replan Logo

At the heart of the Replan brand is the Replan logo. The Replan logo must always be treated with the highest level of care to retain brand integrity. As such, the following rules apply to logo usage at all times.

On any medium, the logo must have a minimum safe zone.

Acceptable logo usage

Under no circumstances are you allowed to distort, manipulate or otherwise alter the design of the logo.

• The logo must be crisp, and clear, never pixelated
• The logo must never be shifted in axis
• The logo must never be distorted, either vertically or horizontally
• The logo must retain correct proportions at all times
• Never apply any decorative elements such as shadows, outlines or other such effects to the logo
• At no time is any external or third-party branding allowed to interfere with the safe zone in any way

Primary Colour Board

Pale Colour Board

Headings

All headings must be Title Case, meaning that the first letter of each word is capitalized, except for certain small words, such as articles and short prepositions.

All Headings share the following attributes:

• Font Family: Poppins
• Hex Colour: #EB750D

General Copy

All general copy must use Sentence case; this is the conventional way of using capital letters in a sentence or capitalizing only the first word and any proper nouns.

All General Copy Styles share the following attributes:

• Font Family: Poppins
• Font Size: 1rem
• Font Weight: 400

Buttons Overview

All buttons in use within the application must use an associated icon to better prompt user actions. These icons must be placed to the left hand side of the button copy using an appropriate Font Awesome icon.

For Primary actions, these buttons should always be set to an appropriate Primary Action colour based on the type of action.

Secondary actions such as closing modal windows or dismissing notices should always be set to an appropriate Secondary Action colour based on the type of action. Note that Destructive actions should always either be set to a Warning or Danger class.

Primary Action Button Examples

Primary Secondary Success Info Warning Danger Light Dark

Secondary Action Button Examples

Primary Secondary Success Info Warning Danger Light Dark

Cards Overview

Cards are used extensively within the platform to ensure interface consistency and layout readability.

For cards that contain user actions, these actions must always be right aligned within the Card Footer component, and never within the Card Body. They may be in the Card Header only for special circumstances where auxiliary actions occur.

For all card components, the default styling should always be used. Alternative backgrounds for Card Body and Card Footer should not be used, while an alternative Card Header background may be used under special circumstances only such as highlighting a destructive action.

Modals Overview

Modals should be used in any instance where user attention requires priority focus. Modals assist users focus by dimming out the background and presenting only important information or actionable dialogues.

With this in mind be sure to use modals for critical actions and key processes only, to avoid over using modals and potentially creating user frustration.

Tabbed Content Overview

Tabs are used to combine pages that contain closely related peer areas. The typical appearance of a tab view provides a strong visual indication of enclosure. People expect each tab to display content that is in some way similar or related to the content in the other tabs.

Default Tabs

---

Default Tabs With Icons

---

Tabs Inside Cards

Accordion Overview

We use an accordion content as a way to expose content to users in a progressive manner. These are typically a vertically stacked list of headers that can be clicked to reveal or hide content associated with them.

Pop-up Toasts and In-line Alerts allow for a unique ways of presenting on-demand data and information to the users. While the Toast may be used as a more subtle presentation, the Alert is very much a forceful method to get this information across.

The Toasts, by default, are subtlety positioned at the top right of the users screen and will either disappear at a set interval or by means of a close button. They are meant for small snippets of information such as an interface reaction.

The Alerts by default will appear at the top of the screen and fill up the device width, thus being far more noticeable in appearance, and are to be used for more detailed information such as an interface notice of action with descriptive context.

With this in mind, please use either the Toasts or Alerts in appropriate circumstances to allow for a pleasant and intuitive experience for the users.

We have two distinct sets of Navigation. One is for Application specific navigation between interfaces which is a Drop-down Menu, the other is for the Platform Utilities which is an App-Switcher style.

Be aware of this when considering new navigation within a specific Application, and apply any new items to the appropriate Navigation set. Assume Platform specific items and administration are to always be added to the Platform Utilities.

Forms are used extensively across the Platform for a multitude of functions, from simple requests to more complicated application. Accessible and easy to use Forms are key to a good user experience. Users should be able to complete forms quickly and without confusion.

In general, users can be hesitant to fill out forms, so you want to make this process as easy as possible. Always be conscience about the core purpose of each form that is designed and the perceived value. Be aware of not only the amount of fields, but the flow of the form in general.

Simple changes such as using white space effectively to group related fields and indicating what information goes in each field can significantly increase form usability.

Form Elements

Data Values Formatting

For a lot of our tables, there will be data values and currency values.

For all data values there must be a thousands separator of a comma (example: 1, 000). Likewise for all currency values, the appropriate currency symbol must be in place at all times (example: £ 1, 000.00).

This is not limited to table values only, but in any instance where data values and currency are displayed.

Data Tables Layout

Most of our Use Cases are data-rich applications that often include huge tables in their interface. With the importance of table data, we need to keep readability, usability and accessibility in mind at all times.

As such, here are three key tips on designing better tables for the Platform:

First, arrange the columns in order of importance from left to right. Horizontal scrolling is (still) more effortful than vertical scrolling, even with modern devices where you can gesture scroll (Magic Mouse / Touch Screen). So, use good defaults: put the data that our users will interact with most in the visible area without horizontal scrolling. If we prioritize each column in order of importance, users can also visually scan down the rows when comparing data, and only have to move their eyes horizontally when they see something that requires further investigation.

Second, preserve context when showing additional detail. We present data in a table because there's a need to show more than one item at time, so preserve that context for users where possible. You can do that in a variety of ways: Employ sticky column headers that follow the user as they scroll vertically, and for tables with many columns make the first column follow users across the table as they scroll horizontally. If we have the most important information in the left column, such as a unique name or identifier, that will help users keep track of which row they're investigating. Where possible and feasible, instead of using modals that cover up the table to edit or see more detail, try expanding the row vertically using an accordion to show details or forms for that row.

Third, speak human! Tables are already a very dense way of visualizing data, so look for places where we have mysterious data that isn't meaningful to users; things like automatically-generated IDs, or codes that are meant to represent complex information add more cognitive effort for users to interpret. Wherever possible, replace that information with something human-readable.

In summary: Arrange data in order of importance, keep context visible, and decrypt mysterious content.