Palo Alto Networks DESIGN.md

Cybersecurity platform design with black-and-white authority, saturated brand accents, and clear enterprise hierarchy. Palo Alto Networks frames AI and security through strong contrast, large strategic statements, and modular platform storytelling.

1. Visual Theme & Atmosphere

Overall Aesthetic

Palo Alto Networks communicates security leadership at enterprise scale. The experience should feel authoritative, modern, and decisive, with enough visual intensity to signal urgency without turning chaotic.

Mood & Feeling

• Secure: trust and seriousness are central
• Strategic: the platform story should feel large-scale and future-oriented
• Confident: layouts and copy should feel decisive
• Technical: AI, cloud, and network security must feel real and current
• Enterprise-clear: broad platform value should remain easy to scan

Design Density

Medium density. The site covers many platforms and industries, but it keeps the narrative structured through strong hero sections, proof blocks, and product pathways.

Visual Character

• Black, white, and dark neutrals as the base
• Strong brand accent hues tied to product families
• Large statements, modular cards, and platform proof sections
• Clear CTA emphasis without clutter
• Serious but modern security tone

2. Color Palette & Roles

Core Brand Colors

Neutral Support

Semantic Colors

Color Usage Rules

• Use dark neutrals to establish authority and seriousness.
• Apply red as the strongest immediate emphasis.
• Use secondary brand hues to support category separation, not to create noise.

3. Typography Rules

Font Stack

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

Type Scale

Typography Philosophy

Palo Alto Networks typography should feel bold, clear, and high-trust. It needs to support both strategic narratives and direct product messaging without visual hesitation.

Practical Rules

• Use short, confident headlines.
• Structure proof points and metrics to scan quickly.
• Preserve strong contrast in all brand and product sections.

4. Component Stylings

Buttons

Primary Button

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

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

Secondary Button

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

Inputs

Text Input

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

Cards and Platform Panels

Feature Card

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

Dark Security Panel

css.security-panel {
  background: #111111;
  color: #FFFFFF;
  border-radius: 24px;
  padding: 28px;
}

5. Layout Principles

Spacing Scale

Layout Rules

• Use large strategic hero statements followed by modular proof sections.
• Separate platforms and product families into clearly bounded blocks.
• Preserve strong CTA visibility without overwhelming the story.
• Use metrics and logos to reinforce scale and trust.

6. Depth & Elevation

Surface Hierarchy

Shadow System

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

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

Depth Rules

• Use contrast and sectioning first, shadow second.
• Keep dark panels purposeful and high impact.
• Let proof and product blocks stay crisp and bounded.

7. Do's and Don'ts

Do

• Use red as a focused high-priority brand cue.
• Keep security messaging clear and high-trust.
• Use modular sections for product-family storytelling.
• Maintain strong contrast and decisive action hierarchy.

Don't

• Overuse secondary accent hues in one view.
• Let dark security panels dominate every section.
• Turn platform storytelling into vague AI-themed decoration.
• Make critical CTAs visually ambiguous.

8. Responsive Behavior

Responsive Rules

• Stack platform and proof cards cleanly on smaller screens.
• Keep strategic CTAs visible early in the mobile layout.
• Preserve strong contrast and readability in dark panels.
• Simplify proof density before shrinking core headlines too far.

Mobile Character

Palo Alto Networks mobile should still feel authoritative and modern. The experience can simplify, but the security-first seriousness and strong CTA structure should remain intact.

9. Agent Prompt Guide

Quick Reference

• Mood: authoritative, secure, strategic
• Primary accent: Palo Alto red #E24329
• Core palette: black, white, dark neutral, selective product accents
• Layout: large hero statements with modular proof blocks
• Components: pill CTAs, clean cards, dark security panels

Prompt Snippet

textDesign this interface in the style of Palo Alto Networks’ current website. Use black and white as the foundation, Palo Alto red (#E24329) for primary emphasis, dark security panels for high-impact platform messaging, and clean enterprise typography. The result should feel authoritative, modern, and strategically focused rather than cluttered or generic.