Visual Style

Color

NetApp Brand

#0067C5
$color-blue
#002855
$color-blue-dark

Neutrals

#000000
$color-black
#454545
$color-gray-27
#53565A
$color-gray-36
#686868
$color-gray-41
#929497
$color-gray-61
#A4A4A4
$color-gray-64
#D9D9D6
$color-gray-87
#F7F7F7
$color-gray-97

Accents

#8DC8E8
$color-blue-lighter
#0067C5
$color-blue-light
#007A33
$color-green
#3C1053
$color-purple
#D76B00
$color-orange
*Note currently only $color-blue-light is used in the visual design. $color-blue-lighter, $color-green, $color-purple, and $color-orange are approved colors from the NetApp color pallete and may be used sparingly as accent colors.

Typography

Weights & Styles

NetApp's LUCI uses many weights and styles of the Gotham typeface. In addition to the base library CSS you'll need to reference cloud.typography.com to add the fonts themselves to your page:


  

Weights and Styles

Gotham Extra Light

  
Gotham Extra Light Italic

  
Gotham Light

  
Gotham Light Italic

  
Gotham Bold

  
Gotham Bold Italic

  
Gotham Narrow Book

  
Gotham Narrow Book Italic

  

Responsive Typography

Please use the following guidelines for responsive sizing of different font stacks in LUCI.

LUCI < 420 421 TO 768 769 + FONT NAME/WEIGHT

Heading 1

38px 42px 48px Gotham Extra Light/200

Heading 2

32px/38px 36px/42px 40px/48px Gotham Extra Light/200

Heading 3

28px/30px 30px/36px 32px/38px Gotham Light/300

Heading 4

24px/32px 24px/32px 24px/32px Gotham Light/300
Heading 5
20px/24px 20px/24px 20px/24px Gotham Bold/700
Heading 6
18px/24px 18px/24px 18px/24px Gotham Bold/700

Paragraph

16px/24px 16px/24px 16px/24px Gotham Light/300

Paragraph Lead

16px/24px 20px/24px 24px/32px Gotham Light/300

Iconography

Font Awesome

Utility icons such as search, arrows, social sharing, etc. use the Font Awesome library, located here: http://www.fontawesome.io/icons.
To reference any of the icons use the following code snippet (replace "arrow-down" with the name of the icon you need to use):


  

The JS library, svg4everybody, is used to enable external SVG references in IE 9-11.

Anchor Link or<br>Expand Arrow
Anchor Link or
Expand Arrow
arrow-down [&#xf063;]
Arrow Left
Arrow Left
arrow-left
Arrow Right
Arrow Right
arrow-right
Autosupport
Autosupport
autosupport
Autosupport Disabled
Autosupport Disabled
autosupport-slash
Autosupport On Demand
Autosupport On Demand
autosupport-on-demand
Bars
Bars
bars
Blog
Blog
blog
Branch Office
Branch Office
branch-office
Book
Book
book [&#xf02d;]
Camera
Camera
camera
cDOT Cluster
cDOT Cluster
cdot-cluster
Check
Check
check
Chevron Down
Chevron Down
chevron-down
Chevron Left
Chevron Left
chevron-left
Chevron Right
Chevron Right
chevron-right
Chevron Up
Chevron Up
chevron-up
Circle
Circle
circle
Circle Check
Circle Check
circle-check
Circle Check Alt
Circle Check Alt
circle-check-alt
Circle Exclamation
Circle Exclamation
circle-exclamation
Circle Info
Circle Info
circle-info
Circle Minus
Circle Minus
circle-minus
Close
Close
close
Close Arrow
Close Arrow
arrow-up [&#xf062;]
Comparison
Comparison
comparison
Data Management
Data Management
data-management
Discussions
Discussions
discussions-o
Document
Document
document
Doc PDF
Doc PDF
doc-pdf
Doc TAR
Doc TAR
doc-tar
Doc ZIP
Doc ZIP
doc-zip
Download
Download
file-text-o [&#xf0f6;]
Dropdown Arrow
Dropdown Arrow
chevron-down [&#xf078;]
Edit
Edit
pencil-square-o [&#xf044;]
Email
Email
envelope-o [&#xf003;]
Envelope
Envelope
envelope
Events
Events
calendar [&#xf073;]
Explore
Explore
binoculars [&#xf1e5;]
Facebook
Facebook
facebook [&#xf09a;]
File Excel
File Excel
file-excel-o
File HTML
File HTML
file-html
File Video
File Video
file-video-o [&#xf1c8;]
Filter
Filter
filter
Folder
Folder
folder
Google+
Google+
google-plus
Globe
Globe
globe
GPS
GPS
gps
Join Discussion
Join Discussion
comments [&#xf086;]
Key
Key
key
Legend Downloadable
Legend Downloadable
legend-downloadable
Legend External Site
Legend External Site
legend-external-site
Legend Support
Legend Support
legend-support
Legend VPN
Legend VPN
legend-vpn
Legend Webapp
Legend Webapp
legend-webapp
Link Arrow
Link Arrow
arrow-circle-o-right [&#xf18e;]
LinkedIn
LinkedIn
linkedin [&#xf0e1;]
Live Chat
Live Chat
comment [&#xf075;]
Mynewsdesk
Mynewsdesk
mynewsdesk
NIQ Artificial Intelligence
NIQ Artificial Intelligence
niq-ai
NetApp Mark
NetApp Mark
netapp-mark
Paperclip
Paperclip
paperclip
Performance
Performance
performance
Plus
Plus
plus
Print
Print
print [&#xf02f;]
Remove
Remove
times-circle [&#xf057;]
Risks
Risks
risks
Save
Save
save
Screen Bar Graph
Screen Bar Graph
screen-bar-graph
Search
Search
search [&#xf002;]
Slide Share
Slide Share
slideshare [&#xf1e7;]
Star
Star
star
Storage Effeciency
Storage Effeciency
storage-efficiency
Subscribe
Subscribe
subscribe
Systems
Systems
systems
Translate
Translate
translate
Trash / Delete
Trash / Delete
trash-o [&#xf014;]
Triangle Info
Triangle Info
triangle-info
Twitter
Twitter
twitter [&#xf099;]
Upgrade
Upgrade
upgrade
User
User
user
Visualization
Visualization
visualization
Weibo
Weibo
weibo
Xing
Xing
xing
YouTube
YouTube
youtube [&#xf167;]

circle-info Only the icons shown here in the LUCI design system, may be used. If you would like to implement a new icon from the Font Awesome library, please reach out to Darlene Sanche, for approval.

Layout & Spacing

LUCI embeds spacing systematically into header and footer, block components, and long-form text and form displays so you can assemble pages beautifully spaced by default. Vertical spacing is sparingly applied otherwise, left to designers and developers to fine-tune layouts themselves if needed.

Vertical Units

LUCI declares a single-direction margin system using the bottom-margin to vertically space most components. The /netapp-library/src/scss/utils/_variables.scss derives the primary $spacing unit for the margin from default line-height.

Header & Footer Spacing

The Header and Footer each incorporate no vertical spacing to separate them from page content. Instead, page content should be contained in a div.n-page-content page shell to include all remaining grids and layouts with content components.

Page Content with padding above and below

Page Hero Components

A component like the Hero component is an exception, being included between the header and the page shell elements, and should also exclude spacing to separate it from page content.

Hero lacks vertical spacing

Spacing Across Components

All block-level components embed $spacing-component-bottom bottom margin by default, including page title area, content metadata, messaging, pagination, and sort.

Component-level spacing

Spacing Within Components

Components that include a list of objects (such as breadcrumbs, content actions, feedback, and icon legend) may wrap to a new line depending on content. In such cases, apply $spacing-sm bottom margin to each list item paired with $spacing-component-bottom - $spacing-sm bottom margin to the overall component to space both items wrapping within the component as well as across to the subsequent component below.

Objects that wrap with spacing

Long-Form Text & Forms

When including long-form text (such as an article with images, support document, or product description), add the .n-text-longform class to the containing element to properly space base elements like H1, H2, H3, P, UL, OL, and DL.

Similarly, add .n-form to a form’s container to properly space form labels and controls.

Grids & Breakpoints

The NetApp LUCI grid extends the Susy framework to provide a row-based, 12-column layout system at each of four major breakpoints:

Major Breakpoints Along Spectrum

Major Breakpoints

These major breakpoints are encoded in /netapp-library/src/scss/utils/variables.scss:

Viewport Width Variable Computation
420px $screen-sm (420px / $font-size-default) * 1em;
768px $screen-mg (420px / $font-size-default) * 1em;
1024px $screen-lg (1024px / $font-size-default) * 1em;
1394px $screen-xl (1394px / $font-size-default) * 1em;

Container, Row & Column Elements

The system lays out each column, in order, per each row enclosed in a container element.

In the following example, the first column is stacked on top of the second breakpoint for viewport widths up to 767px, after which the first column is 75% wide and positioned to the left of the second column of 25% width.


  

Diagram of iPhone and iPad with one breakpoint

Multiple Breakpoints Per Element

Classes can be applied to control column widths for multiple breakpoints, such as the -md and -lg employed in this example.


  

Diagram of iPhone and iPad and Desktop with one breakpoint

Using Breakpoints in (S)CSS

When extending the library to suit your product's needs, you can add custom breakpoints to your design.

This first example from the Footer component illustrates using a major breakpoint's variable to define custom, proportional element widths:


  

In this section example, a non-major breakpoint width is used to build a custom rule.