Nutanix Design - Design System
HomeDesign SystemArticlesTeam
Foundation - Branding
Foundation
Components
Layouts
Diagrams
Templates
Content Guidelines
Resources

Last Updated: Jul 10, 2019

Demo

Resources

Resources

Nutanix Design System

Go to Abstract

Nutanix Font Pack

Download (.zip)

Text Styles for Sketch

Color Palette for Sketch

Changelog

Updated on Jul 10, 2019:

  • Updated "Link to Abstract" in Resources.

  • Remove "Libraries" in Resources.

  • Removed "Sketch source file" in Resources.

Updated on Sept 23, 2018:

  • Added "Advanced Setting" in Popups.

  • Added Horizontal Steps in Popups.

  • Added Vertcial Steps in Full Screen Popups.

  • Added new Prism Central Headers and concepts

  • Added Drag and Drop concepts in Tables.

  • Added Inline Edition concepts in Tables.

  • Added Circular Progress Bar.

  • Added Dashboard examples in Templates Menu.

  • Added Entity List examples in Templates Menu.

  • Added Forms examples in Templates Menu.

Updated on Jul 2, 2018:

  • Added "Backward Links".

  • Added "Iconography".

  • Added patterns to "Checkboxes" and "Raddio Buttons".

  • Added "Sub-headers".

Show More

Updated on Feb 13, 2018:

  • Added "Calendars".

  • Added "Notification Banners".

  • Changed border style for "Tooltips" and "Popovers".

Updated on Feb 7, 2018:

  • Added "Progress Bars".

  • Added "Pagination", with the option to select the amount of items per page.

  • Added "Confirmation Popups".

Updated on Jan 15, 2018:

  • Added "Content Guidelines".

  • Added "Upload" and "Batch Upload".

Updated on Dec 20, 2017:

  • Added "Date Pickers" and "Time Pickers".

  • Changed inline editing "Cancel Button" color from red to gray.

  • Darkened "Question Badge" color.

Updated on Nov 30, 2017:

  • Added "Toggles".

  • Removed disabled state for "Tabs", "Steps" and "View Switchers".

Updated on Nov 13, 2017:

  • Added more use cases of "Tables" such as reloading data of a populated table.

  • Added an alternative way to show error message for "Text Input" and "Select Input".

  • Improved interactive area of "Donut Charts".

Updated on Nov 7, 2017:

  • Initial Launch of Nutanix Design System 2.0!

  • Covered the most common components, layouts and diagrams for Nutanix UI. Guidelines for illustrations and visualization will be added in future releases.

Content Guidelines

Voice and Tone

What’s the difference between voice and tone? You have the same voice all the time, but your tone changes. Your tone changes based on who you are talking to while it also changes based on the emotional state of the person you are addressing.

Our voice is "Insightful"

• Write like this: We recommend you to optimize these 5 cloud instances and save $400.
• Not like this: You can optimize resources and save.
• Why? We provide insightful information and enable action.

Our voice is "Uncluttered"

• Write like this: Edit cost policy to change default settings.
• Not like this: You are viewing the data of last three months because of default settings. To see specific data, you need to change the cost policy.
• Why? We do away with wordy messages, and get right to the useful parts.

Our voice is "Trustworthy"

• Write like this: Auto-rebuild in progress, it will take 24-48 hours. No action is required meanwhile.
• Not like this: System is processing.
• Why? We inform the user, never leave them at a dead-end.

Our tone suits the context as well as the reader’s state of mind. We are:

• honest, but not aggressive
• fun but not silly

• helpful but not overbearing

Components

Buttons

An ideal button labeling has a {verb} + {noun} structure. A verb indicates the button is actionable while giving the idea about what to expect.

Avoid generic labels like “OK”, “Cancel”, “Done” for buttons.

Add Funds, View Usage

Add, View

Create vs Add: Use “Add” when user is adding to an existing data set and “Create” when something is being created from scratch.

Links

Links can be used to redirect the user to a resource, section, etc. Link the resource, and not the entire sentence. Avoid using “click here” as link text.

You can choose to disable auto renewal.

Click here to disable auto renewal.

Add context to where the link will redirect.

Know more about our price calculator.

Know more.

Error Messages

Error messages are one of the most critical parts of designing an experience. As a general thumb rule frame an error message as {problem} + {cause of error} + {solution}.

Provide appropriate actions that can be routes to solve the problem.
Be humble. Speak it aloud like you are explaining someone.
Disclose information progressively.

Use technical jargon.
Use exclamation marks.
Imply that the error is users fault.
Use negative words like “Access denied”

Confirmation Messages

Even though confirmation messages can act as friction when a user is trying to perform an action, they are very efficient in improving the user experience. Confirmation messages are used to “confirm” with the users if they want to proceed with an action or cancel.

Present the action in the header.
Explain the outcome in the body.
Reinstate the action with the button.

Be repetitive.
Ask vague questions like “Are you sure?”
Be vague about action buttons.

Forms

If done right, form feels like a conversation and reduces time required to complete it. Here are the components of a good form.

Headings and Field Labels

Group headings and field labels logically to allow easier visual scanning.

Use title style capitalizations.

Don’t use headings that are unnecessarily long.

Placeholder Text

This is the light text that appears within a field label and disappears when data is entered in the field.

Don’t place text which user will need to memorize for cross-verifying after he/she has entered the data as a placeholder text.

Place text that user might need after filling the field as notes.

Avoid repeating the field labels and excessive usage of please as placeholder text.

Use action-oriented placeholder text in sentence style capitalization.

Notes

This is the related subtext below the field labels. Use them to provide notes or instructions to fill the field label.

If the instruction is too long or consists of the definition of the field label, try disclosing it progressively.

Try wording the link as a question a user would ask himself/herself while filling it.

Tables

Always right-align a block or column of whole numbers or of whole numbers and text. Align numbers at the decimal point (or imaginary decimal point if there are only whole numbers).

Grammar and Syntax

Active vs. Passive Voice

Use active voice rather than passive voice. It increases readability and decreases ambiguity. In active voice, the subject of the sentence does the action. When using passive voice, the subject of the sentence has the action done to it.

Nutanix sent the email.

The email was sent by Nutanix.

Don’t know whether you’re using active or passive voice? Look for words such as “was” and “by” - they typically indicate that you’re writing in passive voice. One exception is when you want to specifically emphasize the action over the subject. In some cases, this is fine.

Your account was flagged by our abuse team.

Capitalization

Use title style capitalization for all titles i.e tile, popups, menu, tab, actions, labels, etc. Capitalize every word except:

• Articles (a, an, the)
• Coordinating conjunctions (and, or, of)
• Prepositions of four or fewer letters.

Exception: When the preposition is part of a verb phrase, as in “Starting Up the Computer.”

Element

Capitalization Style

Examples

Tile Titles
Popup Titles
Menu Titles

Title Capitalization

Hypervisor Summary

Critical Alerts

Cluster Details

Nothing to Do?

Tab Titles

Title Capitalization

Host Selection

Host Configuration

Actions

Title Capitalization

Expand Cluster

Repair Boot Disk

Labels/options that are not full sentences

Title Capitalization

Total Connection Time

User Account Type

Go To…

Go to Page…

Follow sentence style capitalization for buttons, radio button text, checkbox text, options that are not strictly labels, and dialog messages. Capitalize the first letter of the first word. Everything else should be in lowercase, except proper nouns or proper adjectives.

Element

Capitalization Style

Examples

Radio Button Text

Checkbox Text

Options that are not strictly labels, even if they are not full sentences

Sentence Capitalization

Use entity name

Automatically protect related entities

Dialog Messages

Sentence Capitalization

Are you sure you want to exit without saving your changes?

Time and Date

Relative Timestamps

Relative timestamps display the number of minutes, hours, days, weeks or years ago an action took place. Use relative timestamps when immediacy is more important than accuracy. Don’t make the user count back from the present day.

Last updated 2 hours ago

Last updated at 14:40:34 PM

Absolute timestamps

Absolute timestamps display the exact date and time an action took place.
Use absolute timestamps when users can go back and make use of the past content.

Last snapshot taken at 14:40:00 PM

Last snapshot taken 2 hours ago

Dates

If the date is within the current calendar year, don’t show the year. Use the MLA style for abbreviating months.

Aug 4, 2019
Sept 4, 2019
YYYY-MM-DD

4 Aug 2018
Aug 4th, 2018

MM/DD/YYYY

Dates and Time

To display a date or time range, show an em dash (without spaces) between a range of dates or times.

9:00 AM–10:00 PM

9:00AM – 10:00PM

Mention the year only at the end if both the dates fall in the same year. Use AM/PM only once if both are same.

Dec 6, 2013–Jan 2, 2014

January 4–6, 2014

9:00–10:00 AM

9:00 AM–10:00 AM

Dates, Time, and Timezones

If indicating a time zone is necessary, use the time zone’s abbreviation and separate it with the word "at", rather than with a commna.

Feb 4, 2019 at 4:00 PM UTC

Feb 4,2019, 4:00PM(UTC)

Abbreviations

Use abbreviations when there are space constraints. In general, abbreviations are used as singular.

5 min ago

5 mins ago

Numbers

When a sentence begins with a number, spell it out. All other times, write the number using digits. Use commas in numbers larger than 3 digits and use abbreviations only if you have space constraints.

This action will upgrade 3 clusters.
Three clusters will be upgraded with this action.

This action will upgrade three clusters.
3 clusters will be upgraded with this action.

1,567

1567

Write out big numbers in full. Abbreviate them only if there are space restraints (for example, 1k, 150k).

Numbers with Units

Place the unit label after the numerical value, and insert a space between the numerical value and the unit label.

This feature requires at least 14 GB of memory.

This feature requires at least 14GB of memory.

This rule applies even when the value of a quantity is used as an adjective.

This node has a 3 GHz CPU.

This node has a 3-GHz CPU.

Punctuations

Ampersands

They attract attention to the least important part of the sentence. Spell out the word “and”.

Data Protection and Recovery

Data Protection & Recovery

Colons

Use a colon to call out a list. Don’t use an ellipsis, em dash, or comma.

Nutanix supports three hypervisors: AHV, ESX, and Hyper-V.

Nutanix supports three hypervisors — AHV, ESX, and Hyper-V.

Don’t use colon to introduce radio buttons or checklists.

Select a network:
• 30TB-Centos-11
• 4.602-Prism-Central

Commas

In general, use commas whenever the sentence requires a pause. One technique is to read the sentence out loud. Where you find yourself taking a breath, use a comma.

When writing lists, use the Oxford comma.

Nutanix supports three hypervisors: AHV, ESX, and Hyper-V.

Nutanix supports three hypervisors: AHV, ESX and Hyper-V.

Dashes and Hyphens

Use them without spaces on either side to link words into single phrase, or to indicate a span or range.

first-time login, scale-out, Monday-Friday

Em-Dashes

Use an em dash only if you can’t make your message clearer by splitting it into two sentences. Use an em dash without a space on either side (—).

Periods

Absolutely avoid using periods if it’s not a full sentence. Don’t use periods in headings and titles, placeholder texts, notifications, radio and checkbox options, hover and tooltip.

Question Marks

Is the question mark really necessary? Reword into affirmative statements wherever you can. Don’t ask questions if it is the only option.

Reset password

Reset password?

Entity and File Names

Entity Names

When you refer to any named entity in a sentence, reference it by name. Using the name will help orient the user, especially when performing actions on the entity. Surround the entity name with quotation marks.

The storage container “CTR1” has 57 VMs on it.

File Extensions

Use all uppercase letters without a period to indicate the file type. Add a lowercase “s” to make it plural. While referring a specific file, use the exact spelling and capitalization of the actual file. When in doubt, use lowercase.

ZIP, PDF, HTML, JPGs

boot.qcow2, 4.5-prism_central.ova, 4.6-Community_Edition.zip

Exporting Content

When exporting content out of Prism, it often ends up as a file stored on the user’s local system. When designing an experience around exporting files out of of a system, a clear and simple strategy for handling those files becomes an important part of the system usability.

File names should be short and descriptive. Names should convey an understanding of the contents of the file, without making the user view the contents of the file.

file-export.nset

Puppyfood-pulse-smtp-and-remote-access-settings-2017-02-25.nset

Puppyfood-settings-2017-02-25.nset

Append the date

Each downloaded file should include the date at the end of the file name. The date should correspond to the date the file was downloaded. For example: “Puppyfood-settings-2017-02-25.nset”.

Use hyphens as separators

The hyphen is the accepted standard for separating words. Do not use spaces (which cause problems for some systems, or become replaced with “%20”) or underscores (which can disappear if underlined as a hyperlink).

Use lowercase

Since some systems are case-insensitive, do not rely on CamelCasing in filenames. Use all lowercase.

Provide a name, don’t ask for one

Don’t provide a mechanism for the user to name the file within Prism. Users have the freedom to rename files once they are downloaded. Adding this step in Prism provides little value, at the cost of adding another step to the user’s workflow.

Spellings and Formatting

Spellings

Cross-check and double-check the spellings.Use American spellings for all the content on the interface.If in doubt, refer the Merriam-Webster dictionary.

Use color, license, utilise

Use colour, licence, utilize

You can also refer our word list when in doubt.

Contractions

Use contractions like you’ll and we’ll. Avoid negative contractions like can’t and don’t - many users find them harder to read, or misread them as the opposite of what they say.

Data Protection and Recovery cannot be enabled.

You can’t enable Data Protection and Recovery.

Formatting

Use bold sparingly and only where strong emphasis is required.

Your profile has been successfully updated.

Your profile has been successfully updated.

Word List

These words can sometimes present a challenge. Here’s how to use them.

aCLI

Acropolis command-line interface

Acropolis

The Nutanix converged software fabric for virtualization and storage management. It consists of the Acropolis base software, Acropolis Distributed Storage Fabric, AHV, App Mobility Fabric, Prism, and Acropolis APIs.

Acropolis App Mobility Fabric

Provides virtualization management, volume management, and other distributed management functions for Acropolis.
Abbreviation: AMF

add-on (noun, adjective), add on (verb)
AHV

Nutanix-specific hypervisor host providing core server virtualization and optimized for Nutanix cluster and guest VM use.
Don’t use: KVM, Acropolis Hypervisor

AOS

The Acropolis base software. The bits that power the CVM.
Don’t use: NOS

back end (noun), back-end (adjective)
block

A set of Nutanix nodes contained in a single enclosure.

block fault tolerance

When certain conditions are met, redundant copies of any data required to serve I/O are placed on nodes that are not in the same block. In the case where multiple nodes in a block fail, the cluster can continue to run because cluster configuration data exists on other blocks. Guest VMs can continue to run because redundant copies of guest VM data and metadata exist on other blocks.
Don’t use: block awareness

checkbox
clone

A writeable copy of a vDisk.

Cloud Connect

A feature that enables you to back up and restore copies of virtual machines and files to and from an on-premise cluster and a Nutanix Controller VM located on the Amazon Web Service (AWS) or Microsoft Azure cloud. The cloud-based cluster is managed as a remote site from the Prism Web Console or nCLI.

cluster

A group of nodes contained in one or more Nutanix blocks.

cold data

Data that did not have many rewrites or overwrites for a long time. For example, snapshots, file servers, archives, or backups.

compression

An optional container setting that enables one of two types of compression.

compression, inline

Data is compressed as it is written. This type of compression is recommended for workloads that perform batch processing.

compression, post-process

Data is compressed after it is written. The delay time between write and compression is configurable. Because every workload has a different I/O profile, Nutanix has no recommended delay value. This type of compression is recommended for most workloads.

consistency group

A subset of VMs in a protection domain. All VMs within a consistency group for that protection domain will be snapshotted in a crash-consistent manner. For all VMs in a consistency group, a snapshot creates one snapshot for all VMs in the group.

Controller VM

A Nutanix VM that manages storage and other cluster functions on a node.
Abbreviation: CVM
Don’t use: SVM

coworker
data resiliency

A logical container for files necessary for VM operations.

deduplication

The sharing of identical guest VM data on premium tiers (RAM and Flash) for improved performance or on capacity tiers (HDD) for storage space savings. Enabled by properties of a container or vDisk.

Distributed Storage Fabric

All storage functionality, including snapshots and clones, data protection, disaster recovery, data path redundancy, replication factors, deduplication, compression, erasure coding, and so on.
Abbreviation: DSF

double-click
drop-down (noun, adjective), drop down (verb)
email (never hyphenate, never capitalize unless it begins a sentence)
Enterprise Cloud Platform

The Nutanix solution that natively converges compute, virtualization and storage into a resilient, software-defined solution with rich machine intelligence.
Don’t use: Xtreme Computing Platform, XCP

erasure coding

Optional algorithm included in the Acropolis base software to help reduce the storage used for fault tolerance. It helps to increase the effective or usable capacity on a cluster, depending on cluster size and data coldness.

failback

Planned failover initiated from recovery site.

failover

Moving VMs from a primary site to a recovery site. A disaster failover is a failover performed when the primary site is down. A planned failover is a failover performed when both sites are up.

front end (noun), front-end (adjective)
guest VM

A VM running on a Nutanix cluster that executes a workload, such as VDI or Exchange, as opposed to a VM that is involved in cluster operations, such as a Controller VM.
Don’t use: user VM, UVM

homepage
host

An instance of the hypervisor that runs on a Nutanix node.

image service

A workflow in the Prism web console that enables a user to upload ISO or disk images (in ESXi or Hyper-V format) to a Nutanix AHV cluster by specifying a remote repository URL or by uploading a file from a local machine.

internet (never capitalize unless it begins a sentence)
local replication

Multiple copies of data within a container. These copies exist for fault tolerance: if a physical disk fails, the cluster can recover data from another copy. The cluster manages the replicated data, and the copies are not visible to the user.

local snapshot

Snapshots stored on the same cluster where they originated.

login (noun, adjective), log in (verb)
nCLI

Nutanix command-line interface.

node

A physical server contained in a Nutanix block; runs a hypervisor host.

Nutanix Services

Product support, consulting services, and training and certification.
Don’t use: Nutanix GSO, Nutanix Global Services Organization

OK
online (never capitalize unless it begins a sentence)
oplog

A write cache on a faster, more expensive storage tier.

opt-in (noun, adjective)
, opt in (verb)
policy

Set of one or more rules used to enforce processes or relationships in or among clusters or cluster entities.

pop-up (noun, adjective), pop up (verb)
Prism

Web-based management interface for managing Nutanix clusters.

Prism Central

Centralized management tool that runs as a separate VM configured as a single-node cluster to monitor and manage multiple clusters through a single web console.

Prism Element

A single cluster being managed by and available through the Prism Central web console.
Abbreviation: PE

protection domain

A group of VMs to be backed up locally on a cluster or replicated on the same schedule to one or more clusters. Protection domains may be associated with remote sites. Protection domain names must be unique across sites. A VM can be in at most one protection domain. Live protection domains manage live VMs, and can make, replicate, and expire snapshots. Inactive protection domains receive snapshots from a remote cluster.

redundancy factor

The number of nodes plus 1 that the cluster can tolerate being down at one time. By default, Nutanix clusters have a redundancy factor of 2, which means that they can tolerate 1 node being down. They are configurable to redundancy factor 3 to enable tolerating 2 nodes being down.

remote replication, one-to-one

Replicates a production cluster with one idle cluster as a DR target.

remote replication, reciprocal

Cross replication within running (non-idle) production clusters.

remote site

A pair of clusters that can replicate data to each other. A configured remote site can also be located in the cloud (based on Amazon AWS or Microsoft Azure, for example).

remote snapshot

A snapshot copied asynchronously from one cluster to another.

replication factor

The number of copies of data kept by a container. The default is 2. Containers on clusters with redundancy factor of 3 can have replication factor of 3.
Abbreviation: RF

reserved capacity

A property of a container or vDisk that guarantees that a certain amount of storage space is available.

schedule

A property of a protection domain that specifies the intervals to take snapshots and how long the snapshots should be retained. A schedule optionally specifies which remote site to replicate to.

Self-Service Restore

Allows a user to restore a file within a virtual machine from the Nutanix protected snapshot with minimal Nutanix administrator intervention.

shadow clone

A cache of a vDisk on all the nodes in the cluster. When a vDisk is read by multiple VMs (such as the base image for a VDI clone pool), the cluster creates shadow clones of the vDisk.

signup (noun, adjective), sign up (verb)
snapshot

A read-only copy of the state and data of a VM at a point in time. Snapshots for a VM are crash consistent, which means that the VMDK on-disk images are consistent with a single point in time. That is, the snapshot represents the on-disk data as if the VM crashed. The snapshots are not, however, application consistent, meaning that application data is not quiesced at the time of snapshot, unless the protection domain is configured to use application-consistent snapshots.

storage container

A subset of available storage within a storage pool.

storage pool

A group of physical disks from one or more tiers.

storage replication adapter

A Nutanix-provided module that allows VMware Site Replication Manager (SRM) to use native remote replication.

sync
tier

A type of physical storage in a Nutanix node.

username
URL
vDisk

Data associated with a VM represented as a set of files on a datastore.

VM high availability

In virtualization management VM high availability, when a node becomes unavailable, VMs that are running on that node are restarted on another node in the same cluster.

VM mobility

The ability to export your existing VMs from one non-AHV cluster to an AHV cluster. This option requires that you install the Nutanix VM Mobility installer on all the VMs. The Nutanix VM Mobility installer deploys the drivers that are required at the destination AHV cluster. After you prepare the source VMs, they can be exported to the AHV cluster.

vStore

A separate mount point within a container which has its own NFS namespace. This namespace maps to a protection domain. Each vStore is exported as a device through the Nutanix SRA.

website

References

We found the following resources to be helpful while creating this guide:

Mailchimp Content Style Guide
Microsoft Manual of Style
Shopify Content Guidelines
W3C Web Content Accessibility Guidelines

Templates

Dashboards

Do

We recommend using the same width for all widgets for an optimized resizing approach

Do

If you need multiple width sizes you can use 2x and 4x widget sizes

Dont

Do not use 3x widget sizes

Entity List

Basic

Do

If you do not have a sidebar use the sub-header component

Do

When there is no entities remove all controls and pagination and repeat the main call to action in the center

Do

If you do not have an icon for your empty state use only text

Do

When populating the page, do not show pagination until it is needed

Scrollable

Do

When scrolling everything in the page should remain fixed and only the content of the table should scroll

Searchable

Do

If you have a global search (ie: Prism) then the table is only searchable through filters and the header search. Any filter activated through the global search will show on the filter controls (top right button)

Do

If you do not have a global search (ie: ERA) then you need to present a search input on the top of the header

Do

Since the header search input is not present to show the active filters, use tags on on the sidebar or sub header.

Actions

Do

When an entity is selected present the actions on the top left

Do

If you have more than 3 actions then present them in a dropdown

Filters

Do

Active filters should be reflected on the global search and on the total text (Selected 1 out of 118 Filtered VMs)

Color By

Do

"Color By" activation should be reflected on the "Color By" button

Group By

Do

"Group By" activation should be reflected on the "Group By" button

Do

Use tabs on top of the table for grouping by

Forms

Do

Most popups are a combination of layouts and components that you can find in this site. Here are two examples of composed popups showing the usage of those components.