From 93cdda609f05b62c9389210633748b11074a9f73 Mon Sep 17 00:00:00 2001 From: Nicholas Kissel Date: Wed, 12 Aug 2026 00:25:58 -0700 Subject: [PATCH 1/2] design: converge the site on the porcelain design-system canon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A full-site cohesion audit found the design canon (typography.tsx constants, editorial/* components) had zero adopters — every page hand-rolled its own labels, buttons, cards, and headings. This sweep converges the drift onto the existing canon: - Eyebrows: every section label now uses EYEBROW_CLASS (tracking-[0.18em]); new EYEBROW_ON_INK_CLASS sage variant for dark panels - Buttons: one metric (rounded-md px-4 py-2 text-sm font-medium) via the PRODUCT_HERO_* constants + new PRIMARY_INK_BUTTON_CLASS; the no-fill border-ink/20 ghost is retired; dead MarketingButton.tsx deleted - Shadows: outer drop shadows stripped from marketing cards, tiles, and diagrams (inset edge-lights kept; functional overlays exempt) - Cards: flat bg-white/55 fills (no white gradients), border-ink/10 hairlines, p-7; pricing tiers unified onto one light surface; CatalogCard gains a highlight (pine-frame) prop - Legacy: zinc/shadcn tokens retokenized to the ink/paper family; #FF4500 and rainbow hues replaced with theme tokens; blog prose now renders via Prose surface="paper" - Headings: hand-written tracking converged onto HERO_H1_CLASS / SECTION_H2_CLASS / PRODUCT_HERO_H1_CLASS (now with depth-wash) - Shells: blog gains paper-grain; dynamic-apps/workflows/cloud gain the shared closing CTA; section rhythm unified on py-16 md:py-32 - Shared kit: glow pill surface and deploy card/button kit promoted to single modules (glowPill.ts, deployKit.tsx) - Deleted dead dark-era files: STYLING_CONSISTENCY_TODO.md, ArticleHeader, ArticleLayout, LandingHeader, PlatformIcons, CodeEditor Verified: production build (421 pages), zero remaining hits for the retired patterns, browser pass over every touched page. Co-Authored-By: Claude Fable 5 --- CLAUDE.md | 1 + STYLING_CONSISTENCY_TODO.md | 98 --------- src/components/ArticleHeader.tsx | 30 --- src/components/ArticleLayout.tsx | 57 ----- src/components/BlogArticle.astro | 6 +- src/components/Footer.jsx | 10 +- .../cookbook/CookbookPageContent.tsx | 2 +- src/components/docs/DocsArticlePage.astro | 2 +- src/components/docs/DocsLanding.tsx | 7 +- src/components/marketing/NotFoundPage.tsx | 12 +- src/components/marketing/ProductHero.tsx | 6 +- .../marketing/agentos/AgentOSPage.tsx | 163 ++++++-------- .../marketing/agentos/AgentOSUseCasesPage.tsx | 19 +- .../marketing/compare/ComparePage.tsx | 36 ++-- .../marketing/compare/ComparisonTable.tsx | 6 +- .../marketing/components/CodeEditor.tsx | 17 -- .../marketing/components/MarketingButton.tsx | 44 ---- .../marketing/components/PlatformIcons.tsx | 203 ------------------ src/components/marketing/deployKit.tsx | 55 +++++ .../marketing/diagrams/AgentStack.tsx | 6 +- .../marketing/diagrams/ColdStartRace.tsx | 4 +- .../marketing/diagrams/ColdStartTimeline.tsx | 3 +- .../marketing/diagrams/ExecutionDensity.tsx | 2 +- .../diagrams/HarnessArchitecture.tsx | 6 +- .../marketing/diagrams/MemoryOverhead.tsx | 8 +- .../marketing/diagrams/TopologyCells.tsx | 2 +- .../marketing/dynamic-apps/AppsHero.tsx | 32 +-- .../marketing/editorial/CatalogCard.tsx | 10 +- .../marketing/editorial/PerimeterDiagram.tsx | 2 +- src/components/marketing/glowPill.ts | 6 + .../marketing/pricing/PricingPageClient.tsx | 138 ++++++------ .../marketing/registry/RegistryIconTile.tsx | 10 +- .../marketing/registry/RegistryPageClient.tsx | 15 +- .../marketing/sales/SalesPageClient.tsx | 3 +- .../sections/ActorsPrimitiveSection.tsx | 19 +- .../marketing/sections/AgentOSSection.tsx | 2 +- .../marketing/sections/BenchmarksSection.tsx | 2 +- .../marketing/sections/BuiltInFeatures.tsx | 2 +- .../marketing/sections/HostingSection.tsx | 84 ++------ .../sections/IntegrationsSection.tsx | 19 +- .../marketing/sections/OnPremSection.tsx | 7 +- .../marketing/sections/ProblemSection.tsx | 16 +- .../marketing/sections/RedesignedCTA.tsx | 4 +- .../marketing/sections/RedesignedHero.tsx | 6 +- .../marketing/startups/StartupsPage.tsx | 16 +- src/components/marketing/typography.tsx | 13 +- src/components/v2/Header.tsx | 22 +- src/components/v2/LandingHeader.tsx | 83 ------- src/components/v2/TypesenseSearch.tsx | 26 +-- src/layouts/BlogLayout.astro | 4 +- src/pages/actors.astro | 2 +- src/pages/agentos/registry/[slug].astro | 6 +- src/pages/blog/index.astro | 11 +- src/pages/cloud.astro | 2 + src/pages/dynamic-apps.astro | 2 + src/pages/enterprise.astro | 31 ++- src/pages/oss-friends.astro | 5 +- src/pages/support.astro | 15 +- src/pages/workflows.astro | 2 + 59 files changed, 454 insertions(+), 968 deletions(-) delete mode 100644 STYLING_CONSISTENCY_TODO.md delete mode 100644 src/components/ArticleHeader.tsx delete mode 100644 src/components/ArticleLayout.tsx delete mode 100644 src/components/marketing/components/CodeEditor.tsx delete mode 100644 src/components/marketing/components/MarketingButton.tsx delete mode 100644 src/components/marketing/components/PlatformIcons.tsx create mode 100644 src/components/marketing/deployKit.tsx delete mode 100644 src/components/v2/LandingHeader.tsx diff --git a/CLAUDE.md b/CLAUDE.md index a9caa8a..9196ad9 100644 --- a/CLAUDE.md +++ b/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`. diff --git a/STYLING_CONSISTENCY_TODO.md b/STYLING_CONSISTENCY_TODO.md deleted file mode 100644 index e966ff0..0000000 --- a/STYLING_CONSISTENCY_TODO.md +++ /dev/null @@ -1,98 +0,0 @@ -# Styling Consistency TODO - -Update all solution pages and static marketing pages to match the landing page styling. - -## High Priority Changes - -### 1. Feature Card Icon Treatment -**Landing Page (New):** Icon only with `text-zinc-500` or `text-zinc-600`, `mb-3` -**Solution Pages (Old):** Icon wrapped in box `flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-white/5` - -**Action:** Remove icon boxes, use plain icons with `text-zinc-500` color. - -### 2. Feature Card Title Styling -**Landing Page:** `text-sm font-normal text-white` or `text-base font-normal text-white` -**Solution Pages:** `text-sm font-medium uppercase tracking-wider text-white` - -**Action:** Remove `uppercase tracking-wider`, change `font-medium` to `font-normal`. - -### 3. Feature Card Title Margin -**Landing Page:** `mb-1` or `mb-2` -**Solution Pages:** `mb-4` - -**Action:** Standardize to `mb-1`. - -### 4. Description Text Color -**Landing Page:** `text-zinc-500` -**Solution Pages:** `text-zinc-400` - -**Action:** Standardize to `text-zinc-500`. - -### 5. Section Header Margin -**Landing Page:** `mb-2` on h2 -**Solution Pages:** `mb-3` on h2 - -**Action:** Standardize to `mb-2`. - ---- - -## Medium Priority Changes - -### 6. CodeBlock Standardization -- Window dots: `w-2.5 h-2.5` (not `w-3 h-3`) -- Border radius: `rounded-lg` (not `rounded-xl`) -- Header padding: `px-4 py-2` (not `px-4 py-3`) - -### 7. Badge Component -**Landing Page:** `px-2 py-0.5 text-xs` with motion wrapper -**Solution Pages:** `px-3 py-1 text-xs` no animation - -**Action:** Standardize to `px-3 py-1`. - -### 8. Border Variations -**Action:** Use `border-white/10` for section borders and cards, `border-white/5` for subtle internal elements only. - -### 9. Ecosystem/Integration Tags -**Landing Page:** `rounded-md border-white/5 px-2 py-1 text-xs` -**Solution Pages:** `rounded-full border-white/10 px-4 py-2 text-sm` - -**Action:** Standardize to `rounded-md border border-white/5 px-2 py-1 text-xs`. - -### 10. CTA Section Container -**Action:** Standardize to `max-w-3xl mx-auto px-6 text-center`. - ---- - -## Low Priority Changes - -### 11. Animation Stagger Delay -**Action:** Standardize to `idx * 0.1`. - -### 12. Grid Gap -**Action:** Standardize feature grids to `gap-8`. - -### 13. Text Selection (Global) -**Action:** Move `selection:bg-[#FF4500]/30 selection:text-orange-200` to `main.css`. - -### 14. Diagram/Visualization Containers -**Action:** Standardize to `rounded-lg border border-white/10 bg-black`. - -### 15. Status Badges -**Action:** Standardize to `rounded-full border border-[#FF4500]/20 bg-[#FF4500]/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-[#FF4500]`. - ---- - -## Files to Update - -- [ ] `AgentsPage.tsx` -- [ ] `WorkflowsPage.tsx` -- [ ] `GamesPage.tsx` -- [ ] `page.tsx` (solutions) -- [ ] `PricingPageClient.tsx` -- [ ] `GameServersPage.tsx` -- [ ] `GeoDistributedDBPage.tsx` -- [ ] `PerTenantDBPage.tsx` -- [ ] `CollaborativeStatePage.tsx` -- [ ] `AppGeneratorsPage.tsx` -- [ ] `UserSessionStorePage.tsx` -- [ ] `main.css` (global selection styles) diff --git a/src/components/ArticleHeader.tsx b/src/components/ArticleHeader.tsx deleted file mode 100644 index f2f9bbf..0000000 --- a/src/components/ArticleHeader.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import type { ArticleInfo } from "@/lib/articles/metadata"; -import { formatTimestamp } from "@/lib/formatDate"; - -export function ArticleHeader({ title, date, author, images }: ArticleInfo) { - return ( -
-
- {images.hero.alt} -
-
- - {/* Title */} -

- {title} -

- - {/* Date */} - -
- ); -} diff --git a/src/components/ArticleLayout.tsx b/src/components/ArticleLayout.tsx deleted file mode 100644 index bdffc72..0000000 --- a/src/components/ArticleLayout.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { ArticleHeader } from "@/components/ArticleHeader"; -import { OtherArticlesList } from "@/components/OtherArticlesList"; -import { Prose } from "@/components/Prose"; -import { TableOfContents } from "@/components/TableOfContents"; -import type { ArticleInfo } from "@/lib/articles/metadata"; -import type { ReactNode } from "react"; - -interface ArticleLayoutProps { - children: ReactNode; - info: ArticleInfo; -} - -export const ArticleLayout = ({ children, info }: ArticleLayoutProps) => { - return ( - <> - - - - {children} - - - - ); -}; diff --git a/src/components/BlogArticle.astro b/src/components/BlogArticle.astro index 9413359..9ac87ea 100644 --- a/src/components/BlogArticle.astro +++ b/src/components/BlogArticle.astro @@ -113,7 +113,7 @@ const otherArticles = allPosts )} - + @@ -154,7 +154,7 @@ const otherArticles = allPosts {otherArticles.length > 0 && (
-

Read next

+

Read next

{otherArticles.map((article) => ( @@ -170,7 +170,7 @@ const otherArticles = allPosts /> )}
- {article.category.name} + {article.category.name} diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 5b19c92..5bd3b3b 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -162,7 +162,7 @@ function SmallPrint() { {/* Product */}
-

Product

+

Product