Compare pages: premium redesign

website/CLAUDE.md

@@ -61,3 +61,19 @@ Import from `@rivet-gg/icons`. The full Font Awesome Pro library is available. C
 - Do not split related multi-file examples into separate non-workspace code blocks.
 
 - If any code block fails type checking, the build fails.
+
+## Typography
+
+- Marketing headings and card titles use `font-medium` (h1 heroes, section h2s, h3/h4 card titles, FAQ headings, price figures). Do not introduce `font-normal` headings.
+- `font-normal` remains correct only for deliberate de-emphasis: table `th` de-bolding, quiet `dt` labels, and input-like UI (TypesenseSearch).
+- Hero h1s and section h2s use the class constants in `src/components/marketing/typography.tsx` (`tracking-[-0.015em]`, h1 `leading-[1.06]`). Do not hand-write `tracking-tight` on headings at `text-2xl` or larger; `tracking-tight` stays acceptable on `text-base` and smaller card titles.
+- Manrope is the only marketing typeface; JetBrains Mono covers code, eyebrows, and captions. No serif headings on marketing pages; the Learn section's serif treatment is the only exception.
+- Section labels use the eyebrow convention (`EYEBROW_CLASS` or `editorial/Eyebrow`): mono, uppercase, `tracking-[0.18em]`, pine on porcelain, sage inside ink panels. Plate and panel captions use `CAPTION_CLASS` (`Fig. NN — ...`).
+
+## Theme
+
+- Marketing pages and docs are light: cool porcelain (`paper`, `#EFEFEF`) with a `paper-deep` radial pooling bottom-left (`.depth-wash`) and a fine grain (`.paper-grain`). Warmth comes from warm-black `ink` text, classical imagery, and oil-paint textures, never from synthetic color gradients. Do not use the cream `mat` token as a surface/background design element on light surfaces (panels, dropdowns, badges, plate frames); use `paper`/`paper-mid`/`white` or `ink`-tint neutrals instead. `cream` stays valid only as the off-white text/fill inside dark `ink` panels. Docs paint the same porcelain field, render prose via `Prose surface="paper"`, and use `pine` for the active sidebar/TOC selected state; only the Learn section keeps a dark shell, and no other page may introduce a dark base.
+- 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.
+- `ink-faint` text is for captions and metadata at 12px+; body copy uses `ink-soft` or `ink`.

website/redirects.mjs

@@ -36,6 +36,7 @@ export const redirects = {
 	// Self-hosting redirect
 	'/docs/general/self-hosting': '/docs/self-hosting/',
 	// Removed solution pages
+	'/agent': '/actors/',
 	'/solutions/agents': '/',
 	'/solutions/app-generators': '/',
 	'/solutions/collaborative-state': '/',

website/src/components/BlogArticle.astro

@@ -44,28 +44,28 @@ const otherArticles = allPosts
 	});
 ---
 
-<div class="blog-article relative w-full" style="--header-height: 5rem;">
+<div class="blog-article paper-grain relative w-full" style="--header-height: 5rem;">
 	<div class="mx-auto w-full max-w-[62rem] px-6 pb-24 pt-32 md:pt-40">
 		<article class="mx-auto w-full max-w-[44rem]">
 			<!-- Back link -->
 			<a
 				href="/blog/"
-				class="group flex items-center gap-2 text-sm text-zinc-500 transition-colors hover:text-white"
+				class="group flex items-center gap-2 text-sm text-ink-faint transition-colors hover:text-ink"
 			>
 				<Icon icon={faArrowLeft} className="h-3 w-auto transition-transform group-hover:-translate-x-0.5" />
 				Blog
 			</a>
 
 			<!-- Header -->
 			<header class="mb-12 mt-8">
-				<time datetime={entry.data.published.toISOString()} class="text-sm font-medium text-zinc-500">
+				<time datetime={entry.data.published.toISOString()} class="font-mono text-xs text-ink-faint">
 					{formatTimestamp(entry.data.published)}
 				</time>
-				<h1 class="mt-2 text-4xl font-normal leading-[1.1] tracking-tight text-white [text-wrap:balance] md:text-[3.25rem]">
+				<h1 class="mt-2 text-4xl font-medium leading-[1.06] tracking-[-0.015em] text-ink [text-wrap:balance] md:text-[3.25rem]">
 					{title}
 				</h1>
 				{description && (
-					<p class="mt-5 text-lg font-light leading-7 text-zinc-400 [text-wrap:pretty] md:text-xl">
+					<p class="mt-5 text-lg leading-7 text-ink-soft [text-wrap:pretty] md:text-xl">
 						{description}
 					</p>
 				)}
@@ -77,7 +77,7 @@ const otherArticles = allPosts
 					alt={title}
 					width={image.width}
 					height={image.height}
-					class="mb-12 aspect-[2/1] w-full rounded-2xl border border-white/10 object-cover"
+					class="mb-12 aspect-[2/1] w-full rounded-2xl border border-ink/10 object-cover"
 					loading="eager"
 					decoding="async"
 				/>
@@ -87,15 +87,15 @@ const otherArticles = allPosts
 				<Content components={mdxComponents} />
 			</Prose>
 
-			<div class="mt-16 border-t border-white/10 pt-8">
+			<div class="mt-16 border-t border-ink/10 pt-8">
 				<ArticleSocials title={title} client:load />
 			</div>
 		</article>
 
 		<!-- Read next -->
 		{otherArticles.length > 0 && (
-			<div class="mx-auto mt-24 w-full max-w-[62rem] border-t border-white/10 pt-10">
-				<h2 class="text-sm font-medium uppercase tracking-[0.12em] text-zinc-500">Read next</h2>
+			<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>
 				<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">
@@ -105,21 +105,21 @@ const otherArticles = allPosts
 									alt={article.title}
 									width={600}
 									height={300}
-									class="aspect-[2/1] w-full rounded-xl border border-white/10 object-cover transition-colors group-hover:border-white/25"
+									class="aspect-[2/1] w-full rounded-xl border border-ink/10 object-cover transition-colors group-hover:border-ink/25"
 									loading="lazy"
 									decoding="async"
 								/>
 							)}
 							<div class="mt-3 flex items-center gap-x-3 text-xs">
-								<span class="text-accent font-semibold uppercase tracking-[0.1em]">{article.category.name}</span>
-								<time datetime={article.published.toISOString()} class="text-zinc-500">
+								<span class="font-medium uppercase tracking-[0.1em] text-pine">{article.category.name}</span>
+								<time datetime={article.published.toISOString()} class="text-ink-faint">
 									{formatTimestamp(article.published)}
 								</time>
 							</div>
-							<h3 class="mt-2 text-base font-normal leading-snug text-white transition-colors group-hover:text-accent">
+							<h3 class="mt-2 text-base font-medium leading-snug text-ink transition-colors group-hover:text-pine">
 								{article.title}
 							</h3>
-							<span class="mt-2 inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 transition-colors group-hover:text-white">
+							<span class="mt-2 inline-flex items-center gap-1.5 text-xs font-medium text-ink-faint transition-colors group-hover:text-ink">
 								Read article
 								<Icon icon={faArrowRight} className="h-2.5 w-auto transition-transform group-hover:translate-x-0.5" />
 							</span>
@@ -136,7 +136,7 @@ const otherArticles = allPosts
 	.blog-article .blog-prose {
 		font-size: 1.0625rem;
 		line-height: 1.8;
-		color: hsl(var(--muted-foreground));
+		color: #56524a;
 	}
 
 	.blog-article .blog-prose p,
@@ -152,62 +152,65 @@ const otherArticles = allPosts
 
 	.blog-article .blog-prose h2 {
 		font-size: 1.75rem;
+		font-weight: 500;
 		line-height: 1.2;
 		letter-spacing: -0.02em;
 		margin-top: 2.75rem;
 		margin-bottom: 1rem;
-		color: #fff;
+		color: #1b1916;
 	}
 
 	.blog-article .blog-prose h3 {
 		font-size: 1.3rem;
+		font-weight: 500;
 		line-height: 1.3;
 		letter-spacing: -0.015em;
 		margin-top: 2.25rem;
 		margin-bottom: 0.75rem;
-		color: #fff;
+		color: #1b1916;
 	}
 
 	.blog-article .blog-prose h4 {
 		font-size: 1.075rem;
+		font-weight: 500;
 		margin-top: 2rem;
 		margin-bottom: 0.5rem;
-		color: #fff;
+		color: #1b1916;
 	}
 
 	.blog-article .blog-prose a {
-		color: #ff6a33;
+		color: #2e4034;
 		text-decoration: underline;
-		text-decoration-color: rgb(255 69 0 / 0.35);
+		text-decoration-color: rgb(46 64 52 / 0.35);
 		text-underline-offset: 0.2em;
 		text-decoration-thickness: 1px;
 		font-weight: 500;
 		transition: text-decoration-color 0.15s ease, color 0.15s ease;
 	}
 
 	.blog-article .blog-prose a:hover {
-		color: #ff8a5c;
-		text-decoration-color: rgb(255 69 0 / 0.9);
+		color: #1b1916;
+		text-decoration-color: rgb(46 64 52 / 0.9);
 	}
 
 	.blog-article .blog-prose strong {
-		color: #fff;
+		color: #1b1916;
 		font-weight: 600;
 	}
 
 	.blog-article .blog-prose :not(pre) > code {
-		background: rgb(255 255 255 / 0.06);
-		border: 1px solid rgb(255 255 255 / 0.08);
+		background: rgb(27 25 22 / 0.05);
+		border: 1px solid rgb(27 25 22 / 0.1);
 		border-radius: 0.375rem;
 		padding: 0.1em 0.4em;
 		font-size: 0.875em;
-		color: #e6e6e6;
+		color: #1b1916;
 	}
 
 	.blog-article .blog-prose pre {
 		border-radius: 0.75rem;
-		border: 1px solid rgb(255 255 255 / 0.1);
-		background: rgb(255 255 255 / 0.025);
+		border: 1px solid rgb(27 25 22 / 0.2);
+		background: #1b1916;
 		padding: 1.25rem 1.4rem;
 		font-size: 0.9rem;
 		line-height: 1.7;
@@ -216,22 +219,22 @@ const otherArticles = allPosts
 	}
 
 	.blog-article .blog-prose blockquote {
-		border-left: 2px solid #ff4500;
+		border-left: 2px solid #2e4034;
 		padding-left: 1.25rem;
 		font-style: normal;
-		color: hsl(var(--muted-foreground));
+		color: #56524a;
 	}
 
 	.blog-article .blog-prose img,
 	.blog-article .blog-prose video {
 		border-radius: 0.75rem;
-		border: 1px solid rgb(255 255 255 / 0.1);
+		border: 1px solid rgb(27 25 22 / 0.1);
 		margin-top: 2rem;
 		margin-bottom: 2rem;
 	}
 
 	.blog-article .blog-prose hr {
-		border-color: rgb(255 255 255 / 0.1);
+		border-color: rgb(27 25 22 / 0.1);
 		margin-top: 2.75rem;
 		margin-bottom: 2.75rem;
 	}