Pulumi Design Foundation

Pulumi's users read dense screens all day: resource tables with thousands of rows, policy violations grouped five ways, diffs, logs, and secrets. The Pulumi Design Foundation is the visual language underneath all of it, and its job is to keep hierarchy legible when everything on the screen is technical and everything matters.

As a senior UX designer at Pulumi, I authored the Pulumi Design Foundation and most of the Pulumi Design System from scratch, working as designer, program manager, and engineer. Before I joined, engineers built from one-off canvas designs with no system behind them. I made the case for a real system, then built it using Atomic Design: tokens first, then the components made from them, then the screens they compose.

Color that carries meaning at density

Primitives hold the values and semantic tokens hold the intent. Eight ramps of 11 steps each feed every surface in the console: violet and orange for the brand, gray for text, borders, and surfaces, and five status and data colors (green, yellow, red, blue, aqua). Components reference semantic tokens, such as color-success or button-primary-default-background, never raw values. Dark mode mirrors each ramp, so one token name works in both themes.

The goal was simple elegance: a console that looks and feels premium. When I started, Pulumi's violet wasn't the base of the product palette. I made it the primary ramp, so the brand now carries every primary action in the product. I tuned the status ramps to a mellow tone so they sit together calmly in dense screens instead of competing for attention. Their meaning maps to what infrastructure does: green to add, yellow to update, red to remove. On a policy findings table, severity, priority, and status read before a single word does.

The ramps follow Tailwind's 50 to 950 scale, so engineers can read a token's intent from its name.

Type for scanning, not reading

Two families, two weights, one ramp. Inter carries the interface at 400 for body and 600 for emphasis and headings. Monaspace Neon at 500 is reserved for code, IDs, and URNs, so identifiers never get mistaken for prose. Display sizes tighten tracking by 2.5% of the size.

In tables and forms, two weights are enough because weight never works alone. Size, color, iconography that works as metaphor, and layout share the job of hierarchy. On a resource detail panel, that hierarchy is four tokens: a heading, a quiet label, a value, and a monospace identifier.

Spacing, density, and layout

A 4px rhythm with named steps, from spacing-xs (2px) to spacing-4x (48px). Layout props take token names (gap="m", padding="xl"), so density changes in one place instead of in every component.

Compact density is used throughout the console. Pulumi's data is a graph of cloud infrastructure, so many views have to show a lot at once. The goal was to convey that complexity as clearly as possible, which makes some of the densest views deceptively simple. The customer decides how much to see: they can toggle views, or move between areas of the console to zoom in on a single resource or out to the whole estate.

Motion

The Foundation's motion tokens derive from Robert Penner's easing functions. The rule for panel transitions: motion should be perceptible, but never get in the way of what the user is trying to do.

Components that carry the tokens

The Pulumi Design System is a library of Web Components that import the Foundation's tokens, so every surface built on them gets the same visual design in both themes: buttons, inputs, badges and status, table rows, cards, and dialogs. Figma libraries stay in sync with the components, so what's designed is what ships.

I wrote the specifications for nearly every component in the system, in three phases: build, ship, refine. The most consequential decision was a single shared token library behind the entire component library. Change a token once, and it applies everywhere.

Outcome

Every surface of the Pulumi console is built on the Pulumi Design Foundation and the Pulumi Design System. The payoff showed in early 2025: dark mode shipped for the entire console within a week of being specified, because every color was already a token.