---
version: alpha
name: Pulumi
description: The Pulumi design system as a single self-contained file — the core design tokens from pulumi/pulumi-design-system (@pulumi/design-tokens) plus the rules for applying them — for humans and AI agents generating on-brand UI. The canonical guidelines live at https://brand.pulumi.com. Values are light-mode; dark mode inverts by scale position (see Colors).
palettes:
  violet: { "50": "#f5f5ff", "100": "#ebebff", "200": "#dedbff", "300": "#c3bdff", "400": "#a697fc", "500": "#9077f3", "600": "#7952e5", "700": "#5a30c5", "800": "#492e8e", "900": "#392960", "950": "#231f33" }
  gray: { "50": "#fafafa", "100": "#efeff0", "200": "#e0dfe2", "300": "#cbcace", "400": "#b3b1b9", "500": "#9997a0", "600": "#817d8c", "700": "#6a6675", "800": "#56535a", "900": "#46434c", "950": "#2e2932" }
  green: { "50": "#f6fdf9", "100": "#dffce9", "200": "#b6fbce", "300": "#84f1ac", "400": "#4ade80", "500": "#21c45d", "600": "#16a249", "700": "#1c7d41", "800": "#165a31", "900": "#1c3f2b", "950": "#202723" }
  aqua: { "50": "#f5fffd", "100": "#ccfff5", "200": "#5cffde", "300": "#1efad9", "400": "#02d9c0", "500": "#00a896", "600": "#008f83", "700": "#00756c", "800": "#075f59", "900": "#114642", "950": "#101e1d" }
  blue: { "50": "#f5faff", "100": "#e5f1ff", "200": "#cce4ff", "300": "#a3d0ff", "400": "#75b5ff", "500": "#5296ff", "600": "#3c79f6", "700": "#1e57eb", "800": "#1e47c2", "900": "#28448a", "950": "#283048" }
  red: { "50": "#fff5f6", "100": "#ffe0e1", "200": "#ffc7ca", "300": "#ff9fa4", "400": "#ff676e", "500": "#fb2c36", "600": "#ee1721", "700": "#bd141c", "800": "#96171e", "900": "#611f22", "950": "#331f20" }
  orange: { "50": "#fffaf5", "100": "#ffebd1", "200": "#fedbb3", "300": "#fdbe7c", "400": "#fb9746", "500": "#f96c0b", "600": "#da510b", "700": "#b23c0b", "800": "#923111", "900": "#693420", "950": "#33231f" }
  yellow: { "50": "#fffbeb", "100": "#fef2c7", "200": "#fde38a", "300": "#fdcf4c", "400": "#fcba23", "500": "#f49709", "600": "#da7205", "700": "#b54f08", "800": "#933d0d", "900": "#723213", "950": "#371d11" }
utility:
  white: "#ffffff"
  black: "#000000"
  service-black: "#1f1b21"
palette-roles: # every palette carries the same four roles
  primary: "{palette.700}"
  accent: "{palette.500}"
  muted: "{palette.200}"
  background: "{palette.50}"
colors: # shared semantics — light-mode values; references invert in dark mode
  brand-violet: "#5a30c5" # {violet.700}
  brand-orange: "#f96c0b" # {orange.500}
  brand-blue: "#1e57eb" # {blue.700}
  brand-yellow: "#f49709" # {yellow.500}
  info: "#1e47c2" # {blue.800}
  success: "#165a31" # {green.800}
  warning: "#933d0d" # {yellow.800}
  failure: "#96171e" # {red.800}
  disabled: "#9997a0" # {gray.500}
  text-body: "#2e2932" # {gray.950}
  text-heading: "#6a6675" # {gray.700}
  text-detail: "#56535a" # {gray.800}
  text-sub-heading: "#56535a" # {gray.800}
  foreground: "#2e2932" # {gray.950}
  foreground-muted: "#6a6675" # {gray.700}
  background: "#ffffff"
typography: # fontFamily is brand-wide; the other typography values are Pulumi Cloud-specific (values for marketing and docs coming soon)
  fontFamily:
    primary: "Inter, sans-serif"
    code: "Monaspace Neon, menlo, consolas, ui-monospace, monospace"
  fontWeight:
    normal: 400
    bold: 600
    code: 500
  lineHeight:
    body: 1.5
    display: 1.2
  fontSize:
    display: { xxlarge: "28px", xlarge: "20px", large: "16px", medium: "15px", small: "14px", xsmall: "12px" }
    heading: { h1: "24px", h2: "20px", h3: "18px" }
    body: { xlarge: "18px", large: "16px", medium: "14px", small: "12px", small-v2: "11px", xsmall: "10px" }
    code: { large: "14px", medium: "13px", small: "12px" }
spacing: # Pulumi Cloud-specific (values for marketing and docs coming soon)
  scale: { xs: "2px", s: "4px", m: "8px", l: "12px", xl: "16px", 2x: "24px", 3x: "32px", 4x: "48px" }
  semantic:
    card-margin-bottom: "32px" # {scale.3x}
    hud-row-gap: "8px" # {scale.m}
  dialogWidth: { small: "632px", medium: "752px", large: "872px" }
---

# Pulumi design system

This is the Pulumi design system as a single file: the tokens above are normative, and the prose below tells you when and how to apply them. The tokens mirror [`pulumi/pulumi-design-system`](https://github.com/pulumi/pulumi-design-system) (`@pulumi/design-tokens`), the source of truth shared across Pulumi properties — the token set is early and expanding, and higher-level tokens (theme roles, components, radius, shadows) will land there over time.

The authoritative, complete guidelines live at [brand.pulumi.com](https://brand.pulumi.com) and on the MCP server at `https://brand.pulumi.com/mcp`. When this file and the guidelines disagree, the guidelines win. The token frontmatter is light-mode; dark mode inverts (see [Colors](#colors)).

## Brand & style

Pulumi builds infrastructure-as-code tooling for engineers. The audience is practitioners — people who write and ship real systems — and the design speaks to them directly: confident, concrete, and uncluttered, never decorative for its own sake. Five attributes anchor every decision: **modern**, **trustworthy**, **innovative**, **focused**, and **friendly & human**.

In practice that means restraint. Violet carries the brand; everything else is a neutral canvas or a purposeful accent. Type is Inter, set tight and clean. There's one clear action per view, generous space, and nothing fighting for attention. The feeling to aim for is a tool an engineer trusts — calm, legible, and intentional — not a marketing splash.

## Colors

**Violet is the brand.** Every palette carries the same four roles (`palette-roles`: primary = 700, accent = 500, muted = 200, background = 50); for violet those are `#5a30c5` / `#9077f3` / `#dedbff` / `#f5f5ff`. Use violet `primary` for the dominant brand moment on a screen — the primary action, a key link, a focused state — not as a fill for large areas. `brand-orange`, `brand-blue`, and `brand-yellow` are secondary brand accents — use them sparingly, never in place of violet.

Everything structural is neutral gray. `foreground` / `text-body` (`#2e2932`, Gray 950) is body text; `foreground-muted` (`#6a6675`, Gray 700) is secondary text; `text-heading` and `text-detail` cover heading and detail text. White is the default page `background`; Service Black (`#1f1b21`, `utility.service-black`) is the dark-mode page background — it is not a text color.

Status colors map to fixed roles — `success` (green), `failure` (red), `warning` (yellow/amber), `info` (blue) — each referencing its palette's 800 step. Use them only for their meaning, never as decoration.

**Dark mode inverts.** Each mode carries the same palettes with steps inverted by scale position (50↔950, 100↔900, …), so a token keeps its reference in both modes and resolves to the mode-appropriate hex — `foreground` (`{gray.950}`) is `#2e2932` in light and `#fafafa` in dark; violet `primary` (`{violet.700}`) lifts to lavender (`#c3bdff`). Tokens at the 500 pivot (`brand-orange`, `brand-yellow`, `disabled`) don't change; `utility` colors never flip. For the fully resolved values in both modes, see the [Design tokens page](https://brand.pulumi.com/foundations/design-tokens) or the [Color page](https://brand.pulumi.com/identity/color).

Verify any custom foreground/background pairing for contrast — the brand targets [APCA](https://brand.pulumi.com/identity/color) Lc 75+ for text. Violet on white passes comfortably; in dark mode, lean on the lighter inverted steps.

## Typography

Two families, by purpose; both are brand-wide:

- **Inter** (`fontFamily.primary`) — all UI and prose. Regular (400) for body, Semibold (600, `fontWeight.bold`) for headings and display text.
- **Monaspace Neon** (`fontFamily.code`) — all code, commands, file paths, and developer-facing literals, at `fontWeight.code` (500).

The rest of the typography tokens — the `fontSize` ramp, `lineHeight`, and the Material-compatible levels — are Pulumi Cloud-specific today; values for marketing and docs are coming soon. Don't apply them to brand surfaces. The brand's typographic treatment — tight heading tracking, OpenType features (`"liga" 1, "calt" 1, "cv11" 1`), when mono steps outside code — lives at [brand.pulumi.com/identity/typography](https://brand.pulumi.com/identity/typography) and wins for marketing, docs, and brand work.

## Layout & spacing

Layouts are clean and generous — let content breathe rather than packing density. The `spacing` tokens (scale, semantic spacing, dialog widths) are Pulumi Cloud-specific today; values for marketing and docs are coming soon. For brand surfaces, treat the scale as a reasonable rhythm rather than a mandate: pick consistent steps across a view rather than mixing arbitrary one-off gaps, align to a single content measure, and keep comfortable line lengths (~60–80 characters) for prose.