Site cohesion: converge on the design-system canon + landing stack section

CLAUDE.md

@@ -106,4 +106,5 @@ Import from `@rivet-gg/icons`. The full Font Awesome Pro library is available. C
 - Dark `ink` panels (`editorial/InkPanel`) are reserved for code, terminal, screenshot, and data moments. Code and data plates stay flat ink; the oil-texture backdrop (`textureSrc`) is for editorial moments only (CTA colophon, 404).
 - Orange is the spark: at most one `accent`/ember CTA per page. White text sits only on `accent-deep` (`#D63E00`) or `ink` fills, never on `accent`. Pine (`#2E4034`) is the structural color for links, eyebrows, diagrams, and selected states; sage (`#93A286`) replaces it inside ink panels.
 - No drop shadows on marketing cards or imagery; depth comes from `border-ink/10..25` hairlines, `bg-white/55` card fills, and `paper-mid`/`paper-deep` layering (inside ink panels: `border-cream/10..15`). Shadows stay acceptable on functional overlays (dropdowns, tooltips, modals) and the header's glass inset highlight.
+- Buttons use the constants in `src/components/marketing/typography.tsx` — metric `rounded-md px-4 py-2 text-sm font-medium` for all. Primary accent = `PRODUCT_HERO_PRIMARY_BUTTON_CLASS` (`accent-deep`, the page's one ember); primary ink = `PRIMARY_INK_BUTTON_CLASS`; the only secondary = `PRODUCT_HERO_SECONDARY_BUTTON_CLASS` (`border-ink/15 bg-white/55`, filled — the borderless `border-ink/20` ghost is retired); light-on-ink primary = `bg-white text-ink hover:bg-white/90`. Do not hand-write button class strings.
 - `ink-faint` text is for captions and metadata at 12px+; body copy uses `ink-soft` or `ink`.

src/components/BlogArticle.astro

@@ -113,7 +113,7 @@ const otherArticles = allPosts
 					</nav>
 				)}
 
-				<Prose as="div" className="blog-prose w-full max-w-none">
+				<Prose as="div" surface="paper" className="blog-prose w-full max-w-none">
 					<Content components={mdxComponents} />
 				</Prose>
 
@@ -154,7 +154,7 @@ const otherArticles = allPosts
 		<!-- Read next -->
 		{otherArticles.length > 0 && (
 			<div class="mx-auto mt-24 w-full max-w-[62rem] border-t border-ink/10 pt-10">
-				<h2 class="font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-pine">Read next</h2>
+				<h2 class="font-mono text-[11px] font-medium uppercase tracking-[0.18em] text-pine">Read next</h2>
 				<div class="mt-6 grid grid-cols-1 gap-6 md:grid-cols-3">
 					{otherArticles.map((article) => (
 						<a href={`${readNextBase}${article.slug}/`} class="group flex flex-col">
@@ -170,7 +170,7 @@ const otherArticles = allPosts
 								/>
 							)}
 							<div class="mt-3 flex items-center gap-x-3 text-xs">
-								<span class="font-medium uppercase tracking-[0.1em] text-pine">{article.category.name}</span>
+								<span class="font-mono text-[11px] font-medium uppercase tracking-[0.18em] text-pine">{article.category.name}</span>
 								<time datetime={article.published.toISOString()} class="text-ink-faint">
 									{formatTimestamp(article.published)}
 								</time>

src/components/Footer.jsx

@@ -162,7 +162,7 @@ function SmallPrint() {
 
 				{/* Product */}
 				<div>
-					<h3 className="font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint mb-4">Product</h3>
+					<h3 className="font-mono text-[11px] font-medium uppercase tracking-[0.18em] text-ink-faint mb-4">Product</h3>
 					<ul className="space-y-3">
 						{footer.product.map((item) => (
 							<li key={item.name}>
@@ -180,7 +180,7 @@ function SmallPrint() {
 
 				{/* Developers */}
 				<div>
-					<h3 className="font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint mb-4">Developers</h3>
+					<h3 className="font-mono text-[11px] font-medium uppercase tracking-[0.18em] text-ink-faint mb-4">Developers</h3>
 					<ul className="space-y-3">
 						{footer.devs.map((item) => (
 							<li key={item.name}>
@@ -198,7 +198,7 @@ function SmallPrint() {
 
 				{/* Resources */}
 				<div>
-					<h3 className="font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint mb-4">Resources</h3>
+					<h3 className="font-mono text-[11px] font-medium uppercase tracking-[0.18em] text-ink-faint mb-4">Resources</h3>
 					<ul className="space-y-3">
 						{footer.resources.map((item) => (
 							<li key={item.name}>
@@ -216,7 +216,7 @@ function SmallPrint() {
 
 				{/* Company */}
 				<div>
-					<h3 className="font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint mb-4">Company</h3>
+					<h3 className="font-mono text-[11px] font-medium uppercase tracking-[0.18em] text-ink-faint mb-4">Company</h3>
 					<ul className="space-y-3">
 						{footer.company.map((item) => (
 							<li key={item.name}>
@@ -233,7 +233,7 @@ function SmallPrint() {
 
 				{/* Legal */}
 				<div>
-					<h3 className="font-mono text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint mb-4">Legal</h3>
+					<h3 className="font-mono text-[11px] font-medium uppercase tracking-[0.18em] text-ink-faint mb-4">Legal</h3>
 					<ul className="space-y-3">
 						{footer.legal.map((item) => (
 							<li key={item.name}>

src/components/cookbook/CookbookPageContent.tsx

@@ -51,7 +51,7 @@ function FilterChips({
 
 	return (
 		<div className="flex flex-wrap items-center gap-2">
-			<span className="font-mono text-[11px] uppercase tracking-[0.14em] text-ink-faint mr-1">{title}:</span>
+			<span className="font-mono text-[11px] uppercase tracking-[0.18em] text-ink-faint mr-1">{title}:</span>
 			{items.map((item) => {
 				const isSelected = selected.includes(item);
 				return (

src/components/docs/DocsArticlePage.astro

@@ -152,7 +152,7 @@ const breadcrumbSchema = {
 								/>
 							</div>
 						</div>
-						<Prose as="article" surface="paper" style={proseStyle} className="docs-article max-w-prose-docs lg:max-w-prose-docs mx-auto prose-headings:font-medium prose-headings:tracking-tight [&>h1:first-of-type]:pr-44">
+						<Prose as="article" surface="paper" style={proseStyle} className="docs-article max-w-prose-docs lg:max-w-prose-docs mx-auto prose-headings:font-medium [&>h1:first-of-type]:pr-44">
 							{parentPage && (
 								<div class:list={["eyebrow h-5 text-sm font-semibold", accent?.text ?? "text-pine"]}>
 									{parentPage.title}

src/components/docs/DocsLanding.tsx

@@ -1,5 +1,6 @@
 import { Icon } from "@rivet-gg/icons";
 import actorsLogo from "@/images/products/actors-logo.svg";
+import { EYEBROW_CLASS } from "@/components/marketing/typography";
 import { wordmarkMaskStyle } from "@/lib/product-accent";
 
 export interface DocsLandingItem {
@@ -51,14 +52,14 @@ function HeroTitle({
 					style={wordmarkMaskStyle(actorsLogo.src)}
 					className="inline-block h-8 w-8 bg-ink md:h-9 md:w-9"
 				/>
-				<h1 className="text-4xl font-medium tracking-tight text-ink">
+				<h1 className="text-4xl font-medium tracking-[-0.015em] text-ink">
 					{title}
 				</h1>
 			</div>
 		);
 	}
 	return (
-		<h1 className="mb-4 text-4xl font-medium tracking-tight text-ink">
+		<h1 className="mb-4 text-4xl font-medium tracking-[-0.015em] text-ink">
 			{title}
 		</h1>
 	);
@@ -133,7 +134,7 @@ export function DocsLanding({ title, subtitle, logo, sections, columns = 3 }: Do
 				{sections.map((section) => (
 					<section key={section.title}>
 						{showHeaders && (
-							<h2 className="mb-5 text-xs font-semibold uppercase tracking-wider text-ink-faint">
+							<h2 className={`mb-5 ${EYEBROW_CLASS}`}>
 								{section.title}
 							</h2>
 						)}

src/components/marketing/NotFoundPage.tsx

@@ -9,13 +9,11 @@ interface NotFoundPageProps {
 }
 
 const colors = [
-  '#FF4500', // orange (accent)
-  '#60a5fa', // blue
-  '#4ade80', // green
-  '#c084fc', // purple
-  '#f472b6', // pink
-  '#fbbf24', // yellow
-  '#2dd4bf', // teal
+  '#CB5A33', // accent
+  '#2E4034', // pine
+  '#93A286', // sage
+  '#AB451F', // accent-deep
+  '#56524A', // ink-soft
 ];
 
 const BouncingPill = () => {

src/components/marketing/ProductHero.tsx

@@ -2,8 +2,10 @@ import { ProductLockup } from "./ProductLockup";
 import { getProduct } from "@/sitemap/products";
 import {
 	PRODUCT_HERO_CTA_ROW_CLASS,
+	PRODUCT_HERO_H1_CLASS,
 	PRODUCT_HERO_PRIMARY_BUTTON_CLASS,
 	PRODUCT_HERO_SECONDARY_BUTTON_CLASS,
+	PRODUCT_HERO_SECTION_CLASS,
 } from "./typography";
 
 /**
@@ -29,15 +31,15 @@ export function ProductHero({
 	const heading = title ?? product?.description ?? "";
 
 	return (
-		<section className="relative flex min-h-[68svh] flex-col items-center justify-center overflow-hidden bg-paper px-6 py-16 md:py-20">
+		<section className={PRODUCT_HERO_SECTION_CLASS}>
 			<div className="mx-auto flex w-full max-w-5xl flex-col items-center text-center">
 				{product && (
 					<div className="mb-7 flex">
 						<ProductLockup product={product} />
 					</div>
 				)}
 
-				<h1 className="mb-4 max-w-4xl text-balance text-4xl font-medium leading-[1.06] tracking-[-0.02em] text-ink md:text-5xl">
+				<h1 className={PRODUCT_HERO_H1_CLASS}>
 					{heading}
 				</h1>