# Pulumi · Design system migration spec

> Source: https://www.pulumi.com  ·  Curated by OpenDesign  ·  en

> A strong example of a modern, developer-focused SaaS site that balances professional authority with approachability.

## 1. Identity DNA

Pulumi's visual identity functions like a high-performance engine: its power lies in the disciplined coordination of simple parts. Every component, from the single purple accent to the tight-tracked display type, serves a clear engineering purpose rather than decorative impulse.

**One-liner:** Infrastructure as code for cloud engineers.
**Keywords:** infrastructure · cloud · engineering · automation · reliability
**Analogy:** A high-performance engine for cloud infrastructure, combining power with approachability.

## 2. Color

The palette is built on a foundation of clean white space, using a deep purple as a concentrated accent rather than a dominant wash. Dark charcoal text on white ensures maximum readability for dense technical documentation.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f5f5ff` | card background |
| `--ink` | `#1f1b21` | body text |
| `--ink-soft` | `#2e293a` | secondary text |
| `--muted` | `#6b6573` | placeholder |
| `--accent` | `#5a31c5` | single accent |
| `--line` | `rgba(224, 223, 226, 1.0)` | divider |

**Color principle:** Clean white space with deep purple accents to establish a premium, professional feel.

Color is employed as a tool for hierarchy and focus, not as a primary carrier of expression.

## 3. Typography

Typographic choices reflect a clear separation of concerns: Inter provides a neutral, highly legible humanist sans for all body and interface text. Monaspace Neon is reserved exclusively for code, making technical content visually distinct and functional.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 600 | -2.4px | hero headlines |

**Type rules:**
- Use tight letter-spacing (-1.8px to -2.4px) for large display headings.
- Use Inter for body text and UI elements.
- Use Monaspace Neon for code snippets.

## 4. Spacing

A consistent 4px base unit underpins all spatial decisions, creating a predictable and calm visual rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base unit for all spacing.

## 5. Surfaces

Depth is suggested sparingly through subtle, cool-toned shadows on elevated surfaces like cards, while a single-pixel border provides definitive structural separation. The system avoids heavy drop shadows, maintaining a flat, efficient aesthetic.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 10px 15px -3px rgba(0, 0, 0, 0.1)
  - 0px 4px 6px -4px rgba(0, 0, 0, 0.1)
- **Borders:** 1px solid #e0dfe2

## 6. Layout

The foundational layout employs a standard 12-column grid to impose order on complex information. A split-screen hero section exemplifies this structure, pairing authoritative typography with interactive visualization in balanced halves.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard 12-column grid.

## 7. Motion & Interaction

Motion is treated as functional feedback, not decoration. Transitions are fast (0.15s) and consistent, using a standard easing curve to provide subtle confirmation of user actions without interrupting workflow.

- **Durations:** micro 150ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth hover transitions on buttons and links.
  - Subtle color changes on interactive elements.

- **Hover:** Color change or subtle shadow increase.
- **Click:** Active state with slightly darker shade.
- **Transition:** All transitions use 0.15s cubic-bezier(0.4, 0, 0.2, 1).
- **Keyboard:** Focusable elements are clearly defined.

## 8. Voice & Don'ts

The editorial voice is professional and direct, using concise, benefit-oriented headlines to communicate value with authority. Technical clarity is prioritized over casual tone, avoiding jargon that might obscure the core proposition.

- **Tone:** Professional, authoritative, yet modern and accessible.
- **Headline style:** Concise, punchy, and benefit-oriented.
- **CTA style:** Direct and action-oriented.
- **Avoid:** Avoid overly casual slang or emojis. / Avoid complex jargon that obscures the value proposition. / Avoid visual clutter or excessive animations.

### Don'ts
- ❌ Don't use a dark background for the main page — the screenshot shows a predominantly white (#ffffff) background.
- ❌ Don't use sans-serif fonts for code — the screenshot uses Monaspace Neon, a monospace font.
- ❌ Don't use rounded pill shapes for primary buttons — the screenshot shows buttons with an 8px border radius.
- ❌ Don't use multiple high-chroma accent colors — the screenshot shows a single dominant purple (#5a31c5) accent.
- ❌ Don't use wide letter-spacing for display typography — the screenshot uses tight tracking (-2.4px).
- ❌ Don't use heavy drop shadows on all surfaces — the screenshot uses subtle box-shadows only on certain cards.

The system deliberately rejects dark mode, wide-tracked display type, and decorative animation to preserve its focus on clarity and utility.

## System Prompt (paste into AI tool)

```
This is a developer-focused SaaS platform for infrastructure as code. The design is clean and professional, using a white background with a deep purple (#5a31c5) as the primary accent color. Typography uses Inter (humanist-sans) for body text and Monaspace Neon (monospace) for code. Critical donts: don't use a dark main background, don't use sans-serif for code blocks, and don't use wide letter-spacing for display type. The layout is spacious and structured, emphasizing clarity and trust.
```