--- version: alpha name: "Pulumi" website: "https://www.pulumi.com" description: >- An infrastructure-as-code platform whose marketing site is the only one in the IaC category that paints its hero headline in pure ink-black rather than in the brand color — a 64px Inter weight-600 display at -3.2px letter-spacing sits centered on pure white, with a small violet pill CTA hanging off the bottom. The violet brand voltage #5a30c5 is held back to 40 captured occurrences across CTA fills, link tones, and inline emphasis blocks, never spent as a hero canvas. Monaspace Neon Var carries every uppercase eyebrow label (the "HOW IT WORKS" / "THE COMPLETE PLATFORM" tags above sections) and every code-block snippet — a single mono voice that runs from section labels through code samples. The structural surface is pure white with cool grey hairlines, and the page leans heavily on Mermaid-flavored architecture diagrams in a violet-blue-orange-yellow product-domain palette borrowed from the broader IaC visual convention. seo: title: "Pulumi Design System for React — violet on white, Inter + Monaspace Neon, 16 components" metaDescription: "Pulumi's marketing system as a DESIGN.md file. Pure ink-black 64px hero display, violet brand voltage held back to CTA pills and link tones, Monaspace Neon Var uppercase eyebrows, code-led marketing. For React and AI coding tools." highlights: - "Ink-not-violet hero — the 64px hero h1 sits in pure black, not in the brand color; the violet is held back to CTA pills and inline emphasis" - "Negative letter-spacing display — Inter at -3.2px tracking on the 64px hero reads as Stripe-tight rather than Vercel-loose" - "Monaspace Neon Var eyebrows — every section eyebrow runs in mono uppercase, not in a tracked sans" - "Mermaid-flavored architecture diagrams — product surface uses a 4-color domain palette (violet, blue, orange, yellow) borrowed from IaC visualization convention" - "Single brand voltage at 40 occurrences — the violet #5a30c5 appears 35 times as text and 5 times as background; no hover step, no soft variant" tags: - "Backend, Database & DevOps" - "Developer Tools & IDEs" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Pulumi's marketing site does the move that distinguishes a serious IaC product from a SaaS landing page. The hero headline is rendered in pure ink-black — not in the brand violet — on a pure-white canvas, at 64px Inter weight 600 with a tight -3.2px letter-spacing that reads as Stripe-quiet rather than as Vercel-loud. The violet voltage is held back. It appears as a small pill CTA at the bottom of the hero ("Get Started"), as an inline emphasis tone in body copy, and as the link color across the editorial sections, but the hero canvas itself is pure white and the headline ink is pure black. Where Vercel paints its hero on matte black and Cloudflare gives its orange the full above-fold canvas, Pulumi commits to maximum-contrast type with the brand color held in reserve. The DESIGN.md file packages the system into a machine-readable spec. Inside: 14 color tokens drawn from a 200-plus CSS root that exposes the standard Tailwind violet / blue / green / yellow / orange / red shade ladders alongside a structural grey scale. The brand voltage is a saturated violet hex #5a30c5 (wired as --color-violet-primary and --color-violet-700) — appears 40 times in the captured render, 35 as text, 5 as background, 0 as border. The structural canvas is pure #ffffff, the ink is a deeply-warm near-black #1f1b21 (wired as --color-service-black), and the hairlines walk a cool grey scale anchored on #e0dfe2 (941 occurrences as border — the dominant border tone). Two typefaces carry the system: Inter at 64px / 600 for the hero display and at 14-16px / 400-600 across body and labels, plus Monaspace Neon Var (a recent Github-released programming monospace) at 12-14px uppercase for section eyebrows and inside code blocks. Sixteen components cover the violet-pill primary CTA, the white hairline cards, the mono-uppercase eyebrow rows, the Mermaid-flavored architecture diagrams in the 4-color product-domain palette, and the dark editorial footer band on `{colors.canvas-dark}`. Feed this file to Claude or Cursor and it will reproduce Pulumi's specific moves: the ink-not-violet hero, the -3.2px tracked display, Monaspace Neon Var uppercase eyebrows, and the held-back voltage that lets a single small violet pill carry the entire chromatic anchor. The one move worth borrowing only if your product story is genuinely typographic-first rather than visual-first: the willingness to render the hero in pure ink and reserve the brand voltage for small interactive surfaces. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.pulumi.com" title: "Pulumi — official site" description: "Pulumi's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Pulumi's primary brand color?" answer: "Pulumi's brand voltage is a saturated violet, hex #5a30c5, wired into the CSS as --color-violet-primary and --color-violet-700. It appears 40 times in the captured marketing render — 35 as text, 5 as background, 0 as border. The text role carries link tones, inline emphasis on section eyebrows, and the violet wordmark; the background role carries the primary CTA pill and the inline highlight blocks. There is no hover step and no soft variant in the brand tier — a brighter violet accent #9077f3 exists in the CSS as --color-violet-accent but appears 0 times in the captured render. Read the system as ink-on-white with a held-back violet voltage, not as violet-on-anything." - id: "typography" title: "What typefaces does Pulumi use, and what should I use as substitutes?" answer: "Pulumi runs two typefaces. Inter is the universal sans, used at 64px weight 600 with -3.2px letter-spacing for the hero h1, 40px weight 600 with -2px letter-spacing for the section h2, 20-28px weight 600 for sub-headings, 16px weight 400 for body copy, and 14px weight 400-600 for links and small labels. Monaspace Neon Var is a recent open-source programming monospace by GitHub, used at 12-14px uppercase for section eyebrow labels (the 'HOW IT WORKS' and 'THE COMPLETE PLATFORM' tags above bands) and inside code-sample blocks. Both are open source — Inter on Google Fonts, Monaspace on GitHub. No substitution needed; the system already runs free fonts. If you must substitute Monaspace, JetBrains Mono carries the same uppercase-eyebrow role at slightly tighter spacing." - id: "ink-not-violet" title: "Why is Pulumi's hero headline in black, not in the brand violet?" answer: "Pulumi's hero h1 ('Next-level infrastructure as code for humans and agents.') renders in pure ink-black #000000 on a pure-white canvas — not in the violet brand voltage. The move is the IaC category's quiet typographic discipline. Where Vercel paints its hero on matte black and Cloudflare gives its orange the full above-fold canvas, Pulumi commits to maximum-contrast type with the brand color held in reserve. The pragmatic reason is that the violet is too saturated to comfortably carry a 64px display fill — at that size the violet would read as a children's-book color rather than as an infrastructure brand. The ink-not-violet treatment gives the typography its Stripe-quiet feel and lets the small violet pill CTA carry the entire chromatic anchor. If you reproduce this, the move to keep is letting the brand color flag identity without overwhelming the display." - id: "monaspace-eyebrows" title: "Why does Pulumi use a monospace font for section labels?" answer: "Every section eyebrow on the Pulumi page — 'HOW IT WORKS', 'PLATFORM', 'GROW', 'USE CASES' — sits in Monaspace Neon Var at 12-14px in uppercase. The mono uppercase treatment is the dev-tools convention; it signals 'technical brand' the way Apercu Mono Pro does on Cloudflare and the way Martian Mono does on Netlify. The pragmatic reason to use mono over a tracked sans for eyebrows is that the proportional gap between letters in a monospace font carries the small-caps visual weight without needing letter-spacing on top — the result reads quietly technical without ever shouting 'DEVELOPERS'. Monaspace Neon Var is a 2023-released GitHub open-source family designed specifically for code display, with a slightly-condensed proportion that works well at small uppercase sizes." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React IaC marketing site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Pulumi's specific moves: the ink-not-violet hero with the brand voltage held back to CTA pills, the -3.2px tracked 64px display step, Monaspace Neon Var uppercase eyebrows, and the Mermaid-flavored architecture diagrams in the 4-color product-domain palette. The tokens resolve cleanly without invention. One caveat: the ink-not-violet move only works if your brand color is too saturated to spend as display chrome. If your brand is a calmer color (a teal-cyan, a deep navy), spend it as the hero h1 fill instead. The held-back voltage move and the -3.2px tracking move are the two distinguishing choices worth borrowing." mockups: - "marketing-hero" - "code-editor-ide" colors: primary: "#5a30c5" primary-bright: "#9077f3" primary-soft: "#dedbff" primary-deep: "#392960" product-blue: "#1e57eb" product-green: "#1c7d41" product-orange: "#b23c0b" product-yellow: "#b54f08" product-red: "#bd141c" ink: "#1f1b21" ink-soft: "#2e2932" ink-muted: "#46434c" ink-weak: "#6a6675" canvas: "#ffffff" canvas-dark: "#231f33" surface-1: "#efeff0" hairline: "#e0dfe2" hairline-strong: "#cbcace" typography: display-xl: fontFamily: "Inter, sans-serif" fontSize: 64px fontWeight: 600 lineHeight: 70.4px letterSpacing: "-3.2px" display-md: fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 40px fontWeight: 600 lineHeight: 44px letterSpacing: "-2px" heading-lg: fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 30px fontWeight: 600 lineHeight: 36px letterSpacing: 0 heading-md: fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 28px fontWeight: 600 lineHeight: 30.8px letterSpacing: "-1.4px" heading-sm: fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 28px letterSpacing: 0 blockquote-md: fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 24px fontWeight: 600 lineHeight: 36px letterSpacing: 0 body-lg: fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 30px letterSpacing: 0 body-md: fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 26px letterSpacing: 0 body-sm: fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 label-md: fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 20px letterSpacing: 0 button-md: fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 24px letterSpacing: 0 nav-link: fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 eyebrow-mono: fontFamily: "\"Monaspace Neon Var\", ui-monospace, SFMono-Regular, monospace" fontSize: 14px fontWeight: 400 lineHeight: 21px letterSpacing: "0.7px" code-mono: fontFamily: "\"Monaspace Neon Var\", \"JetBrains Mono\", \"Fira Code\", monospace" fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: "0.12px" rounded: none: "0px" xs: "2px" sm: "4px" md: "6px" lg: "8px" xl: "16px" full: "9999px" spacing: xs: "2px" sm: "4px" base: "8px" md: "12px" lg: "16px" xl: "24px" 2xl: "32px" 3xl: "48px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.lg}" padding: "7px 16px" height: "40px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.lg}" padding: "7px 16px" height: "40px" borderColor: "{colors.hairline-strong}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-soft}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "12px 16px" height: "56px" borderColor: "{colors.hairline}" nav-link: backgroundColor: "transparent" textColor: "{colors.ink-soft}" typography: "{typography.nav-link}" rounded: "{rounded.lg}" padding: "7px 10px" hero-section: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "96px 24px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" eyebrow-label: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.eyebrow-mono}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-md}" testimonial-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.blockquote-md}" rounded: "{rounded.lg}" padding: "32px" borderColor: "{colors.hairline}" card-feature: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "24px" borderColor: "{colors.hairline}" card-emphasis-violet: backgroundColor: "{colors.primary-soft}" textColor: "{colors.primary-deep}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "16px" diagram-cell: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-soft}" typography: "{typography.body-sm}" rounded: "{rounded.lg}" padding: "16px" borderColor: "{colors.hairline}" text-input: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" rounded: "{rounded.lg}" padding: "0px 15px" height: "40px" borderColor: "{colors.ink-soft}" code-block: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.canvas}" typography: "{typography.code-mono}" rounded: "{rounded.md}" padding: "16px" footer: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" padding: "48px 24px" --- ## Overview Pulumi's marketing site is the only one in the IaC category that paints its hero headline in pure ink-black rather than in the brand color. **Held-back voltage, ink-led type.** The 64px Inter weight-600 hero h1 ("Next-level infrastructure as code for humans and agents.") sits in pure ink-black on a pure-white canvas, with a small violet pill CTA hanging off the bottom and a small Monaspace Neon Var uppercase eyebrow above. Where Vercel paints its hero on matte black, Cloudflare gives its orange the full above-fold canvas, and HashiCorp leans on a deep cobalt-purple gradient mesh, Pulumi commits to maximum-contrast type with the brand violet held in reserve. The violet `{colors.primary}` (#5a30c5) appears 40 times in the captured page — 35 as text on links and emphasis spans, 5 as background on the primary CTA pill and the eyebrow accent strip, 0 as border. The single most-visible violet moment above the fold is the "Get Started" pill at the bottom of the hero stack. The typography move that distinguishes the system is **negative letter-spacing on display.** The 64px hero runs at -3.2px tracking — substantially tighter than Vercel (Geist at -0.024em on a comparable size), tighter even than Stripe's -0.04em display tightening. The 40px section h2 doubles down at -2px, and the 28px h3 runs at -1.4px. The tracking step is what gives the page its Stripe-quiet feel; without it the Inter 600 display would read as a generic SaaS hero. Below the display tier the system switches to weight 400 at normal tracking — Inter at 16px / 400 with 26px line-height for paragraph copy, and at 14px / 400 with 20px line-height for navigation. The display-only tightening preserves editorial calm in the running text. **Monaspace Neon Var carries the second voice.** Every section eyebrow on the page — "HOW IT WORKS", "PLATFORM", "GROW", "USE CASES" — runs in Monaspace at 12-14px uppercase. The mono-uppercase treatment is the dev-tools convention; the same role Apercu Mono Pro plays on Cloudflare and Martian Mono plays on Netlify. Monaspace Neon Var is a 2023-released GitHub open-source family designed specifically for code display, with a slightly-condensed proportion that reads well at small uppercase sizes. The system also uses the same family inside code-sample blocks — a single mono voice that runs from section labels through code snippets. **Key Characteristics:** - Single brand voltage `{colors.primary}` (#5a30c5) — a saturated violet held back to 40 captured occurrences: 35 as text on links and emphasis spans, 5 as background on the primary CTA pill, 0 as border. - Ink-not-violet hero — the 64px h1 sits in `{colors.ink}` (#1f1b21, a deeply-warm near-black with a slight violet undertone) on `{colors.canvas}` (#ffffff), not in the brand color. - Negative letter-spacing on display — Inter 64px at -3.2px tracking, 40px at -2px, 28px at -1.4px. Stripe-tight rather than Vercel-loose. - Monaspace Neon Var eyebrows — every section eyebrow runs in mono uppercase at 12-14px / 400 / 0.7px letter-spacing. No tracked-sans eyebrow tier. - Cool-grey hairlines — `{colors.hairline}` (#e0dfe2) carries 941 of the captured border occurrences, the dominant border tone. Cool-side neutral, not warm. - Mermaid-flavored architecture diagrams — the in-body product-platform diagram uses a 4-color domain palette (violet, blue, orange, yellow) borrowed from IaC visualization convention. - Dark editorial footer — `{colors.canvas-dark}` (#231f33) is the violet-shifted near-black that carries the footer band and the inline newsletter-signup form on the lower half of the page. - Single hover-free brand tier — there is no documented hover step or soft variant for the primary CTA; the violet pill carries a single resting state in the captured render. ## Colors ### Brand - **Violet Primary** (`{colors.primary}` — #5a30c5): frequency 40 — 35 as text, 5 as background, 0 as border. The single brand voltage — used as the primary CTA fill, the link tone, and the inline emphasis color in body copy. Wired in CSS as `--color-violet-primary` and `--color-violet-700`. The text role dominates the painted occurrences (link tones and eyebrow accents), with background reserved for the small pill CTA and the inline highlight strip. - **Violet Bright** (`{colors.primary-bright}` — #9077f3): declared as `--color-violet-accent` and `--color-violet-500` but appears 0 times in the captured render. A brighter violet accent reserved for product-surface emphasis (the Dashboard at `app.pulumi.com`) that the marketing site does not currently expose. - **Violet Soft** (`{colors.primary-soft}` — #dedbff): frequency 4 — 3 as text, 1 as border. The soft violet tint used as a background for small inline highlight strips and as the soft variant of the brand voltage. Wired as `--color-violet-muted` and `--color-violet-200`. - **Violet Deep** (`{colors.primary-deep}` — #392960): frequency 2 as border. The deepest violet in the brand tier, used as the high-contrast violet variant. Wired as `--color-violet-900`. ### Product Domain - **Product Blue** (`{colors.product-blue}` — #1e57eb): declared as `--color-blue-700` and `--color-blue-primary`. Used in the in-body architecture diagram as the color of compute / API / data nodes. - **Product Green** (`{colors.product-green}` — #1c7d41): declared as `--color-green-700` and `--color-green-primary`. The color of security / policy nodes. - **Product Orange** (`{colors.product-orange}` — #b23c0b): declared as `--color-orange-700` and `--color-orange-primary`. The color of infrastructure / runtime nodes. - **Product Yellow** (`{colors.product-yellow}` — #b54f08): declared as `--color-yellow-700` and `--color-yellow-primary`. The color of warning / pending nodes. - **Product Red** (`{colors.product-red}` — #bd141c): declared as `--color-red-700` and `--color-red-primary`. The color of error / destroy nodes. None of the product-domain colors are rendered above the fold; they appear inside the architecture diagram only. ### Text - **Ink** (`{colors.ink}` — #1f1b21): frequency 522 — 520 as text, 2 as background. The dominant text color across every display and body paragraph. A deeply-warm near-black with a slight violet undertone — wired as `--color-service-black`. Notice the ink walks the violet side of neutral rather than the cool charcoal side; it ties the ink subtly to the brand voltage without being violet itself. - **Ink Soft** (`{colors.ink-soft}` — #2e2932): frequency 159 as text. The secondary heading and label color, sitting between the brand violet and the deep ink. Wired as `--color-gray-950`. - **Ink Muted** (`{colors.ink-muted}` — #46434c): frequency 22 — 22 as text. The body-paragraph color for running text; a calmer step below the heading ink. Wired as `--color-gray-900`. - **Ink Weak** (`{colors.ink-weak}` — #6a6675): frequency 26 as text. The secondary body and caption tone. Wired as `--color-gray-primary` and `--color-gray-700`. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): frequency 128 — 120 as text (white type on dark surfaces), 8 as background (the main page floor). Pure white; no warm cream variant. - **Canvas Dark** (`{colors.canvas-dark}` — #231f33): frequency 3 as background. The violet-shifted near-black that carries the footer band, the newsletter-signup input field background, and the inline code-block surface. Wired as `--color-violet-950`. A deliberately violet-shifted dark rather than a neutral charcoal — the choice ties the dark surface back to the brand voltage. - **Surface 1** (`{colors.surface-1}` — #efeff0): frequency 20 — 2 as background, 18 as border. The soft cool-grey surface tint used as the disabled-state fill and as a slightly-darker hairline variant. Wired as `--color-gray-100`, `--color-blue-100`, `--color-violet-background`, `--color-violet-50`, `--color-violet-100`. The hex serves as the soft tint for multiple color families. ### Hairline - **Hairline** (`{colors.hairline}` — #e0dfe2): frequency 941 as border — the dominant border tone, used as 941 of the captured border occurrences. Card outlines, feature-cell dividers, top-nav bottom rule, input field outlines. Wired as `--color-gray-muted` and `--color-gray-200`. Cool-side neutral, not warm. - **Hairline Strong** (`{colors.hairline-strong}` — #cbcace): frequency 7 as border. A slightly-darker hairline variant used on emphasis surfaces and secondary-button outlines. Wired as `--color-gray-300`. ## Typography ### Font Families The system runs two typefaces. **Inter** is the universal sans, used at 64px weight 600 with -3.2px letter-spacing for the hero h1, 40px weight 600 with -2px letter-spacing for the section h2, 20-30px weight 600 for sub-headings, 16-20px weight 400 for body copy, and 14px weight 400-600 for links and small labels. **Monaspace Neon Var** is the GitHub-open-source programming monospace (released 2023), used at 12-14px uppercase for section eyebrow labels and inside code-sample blocks. The two-voice split (Inter + Monaspace) is the IaC category's current convention. HashiCorp runs a similar sans-and-mono pairing (Geist + JetBrains Mono); Vercel runs Geist + Geist Mono; Pulumi distinguishes itself by using Monaspace Neon Var, which is newer and slightly-more-condensed than the JetBrains Mono / Fira Code peers. The single mono voice that runs from section labels through code snippets is the system's quiet typographic discipline. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 64px | 600 | 70.4px | -3.2px | Hero h1 | | `{typography.display-md}` | 40px | 600 | 44px | -2px | Section h2 | | `{typography.heading-lg}` | 30px | 600 | 36px | 0 | Blockquote h3 | | `{typography.heading-md}` | 28px | 600 | 30.8px | -1.4px | Sub-section h3 / h4 | | `{typography.heading-sm}` | 20px | 600 | 28px | 0 | Card h3 | | `{typography.blockquote-md}` | 24px | 600 | 36px | 0 | Pull-quote | | `{typography.body-lg}` | 20px | 400 | 30px | 0 | Hero sub-paragraph | | `{typography.body-md}` | 16px | 400 | 26px | 0 | Default running text | | `{typography.body-sm}` | 14px | 400 | 20px | 0 | Nav-link labels, caption rows | | `{typography.label-md}` | 14px | 600 | 20px | 0 | Emphasis spans, link labels | | `{typography.button-md}` | 16px | 600 | 24px | 0 | Primary CTA label | | `{typography.nav-link}` | 14px | 400 | 20px | 0 | Top-nav link labels | | `{typography.eyebrow-mono}` | 14px | 400 | 21px | 0.7px | Section eyebrows (uppercase) | | `{typography.code-mono}` | 12px | 400 | 18px | 0.12px | Inline code blocks | ### Principles Display weight sits at 600 — slightly heavier than the Stripe / Cloudflare 500 step but lighter than the Netlify / Vercel 700-800 range. The 64px hero h1 at weight 600 with -3.2px tracking is the system's loudest typographic moment; the negative letter-spacing does the work that a heavier weight would do, giving the display a confident-but-tight feel without tipping into bold authority. The 40px section h2 at -2px and the 28px h3 at -1.4px continue the tightening step — the entire display tier walks the negative-tracking ladder, with the body tier returning to normal at 16px / 400 / 0. Monaspace Neon Var carries the entire eyebrow tier and the code-block tier with the same family. There is no separate uppercase-tracked sans label tier in the system; small-caps duty falls entirely to Monaspace at 12-14px with a tight 0.7px letter-spacing. The result reads quietly technical and matches the in-body code-sample voice — the same font that labels a section ("HOW IT WORKS") also renders the code inside that section. ### Note on Font Substitutes Both families are open source. Inter ships on Google Fonts and Bunny Fonts. Monaspace Neon Var is open-sourced by GitHub at `github.com/githubnext/monaspace`. No substitution needed; the system already runs free fonts. If you must substitute Monaspace, **JetBrains Mono** carries the same uppercase-eyebrow role at slightly tighter spacing, and **Fira Code** is a close visual peer for the code-block role. For Inter at the 64px / -3.2px display step, **Geist** by Vercel is the nearest open-source alternative with comparable cap height. ## Layout ### Spacing System - **Base unit:** 4px (with 16px as the dominant gap value — 129 occurrences). - **Tokens:** `{spacing.xs}` 2px · `{spacing.sm}` 4px · `{spacing.base}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 48px. - **Section padding (vertical):** ~96px on the hero band; below the fold the rhythm tightens to ~64px between major sections. - **Card internal padding:** 32px on the testimonial card (the central pull-quote panel); 24px on the feature cards; 16px on the diagram cells. - **Top-nav padding:** 12px vertical, 16px horizontal. ### Grid & Container - **Max content width:** ~1080px on display headlines and body bands, ~1280px on the architecture diagram. - **Hero block:** centered at ~880px max-width on the 64px display. - **Below-fold sections:** centered displays at ~1080px, with feature cards splitting into 3-up at desktop and stacking to 1-up on mobile. - **Architecture diagram:** 4-color product-domain illustration spanning ~1280px width with violet / blue / orange / yellow node fills against a white canvas. - **Testimonial band:** single-panel centered pull-quote in `{component.testimonial-card}` at ~720px max-width. - **Dark footer band:** full-bleed `{colors.canvas-dark}` block at the page bottom, holding the newsletter-signup form and the multi-column link list. ### Rhythm The page alternates **editorial and dense** bands. Hero (editorial, 880px constrained). Logo wall (dense, 6-7 customer logos in monochrome). "The complete platform" feature row (dense, 3-up). Testimonial (editorial, single pull-quote). Demo-callout pair (editorial, 2-up). Architecture diagram (dense, multi-element). "Trusted by 4,000+" stat row (dense, multi-number). Open-source customer-quote grid (dense, 6-up). Dark footer (editorial, multi-column link list). The editorial-dense alternation is the page's structural device — each band either holds a single editorial sentence or packs multiple cells. ## Elevation The system has **no shadow tier**. Cards on the white canvas use a 1px `{colors.hairline}` border (941 captured occurrences) to read as elevated — the hairline does the entire elevation job. The dark footer band lifts off the white body by surface-color contrast alone — no shadow drawn. - **Flat (no shadow):** hero, body bands, feature cells, logo wall, footer — 99% of surfaces. - **Hairline elevation:** white cards on white canvas with a 1px `{colors.hairline}` border carry the cool-grey rule that reads as elevation. - **Tonal lift:** the dark footer band `{colors.canvas-dark}` lifts off the white body by the ~95-point lightness contrast between `{colors.canvas}` and `{colors.canvas-dark}` — no shadow needed. ## Shapes The radius scale is **small-step centered on 8px.** - **Small-step:** `{rounded.xs}` 2px (1 occurrence — outlier), `{rounded.sm}` 4px (10 — small chips and inputs), `{rounded.md}` 6px (57 — secondary surfaces and icon buttons), `{rounded.lg}` 8px (77 — the dominant radius, on cards, buttons, and feature cells). - **Larger surfaces:** `{rounded.xl}` 16px (1 occurrence — outlier on the largest emphasis surface). - **Pill:** `{rounded.full}` 9999px (21 occurrences) — used on small circular chips and the icon-button pill treatments. - **No 12px tier:** the scale skips 12px entirely. Either a surface uses one of the four small-step radii or it goes to a full circle. The 8px commitment is the system's shape language. Where Spline runs a generous 16px-centered scale and Cloudflare runs a binary 3-8 + full-pill scale, Pulumi anchors on 8px with a tight 6px secondary tier — the same rounding step on cards, buttons, and feature cells. ## Components **`button-primary`** — The signature CTA. Violet `{colors.primary}` fill, white text, `{rounded.lg}` 8px radius, 7x16px padding, 40px height, Inter weight 600 at 16px. "Get Started" is the canonical instance, sitting at the bottom of the hero stack as the single most-visible violet moment above the fold. **`button-secondary`** — White surface, ink text, 1px hairline-strong border, `{rounded.lg}` 8px radius, 7x16px padding, 40px height. Used for secondary CTAs like "View Documentation" alongside the primary violet pill. **`top-nav`** — White surface, 56px height, 12x16px padding, 1px bottom `{colors.hairline}` rule. Pulumi wordmark flush left in the brand violet, product links center, "Sign In" / "Get Started" flush right. **`nav-link`** — Transparent fill, ink-soft text in `{typography.nav-link}`, 7x10px padding, `{rounded.lg}` 8px hover-surface pill. **`hero-section`** — Full-bleed white canvas, 96x24px padding. Holds the 64px hero h1 in ink, a 20px lead paragraph in ink-muted, and the violet CTA pill stack. The hero is content-centered at ~880px max-width. **`hero-heading`** — Pure ink `{colors.ink}` text on the white canvas, Inter 64px / 600 / -3.2px letter-spacing. The display tier — confidence by tracking, not by weight or color. **`section-heading`** — Same display family at 40px / 600 / -2px tracking. "The complete platform for infrastructure teams" is the canonical instance. **`eyebrow-label`** — Violet `{colors.primary}` text, Monaspace Neon Var 14px / 400 uppercase / 0.7px letter-spacing. The single most-distinctive small-caps treatment in the system — every section eyebrow on the page runs in this voice. **`body-paragraph`** — Ink-muted `{colors.ink-muted}` running-text at `{typography.body-md}` — the workhorse paragraph style. The body color is the calmer #46434c rather than the heading ink — a deliberate softness in the running text. **`testimonial-card`** — White surface, ink text, `{rounded.lg}` 8px radius, 32px internal padding, 1px hairline border. The central pull-quote panel — holds the "Pulumi helped our team ship a new product faster" customer quote at `{typography.blockquote-md}` (24px / 600). **`card-feature`** — White surface, ink text, `{rounded.lg}` 8px radius, 24px padding, 1px hairline border. The default content card on the white canvas — holds feature explanations, demo callouts, and customer testimonials. **`card-emphasis-violet`** — Soft violet `{colors.primary-soft}` fill, deep violet `{colors.primary-deep}` text, `{rounded.lg}` 8px radius, 16px padding. The single in-body emphasis surface that lifts the violet voltage into a soft-toned card. **`diagram-cell`** — White surface, ink-soft text, `{rounded.lg}` 8px radius, 16px padding, 1px hairline border. The cell in the architecture-diagram grid — holds a product-domain icon and a 14px label. The icon colors borrow from the product-domain palette (violet / blue / orange / yellow). **`text-input`** — Dark `{colors.canvas-dark}` fill (used in the footer newsletter-signup), white text, `{rounded.lg}` 8px radius, 0x15px padding, 40px height, 1px ink-soft border. **`code-block`** — Dark `{colors.canvas-dark}` fill, white text in `{typography.code-mono}` (Monaspace Neon Var 12px / 400), `{rounded.md}` 6px radius, 16px padding. **`footer`** — Dark `{colors.canvas-dark}` band, white text in `{typography.body-sm}`, 48x24px padding. Holds the multi-column link list and the newsletter-signup form. The single dark surface in the captured system below the fold. ## Do's and Don'ts **Do** render the hero headline in pure ink, not in the brand violet. The system's most-distinctive move is the ink-not-violet hero — painting the headline in `{colors.primary}` would invert the entire identity move and make the page read as a children's-book violet rather than as an infrastructure brand. **Do** apply the -3.2px tracking on the 64px display. The negative letter-spacing is what gives the type its Stripe-quiet feel; running Inter 64px at 0 tracking turns the display into a generic SaaS hero and undercuts the typographic discipline. **Do** use Monaspace Neon Var for every section eyebrow. The mono-uppercase treatment is the dev-tools convention and the same family that runs inside code-sample blocks. Substituting a tracked uppercase sans for the eyebrow tier breaks the single-voice-across-labels-and-code discipline. **Do** let the violet voltage carry only CTA pills, link tones, and inline emphasis. The brand color appears 40 times in the captured page with a deliberate distribution — 35 as text on small interactive surfaces and 5 as background on the CTA pill. Multiplying the violet into card fills or section backgrounds dilutes the held-back chromatic anchor. **Don't** paint the hero canvas in the violet. The 64px h1 sits on pure `{colors.canvas}` (#ffffff) with pure ink text. Replacing the white canvas with a violet gradient turns the page into a SaaS landing and loses the "infrastructure-as-code is serious typography" identity move. **Don't** introduce a 12px or 20px middle radius tier. The system concentrates radii at 6px and 8px (with 4px as the small-step and full-circle for chips) — adding a middle value softens the binary commitment to a single round-step. **Don't** swap the cool `{colors.hairline}` (#e0dfe2) for a warm cream. The system runs cool-side neutrals throughout, in contrast to Fastly's warm-cream hairlines. Mixing the two breaks the violet-undertone consistency of the surface system. **Don't** use the product-domain colors (`{colors.product-blue}`, `{colors.product-green}`, `{colors.product-orange}`, `{colors.product-yellow}`, `{colors.product-red}`) anywhere outside the in-body architecture diagram. The 4-color palette is borrowed from IaC visualization convention and signals product-platform nodes; using it as a card accent or button fill outside that context reads as random secondary chrome and weakens the single-voltage discipline. ## Known Gaps - **Hover and focus states:** none documented for the primary or secondary buttons — the captured render carries only the resting state. The full state matrix (focus rings, active press, disabled tints) lives in the product dashboard. - **Form input variants:** the captured `{component.text-input}` is the dark footer newsletter signup. A light-mode input variant and error / validation styling are not exposed on the marketing site. - **Brand bright variant:** `{colors.primary-bright}` (#9077f3, wired as `--color-violet-accent`) is declared in CSS but appears 0 times in the captured render. Reserved for product-surface emphasis the marketing site does not currently expose. - **Product domain palette in the marketing chrome:** the 4-color domain palette (violet / blue / orange / yellow) appears in the architecture diagram only. The full IaC visualization convention (state-files, modules, providers, secrets) is not surfaced on the marketing page. - **Motion:** the architecture-diagram nodes animate on scroll-into-view but the spec captures end-state values only. Easing curves and stagger timing live in the live JavaScript. - **Product surfaces:** this DESIGN.md captures the marketing site only. The Pulumi Cloud Dashboard (`app.pulumi.com`), the developer documentation at `pulumi.com/docs`, and the AI / agent-targeted product surfaces carry their own token systems not represented here. - **Dark-mode brand alignment:** the page has a single dark band (the footer) on `{colors.canvas-dark}`. A full dark-mode variant for the entire page is not exposed.