Consolidate typography into a shared @utility type scale

[jeffmerrick]

Reworks global marketing typography to be slightly smaller and use one consistent typographic scale with more responsive breakpoints. Also refactors _templates.scss to use the new styles as well as general cleanup. The docs typographic scale wasn't touched but could be modified to use this scale as well if desired.

The new classes aren't applied everywhere and some pages will still have manual Tailwind font sizes applied that we'll need to fix as we come across them. But any raw headings, etc. will get the styles.

Includes some other miscellaneous updates and tweaks in files I was touching.

Resolves: #19139

---

Generated description of changes:

Summary

• Extracts the base-element and utility CSS shared by the docs (main.scss) and marketing (_marketing.scss) bundles into two new partials — theme/src/scss/_base-shared.scss and theme/src/scss/_utilities-shared.scss — so both bundles ship the same preflight overrides, custom-element resets, heading defaults, and a single canonical type scale.
• Replaces the legacy text-heading-* / text-body-* font-size tokens with composable Tailwind v4 @utility blocks: heading-1–heading-6, heading-xl, body-sm–body-2xl, font-overline, and font-overline-sm. Each utility bundles size, weight, family, letter-spacing, and line-height so templates no longer hand-wire those properties.
• Refactors _templates.scss onto the new utilities, drops the now-redundant section-header-*, section-body-*, and section-hint-small mixins, adds a shared @mixin edge-fade to dedupe the carousel/swiper gradient masks, and migrates raw CSS values (hex colors, px sizes, inline border: 0.5px solid …) over to design-token utilities (text-gray-primary, border-gray-300, bg-violet-50, rounded-2xl, etc.).
• Updates marketing layouts that were depending on the old bundle-local heading rules (layouts/product/superintelligence-infrastructure.html, layouts/page/pricing.html, layouts/page/demo.html, layouts/partials/contact-us.html, layouts/whitepapers/*, layouts/case-studies/*, layouts/what-is/single.html, and the template partials) to use heading-xl / heading-1 / body-xl / font-overline explicitly.
• Tidies a handful of related details surfaced during the migration: page-hero border softened to gray-200, hero h1/h2/h3 collapsed to a single rule, demo page switched from flex to a 2-col grid, badge separator swapped for a phosphor caret, event breadcrumb trimmed, neo and homepage hero titles converted to the split-title (primary/secondary) form.

Test plan

• make lint passes
• make build produces no Tailwind / Sass errors
• Visual diff homepage, /product/neo, /product/secrets-management, /product/superintelligence-infrastructure, /pricing, /demo, /contact-us, /what-is/<page>, /case-studies (list + single), /whitepapers (list + single)
• Visual diff a marketing template page exercising hero, logo banner, three-column, card grid, mini cards, promo banner, feature split, feature callout, testimonial, section header (centered + split), counter cards, icon grid, social carousel, case study cards
• Visual diff /events list and a single event page (breadcrumb, timing-info grid on mobile + desktop, speakers card, learn list, registration card, cloud-notice callout)
• Confirm docs pages still render headings/body at the expected sizes (no regressions from the shared base)
• Confirm h1/h2/h3 sizes on .page-hero across breakpoints

🤖 Generated with Claude Code

[github-actions]

Pre-merge Review — Last updated 2026-05-20T19:35:18Z

Tip

Summary: This is a CSS/typography refactor that extracts shared @layer base rules and @utility blocks into _base-shared.scss and _utilities-shared.scss, replaces the legacy text-heading-* / text-body-* font-size tokens with composable utilities (heading-1..6, heading-xl, body-sm..2xl, font-overline), drops redundant section-header-* / section-body-* / section-hint-small mixins, and updates marketing layouts to use the new class names. The only user-visible content change is on content/product/neo.md, where the hero title splits into title_primary + title_secondary + title_reversed: true. The kind of wrongness that would block readers: stale text-heading-* / text-body-* references in layouts (would render unstyled) or missing utility definitions for classes still in use (visual regression). Investigative passes: external claim verification (5 candidates, 3 verified, 2 not-a-claim), frontmatter sweep, and temporal-trigger sweep all ran clean; a grep across layouts/ and theme/ confirms no remaining text-heading-* / text-body-* references.

Review confidence:

Dimension	Level	Notes
mechanics	HIGH
facts	HIGH

Investigation log

• Cross-sibling reads: not run (not in a templated section)
• External claim verification: 3 of 5 claims verified (0 unverifiable, 0 contradicted) · 4 specialists (numerical, cross-reference, capability, framing); 0 cross-specialist corroborations · routed: 0 inline, 4 Pass 1, 0 Pass 2, 1 Pass 3 (verified 0, contradicted 0, unverifiable 1).
• Cited-claim spot-checks: not run (no cited claims)
• Frontmatter sweep: ran on body + meta_desc
• Temporal-trigger sweep: ran (recency words present in diff; spot-check in-review)
• Code execution: not run (no static/programs/ change)
• Code-examples checks: not run (no fenced code blocks in content files)
• Editorial-balance pass: not run (not under content/blog/)

🚨 Outstanding	⚠️ Low-confidence	💡 Pre-existing	✅ Resolved
0	0	0	0

🔍 Verification trail

5 claims extracted · 3 verified · 0 unverifiable · 0 contradicted

• L12 in content/_index.md "Pulumi Neo is positioned as 'AI for infrastructure' and enables shipping cloud infrastructure 'at the speed of AI' for both humans and agents." (also L17) → ✅ verified (evidence: The hero section in content/_index.md shows badge_highlight_text: "Meet Neo: " paired with badge_text: "AI for infrastructure" (linking to /product/neo/), title_secondary: "infrastructure as code \n for humans and agents.", and `…; source: repo:content/_index.md)
• L22 in content/product/neo.md "title_secondary: 'Meet Neo, your new'" → ➖ not-a-claim (evidence: The text "title_secondary: 'Meet Neo, your new'" is a UI copy/frontmatter string in the PR author's own page design — it is not a falsifiable factual assertion about a third-party system, version, price, or capability. The word "new" here…; source: repo:content/product/neo.md)
• L24 in content/product/neo.md "Neo provisions, governs, and optimizes cloud infrastructure with enterprise controls built in." → ✅ verified (framing: strengthened — claim drops "your" and the em-dash punctuation but is otherwise a faithful paraphrase of the source; the source's broader form proves the claim…; evidence: The file at content/product/neo.md (hero section description) reads: "Neo provisions, governs, and optimizes your cloud infrastructure — with enterprise controls built in." The claim omits "your" and replaces the em-dash with a comma, bu…; source: repo:content/product/neo.md)
• L26 in content/product/neo.md "The Neo hero image depicts a Kubernetes cluster upgrade automation diagram." → ✅ verified (evidence: Line 26 of content/product/neo.md contains the hero section's image_alt field, which reads: "Neo AI infrastructure agent diagram showing Kubernetes cluster upgrade automation" — directly confirming the claim that the Neo hero image dep…; source: repo:content/product/neo.md)
• L846 in theme/src/scss/_templates.scss "@apply text-gray-primary text-left leading-relaxed m-0 line-clamp-5;" → ➖ not-a-claim (evidence: This is a CSS/SCSS utility class directive line (@apply ...) in a stylesheet file — it is not a falsifiable factual assertion about any third-party system, API, or documented behavior. It is a faithful description of the PR author's own…; source: repo:theme/src/scss/_templates.scss L846)

🚨 Outstanding in this PR

No outstanding findings in this PR.

⚠️ Low-confidence

No low-confidence findings.

💡 Pre-existing issues in touched files (optional)

No pre-existing issues in touched files.

✅ Resolved since last review

No items resolved since the last review.

📜 Review history

• 2026-05-20T19:35:18Z — Typography refactor; all 5 candidate claims verified or not-a-claim, frontmatter clean, no Vale findings, no blockers. (0d6ee79)

---

Need a re-review? Want to dispute a finding? Mention @claude and include #update-review.
(For ad-hoc questions or fixes, just @claude — no hashtag.)

[pulumi-bot]

Your site preview for commit 13b7ae8 is ready! 🎉

http://www-testing-pulumi-docs-origin-pr-19289-13b7ae8f.s3-website.us-west-2.amazonaws.com

[pulumi-bot]

Lighthouse Performance Report

Commit: 13b7ae8 | Metric definitions

Page	Device	Score	FCP	LCP	TBT	CLS	SI
Homepage	Mobile	🔴 31	3.0s	10.1s	3394ms	0.074	8.2s
Homepage	Desktop	🟡 77	0.8s	1.2s	310ms	0.036	2.9s
Install Pulumi	Mobile	🔴 35	5.3s	8.6s	264ms	0.378	8.1s
Install Pulumi	Desktop	🟡 76	1.3s	1.9s	22ms	0.139	3.0s
AWS Get Started	Mobile	🟡 51	5.1s	7.7s	316ms	0.076	7.8s
AWS Get Started	Desktop	🟡 82	1.3s	1.8s	22ms	0.020	3.0s

[cnunciato]

The docs typographic scale wasn't touched but could be modified to use this scale as well if desired.

Would love to see what this looks like, as I'm a fan of consistency. Would it make sense to do here, or separately as a follow-up?

[jeffmerrick]

@cnunciato Let's give it a try! I just pushed that up. The main difference is that the headings are now a little bigger on desktop compared to the previous sizes and responsive.