14.2 Product Visual Overhaul
Style Guide
Last updated August 4, 2014
Over view
The purpose of this visual style guide is to establish
and communicate the separate elements that, when
viewed as a whole, comprise the design language
as it is applied to user interface design patterns used
within NetSuite
Guiding Design Concepts
3
Simplify
De-clutter
Whitespace
Variety
Heirarchy
NETSUITE 14.2 VISUAL DESIGN GUIDE
Main Header
The new header has been designed as a fixed element. Pages scroll as usual, but the header stays put,
always accessible when needed.
4
NETSUITE 14.2 VISUAL DESIGN GUIDE
Main Menus
The Main Menu has been refreshed with a larger font size, providing more comfortable spacing that aids
legibility and accomodates touch interaction. Longer menus support scrolling so you can access all options, no matter what screen size.
New format with
increased spacing, a
larger font size and
better use of space
5
Access all options on
long menus with scrollsupport
NETSUITE 14.2 VISUAL DESIGN GUIDE
Create New Menu
The create new menu has been promoted to the top level for easy access no matter where you are.
6
NETSUITE 14.2 VISUAL DESIGN GUIDE
Dashboard Interactions
7
Reduced clutter with consolidated portlet commands
New drag-drop portlet manager
NETSUITE 14.2 VISUAL DESIGN GUIDE
Color Palette
The color palette is biased towards blue, which complements NS corporate identity, while adding color
accents where it conveys contextual information.
8
Primary
Pale Blue
RGB: 245 / 247 / 250
Hex: #F5F7FA
Sky Blue
RGB: 224 / 230 / 239
Hex: #E0E6EF
Light Blue
RGB: 195 / 209 / 222
Hex: #C3D1DE
Blue
RGB: 96 / 119 / 153
Hex: #607799
Dark Blue
RGB: 77 / 95 / 121
Hex: #4D5F79
Secondary Accents
Button Blue
RGB: 65 / 143 / 216
Hex: #418FD8
Link Blue
RGB: 37 / 85 / 153
Hex: #255599
Informational
Green
RGB: 109 / 173 / 38
Hex: #6DAD26
Red
RGB: 251 \ 69 \ 30
Hex: #FB451E
Yellow
RGB: 255 \ 192 \ 0
Hex: #FFC000
NETSUITE 14.2 VISUAL DESIGN GUIDE
New Iconography
In keeping with our goal to simplify and reduce visual noise, we’ve created an elegant library of icons with
bolder shapes that are easier to read at different sizes.
9
NETSUITE 14.2 VISUAL DESIGN GUIDE
Primary Font Family
Open Sans Light
NetSuite’s default font has been modernized. Open Sans was chosen as a popular google webfont to
maintain legibility while creating a more open lighter feel. A variety of font-weights were used to create
contrast, which helps distinguish between headers and main content.
10
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$&()
Open Sans Light is used predominantly for larger sized headers that are used to demarcate top level
main sections. This lighter weight lends itself well to giving headers their elegant lightweight feel.
Open Sans Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$&()
Open Sans Regular is our default font for paragraphs and text elements.
Open Sans Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$&()
Open Sans Bold is mainly used for sub headers and helps demarcate sub-sections within a
page. Bold is also used to highlight primary information on a page like total dollar am
Open Sans Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$&()
Open Sans Italic used for informational text like input field placeholder text. It helps distinguish between
user entered values and prompt helper text
NETSUITE 14.2 VISUAL DESIGN GUIDE
Pages
& Components
Header
12
Masthead:
background #ffffff
height 52px
Logos:
height 30px
Global Search Box:
height 30px
border 1px solid #cccccc
padding 0 8px (top & bottom, left & right)
font 14px normal #262626
placeholder italic #999999
Header Shadow (when scrolled)
box-shadow 0 8px 8px 0 rgba(0, 0, 0, 0.25)
Menu Items:
font 14px bold #ffffff
padding-left 8px
padding-right 8px
Active Menu:
background #36455d
Utility Menu Items:
border-right 1px solid #e5e5e5
padding-right 10px
margin-left 10px
Username:
font 13px #666666
Help text:
font 13px #666666
Company:
font 11px #666666
Main Menu:
background gradient #485973 – #5b718c
height 38px
NETSUITE 14.2 VISUAL DESIGN GUIDE
Dashboards
Portlets:
background #ffffff
margin 18px (all)
padding 18px (all)
Rows:
font 14px #333333
padding-top 11px
padding-bottom 11px
13
Headers:
background blue
font 16 bold #ffffff
height 36px
margin 18px (all)
padding 12px 18px (top & bottom, left & right)
Data Table Headers:
background #e5e5e5
font 11px #555555
height 28px
text-transform uppercase
Links:
color #255599
text-decoration none
Hover underline
Rules 1px solid #dddddd
Sub Header:
background sky blue
Padding 12px 18px
NETSUITE 14.2 VISUAL DESIGN GUIDE
Record Page (view mode)
Record Type:
font 22px bold Dark Blue
margin-right 15px
Customer Name:
font 32px #999999
Record Status:
background: Sky Blue
font 15px semi-bold Dark Blue
padding 6px
14
Record Type Icon:
Size 30x30
margin-right 5px
Record Instance:
font 32px bold Dark Blue
margin-bottom 15px
Field Group Headers:
font 17px bold Dark Blue
background Pale Blue
Height 44px
margin-left 11px
Field Group:
padding 15px 30px 35px 30px
(top, right, bottom, left)
Field Labels:
position above fields
font 14px semi-bold #666666
Summary Header:
background Sky Blue
font 17px bold Dark Blue
height 36px
margin-right 15px
Amounts:
font 14px normal #262626
line-height 36px
Summary Box:
background Pale Blue
font 14px semi-bold #666666
line-height 36px
padding 20px 40px (tp & bm, lt & rt)
Total Amount:
font 18px normal #262626
Field Values:
font 14px normal #262626
NETSUITE 14.2 VISUAL DESIGN GUIDE
Record Page (edit mode)
15
Button Row:
margin 15px 15px 24px 0
(top, right, bottom, left)
Buttons/links: margin-right15px
Dividers: 1px solid #cccccc
Required Indicator:
font 14px semi-bold #c77f02
Crosslinks:
font 15px Link Blue
decoration none
margin-left 15px
padding-right 15px
border-right 1px solid #cccccc
Label/Value Group:
margin-bottom 20px
Field Labels:
position above fields
font 14px semi-bold #666666
Field Values:
font 14px normal #262626
Field Helper Widgets are hidden
until the related input field is
hovered upon or is in focus.
Exceptions: date and color picker icons are always shown
NETSUITE 14.2 VISUAL DESIGN GUIDE
Filter box:
border 1px solid #eaeaea
border-radius 5px
padding 10px 21px (tp & bm, lt & rt)
margin-bottom 10px
List Pages
Title:
font 22px bold Dark Blue
margin-bottom 15px
16
Filter Header:
background #eaeaea
font 13px Bold #333333
height 26px
Button Row:
margin-bottom 10px
Buttons/links: margin-right15px
Functional Bar:
background Sky Blue
font 14px #333333
height 39px
Dividers: 1px solid #cccccc
Buttons/icons:
margin-right 15px
Data Table Headers:
background #e5e5e5
font 11px #555555
height 28px
text-transform uppercase
Rows:
font 14px #333333
padding-top 11px
padding-bottom 11px
Links:
color #255599
text-decoration none
Hover underline
Row hover:
background #fefeee
Rules 1px solid #dddddd
Columns:
padding-right 30px
NETSUITE 14.2 VISUAL DESIGN GUIDE
Sublist Tab View
Selected Tab:
font Bold #ffffff
1st Level Tab Header:
font 15px regular #e5e5e5
background Blue
height 48px
17
2nd level tab header:
font 15px normal Link Blue
background light Blue
height 30px
Selected tab: bold
Machine Header Area:
padding 10px
Selected rows:
border 2px Solid Blue
Read only cells have a
background pattern
Row Edit Button Tab:
background #d0d2d4
border 1px Solid Blue
border radius 4px
padding 3px
button right-margin 4px
divider line 2px solid # f2f2f2
Rules 1px solid #dddddd
Rows:
font 14px #333333
padding-top 11px
padding-bottom 11px
Columns:
padding-right 30px
Row hover:
background #fefeee
Striped rows:
background #fafafa
NETSUITE 14.2 VISUAL DESIGN GUIDE
Page Top Level Buttons
18
All buttons share these common style attributes: border-radius: 3px; font size: 14px; font-family: ‘Open Sans’, Arial, sans-serif; font-weight: 600 (semi-bold); height: 28px; min-width: 60px;
padding: 0 12px 0 12px;
background: #4c9dff – #187bf2
border: 1px solid #125ab2
color: #ffffff
box-shadow:0 0 2px 2px
rgba(24,123,242,.75)
background: #1467cc
background: #004599
background: #e5e5e5
border:1px solid #cccccc
color: #999999
background: #fafafa – #e5e5e5
border: 1px solid #b2b2b2
color: #333333
box-shadow:0 0 2px 2px
rgba(24,123,242,.75)
background: #e5e5e5
background: #b2b2b2
background: #e5e5e5
border:1px solid #cccccc
color: #999999
NETSUITE 14.2 VISUAL DESIGN GUIDE
Machine In-Page Buttons
19
All buttons share these common style attributes: border-radius: 3px; font size: 14px; font-family: ‘Open Sans’, Arial, sans-serif; font-weight: 600 (semi-bold); height: 28px; min-width: 60px;
padding: 0 12px 0 12px;
background: #187bf2
border: 1px solid #125ab2
color: #ffffff
font-weight: bold
box-shadow:0 0 2px 2px
rgba(24,123,242,.75)
background: #1467cc
background: #004599
background: #e5e5e5
border:1px solid #cccccc
color: #999999
background: #f2f2f2
border: 1px solid #b2b2b2
color: #333333
box-shadow:0 0 2px 2px
rgba(24,123,242,.75)
background: #e5e5e5
background: #b2b2b2
background: #e5e5e5
border:1px solid #cccccc
color: #999999
NETSUITE 14.2 VISUAL DESIGN GUIDE
Refreshed Popups
20
NETSUITE 14.2 VISUAL DESIGN GUIDE
Feedback Messaging
Icons:
width 32px
height 30px
margin-right 12px
21
Header Messages:
font 14px regular #545454
minimum height 65px
padding 15px 30px (tp & bm, lt & rt)
Success Messages:
background #d7fccf
border 1px solid #2acc14
Titles:
font 20px bold #666666
Informational Messages:
background #cfeefc
border 1px solid #417ed9
Alert Messages:
background #fcf9cf
border 1px solid #ffc000
Error Messages:
background #fccfcf
border 1px solid #d94141
NETSUITE 14.2 VISUAL DESIGN GUIDE
Form Input Field Matrices
22
NETSUITE 14.2 VISUAL DESIGN GUIDE