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

Last Updated: Jul 2, 2018

Demo

Resources

Resources

Nutanix Design System

Download (.sketch)

Nutanix Font Pack

Download (.zip)

Text Styles for Sketch

Color Palette for Sketch

Changelog

Updated on Jul 2, 2018:

  • Added "Backward Links".

  • Added "Iconography".

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

  • Added "Sub-headers".

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".

Show More

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

Syntax & Grammar

Active vs. Passive Voice

Use active voice. Avoid passive voice. In active voice, the subject of the sentence does the action. In 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 Style in Labels and Text

All labels should use either title style capitalization or sentence style capitalization.

Title style capitalization

Capitalize every word except:

  • Articles (a, an, the)
  • Coordinating conjunctions (and, or, of)
  • Prepositions of four or fewer letters, except when the preposition is part of a verb phrase, as in “Starting Up the Computer.”

However, always capitalize the first and last word, even if it is an article, a conjunction, or a preposition of four or fewer letters.

Sentence Style Capitalization

Capitalize the first word, and make the rest of the words lowercase, unless they are proper nouns or proper adjectives.

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…

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?

Object References

In general, don’t repeat the entity type for sub-entity views.

For example, when assigning names to subtabs for a VM entity, using a tab title of “VM Disks” is repetitive. Simply stating “Disks” is more straightforward, and avoids clutter. Note that the alternative strategy would repeat the term “VM” across all of the subtabs for that VM, which is unnecessary.

Numbers

When a sentence begins with a number, spell it out. All other times, write the number using digits.

Three clusters were upgraded on Monday, and another 7 will be upgraded on Wednesday.

I upgraded 3 clusters on Monday.

Frank won 1st place in the 2048 game in Prism.

Use commas in numbers larger than 3 digits:

999

1,000

62,000

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.

The latency is 0ms between cluster A and cluster B.

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.

Percentages

Use the % symbol. Don’t spell out the word “percent.” Don’t put a space between the numerical value and the percent symbol.

The upgrade is 65% complete.

Ranges and spans

Use a hyphen (-) to indicate a range of numbers.

This upgrade will take 15-20 minutes.

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.

You can upload any of the following file types – GIF, ZIP, PDF

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 a hyphen (-) 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

Use an em dash (—) to offset an aside. Use a true em dash, not hyphens (- or –).

The growing demands of enterprise applications and the fast pace of modern business threaten to put legacy IT design—with separate storage, storage networks, and servers—at risk of failure.

Question marks

Question marks go inside quotation marks if they’re part of the quote. Like periods, they go outside parentheses when the parenthetical is part of a larger sentence, and inside parentheses when the parenthetical stands alone.

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.

Are you sure you want to delete the VM named “Horseradish”?

Are you sure you want to delete the VM?

File extensions

When referring to a file extension type, use all uppercase letters without a period. Add a lowercase “s” to make it plural.

ZIP

PDF

HTML

JPGs

When referring to a specific file, the filename should reflect the exact spelling and capitalization of the actual file. When in doubt, use lowercase:

boot.qcow2

4.5-prism_central.ova

4.6-Community_Edition.zip

Displaying Content

Content of all types – especially complex data – is more easily understood when structured properly. A little formatting can go a long way in improving comprehension. Here are the patterns that Nutanix follows when displaying content.

Gestalt Laws

Attributes of an entity often take the form of metrics (for example, “459 IOPS,” or “45.2Mbps”). To facilitate easy scanning and consumption by the user’s eye, all metrics being displayed should observe the Gestalt lawsa. Pay particular attention to entity attributes that appear in a vertical layout (within tables, and within entity detail pages.)

Right-align numbers

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).

Use the same scale (the number of digits to the right of the decimal point)bfor all values within the same column. Most commonly, the scale will be either zero digits (whole numbers, such as “45 VMs”), or two digits (“3.71 ms”).

Left-align text

Always left-align a column of whole text. Examples include: Entity name, description, related entities (a list), etc.

Correct example. Columns of text are left-aligned.

Columns of numbers are right-aligned on the decimal point.

Incorrect example. The numbers are not right-aligned on the decimal point.

Summary

Columns of text should be left-aligned.
Columns of numbers should be right-aligned on the decimal point.

a. Applied Gestalt laws standards
b. Oracle Database Online Documentation – NUMBER Datatype

Exporting Content

When exporting content out of Prism, it often ends up as a file stored on the user’s local system. Managing all of these files (with potentially multiple versions of each one, often alongside other files on the system) presents a challenge for our users. We follow the following patterns to help make the task of managing content as easy as possible.

File Names

The scenario of downloading a single file one time may seem deceivingly simple. Now imagine that file in a Downloads folder, along with hundreds or thousands of other files. How will users differentiate this file from the others on their system? Now imagine downloading multiple versions of the file, perhaps once per week. How will users understand the differences between these files?

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.

Be descriptive, but not too lengthy

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. Some examples:

file-export.nsetShort, but could be more descriptive

Puppyfood-pulse-smtp-and-remote-access-settings-2017-02-25.nsetVery descriptive, but too long

Puppyfood-settings-2017-02-25.nsetShort and descriptive

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.

File Contents

Once users download a file, how will they know what settings are stored in that file? Consider the usability of the file over its lifetime on the user’s machine.

People-friendly file contents

Whenever possible, store the content in a human-readable format. YAML is the preferred language for this purpose when dealing with structured data. This allows a user to look through and understand the contents of the file. An added benefit is it allows diff utility software tools to highlight the differences between multiple copies of the file. In the case of the configuration file example, this allows users to understand the differences between January’s config file and February’s config file.

There will be exceptions, of course. For example, login credentials, passwords, and licenses will need to be obscured for security reasons, and binary data/ISOs is inherently unreadable by people. However, the general rule is to deliver the user’s content in a human-readable format.

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

Resources

The Nutanix Content Style Guide is based on the following resources:

Mailchimp Content Style Guide
Microsoft Manual of Style

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

W3C Web Content Accessibility Guidelines

Examples

Dashboards