# Pulumi brand assets Official Pulumi brand assets, served from `https://brand.pulumi.com/brand-assets/`. Every file in this directory is also bundled into [`/pulumi-brand-assets.zip`](https://brand.pulumi.com/pulumi-brand-assets.zip). For usage rules — clearspace, color modes, when to use which lockup — see the full guidelines at . For programmatic access, point an MCP-compatible client at `https://brand.pulumi.com/mcp`. ## Directory layout ``` brand-assets/ ├── design.md # The design system as a single DESIGN.md file (tokens + usage rules) ├── logos/ # Pulumi logos and logo icons │ ├── svg/ # primary digital use (18 files) │ ├── png/ # raster fallback (18 files) │ └── pdf/ # print production (18 files) ├── neo/ # Neo (Pulumi's AI infrastructure agent) icons │ ├── svg/ # 6 icon variants │ ├── png/ # 6 icon variants │ └── ascii-neo.txt ├── pulumipus/ # Pulumipus (mascot) poses │ ├── svg/ # 8 poses │ ├── png/ # 8 poses, 2160×2160, transparent │ └── pdf/ # 8 poses, for print ├── color/ # Brand color palettes │ ├── colors.hex.css │ ├── colors.rgb.css │ ├── colors.hsl.css │ ├── colors.oklch.css │ └── colors.svg # all swatches as a single SVG ├── fonts/ │ ├── inter/ # Inter — UI and body text │ │ ├── web/ # WOFF2 + inter.css for web │ │ ├── variable/ │ │ └── static/ │ └── monaspace-neon/ # Monaspace Neon — code │ ├── web/ │ ├── variable/ │ └── static/ ├── example-lines/ # Accent line SVGs (corner decorations) └── mermaid/ # Pulumi-brand Mermaid theme (light + dark) └── pulumi-mermaid-theme.js ``` ## Design system & tokens - [`design.md`](./design.md) — the Pulumi design system as a single self-contained file in the [DESIGN.md format](https://github.com/google-labs-code/design.md): a compact set of tokens plus the rules for applying them (color hierarchy, type, components, do's and don'ts). Hand this to a coding agent to generate on-brand UI. - [`pulumi/pulumi-design-system`](https://github.com/pulumi/pulumi-design-system) — the normative core token data (`@pulumi/design-tokens` JSON: color primitives, shared semantics, typography, spacing), the source of truth shared across Pulumi properties, for token pipelines. For the full reference and usage guidelines, see . ## Logos File naming: `pulumi-logo-[lockup]-[color]-[mode].[ext]` - **lockup**: `horizontal`, `stacked`, `mark` - **color**: `color`, `monotone` - **mode**: the color scheme the file is designed for — `light` for light backgrounds, `dark` for dark backgrounds - **ext**: `svg`, `png`, `pdf` Logo icons — the logomark on a filled background, for profile pictures and app icons — follow: `pulumi-icon-[shape]-[mode].[ext]` - **shape**: `circle`, `rounded`, `square` Always use these original source files — never recreate, redraw, or rasterize the logo from a screenshot. ### Quick picks - Web header on light background: [`logos/svg/pulumi-logo-horizontal-color-light.svg`](./logos/svg/pulumi-logo-horizontal-color-light.svg) - Web header on dark background: [`logos/svg/pulumi-logo-horizontal-color-dark.svg`](./logos/svg/pulumi-logo-horizontal-color-dark.svg) - Favicon / app icon: [`logos/svg/pulumi-icon-rounded-light.svg`](./logos/svg/pulumi-icon-rounded-light.svg) (or the `-dark` variant for dark contexts) - Print: any file under [`logos/pdf/`](./logos/pdf/) ## Neo Icons for Neo, Pulumi's AI infrastructure agent. File naming: `neo-icon-[shape]-[mode].[ext]` (same shapes and modes as the logo icons). - [`neo/svg/`](./neo/svg/) — 6 SVGs - [`neo/png/`](./neo/png/) — 6 PNGs - [`neo/ascii-neo.txt`](./neo/ascii-neo.txt) — ASCII-art version for terminals / READMEs ## Pulumipus The Pulumipus mascot in eight poses. File naming: `pulumipus-[pose].[ext]` - **pose**: `celebrating`, `cool`, `meditating`, `puluminary`, `running`, `thinking`, `thumbs-up`, `walking` - **ext**: `svg`, `png`, `pdf` For usage rules, see . ## Color CSS custom-property files for all brand colors: - [`color/colors.hex.css`](./color/colors.hex.css) — hex format - [`color/colors.rgb.css`](./color/colors.rgb.css) — RGB format - [`color/colors.hsl.css`](./color/colors.hsl.css) — HSL format - [`color/colors.oklch.css`](./color/colors.oklch.css) — OKLCH format (recommended for modern browsers) - [`color/colors.svg`](./color/colors.svg) — every swatch as a single SVG, drop into any design tool For role-based usage (primary, semantic, dark mode behavior), see . ## Fonts - **Inter** — UI and body text. WOFF2 files plus an [`inter.css`](./fonts/inter/web/inter.css) you can drop straight into a site. - **Monaspace Neon** — code samples and developer-facing surfaces. Both ship as variable, static, and web (WOFF/WOFF2) variants. For additional formats, see [Inter on GitHub](https://github.com/rsms/inter) and [Monaspace on GitHub](https://github.com/githubnext/monaspace). ## Accent lines The 12 SVGs in [`example-lines/`](./example-lines/) are reference samples of Pulumi's curved corner accents — `bg-{top,bottom}-{left,right}-{1,2,3}.svg`. Use as-is or modify per the [accent line guidelines](https://brand.pulumi.com/visuals/accent-lines). ## Mermaid theme [`mermaid/pulumi-mermaid-theme.js`](./mermaid/pulumi-mermaid-theme.js) is a portable, dependency-free [Mermaid](https://mermaid.js.org) v11 theme that styles every diagram type — flowcharts, sequence, git, pie, journey, timeline, mindmap, and more — with Pulumi brand tokens. It exports `pulumiMermaidLight` and `pulumiMermaidDark`: ```js import { pulumiMermaidLight } from "./pulumi-mermaid-theme.js" import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs" mermaid.initialize({ startOnLoad: true, ...pulumiMermaidLight }) ``` Slidev decks get this styling automatically via [`@pulumi/slidev-theme`](https://www.npmjs.com/package/@pulumi/slidev-theme). For usage guidance, see . Inside this monorepo, use the TypeScript port instead: `@workspace/lib/mermaid-theme` (`packages/lib/src/mermaid-theme.ts`, consumed by `apps/www`'s markdown rendering). Keep the two in sync when the palette changes.