Skip to content

Website premium polish: positioning, typography, and on-prem surfaces#5230

Merged
NicholasKissel merged 25 commits into
NicholasKissel/compare-page-premiumfrom
NicholasKissel/marketing-heading-weights
Jun 14, 2026
Merged

Website premium polish: positioning, typography, and on-prem surfaces#5230
NicholasKissel merged 25 commits into
NicholasKissel/compare-page-premiumfrom
NicholasKissel/marketing-heading-weights

Conversation

@NicholasKissel

@NicholasKissel NicholasKissel commented Jun 12, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Premium polish pass across the marketing site: positioning copy, typography/design-system unification, new on-prem surfaces, and dead-code cleanup.

Positioning & copy

  • Landing hero leads with AI agents and closes on run-anywhere (Rivet Cloud, your VPC, air-gapped)
  • Replaced "runtime" framing with platform/standard-stack language (runs in your existing Node.js or Bun backend — no custom-runtime connotation)
  • Competitor callouts removed from landing; they live only on /compare pages
  • Claims hygiene: benchmark baseline dates centralized into a BENCHMARK_DATE constant, "scales infinitely" → concrete claims, agentOS in-process framing on marketing pages

Design system

  • All marketing headings unified on the compare-page spec (font-medium, tracking-[-0.015em], hero leading-[1.06]); canonical constants in marketing/typography.tsx, rules documented in website/CLAUDE.md
  • Landing bottom sections de-duplicated into three distinct stories: "Works with your stack" (ecosystem chips), "Start local. Scale to millions." (journey + deploy targets), "Run it where your data lives" (2-col with perimeter diagram)
  • /from-unix-to-agents migrated to dark theme; blog index matched to article read-next treatment; Game-of-Life removed from /install; flat borders instead of shadows on marketing cards

New on-prem surfaces

  • /enterprise page (nav + footer wired) with perimeter diagram hero and certification-safe compliance copy
  • Cookbook guide: "Deploying Rivet in a VPC or Air-Gapped Network"

Removals

  • /agent solution page deleted (redirects to /actors, which gained a use-case grid covering agents, realtime/multiplayer, collab state, durable workflows)
  • ~35 dead legacy components deleted, including the entire unused marketing/cloud/ directory and a fake-testimonials section

Full build passes (249 pages); all changed pages visually verified against the production build.

🤖 Generated with Claude Code

@NicholasKissel NicholasKissel mentioned this pull request Jun 12, 2026
Open
@railway-app railway-app Bot temporarily deployed to rivet-frontend / rivet-pr-5230 June 12, 2026 08:17 Destroyed
@railway-app

railway-app Bot commented Jun 12, 2026 •
edited
Loading

Copy link
Copy Markdown

🚅 Deployed to the rivet-pr-5230 environment in rivet-frontend

Service Status Web Updated (UTC)
website ✅ Success (View Logs) Web Jun 14, 2026 at 3:55 am
kitchen-sink ❌ Build Failed (View Logs) Web Jun 14, 2026 at 3:39 am
mcp-hub ✅ Success (View Logs) Web Jun 12, 2026 at 6:04 pm
ladle ❌ Build Failed (View Logs) Web Jun 12, 2026 at 8:19 am
frontend-inspector ❌ Build Failed (View Logs) Web Jun 12, 2026 at 8:19 am
frontend-cloud ❌ Build Failed (View Logs) Web Jun 12, 2026 at 8:18 am

@NicholasKissel NicholasKissel mentioned this pull request Jun 12, 2026
Open
@NicholasKissel NicholasKissel changed the title [SLOP(claude-fable-5)] style(website): align marketing heading weights with cookbook and compare pages Marketing typography: align heading weights with cookbook and compare pages Jun 12, 2026
@NicholasKissel NicholasKissel mentioned this pull request Jun 12, 2026
Open
@NicholasKissel Graphite App

NicholasKissel commented Jun 12, 2026

Copy link
Copy Markdown
Member Author

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

This stack of pull requests is managed by Graphite. Learn more about stacking.

@NicholasKissel NicholasKissel force-pushed the NicholasKissel/compare-page-premium branch from 4292df7 to e84e4c7 Compare June 12, 2026 08:22
@NicholasKissel NicholasKissel force-pushed the NicholasKissel/marketing-heading-weights branch from 3347dcf to 6ab34f8 Compare June 12, 2026 08:22
@railway-app railway-app Bot temporarily deployed to rivet-frontend / rivet-pr-5230 June 12, 2026 08:23 Destroyed
@NicholasKissel NicholasKissel force-pushed the NicholasKissel/compare-page-premium branch from e84e4c7 to 26a2034 Compare June 12, 2026 08:26
@NicholasKissel NicholasKissel force-pushed the NicholasKissel/marketing-heading-weights branch from 6ab34f8 to 2a85c64 Compare June 12, 2026 08:26
@railway-app railway-app Bot temporarily deployed to rivet-frontend / rivet-pr-5230 June 12, 2026 08:26 Destroyed
@NicholasKissel NicholasKissel force-pushed the NicholasKissel/marketing-heading-weights branch from 2a85c64 to 041aba9 Compare June 12, 2026 08:30
@railway-app railway-app Bot temporarily deployed to rivet-frontend / rivet-pr-5230 June 12, 2026 08:30 Destroyed
@NicholasKissel
[SLOP(claude-opus-4-8)] feat(website): swap observability inspector s…
69a2420 
…creenshot for light/dark variants with animated toggle
@railway-app railway-app Bot temporarily deployed to rivet-frontend / rivet-pr-5230 June 12, 2026 08:34 Destroyed
@claude

claude Bot commented Jun 12, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

PR Review: Website premium polish (#5230)

This is a large, well-scoped marketing polish pass. The positioning decisions are sound, the dead-code removal is substantial, and the design system canonicalization in typography.tsx is exactly the right move. A few issues worth addressing before merge.

Bug: Inconsistent env var format in VPC cookbook guide

website/src/content/cookbook/vpc-air-gapped.mdx uses two different formats for the file-system config key:

Binary install section:

RIVET__database__file_system__path="/var/lib/rivet/data" ./rivet-engine

Docker Compose section:

RIVET__FILE_SYSTEM__PATH: "/data"

These should be identical — one of them is wrong. Enterprise/VPC users will follow this guide carefully, so a broken env var will cause a frustrating setup failure. Please verify which form the engine actually accepts and make both blocks consistent.

Design inconsistency: CTA button treatment in enterprise.astro

The hero CTA uses bg-accent-deep (orange) for the primary button, but the closing CTA section uses bg-ink (near-black). Per the design system rules in website/CLAUDE.md, orange (accent) should appear at most once per page. If the hero already uses it, the closing CTA should match the bg-ink treatment. Recommend standardizing both sections to bg-ink primary / border border-ink/20 secondary, consistent with the rest of the page.

Minor: PerimeterDiagram uses Ban icon for a positive feature

website/src/components/marketing/editorial/PerimeterDiagram.tsx uses Ban (a circle-with-slash) as the footer icon next to "No outbound connections. No telemetry." The Ban icon reads as "prohibited" which is semantically backwards — the absence of outbound connections is the feature, not a thing that is blocked. Consider ShieldOff, EthernetPort, or WifiOff from lucide-react, or a custom inline SVG that reinforces the "nothing leaving the perimeter" concept.

Minor: Card border-radius inconsistency on /enterprise

The "Architecture footprint" cards (Single binary, Docker Compose, Kubernetes) are rendered directly in enterprise.astro with rounded-xl, but the "Deployment models" cards use CatalogCard, which has no default rounded-xl. The visual result will be square-cornered deployment cards next to rounded footprint cards on the same page. Either add a rounded-xl default to CatalogCard or pass className="rounded-xl" at the call sites.

Minor: Very long inline mask CSS on /actors hero

The actors-paper-wash div in website/src/pages/actors.astro contains a multi-hundred-character inline style attribute with -webkit-mask-image, mask-image, and CSS custom property definitions. This is extremely difficult to read or modify. Consider extracting to a <style> block or a scoped CSS class, keeping only the JS-driven --peak-a / --base-a variable updates as inline assignments.

Positives worth calling out

  • Removing NewHeroSection.tsx is correct: it injected @import url('https://fonts.googleapis.com/css2?family=Inter:...') via dangerouslySetInnerHTML — a privacy and performance antipattern.
  • BENCHMARK_DATE constant in bench.ts is the right pattern; a single source of truth prevents stale benchmark dates creeping into copy.
  • "scales infinitely" → "scales to zero, bursts to thousands" and "32x cheaper" → "an order of magnitude cheaper" are substantive improvements to claim hygiene.
  • typography.tsx as a canonical source of heading classes is well-structured and correctly documented in website/CLAUDE.md.
  • Enterprise page structure is clean: three-section hierarchy (deployment models → compliance → footprint → CTA), consistent use of the SectionHeading / CatalogCard primitives, and the footer/header wiring is complete.

Review generated by Claude Code

@NicholasKissel
[SLOP(claude-fable-5)] fix(website): lead marketing copy with agents …
f544deb 
…and run-anywhere positioning
@NicholasKissel
[SLOP(claude-fable-5)] style(website): unify marketing typography and…
7d578f0 
… card system on compare-page primitives
@NicholasKissel
[SLOP(claude-fable-5)] style(website): remove dated decoration and al…
41c2153 
…ign blog and timeline with dark design language
@NicholasKissel
[SLOP(claude-fable-5)] feat(website): enterprise page, self-hosted co…
57d4fd2 
…mpare entry, and on-prem cookbook guide
@NicholasKissel
[SLOP(claude-fable-5)] chore(website): delete dead legacy marketing c…
c38e73c 
…omponents
@NicholasKissel
[SLOP(claude-fable-5)] fix(website): replace custom-runtime framing w…
e121c97 
…ith standard-stack positioning and drop landing-page Cloudflare callout
@NicholasKissel
[SLOP(claude-fable-5)] style(website): differentiate landing deploy s…
8046b0d 
…ections and add visual texture to enterprise page
@NicholasKissel
[SLOP(claude-fable-5)] refactor(website): fold agent solution page in…
5bb839a 
…to actors with use-case grid and redirect
@railway-app railway-app Bot temporarily deployed to rivet-frontend / rivet-pr-5230 June 12, 2026 18:03 Destroyed
@NicholasKissel NicholasKissel changed the title Marketing typography: align heading weights with cookbook and compare pages Website premium polish: positioning, typography, and on-prem surfaces Jun 12, 2026
@railway-app railway-app Bot temporarily deployed to rivet-frontend / rivet-pr-5230 June 12, 2026 18:40 Destroyed
@NicholasKissel
[SLOP(claude-fable-5)] feat(website): porcelain editorial design syst…
187264c 
…em foundation
@NicholasKissel
[SLOP(claude-fable-5)] feat(website): redesign landing page on porcel…
4161152 
…ain editorial system
@NicholasKissel
[SLOP(claude-fable-5)] feat(website): porcelain editorial restyle for…
54a49b5 
… blog, changelog, cookbook, and legal templates
@NicholasKissel
[SLOP(claude-fable-5)] feat(website): porcelain restyle for support, …
69764b9 
…oss-friends, 404, startups, and contact forms
@NicholasKissel
[SLOP(claude-fable-5)] feat(website): porcelain redesign for actors, …
baccb53 
…enterprise, and cloud pricing pages
@NicholasKissel
[SLOP(claude-fable-5)] feat(website): porcelain redesign for agentOS …
865191b 
…family and compare pages
@NicholasKissel
[SLOP(claude-fable-5)] chore(website): final porcelain sweep, retint …
7e6a6d1 
…shared FAQ and copy components, delete dead dark-era components
@NicholasKissel
[SLOP(claude-fable-5)] fix(website): rebalance hosting section compos…
ef6a0f1 
…ition with paper command chips and aligned columns
@NicholasKissel
[SLOP(claude-fable-5)] fix(website): pill treatment for works-with-yo…
7d4b2aa 
…ur-stack links to match deploy row
@NicholasKissel
[SLOP(claude-opus-4-8-high)] feat(website): documentary-style Ken Bur…
4e62200 
…ns drift on cookbook covers
@NicholasKissel
[SLOP(claude-opus-4-8-high)] feat(website): tune cookbook Ken Burns s…
d03c587 
…lide per artwork toward each subject
@NicholasKissel
[SLOP(claude-opus-4-8)] feat(website): porcelain header/docs polish a…
a73bdcd 
…nd Rivet Compute pricing calculator
@railway-app railway-app Bot temporarily deployed to rivet-frontend / rivet-pr-5230 June 13, 2026 23:26 Destroyed
@railway-app railway-app Bot temporarily deployed to rivet-frontend / rivet-pr-5230 June 14, 2026 03:08 Destroyed
@railway-app railway-app Bot temporarily deployed to rivet-frontend / rivet-pr-5230 June 14, 2026 03:34 Destroyed
@NicholasKissel NicholasKissel merged commit 2af4133 into NicholasKissel/compare-page-premium Jun 14, 2026
13 of 17 checks passed
@NicholasKissel NicholasKissel deleted the NicholasKissel/marketing-heading-weights branch June 14, 2026 03:56
@NicholasKissel NicholasKissel mentioned this pull request Jun 14, 2026
Merged
NicholasKissel added a commit that referenced this pull request Jun 14, 2026
@NicholasKissel
feat(website): porcelain redesign, Rivet Compute calculator, and mark…
797a801 
…eting polish (#5257)

Collapses the former stacked PRs (#5219 seo-content-plays, #5228 cookbook-classical-covers, #5229 compare-page-premium, #5230 marketing-heading-weights) into a single PR off `main`, rebased onto the latest trunk. `#5230` was already merged down into `compare-page-premium`; this brings the full body of work straight to `main`.

## What's included
- **Porcelain redesign** — light cool-porcelain theme across marketing pages and docs (header light theme, docs subnav/tabs, prose, selection states), warm-black `ink` text, classical oil-paint imagery.
- **Rivet Compute pricing + calculator** — the `/cloud` pricing page integrates the compute calculator (vCPU / memory / active-hours sliders, live estimate on an ink data-plate), restyled to the porcelain system.
- **Compare page redesign**, **classical-art cookbook covers**, and **SEO content** from the lower stack.
- **Actors hero** — lag-free scroll dissolve (static gradient + opacity animation, no per-frame blur/mask).
- **Mobile polish** — CTA painting fills with full-width contained buttons; mobile menu + docs section headers no longer render white-on-light.

## Merge notes
- Branched off latest `main`; the only content conflict was `PricingPageClient.tsx` (main's standalone calculator vs the redesigned page that already integrated it) — resolved to the redesigned version.
- `main`'s own website changes (e.g. `environment-variables.mdx`) are preserved.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@NicholasKissel