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