From 403725b970e76033d8971f52ce8a742d3972b239 Mon Sep 17 00:00:00 2001 From: Hongming Wang Date: Thu, 30 Apr 2026 22:42:42 -0700 Subject: [PATCH] feat(docs): align doc.moleculesai.app chrome with landing's warm-paper design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Brings the docs site in visual parity with moleculesai.app so docs, marketing, and the canvas read as one product. Five focused changes inside the existing fumadocs shell — no MDX or content touched, no runtime/build dep changes: - global.css: override fumadocs @theme tokens with the warm-paper palette (#fafaf7 bg, #15181c ink, #3b5bdb governance blue, #efece4 muted, #e6e2d8 border). Dark mode keeps fumadocs' neutral defaults so dark-pref readers still get a readable docs site. - layout.tsx: swap Inter → Geist (sans) + JetBrains Mono (code), matching the landing's font stack. Wired through @theme so Tailwind's font-sans / font-mono utilities pick them up. - layout.config.tsx: brand the topbar — inline Molecule logo SVG + "Molecule AI · DOCS" lockup, plus three external links to the rest of the surface (Platform → app, Marketplace → market, Landing → www) and the org GitHub. Mirrors the landing's collapsed nav. - (home)/page.tsx: replace the stock fumadocs landing with a hero-style page matching the landing — statusbar strip, "Phase 35 Marketplace public beta" eyebrow, the same shimmering h1 copy, three quick-start lane cards (Build a workspace / Run an organisation / Publish to the Marketplace) pointing into the docs tree. Build is clean (106 static pages still generate). Existing /docs/* pages inherit the new tokens via fumadocs' DocsLayout, so the entire site shifts to the warm-paper aesthetic without touching MDX. Co-Authored-By: Claude Opus 4.7 (1M context) --- app/(home)/page.tsx | 113 ++++++++++++++++++++++++++++++++++-------- app/global.css | 29 +++++++++++ app/layout.config.tsx | 45 ++++++++++++++++- app/layout.tsx | 18 +++++-- 4 files changed, 179 insertions(+), 26 deletions(-) diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx index f5a4fb9..64982c1 100644 --- a/app/(home)/page.tsx +++ b/app/(home)/page.tsx @@ -1,29 +1,100 @@ import Link from 'next/link'; +// Three quick-start lanes — keeps the home page from being a wall of text +// and lets builders, operators, and integrators each find their entry +// point in one click. +const lanes = [ + { + kicker: '01', + title: 'Build a workspace', + body: 'Pick a runtime template (Claude Code, LangGraph, CrewAI, Hermes, …), wire your tools, and ship.', + href: '/docs/workspace', + cta: 'Workspace guide →', + }, + { + kicker: '02', + title: 'Run an organisation', + body: 'Topology, A2A, three-tier memory, governance — the platform layer that ties multi-agent teams together.', + href: '/docs/platform', + cta: 'Platform reference →', + }, + { + kicker: '03', + title: 'Publish to the Marketplace', + body: 'Plugins, agents, and org bundles ship as signed manifests. Authors keep 80%, paid via Stripe Connect.', + href: '/docs/marketplace', + cta: 'Author guide →', + }, +]; + export default function HomePage() { return ( -
-

- Molecule AI -

-

- Build and run multi-agent organisations. Templates, plugins, channels, - and the runtime that ties them together — documented end to end. -

-
- - Read the docs - - - View on GitHub - +
+ {/* Statusbar — mirrors the landing's "All systems · status.* · phase" strip */} +
+ + + All systems · status.moleculesai.app + + Phase 33 shipped · Phase 35 Marketplace public beta
+ + {/* Hero */} +
+
+ + Documentation +
+

+ The operating system for{' '} + AI agent organizations. +

+

+ Build and run multi-agent organisations the way you'd staff a company. + Templates, plugins, channels, runtimes, governance — documented end + to end. +

+
+ + Read the docs + + + View on GitHub + +
+
+ + {/* Three lanes */} +
+
+ {lanes.map((lane) => ( + +
+ {lane.kicker} +
+

{lane.title}

+

+ {lane.body} +

+
+ {lane.cta} +
+ + ))} +
+
); } diff --git a/app/global.css b/app/global.css index 50b3bc2..b4ee06e 100644 --- a/app/global.css +++ b/app/global.css @@ -1,3 +1,32 @@ @import 'tailwindcss'; @import 'fumadocs-ui/css/neutral.css'; @import 'fumadocs-ui/css/preset.css'; + +/* Warm-paper light theme — aligned with the landing page (moleculesai.app). + Tokens map fumadocs' @theme variables onto our brand palette so docs, + marketing, and the canvas read as one product. */ +@theme { + --font-sans: var(--font-geist), ui-sans-serif, system-ui, sans-serif; + --font-mono: var(--font-mono), ui-monospace, SFMono-Regular, monospace; + + --color-fd-background: #fafaf7; + --color-fd-foreground: #15181c; + --color-fd-muted: #f3f1ec; + --color-fd-muted-foreground: #5a5e66; + --color-fd-popover: #ffffff; + --color-fd-popover-foreground: #15181c; + --color-fd-card: #ffffff; + --color-fd-card-foreground: #15181c; + --color-fd-border: #e6e2d8; + --color-fd-primary: #3b5bdb; + --color-fd-primary-foreground: #ffffff; + --color-fd-secondary: #efece4; + --color-fd-secondary-foreground: #15181c; + --color-fd-accent: #efece4; + --color-fd-accent-foreground: #15181c; + --color-fd-ring: #3b5bdb; + --color-fd-overlay: hsla(0, 0%, 0%, 0.18); +} + +/* Dark mode keeps fumadocs' neutral defaults — readers expect docs sites + to honor their system preference, and our landing only ships light. */ diff --git a/app/layout.config.tsx b/app/layout.config.tsx index 9e29374..8fd60ff 100644 --- a/app/layout.config.tsx +++ b/app/layout.config.tsx @@ -1,7 +1,50 @@ import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared'; +// Molecule logo — the same triangle-of-nodes mark used on moleculesai.app. +// Inlined as a JSX element so fumadocs renders it in the topbar without a +// separate asset request. +const MoleculeLogo = ( + +); + export const baseOptions: BaseLayoutProps = { nav: { - title: 'Molecule AI', + title: ( + + {MoleculeLogo} + Molecule AI + + Docs + + + ), + url: 'https://doc.moleculesai.app', }, + links: [ + { text: 'Platform', url: 'https://app.moleculesai.app', external: true }, + { text: 'Marketplace', url: 'https://market.moleculesai.app', external: true }, + { text: 'Landing', url: 'https://www.moleculesai.app', external: true }, + ], + githubUrl: 'https://github.com/Molecule-AI', }; diff --git a/app/layout.tsx b/app/layout.tsx index 90f4d40..25d5217 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,10 +1,16 @@ import './global.css'; import { RootProvider } from 'fumadocs-ui/provider/next'; -import { Inter } from 'next/font/google'; +import { Geist, JetBrains_Mono } from 'next/font/google'; import type { ReactNode } from 'react'; -const inter = Inter({ +const geist = Geist({ subsets: ['latin'], + variable: '--font-geist', +}); + +const jetbrains = JetBrains_Mono({ + subsets: ['latin'], + variable: '--font-mono', }); export const metadata = { @@ -19,8 +25,12 @@ export const metadata = { export default function Layout({ children }: { children: ReactNode }) { return ( - - + + {children}