molecule-ai/docs
35
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs): align doc.moleculesai.app chrome with landing's warm-paper design

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Hongming Wang 2026-04-30 22:42:42 -07:00
parent 75d85a6ae2
commit 403725b970
4 changed files with 179 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
app/(home)/page.tsx
View File

@ -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 (
<main className="flex flex-1 flex-col items-center justify-center px-6 py-24 text-center">
<h1 className="mb-4 text-5xl font-bold tracking-tight sm:text-6xl">
Molecule AI
</h1>
<p className="mb-8 max-w-2xl text-lg text-fd-muted-foreground">
Build and run multi-agent organisations. Templates, plugins, channels,
and the runtime that ties them together — documented end to end.
</p>
<div className="flex flex-wrap items-center justify-center gap-3">
<Link
href="/docs"
className="rounded-md bg-fd-primary px-5 py-2.5 text-sm font-medium text-fd-primary-foreground transition-colors hover:opacity-90"
>
Read the docs
</Link>
<Link
href="https://github.com/Molecule-AI/molecule-monorepo"
className="rounded-md border border-fd-border px-5 py-2.5 text-sm font-medium transition-colors hover:bg-fd-muted"
>
View on GitHub
</Link>
<main className="flex flex-1 flex-col">
{/* Statusbar — mirrors the landing's "All systems · status.* · phase" strip */}
<div className="border-b border-fd-border bg-fd-muted px-6 py-1.5 text-[11px] font-mono text-fd-muted-foreground flex flex-wrap justify-between gap-4">
<span>
<span className="inline-block size-1.5 rounded-full bg-[#2f7a4d] align-middle mr-1.5" />
All systems · status.moleculesai.app
</span>
<span>Phase 33 shipped · Phase 35 Marketplace public beta</span>
</div>
{/* Hero */}
<section className="px-6 py-20 sm:py-28 max-w-6xl mx-auto w-full">
<div className="text-[11px] font-mono uppercase tracking-[0.08em] text-fd-muted-foreground mb-4 flex items-center gap-2">
<span className="inline-block size-1.5 rounded-full bg-[#c0532b]" />
Documentation
</div>
<h1 className="text-5xl sm:text-6xl font-semibold tracking-tight leading-[1.05] mb-5 max-w-3xl">
The operating system for{' '}
<span className="text-[#3b5bdb]">AI agent organizations.</span>
</h1>
<p className="text-lg text-fd-muted-foreground max-w-2xl leading-relaxed mb-8">
Build and run multi-agent organisations the way you'd staff a company.
Templates, plugins, channels, runtimes, governance — documented end
to end.
</p>
<div className="flex flex-wrap items-center gap-3">
<Link
href="/docs"
className="rounded-md bg-fd-primary px-5 py-2.5 text-sm font-medium text-fd-primary-foreground transition hover:opacity-90"
>
Read the docs
</Link>
<Link
href="https://github.com/Molecule-AI"
target="_blank"
rel="noopener noreferrer"
className="rounded-md border border-fd-border px-5 py-2.5 text-sm font-medium transition hover:bg-fd-muted"
>
View on GitHub
</Link>
</div>
</section>
{/* Three lanes */}
<section className="px-6 pb-24 max-w-6xl mx-auto w-full">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{lanes.map((lane) => (
<Link
key={lane.kicker}
href={lane.href}
className="group rounded-lg border border-fd-border bg-fd-card p-6 transition hover:border-fd-foreground hover:-translate-y-0.5"
>
<div className="text-[11px] font-mono text-[#3b5bdb] mb-3 tracking-[0.08em]">
{lane.kicker}
</div>
<h3 className="text-base font-semibold mb-2">{lane.title}</h3>
<p className="text-sm text-fd-muted-foreground leading-relaxed mb-4">
{lane.body}
</p>
<div className="text-xs font-mono text-fd-foreground group-hover:text-[#3b5bdb] transition">
{lane.cta}
</div>
</Link>
))}
</div>
</section>
</main>
);
}

29
app/global.css
View File

@ -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. */

45
app/layout.config.tsx
View File

@ -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 = (
<svg
width="22"
height="22"
viewBox="0 0 28 28"
fill="none"
aria-hidden="true"
>
<circle cx="14" cy="6" r="2.5" fill="currentColor" />
<circle cx="6" cy="20" r="2.5" fill="currentColor" />
<circle cx="22" cy="20" r="2.5" fill="currentColor" />
<circle
cx="14"
cy="14"
r="1.6"
fill="none"
stroke="currentColor"
strokeWidth="1.2"
/>
<line x1="14" y1="8.5" x2="14" y2="12.6" stroke="currentColor" strokeWidth="1.2" />
<line x1="8" y1="18.5" x2="12.7" y2="14.8" stroke="currentColor" strokeWidth="1.2" />
<line x1="20" y1="18.5" x2="15.3" y2="14.8" stroke="currentColor" strokeWidth="1.2" />
</svg>
);
export const baseOptions: BaseLayoutProps = {
nav: {
title: 'Molecule AI',
title: (
<span className="flex items-center gap-2 font-semibold tracking-tight">
{MoleculeLogo}
<span>Molecule AI</span>
<span className="text-xs uppercase tracking-[0.08em] text-fd-muted-foreground font-mono">
Docs
</span>
</span>
),
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',
};

18
app/layout.tsx
View File

@ -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 (
<html lang="en" className={inter.className} suppressHydrationWarning>
<body className="flex flex-col min-h-screen">
<html
lang="en"
className={`${geist.variable} ${jetbrains.variable}`}
suppressHydrationWarning
>
<body className="flex flex-col min-h-screen font-sans">
<RootProvider>{children}</RootProvider>
</body>
</html>