Update all colors and remove old brand elements

[jeffmerrick]

Proposed changes

Update all colors and remove old brand elements

This is a rather massive PR but sometimes you just need to bite the bullet with a somewhat reckless find and replace. This should bring colors closer to being in alignment with the new brand while removing older brand elements like the dot patterns, gradient and circles. In general the focus was just on swapping in new colors so page layouts will still need to be revisited for new design work.

---

Completes replacement of the legacy Sass-based color system (_colors.scss, tailwind.config.js, tokens.json) with the CSS-custom-property-based brand palette defined in _theme.scss using Tailwind v4's CSS-first @theme {} config.

Key changes:

• New brand palette: violet, blue, yellow, orange, red, green, gray — all defined as --color-* custom properties
• Semantic aliases added: --color-violet-primary (#702eea), etc.
• All Sass variable references ($brand-blue, map-get($gray, 600), etc.) replaced with var(--color-*) throughout SCSS and Stencil web component styles
• Rainbow/gradient decorative elements replaced with solid violet or black
• Replaced all instances of old brand violet with new.

For later:
Updates to docs button styles and colors
Font updates (#18536)
Updates to /guides (separate repo)
Update blog images

Update

Decided to go all out and updating fonts and docs styles as well.

---

• Font stack updated: Replaced legacy Gilroy (display) and Roboto Mono (mono) with Inter and Monaspace Neon Var respectively; removed @font-face declarations for Gilroy, Iosevka, and Roboto Mono from _fonts.scss
• Button styles overhauled: Default .btn color updated from blue-600 to violet-primary; .btn-secondary redesigned with neutral border treatment; translucent button variants migrated from Sass rgba() to CSS color-mix()
• Syntax highlighting refreshed: Chroma theme colors updated to align with new palette (violet-tinted dark background via --color-violet-950); removed separate _chroma-min-dark.scss override file
• General layout cleanup: General design cleanup to layouts and styles throughout, reviewing all pages in the main nav.

Resolves: #18535
Resolves: #18538
Resolves: #18536

[pulumi-bot]

Your site preview for commit 9ebfd9e is ready! 🎉

http://www-testing-pulumi-docs-origin-pr-18619-9ebfd9ec.s3-website.us-west-2.amazonaws.com

[pulumi-bot]

Lighthouse Performance Report

Commit: 9ebfd9e | Metric definitions

Page	Device	Score	FCP	LCP	TBT	CLS	SI
Homepage	Mobile	🟡 51	7.0s	11.6s	344ms	0.000	7.0s
Homepage	Desktop	🟡 88	0.6s	1.5s	22ms	0.082	2.4s
Install Pulumi	Mobile	🟡 55	6.6s	10.1s	214ms	0.000	6.6s
Install Pulumi	Desktop	🟡 88	1.0s	1.5s	21ms	0.029	2.5s
AWS Get Started	Mobile	🟡 56	3.9s	6.8s	264ms	0.083	6.5s
AWS Get Started	Desktop	🟢 94	0.9s	1.5s	22ms	0.033	0.9s

[claude]

Docs Review posted by CI. Testing posting capability.

[claude]

Docs review part 1/3: Likely bugs. (1) layouts/page/brand.html line 8 still renders pulumi-tertiary-nav with items bound to .Params.sections, but content/brand/_index.md no longer defines sections — jsonify on nil emits null, so the element will get items=null and may throw JS errors. Guard with {{ with .Params.sections }}...{{ end }} or remove the nav block. (2) content/brand/_index.md meta_desc still says 'Official brand logos and colors for use with Pulumi.' but the page body is now just 'Update coming soon.' — update the description or add noindex until rebuilt. (3) layouts/page/pricing.html line 71 was partially updated: border-violet-600 became border-violet-primary, but sibling text-violet-600 was missed. In the new palette violet-600 is 915df9 and violet-primary is 702eea, so text ends up lighter than its border.

[claude]

Docs review part 2/3: Documentation debt and dead references. (4) BUILD-AND-DEPLOY.md line 3742 references theme/tailwind.config.js which is deleted in this PR. Per AGENTS.md, build/infra changes should update BUILD-AND-DEPLOY.md — worth a note that the site now uses Tailwind v4 CSS-first @theme config in theme/src/scss/_theme.scss. (5) The deleted tailwind.config.js contained a cache-bust-2025-12 color added to bust the CloudFront CSS cache (referencing issue 16274). If the cache-bust mechanism is still needed, it should live somewhere in the new pipeline; if not, a note explaining why would help future maintainers. (6) PR description lists roughly 8 templates with .rainbow-text, 20 with .shape-background, 5 with .dot-overlay/.dot-background; a grep across layouts/ turns up 27 files referencing at least one. Not a blocker, but a follow-up cleanup issue would be good. (7) Remaining salmon/fuchsia/purple refs beyond the three noted in the PR: layouts/page/about.html:138 (text-salmon-600), layouts/page/about.html:146 (text-fuchsia-600), layouts/page/microsoft-for-startups.html:44 (bg-salmon-200), layouts/page/pulumi-for-startups.html:44 (bg-salmon-200), layouts/partials/events/speakers-template.html:21 (/images/avatars/avatar-purple.png still in a shuffle of avatar choices).

[claude]

Docs review part 3/3: Style/hygiene and clean findings. (8) Missing trailing newline in theme/src/scss/_hero.scss — confirmed in the diff. (9) 'border-top: 4px solid; border-color: 702eea;' pattern in layouts/page/reinvent.html (lines 188, 209, 234, 255) and layouts/partner/aws.html (lines 230, 258) works because sibling borders default to width 0, but 'border-top: 4px solid 702eea;' is clearer and avoids setting color on three invisible sides. Clean findings: content markdown changes (icon_color: purple to violet) are consistent with the new icon palette. Three touched blog posts (aws-lambda-container-support, azure-container-apps, get-up-and-running-with-azure-synapse-and-pulumi) are class-name swaps only, no content changes, so the 'do not update blog posts' rule does not apply. No old brand hex codes (805ac3, 8a3391, bd4c85) remain in layouts/ or theme/; remaining hits in static/logos/ look like vendor/package logos. Mention @ claude (remove the space) if you want me to take another pass once these are addressed.

[claude]

Summary: the 3 comments above are the docs review for this PR. Three likely bugs (brand page nav bound to removed .Params.sections, stale meta_desc on brand page, pricing.html text-violet-600 missed in find/replace), two documentation-debt items (BUILD-AND-DEPLOY.md still references deleted tailwind.config.js; cache-bust token from issue 16274 needs tracking), broader dead-class residue than the PR description notes, a missing trailing newline in _hero.scss, and a minor border-shorthand style nit. Markdown content and blog class-swaps look clean. (Ignore the 'Docs Review posted by CI' placeholder above — it was a posting-capability test I could not delete.)

[vctrfrnndz]

Just a nit (this is looking vibrant and great!)

Might want to double check the lightest shades (borders, lines) in the illustrations, I think after the update they lack a bit of contrast.

[jeffmerrick]

@vctrfrnndz On point as usual! Wrong color was swapped in there, should be fixed now.

[jeffmerrick]

I expanded the scope and applied fonts and did general style and layout updates throughout, including /docs. Now I've changed 261 files 😬 so it's a bit massive but everything should look much better!

[claude]

Docs review — PR #18619 (color system refresh)

Scoped to Markdown/content changes. Layout/SCSS/asset changes were scanned for related issues but not reviewed line-by-line — the PR description handles the intentional no-ops transparently.

Issues

1. content/what-is/what-is-yaml.md:73 — prose contradicts the updated example.

The YAML examples (lines 47, 70) now use color: violet, but the prose on line 73 still calls Pulumipus a "purple platypus":

The first three key-value pairs are strings indicating that this creature is a purple platypus named Pulumipus, …

Either keep both as purple (Pulumipus is historically purple) or update both:

The first three key-value pairs are strings indicating that this creature is a violet platypus named Pulumipus, but YAML also supports integers, floats, and booleans to give their age and current status as a mascot:

Also worth a quick product-branding gut-check: is the mascot now officially described as violet? If the mascot itself stays "purple" colloquially, you may want to revert the YAML example values on lines 47 and 70 rather than change the prose.

2. Missed fuchsia values in content frontmatter.

The PR description notes that salmon/fuchsia scales were intentionally removed, leaving a few template class references as silent no-ops. The layouts listed in the description are fine, but there are 5 additional fuchsia values in content frontmatter that weren't caught by the sweep — these will silently render with no color:

• content/product/pulumi-deployments.md:59 — icon_color: fuchsia ("Review Stacks")
• content/gads/neo/index.md:60 — color: fuchsia ("Cut Cloud Waste")
• content/partner/azure.md:201 — icon_color: fuchsia ("Convenience Functions")
• content/topics/kubernetes.md:250 — icon_color: fuchsia ("Smart Architecture")
• content/topics/kubernetes.md:299 — icon_color: fuchsia ("Pulumi Kubernetes Operator")

Suggest updating each to violet (or another palette color) to match the rest of the sweep.

Notes (non-blocking)

• content/about/_index.md — value titles changed from Title Case to sentence case ("Customers first", "Dream big", etc.). This matches the AGENTS.md H2+ sentence-case rule for card/heading content, so aligned. Just flagging it's a user-facing copy change — confirm with brand/marketing that it's intentional; corporate values are sometimes styled in title case deliberately.
• content/brand/_index.md — page is gutted to a placeholder with Updated brand guidelines coming soon. Not a docs concern (intentional), but worth noting for anyone linking into #logos / #colors anchors: those anchors no longer exist. Consider a temporary redirect if there are marketing assets pointing at those anchors.
• BUILD-AND-DEPLOY.md — the Tailwind variants → @source rewrite is accurate for v4 and matches the rest of the migration.
• Content change set otherwise consists of trivially safe color-value renames (purple/salmon → violet, fuchsia → green) that map to palette values defined in theme/src/scss/_theme.scss.

---

If you'd like another pass after fixes, mention me (@claude) in a comment.

[CamSoper]

Nice cleanup. The new typography looks great on the docs pages — really happy with how it's landing.

Verified:

• No dangling purple/fuchsia/salmon classes in content/ or layouts/.
• All color: values in frontmatter resolve to existing --color-* tokens.
• tailwind.config.js/tokens.json gone; _theme.scss palette in place.
• Tailwind v4 @source guidance in BUILD-AND-DEPLOY.md matches main.scss.

Given the breadth (260 files), I didn't visually inspect every page — recommend eyeballing the preview on at least /about/, /gads/neo/, /topics/kubernetes/, and one of the blog callouts before merging.

Heads-up: /brand/ is now a "coming soon" stub — external deep links to brand assets will land there until the follow-up ships.