Style_guide

Voice & Tone Visual Language

Radio Button Cards contain content and actions about a single subject.

Radio buttons with dark and light backgrounds

Components Accordion Alert Buttons

Option 1

Option 1

Option 2

Option 2

Option 3

Option 3

Option 4

Option 4

Option 5

Option 5

Option 6

Option 6

Calendar Check Box Data Tables Drop Downs Header

Radio button on Hover

Option 1

Option 1

Option 2

Option 2

Option 3

Option 3

Option 4

Option 4

Option 5

Option 5

Option 6

Option 6

Loader Modal Radio Button Tag Text Area Toggle Widget

Radio button when value selected

Option 1

Option 1

Option 2

Option 2

Option 3

Option 3

Option 4

Option 4

Option 5

Option 5

Option 6

Option 6

Radio button with disabled options

Option 1

Option 1

Option 2

Option 2

Option 3

Option 3

Option 4

Option 4

Option 5

Option 5

Option 6

Option 6

Inline Radio buttons

Option 1

Option 2

Option 3

Option 1

Option 2

Option 3

Option 1

Option 2

Option 3

Option 1

Option 2

Option 3

Voice & Tone

Our Voice

Visual Language

Human, Helpful, Clear

Components

Askuity’s voice is human. It is friendly, helpful and clear. We deal in data, but don’t get bogged down in jargon. We talk complex concept in everyday language, without dumbing it down.

Be consistent Use this guide to ensure brand style and voice across application.

Be focused Know what you want to say and say it as clearly as possible. Remember the inverted pyramid – lead with the most important info and include supplemental info after.

Be concise Take it easy Tolstoy. We are not writing “War and Peace.” Keep it simple, use short words and sentences, and avoid unnecessary modifiers and flowerly language.

Be specific Know what you are writing about and get to the point. Avoid fluff and vague language.

Voice & Tone Visual Language Colors

Colors Colours play a significant role in conveying the brand to the user. They can be used in many ways but should always be meaningfully and intentionally applied. The ratio used for the web application is 5:4:1. Also, the application consists of 75% usage of white space which in return enhances the use of colours.

Primary Palette

Grids

Askuity Blue #1B2F41

Typography Layers

#45586C

Depot Orange #F96302

#00051B

#FF953F

#DB5A28

Extended Palette

Components

Accent Blue #4C81C3

#5A9AC

Intermediate Green #36CB87

#49769C

#62EBA

#1DAA69

Alert Red #E21F26

#F84047

#CB0D13

Neutral Palette Askuity gray #929291

#EBEBEB

#707070

Trend Line Palette Trends lines palette is designed carefully by picking the right colours to show ten different lines on the graph. The Askuity blue and depot orange get weight over others as to be used when only one or two trend lines are used to present the analysis.

#F96302

#1B2F41

#2F748D

#13A1DF

#C53975

#FB8C04

#27B1AC

#E83854

#E83854

#8F503C

Success, Error and Warning Palette These colours are used for success, error and warning alerts. Also used for presenting the analysis for incremental value and decrement Values in tables and dashboard widgets.

#5EC900

#E21F26

#ED8132

Voice & Tone Visual Language Colors

Grids Grid systems are used to achieve an organized design. We use this column-based structure to place text, UI components, and functions consistently throughout the design. Every element has its place that we can see instantly and reproduce elsewhere. Below are grid layouts for various screen resolutions

Grids Typography Layers

Components

Golden Ratio followed by Russian doll grid structure is used for component alignment in design.

Voice & Tone Visual Language Colors Grids

Typography We are using Open Sans as our typeface of choice because of its excellent legibility, friendly appearance, and flexibility. By using different properties of font like font-weight, font height, we have created a visual hierarchy.

Type Scale

Px Size

Weight

Actual Size

Typography

10 px

Regular

Open Sans

Layers

13 px

Regular

Open Sans

13 px

Bold

Open Sans

14 px

Regular

Open Sans

14 px

Bold

Open Sans

15 px

Regular

Open Sans

15 px

Bold

Open Sans

17 px

Regular

Open Sans

17 px

Bold

Open Sans

20 px

Regular

Open Sans

20 px

Bold

Open Sans

24 px

Regular

Open Sans

32 px

Regular

Open Sans

Components

Usage

Body Copy Body Copy Enhancement

Body Copy Body copy is defined as “bulk” text; typically at least one paragraph in length. The body font size can vary based on use. For Body Copy font size 15px.

Line height Line-height, or leading, directly contributes to the readability of copy. Line-heights should be based relative to the font itself. Ideal lineheights are a ratio of 1:1.5 (type size : line-height). For font size 15px the ideal font leading should be kept 22px.

Font Weight Font weight is a useful tool that can help differentiate emphasis on content. It is important to consider the font weight relative to the size as it has the greatest impact when paired effectively. These can be combined in unique ways to create an implied hierarchy. In the application we are using Regular and Bold font weights.

Voice & Tone Visual Language Colors Grids

Layers Layers are a visual motif used to indicate elevation along the z-axis. Different elevations are used for different kinds of content and components.All layers are the same thickness. Layers live on distinct z coordinate planes and uses the offset of the y axis and blur of the boxshadow to represent this depth.

Components with different layers can be stacked one top of one another (i.e. an overlay layer may exist on top of a raised layer).The only defined style of a layer is its elevation and shadow. The layer container can be styled as needed.

Typography Layers

Components Flat

Raised

Overlay

Modal

The elevation is brought out distinctively by playing with the opacity of the shadow. Color for the shadow is #929291, y offset to be 3 and blur of the box is 6. Opacity for the Raised is 30%, overlay is 60% and modal is 100%

Voice & Tone Visual Language Components

Accordion Accordions enable users to expand and collapse sections of content.

When to use - Users only need to focus on specific sections of content within a page at a time.

- Information needs to be broken up into smaller pieces.

Accordion Dark Background

Light Background

Category

Category

Category

Category

Category

Category

Category

Category

Category

Category

Drop Downs

Category

Category

Header

Category

Category

Dark Background

Light Background

Alert Buttons Calendar Check Box Data Tables

Loader Modal Radio Button Navigation Tag Text Area Toggle Widget

Category

Category

Category

Category

Sub Category 1

Sub Category 1

Sub Category 2

Sub Category 2

Sub Category 3

Sub Category 3

Sub Category 4

Sub Category 4

Sub Category 5

Sub Category 5

Sub Category 6

Sub Category 6

Category

Category

Category

Category

Voice & Tone Visual Language Components

Alert Alerts are used to highlight and call attention to important information. We have categorized alerts Auto disappearing and non disappearing alerts.While writing content for the messages Be polite in error messages — don’t place blame on the user also lead user to a solution when user has hit the dead end.

Accordion

When to use - Use when the user needs to stay informed of the system status, which may or may not require the user to respond. Including errors, warnings, confirmations, and general information.

- Use when the user needs confirmation that the action or task they just performed was successfully completed.

Alert

Dismissible Alerts

Buttons

Allow a user to dismiss a notification wherever appropriate. alerts persist until the user dismisses them by clicking on the ‘x’ icon on the righthand side of the alert.

Warning Message

Calendar Check Box Data Tables

Error Message

Success Message

Drop Downs Auto Disappearing Alerts

Header

These type of alerts are used for providing feedback to the user. They disappear on their own and user can carry out on going tasks without begin bothered about those alerts. The alert notification will typically fade out in 5 seconds.

Loader Warning Message

Modal Radio Button Navigation Tag

Error Message

Success Message

Icons for the alerts

Text Area Toggle Widget

When to consider something else: - On long forms, always include in-line validation in addition to any error messages that appear at the top of the form.

- If an action the user is about to take is irreversible and will delete or undo work the user has performed, use a more direct and interrupting pattern such as a confi rmation modal, to allow the user to confi rm the action they’re about to take. Please refer to Modal for the details

Voice & Tone Visual Language Components Accordion Alert Buttons Calendar

Buttons Buttons let users perform a single, clearly expressed action. Multiple button sizes should never be placed adjacent to one another.Don’t use multiple sizes in the same context. Don’t place a button below another button if there is space to place them side by side. Do use button types to emphasize a preferred option.

To better communicate the affordance of a button, an icon may be used. Icons should always be paired with a text label.

Specs of buttons Large

Medium

Text within the button

12px 8px 12px

Text within the button

12px

New Widget

17px

12px

Small

Disabled 12px 8px

New Widget

15px

12px

Text only

Text within the button

13px

12px 8px 12px

12px

Only Text buttons

New Widget

Disabled

12px

Text only Disabled 12px

View

10px

12px

Edit

Delete

12px

Edit

Check Box Data Tables

Primary Button Used for driving users to a principal action on a page. Primary buttons should be used once per page, not including application headers, or within a modal. A page may not need a primary action if all the actions the user can take on a page are equal.

Drop Downs Header

New Widget Normal

New Widget

Disabled

New Widget

Hover

Clicked

Loader Modal Radio Button Navigation Tag Text Area Toggle Widget

Secondary Button Used for secondary actions, serves as a standard or neutral button.

No,Cancel

No,Cancel

No,Cancel

Normal

Hover

Clicked

No ,Cancel

Tertiary Buttons These buttons serve important functionality on the global side bar. Sizes can be adapted as per the design layout.

Edit

Edit

Normal

Hover

Edit

Edit

Clicked

Disabled

External connect Button This button is used for connecting system to the external fi les or for using for export or load fi les from your laptop or data source. The treatment for the layout and skeleton remains the same as primary button.

Export Dashboard Normal

Export Dashboard Hover

Export Dashboard

Export Dashboard

Clicked

When to consider something else: If you want to lead users through pages, secondary, tertiary Less popular or less important actions may be visually styled as links.

Voice & Tone Visual Language

Calendar A standalone embedded calendar that allows a date selection without the accompanied input.

Components Accordion

Calendar Todays Date

September 2019

Alert Buttons Calendar Check Box Data Tables Drop Downs

Modal Radio Button Navigation Tag Text Area Toggle Widget

September 2019

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Mon

Tue

Wed

Thu

Fri

Sat

1

2

3

4

5

6

7

1

2

3

4

5

6

7

8

9

10

11

12

13

14

8

9

10

11

12

13

14

15

16

17

18

19

20

21

15

16

17

18

19

20

21

22

23

24

25

26

27

28

22

23

24

25

26

27

28

29

30

1

2

3

4

5

29

30

1

2

3

4

5

6

7

8

9

10

11

12

6

7

8

9

10

11

12

Calendar with selection date range - Start Date

Header Loader

Calendar Todays Date on hover

Calendar with selection date range with End Range

September 2019

September 2019

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Mon

Tue

Wed

Thu

Fri

Sat

1

2

3

4

5

6

7

1

2

3

4

5

6

7

8

9

10

11

12

13

14

8

9

10

11

12

13

14

15

16

17

18

19

20

21

15

16

17

18

19

20

21

22

23

24

25

26

27

28

22

23

24

25

26

27

28

29

30

1

2

3

4

5

29

30

1

2

3

4

5

6

7

8

9

10

11

12

6

7

8

9

10

11

12

Voice & Tone Visual Language

Check Box Checkboxes allow users to select one or more options from a visible list.

Check Box with dark and light backgrounds

Components Accordion Alert Buttons

Option 1

Option 1

Option 2

Option 2

Option 3

Option 3

Option 4

Option 4

Option 5

Option 5

Option 6

Option 6

Calendar Check Box Data Tables Drop Downs Header

Check Box on Hover

Option 1

Option 1

Option 2

Option 2

Option 3

Option 3

Option 4

Option 4

Option 5

Option 5

Option 6

Option 6

Loader Modal Radio Button Navigation Tag Text Area

Check box when value selected

Option 1

Option 1

Option 2

Option 2

Option 3

Option 3

Option 4

Option 4

Option 5

Option 5

Option 6

Option 6

Toggle Check box with disabled options

Widget Option 1

Option 1

Option 2

Option 2

Option 3

Option 3

Option 4

Option 4

Option 5

Option 5

Option 6

Option 6

Inline Check boxes

Option 1

Option 2

Option 3

Option 1

Option 2

Option 3

Option 1

Option 2

Option 3

Option 1

Option 2

Option 3

Voice & Tone Visual Language

Data Tables Data tables are used to logically display raw tabular datasets, while maintaining the data in a readable, scannable, easily comparable, and understandable structure. When there are long names and multiple columns please use standard table1.

Values in the table has to be right aligned and Text in the table should be always left aligned.

Components Standard Data Table 1

Accordion Column 1

Column 2

Alert

Data 1

Buttons Calendar Check Box Data Tables Drop Downs Header Loader

Column 3

Column 4

Data 1

Value 1

Value 1

Data 2

Data 2

Value 2

Value 2

Data 3

Data 3

Value 3

Value 3

Column 3

Column 4

Standard Data Table 2 Column 1

Column 2

Data 1

Data 1

Value 1

Value 1

Data 2

Data 2

Value 2

Value 2

Data 3

Data 3

Value 3

Value 3

Column 3

Column 4

Sorting and filtering Data Table

Modal

Column 1

Column 2

Data 3

Data 1

Value 1

Value 1

Navigation

Data 2

Data 2

Value 2

Value 2

Tag

Data 1

Data 3

Value 3

Value 3

Column 3

Column 4

Radio Button

Text Area Toggle

Expandable Rows Column 1

Column 2

Row 1

Data 1

Value 1

Value 1

Row 2

Data 2

Value 2

Value 2

Row 3

Data 3

Value 3

Value 3

Column 3

Column 4

Widget

Check box Rows and integration of different UI elements Column 1

Column 2

Row 1

Data 1

Value 1

Success

Row 2

Data 2

Value 2

Button

Row 3

Data 3

Value 3

Attribute Value

Data with legends and incremental and Decrement Values Column 1

Column 2

Column 3

Column 4

Data 1

Data 1

Value 1

Value 1

Data 2

Data 2

Value 2

Value 2

Voice & Tone Visual Language Components

Drop Downs Dropdowns present a list of options for users to choose from. Dropdowns are explicitly for filtering or selection.

Drop down

Drop down button

Accordion Drop down Hover

Alert Buttons Calendar

Drop down button Drop down Click

Drop down button Category 1

Check Box

Sub Category 1 Sub Category 2

Data Tables Drop Downs Header

Category 2 Category 1 Sub Category 2 Category 3 Category 1

Loader

Sub Category 2

Modal Radio Button

When to use

Navigation

Dropdowns are used when you have multiple options (5-15 approx). If needed, a filter can be included within the dropdown or multi-select to make selecting options from a long list of options quicker. Sort the list in a logical order. In some instances, you may want to put the most selected option at the top.

Tag

Use scroll if the section gets longer than 5 items like in m vendor list. Do not increase the size of the dropdown to accommodate all the numbers at one go.

Text Area Toggle Widget

Simplify. Does an option rarely get selected? Re-evaluate if you really need it.

Voice & Tone

Header

Visual Language

Header acts as a global anchor for users, tying the enterprise experience together. It spans the full width of the page and is anchored at the top.

Components

Standard Header

Accordion Alert

Logo

Menu 1

Menu 2

Menu 3

User Name

Active Menu

Buttons Calendar Check Box

Logo

Menu 1

Menu 2

Menu 3

User Name

Menu 2

Menu 3

User Name

Active Action Item and drop down

Logo

Menu 1

P Vendor

Data Tables

m Vendor Numbers

M vendor 1

Drop Downs

M vendor 2 M vendor 3

Header

M vendor 4 M vendor 5

Loader

LDAP : AXT9NZT Email id

Modal

Calendars Log Out

Radio Button Tag Text Area

Header Title

Trends

Toggle Sub Header Title

Widget

Performance

Voice & Tone Visual Language Components Accordion Alert Buttons Calendar

Loader Cards contain content and actions about a single subject.

Loader in the widget

Vs. Ly Wkly (%) - Sales $ Week 29 (Latest Week)

Week 28 (Previous Week)

Aug 19, 2019 to Aug 25,

Aug 13, 2018 to Aug 19,

$ 1.07M

$ 2.16M

- 51.4% - $ 2.16

Sales $ - 13 Week Trend

Check Box Data Tables Drop Downs Inline Loader

Header Column 1

Loader Modal Radio Button

Column 2

Data 1

Data 1

Data 2

Data 2

Column 3

Column 4

Value 1

Value 1 Value 2

Full Page Over lay

Tag Text Area Toggle Widget

Dashboard

Territories

Trends

User Name

Voice & Tone Visual Language Components

Modal Modals are used to communicate information in a secondary window above the page while still maintaining context.

Structure of Modal

Modal Title

Accordion Alert

Feedback message with directions for the further steps in the workflow should be included.

Secondary

Buttons Calendar Check Box Data Tables

primary button

Modal

Reset Dashboard Your current widgets and its configuration will be replaced with the default set of widgets .

No, Cancel

Yes, Reset Dashboard

Drop Downs Header

Modal with hover on secondary

Reset Dashboard Loader Your current widgets and its configuration will be replaced with the default set of widgets .

Modal

No,Cancel

Yes, Reset Dashboard

Radio Button Tag Text Area Toggle

Modal with Click on secondary

Reset Dashboard Your current widgets and its configuration will be replaced with the default set of widgets .

No,Cancel

Widget

Yes, Reset Dashboard