---
version: alpha
name: Wiz
description: Cloud-security clarity — a clean light canvas with deep ink navy text, an electric lime-yellow signature accent for CTAs and highlights, soft cloud-gradient hero washes, generous rounded cards, and a confident geometric sans.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f6f7f9"
  surface-dark: "#0b1437"
  ink: "#0b1437"
  ink-secondary: "#454d68"
  ink-muted: "#6b7390"

  # Signature accent — Wiz lime-yellow
  primary: "#cdfa50"
  primary-deep: "#1d2a52"
  accent-blue: "#3b6bff"
  accent-teal: "#2fc7c1"

  # On-color
  on-primary: "#0b1437"
  on-ink: "#ffffff"

  # Neutral scale
  gray-700: "#454d68"
  gray-500: "#6b7390"
  gray-300: "#c3c8d6"
  gray-200: "#e3e6ee"
  gray-100: "#eef0f5"
  gray-50: "#f6f7f9"

  # Borders + tints
  border: "#e3e6ee"
  border-dark: "#23305c"
  badge-bg: "#eef0f5"
  badge-text: "#1d2a52"
  link-blue: "#3b6bff"
  focus-ring: "#3b6bff"

  # Gradient stops (cloud hero wash)
  gradient-start: "#e9f7c9"
  gradient-end: "#dfeaff"

typography:
  display-hero:
    fontFamily: "Poppins, Inter, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Poppins, Inter, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.0px
  sub-heading:
    fontFamily: "Poppins, Inter, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Poppins, Inter, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.2px
  eyebrow:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 6px
  md: 10px
  lg: 16px
  xl: 24px
  2xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-dark}"

  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  badge:
    backgroundColor: "{colors.badge-bg}"
    textColor: "{colors.badge-text}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-ink}"
    rounded: "{rounded.xl}"
    padding: 32px
    borderColor: "{colors.border-dark}"

  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.focus-ring}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 16px 32px
    borderColor: "{colors.border}"

  eyebrow-label:
    textColor: "{colors.ink-muted}"
    typography: "{typography.eyebrow}"
---

# Wiz Design System

## Overview

Wiz's website translates the abstract complexity of cloud security into something legible and confident. The canvas is bright white (`{colors.background}`) carrying deep navy ink (`{colors.ink}`) — a near-blue-black that reads as trustworthy and enterprise-serious rather than the pure black of a developer tool. Against this clean foundation, a single electric lime-yellow accent (`{colors.primary}`) does almost all of the brand's heavy lifting, appearing on primary CTAs, highlighted words, and graph nodes. The contrast of soft white, deep navy, and that one acidic green is the entire identity in three colors.

The typography pairs a geometric, friendly display sans for headlines with a workhorse text sans for body copy. Headlines run large with mild negative tracking, lending the marketing voice an approachable confidence — bold enough to make security feel solvable, never so compressed it reads as a code editor. Body copy stays comfortable at 17px with generous line height, because the site spends most of its words explaining a technical product to a mixed audience of practitioners and executives.

The structural signature is roundedness and air. Cards, buttons, and containers all carry substantial corner radii (`{rounded.lg}` to `{rounded.2xl}`), and the hero leans on a soft cloud-gradient wash blending pale green into pale blue (`{colors.gradient-start}` → `{colors.gradient-end}`) — a literal nod to "cloud" that keeps the page atmospheric without clutter. Pill-shaped CTAs and badges reinforce the soft, modern feel. Dark navy panels (`{colors.surface-dark}`) appear as inversion moments to anchor diagrams and high-emphasis sections.

**Key Characteristics:**
- Bright white canvas with deep navy ink (`{colors.ink}`) — enterprise-serious, not pure black
- Single electric lime-yellow accent (`{colors.primary}`) carrying CTAs, highlights, and graph nodes
- Pill-shaped buttons and badges throughout (`{rounded.pill}`)
- Generous rounded cards (`{rounded.lg}`–`{rounded.2xl}`) with soft borders
- Soft cloud-gradient hero wash blending pale green into pale blue
- Dark navy inversion panels for diagrams and emphasis sections
- Geometric display sans for headlines, neutral text sans for body
- Uppercase tracked eyebrow labels above section headings

## Colors

### Primary
- **Ink Navy** (`{colors.ink}`): Primary text, headings, dark buttons. A deep blue-black, warmer and more corporate than pure black.
- **Pure White** (`{colors.background}`): Page background, card surfaces.
- **Wiz Lime** (`{colors.primary}`): The signature accent — primary CTA fill, highlighted words, accent graphics.

### Accent
- **Accent Blue** (`{colors.accent-blue}`): Links, secondary interactive highlights, focus ring.
- **Accent Teal** (`{colors.accent-teal}`): Secondary graphic accent in diagrams and gradients.
- **Primary Deep** (`{colors.primary-deep}`): Deep indigo used for badge text and emphasis on light surfaces.

### Surfaces
- **Surface Soft** (`{colors.surface-soft}`): Subtle gray feature-card background and section tint.
- **Surface Dark** (`{colors.surface-dark}`): Navy inversion panels for diagrams and high-emphasis blocks.

### Neutral Scale
- **Gray 700** (`{colors.gray-700}`): Secondary body text.
- **Gray 500** (`{colors.gray-500}`): Muted text, captions.
- **Gray 300** (`{colors.gray-300}`): Disabled states, subtle dividers.
- **Gray 200** (`{colors.gray-200}`): Borders, card outlines.
- **Gray 100** (`{colors.gray-100}`): Light dividers.
- **Gray 50** (`{colors.gray-50}`): Subtle surface tint.

### Borders & Tints
- **Border** (`{colors.border}`): Default card and input outline on light.
- **Border Dark** (`{colors.border-dark}`): Outline on navy panels and secondary outline buttons.
- **Badge Bg / Text** (`{colors.badge-bg}` / `{colors.badge-text}`): Pill badge surface and indigo label.

### Gradient
- **Gradient Start / End** (`{colors.gradient-start}` → `{colors.gradient-end}`): Cloud hero wash, pale green into pale blue.

## Typography

### Font Family
- **Display**: `Poppins` (geometric sans), fallbacks `Inter, Arial, sans-serif`
- **Text**: `Inter`, fallbacks `Arial, sans-serif`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 56px hero headline — confident, mild negative tracking |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, card group headings |
| `card-title` | Feature and customer cards |
| `body-large` | Hero subtitle, section intros |
| `body` | Standard reading text |
| `body-small` | Compact UI text, captions |
| `body-medium` | Navigation, emphasized labels |
| `button-ui` | Buttons and links |
| `caption` | Metadata, badge text |
| `eyebrow` | Uppercase tracked label above headings |

### Principles
- **Confident, not compressed**: Headlines use mild negative tracking (-1.0px to -1.6px) — bold and friendly, never code-editor tight.
- **Two-family system**: Geometric display sans announces; neutral text sans explains.
- **Eyebrows orient**: Uppercase tracked eyebrow labels in muted ink precede most section headings.
- **Readable body**: 17px body at 1.6 line height for a technical-but-mixed audience.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px; sections breathe at `{spacing.3xl}`–`{spacing.4xl}`.

### Grid & Container
- Max content width approximately 1200px
- Hero: centered single column over cloud-gradient wash
- Feature sections: 2–3 column rounded-card grids
- Customer logo bars and testimonial carousels

### Whitespace Philosophy
- **Air around density**: The product is complex, so the page compensates with generous vertical spacing and roomy cards.
- **Inversion for emphasis**: Navy panels break the white rhythm to spotlight diagrams and proof points.
- **Soft everything**: Large radii and the gradient wash keep an enterprise topic feeling modern and calm.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Outline (Level 1) | 1px `{colors.border}` | Default cards, inputs |
| Soft Card (Level 2) | 1px border + `0 6px 20px rgba(11,20,55,0.06)` | Feature and customer cards |
| Inverted (Level 2b) | `{colors.surface-dark}` fill, no border needed | Diagram and emphasis panels |
| Focus (Accessibility) | `2px solid {colors.focus-ring}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: Shadows stay soft and low-opacity, tinted with the navy ink rather than neutral gray, so lifted cards feel cohesive with the brand. Depth comes mostly from rounded outlines and the light/dark surface contrast, not heavy elevation.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 6px | Small chips, inline elements |
| `md` | 10px | Inputs, small cards |
| `lg` | 16px | Standard cards |
| `xl` | 24px | Large feature cards |
| `2xl` | 32px | Dark inversion panels |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Lime fill, navy text, full pill. The signature CTA; hovers to solid navy.
- **`button-secondary`** — White with navy outline, pill.
- **`button-dark`** — Solid navy, white text, pill — used on light sections needing a heavier CTA.

### Pills & Badges
- **`badge`** — Light gray surface, indigo text, full pill, tracked caption.

### Cards
- **`card`** — White, soft border, `{rounded.lg}`.
- **`card-feature`** — Subtle gray surface for grouped feature tiles.
- **`card-dark`** — Navy inversion card for diagrams and emphasis, `{rounded.xl}`.

### Inputs
- **`input`** — White surface, soft border, `{rounded.md}`. Focus uses `{colors.focus-ring}` 2px outline.

### Navigation
- **`nav-bar`** — White sticky header, navy nav text, lime CTA right, soft bottom border.

### Distinctive Components
- **Cloud-gradient hero**: Soft pale-green-to-pale-blue wash behind centered hero content.
- **Security graph diagrams**: Navy panels with lime accent nodes connecting cloud resources.
- **Customer logo bar**: Fortune-100 grayscale logos in a clean grid.

## Do's and Don'ts

### Do
- Use the lime accent (`{colors.primary}`) sparingly — CTAs, highlights, and graph accents only
- Keep navy ink (`{colors.ink}`) for text, not pure black
- Use pill-shaped buttons and badges
- Use large rounded radii on cards and panels
- Use navy inversion panels for diagrams and high-emphasis blocks
- Precede section headings with uppercase tracked eyebrows

### Don't
- Don't use lime as a background for long text — it's an accent, never a reading surface
- Don't use pure black (#000000) for text — navy ink carries the brand
- Don't tighten headline tracking to code-editor levels
- Don't use square corners on buttons or cards
- Don't introduce competing saturated accents — one lime accent is the system

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked CTAs, reduced hero size |
| Tablet | 600–1024px | 2-column card grids, expanded padding |
| Desktop | 1024–1400px | Full 3-column layout, max content width |
| Large Desktop | >1400px | Centered, generous margins |

### Collapsing Strategy
- Hero: 56px → scales down, gradient wash simplifies on mobile
- Navigation: full links + lime CTA → hamburger menu
- Feature cards: 3-column → 2-column → single column
- Logo bar: grid → horizontal scroll
- Dark diagram panels: maintain rounding, stack content vertically

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Wiz Lime `{colors.primary}` with navy text
- Background: Pure White `{colors.background}`
- Heading text: Ink Navy `{colors.ink}`
- Body text: Gray 700 `{colors.gray-700}`
- Border: `{colors.border}`
- Link / focus ring: `{colors.accent-blue}`

### Example Component Prompts
- "Create a hero on white over a soft pale-green-to-pale-blue gradient wash (`{colors.gradient-start}` → `{colors.gradient-end}`). Headline 56px Poppins weight 600, letter-spacing -1.6px, color `{colors.ink}`. Subtitle 20px Inter weight 400, `{colors.gray-700}`. Lime pill CTA (`{colors.primary}` fill, navy text, 14px 28px padding) plus navy-outline secondary pill."
- "Design a feature card: subtle gray surface `{colors.surface-soft}`, 1px `{colors.border}`, radius 16px, padding 24px. Title 22px Poppins weight 600, body 17px Inter `{colors.gray-700}`."
- "Build a dark diagram panel: `{colors.surface-dark}` fill, radius 32px, white text, lime `{colors.primary}` accent nodes."
- "Create a badge: `{colors.badge-bg}` background, `{colors.badge-text}` indigo text, full pill, 4px 12px padding, tracked 13px caption."

### Iteration Guide
1. One accent rule: lime appears on CTAs, highlights, and graph nodes — nowhere else as fill behind text
2. Navy ink, never pure black, for all text
3. Everything is rounded — pills for actions, large radii for cards
4. Use light/dark surface contrast (white vs navy panels) for depth instead of heavy shadows
5. Eyebrow → heading → body is the standard section rhythm

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Wiz. Brand names and trademarks belong to their respective owners.