Nutanix DESIGN.md

Hybrid-cloud platform design with deep purple branding, dark product surfaces, and enterprise infrastructure clarity. Nutanix’s current visual language frames platform complexity inside modular, future-oriented sections that feel consistent and approachable.

1. Visual Theme & Atmosphere

Overall Aesthetic

Nutanix communicates hybrid multicloud simplicity at enterprise scale. The brand needs to feel powerful and technical, but still understandable. Large statements, dark product surfaces, and a controlled accent palette help turn infrastructure into a coherent platform story.

Mood & Feeling

• Platform-first: unified experience is central to the story
• Modern: the design should feel current and AI-aware
• Structured: complex capabilities need modular framing
• Credible: enterprise trust matters as much as innovation
• Approachable: the interface should imply simplification, not complexity

Design Density

Medium density. Nutanix often spans many capability areas, but it stays readable through sectioning, card patterns, and controlled visual emphasis.

Visual Character

• Purple-led brand identity
• Dark product and platform frames
• White and pale surfaces for explanatory sections
• Modular use-case and solution cards
• Big platform statements with clean typography

2. Color Palette & Roles

Core Brand Colors

Neutral and Dark Surfaces

Semantic Colors

Color Usage Rules

• Use purple as the strongest Nutanix identity cue.
• Let dark frames anchor platform and demo sections.
• Keep the structural UI neutral so complex content stays readable.

3. Typography Rules

Font Stack

css/* Modern infrastructure platform sans */
--font-sans: Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'SF Mono', 'Roboto Mono', Menlo, monospace;

Type Scale

Typography Philosophy

Nutanix typography should feel clear, high-confidence, and platform-ready. It needs to carry both high-level transformation language and more technical capability detail.

Practical Rules

• Use strong platform statements up top.
• Keep explanatory text short and modular.
• Use technical styles only when they reinforce product credibility.

4. Component Stylings

Buttons

Primary Button

css.button-primary {
  background: #7C3AED;
  color: #FFFFFF;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #7C3AED;
  border-radius: 999px;
  font: 600 14px/1 Inter, sans-serif;
}

.button-primary:hover {
  background: #6D28D9;
  border-color: #6D28D9;
}

Secondary Button

css.button-secondary {
  background: #FFFFFF;
  color: #111827;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
}

Inputs

Text Input

css.input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  background: #FFFFFF;
  color: #111827;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  font: 400 16px/1.2 Inter, sans-serif;
}

.input:focus {
  outline: none;
  border-color: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}

Cards and Platform Frames

Feature Card

css.card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 24px;
}

Dark Platform Panel

css.platform-panel {
  background: #1F2937;
  color: #FFFFFF;
  border-radius: 24px;
  padding: 24px;
}

5. Layout Principles

Spacing Scale

Layout Rules

• Use modular sections for platform, products, and outcomes.
• Alternate light explanation bands with darker product-focus bands.
• Keep CTA paths obvious for demos, trials, and solution exploration.
• Let screenshots and interface frames do much of the technical storytelling.

6. Depth & Elevation

Surface Hierarchy

Shadow System

css.shadow-card {
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
}

.shadow-panel {
  box-shadow: 0 18px 30px rgba(17, 24, 39, 0.16);
}

Depth Rules

• Use light cards for most structure and dark panels for focus.
• Let screenshots and UI previews create technical depth.
• Keep the overall system airy enough to counter platform complexity.

7. Do's and Don'ts

Do

• Use purple as the key brand and action cue.
• Keep platform breadth modular and explainable.
• Use dark panels to frame product credibility.
• Balance technical detail with approachability.

Don't

• Overload every section with platform jargon.
• Use dark panels everywhere without relief.
• Scatter too many equally strong CTAs across the same section.
• Reduce readability with heavy decorative effects.

8. Responsive Behavior

Responsive Rules

• Stack cards and dark platform panels cleanly on smaller screens.
• Preserve primary CTA visibility early in the scroll.
• Simplify proof density before shrinking key headings too far.
• Keep screenshots readable by reducing framing complexity when space is tight.

Mobile Character

Nutanix mobile layouts should still feel platform-centric and modern. The purple-led identity and modular structure should remain obvious even when the experience becomes more linear.

9. Agent Prompt Guide

Quick Reference

• Mood: modern, platform-first, enterprise-clear
• Primary accent: Nutanix purple #7C3AED
• Core structure: light cards plus dark platform frames
• Typography: modern infrastructure sans
• Components: pill CTAs, feature cards, dark product panels

Prompt Snippet

textDesign this interface in the style of Nutanix’s current website. Use a purple-led brand accent (#7C3AED), light neutral page structure, dark platform showcase panels, and concise modern enterprise typography. The result should feel platform-first, technically credible, and approachable rather than cluttered.