CURATED · OPEN · FREE

Pulumi

Infrastructure as code for cloud engineers.

devinfra

↓ Download design system (7 MB)Open in OpenDesign

Visit: https://www.pulumi.com

📦 Browse pack contents →

Identity DNA

infrastructurecloudengineeringautomationreliability

A high-performance engine for cloud infrastructure, combining power with approachability.

Color

#5a31c5Accent

#1f1b21Ink

#2e293aInk soft

#ffffffBG

#f5f5ffBG soft

#6b6573Muted

rgba(224, 223, 226, 1.0)Line

Clean white space with deep purple accents to establish a premium, professional feel.

Typography

geometric-sans · humanist-sans · monospace

display56px · 600

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.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Consistent 4px base unit for all spacing.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid #e0dfe2

0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 4px 6px -4px rgba(0, 0, 0, 0.1)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Standard 12-column grid.

Motion & Interaction

150msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth hover transitions on buttons and links. · Subtle color changes on interactive elements.

Color change or subtle shadow increase. · Active state with slightly darker shade.

Components

button Solid purple for primary actions, outlined for secondary.
card White background with 1px border and 8px radius.
chip Pill-shaped with thin border.
input Clean, single-pixel border.
hero Split layout with large typography on the left and interactive visualization on the right.

Voice & Don'ts

Tone Professional, authoritative, yet modern and accessible.
Headlines Concise, punchy, and benefit-oriented.
CTAs Direct and action-oriented.

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.
Avoid: Avoid overly casual slang or emojis.
Avoid: Avoid complex jargon that obscures the value proposition.
Avoid: Avoid visual clutter or excessive animations.

Inside the pack — real screenshots

Pulumi — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko