Nutanix

Overview

Nutanix is an enterprise infrastructure platform that unifies hybrid and multi-cloud operations, delivering a sophisticated, tech-forward aesthetic rooted in **Architectural Minimalism with Digital Precision**. The design system prioritizes clarity and control through a dark-dominant palette (near-black surfaces #131313) punctuated by vibrant accent colors—a vivid purple (#7855fa) for primary actions and a cyan-teal (#0092b0) for secondary interactions. The brand personality is authoritative yet approachable: the UI conveys technical mastery without coldness, speaking to infrastructure engineers and enterprise architects who demand both power and elegance. The visual language emphasizes geometric precision, clean typography in Montserrat, and restrained use of color to guide attention to critical workflows.

Voice and tone: direct, confident, and solution-oriented. Nutanix avoids marketing hyperbole in favor of concrete capability statements. Example sentence: "Reduce operational complexity across 60+ resorts with unified infrastructure management—no vendor lock-in, no compromise." The brand acknowledges the technical sophistication of its audience while remaining accessible to decision-makers evaluating platform consolidation.

Colors

The color system is built on a **dark-first, accent-driven** philosophy. The surface stack anchors the interface in near-black tones: surface (#131313) serves as the primary canvas, with surface-container (#1a1a1a) and surface-container-high (#262626) providing subtle depth without introducing visual noise. On-surface (#ffffff) and on-surface-variant (#d8d8d8) ensure text legibility across all backgrounds with sufficient contrast (WCAG AA+). Primary (#7855fa), a vivid purple, is reserved exclusively for call-to-action buttons, active states, and brand-critical interactive elements—it appears on "Get Started Now" CTAs and focus indicators. Secondary (#0092b0), a cyan-teal, supports infrastructure-related features and secondary navigation. Tertiary (#68b631), a vibrant green, highlights succ

Typography

The type system uses Montserrat exclusively, a geometric sans-serif that conveys technical sophistication and modern enterprise credibility. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements, while headline-lg (44px, 700 weight) is reserved for page titles and section headers. Headline-md (32px, 600 weight) breaks up content into digestible sections. Body-md (16px, 400 weight, 24px line-height) is the default reading size, ensuring 1.5 line-height for comfortable scanning of dense technical content. Label-md (14px, 600 weight) is applied to button text and form labels, with 0.01em tracking to add subtle emphasis. On dark backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to small labels (label-sm) when overlaid on busy imagery or gradients

Layout

The layout system uses a 12-column grid with a fixed container max-width of 1280px, centered on the viewport. Sections are separated using lg spacing (40px) vertically and gutter spacing (24px) horizontally, creating a rhythm that feels spacious without excessive whitespace. The dark background (#131313) is treated as an active design element, not merely a void—it provides visual rest and allows accent colors to dominate. Padding inside cards and containers follows the md spacing scale (24px), with inputs and compact elements using sm spacing (12px). Hero sections occupy full viewport height with asymmetric layouts (e.g., text on left, imagery on right) to create visual interest. Content sections use a 2–3 column layout for feature cards, collapsing to single-column on mobile. The spacing

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than aggressive drop shadows. Level 1 (Base): the surface (#131313) with no shadow, used for primary content areas. Level 2 (Elevated Cards): surface-container (#1a1a1a) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and floating elements. Level 3 (Modals & Overlays): surface-container-high (#262626) with box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), used for dialogs and high-priority overlays. Hover states on cards transition the shadow to the Level 3 value over 200ms (cubic

Shapes

The shape philosophy is **Geometric Precision with Minimal Ornamentation**. Buttons use a 20px border-radius (rounded.xl), creating a soft pill shape that feels modern and inviting while maintaining geometric clarity. Cards and containers use 4px (rounded.md) for a subtle, technical appearance—sharp enough to feel intentional, rounded enough to avoid harshness. Form inputs use 3px (rounded.DEFAULT), a micro-radius that signals input capability without drawing attention. Modals and overlays use 8px (rounded.lg) to create visual separation from the main interface. The 50% radius (rounded.full) i

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses a 48px height, 8px 32px padding, 20px border-radius, and primary (#7855fa) background with white text. On hover, the background transitions to primary-fixed-dim (#7855fa at 90% opacity) over 150ms. On active/press, the background shifts to inverse-primary (#4b00aa), a deeper purple, to provide tactile feedback. The button-secondary component uses a 40px height, 12px 10px padding, 2px border-radius, surface-container-high (#262626) background, and a 1px outline-variant (#7a7a7a) border. On hover, the background lightens to surface-container-highest (#333333) and the text color shifts to primary (#7855fa). Button-ghost is used for tertiary actions: transparent background, primary text, 12px 1

Do's and Don'ts

**Do**

• Do use primary (#7855fa) exclusively for CTAs, active states, and focus indicators—never for body text or secondary elements.
• Do maintain at least 1.5 line-height on body text (24px for 16px font) to ensure readability on dark backgrounds.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to elevated cards and 0 4px 24px rgba(0, 0, 0, 0.15) to modals for consistent depth.
• Do use Montserrat 600 weight for labels and 700 weight for headlines; avoid mixing weights within a single component.
• Do separate major sections with lg spacing (40px) vertically to create visual breathing room and guide content hierarchy.

**Don't**

• Don't use secondary (#0092b0) or tertiary (#68b631) as primary button backgrounds—reserve primary (#7855fa) for all main CTAs.
• Don't apply border-radius greater than 20px on buttons; the pill shape should feel intentional, not rounded-to-softness.
• Don't use shadows greater than 0 4px 24px rgba(0, 0, 0, 0.15); excessive shadows flatten the dark aesthetic.
• Don't mix Montserrat with system fonts or fallback sans-serifs; always load the full Montserrat family (400, 600, 700 weights).
• Don't apply text-shadow to body text on solid backgrounds; reserve it only for small labels over imagery or busy backgrounds.