What Manifold.md looks like and why — pinned to a single page so the marketing surfaces stay coherent as they grow.
Within twenty-four months, the agent (Claude, ChatGPT, etc.) replaces the browser tab as the dominant work surface. When that day arrives, the most valuable position in B2B software is the memory layer beneath the agent — the substrate that knows what a company has done, decided, learned, and stored. Manifold is that layer. We connect to where a company's memory already lives, build an entity graph that knows what exists where, and expose it through MCP so any agent — starting with Claude — can answer "what did we decide about Meridian" or{" "} "what's our Q3 revenue by region" with a grounded, cited, permission-aware reply.
Everything visual on these pages flows from that bet. A classical product page
in its bones, because we are infrastructure and infrastructure earns the right
to be unhurried. Real third-party logos in the diagrams, because we federate
across them rather than replace them. A single piece of alive, AI-native energy —
the rainbow CTA — because something on the page has to say this is new,
and the rest is allowed to stay still. An editorial colophon at the bottom,
because Manifold is also a publication of conventions (agents.md, the notebook, the open spec), and a serious
publication signs its work.
One serif family at display and text weight, one clean sans for UI, one mono for code and small labels. Pages of body copy should read like a well-set product blog — closer to Medium than to a SaaS landing page.
Source Serif 4 — display & body. (GT Super if licensed.)
Inter — UI, captions, labels.
JetBrains Mono — code, mono section labels, the .md extension.
Manifold .md
Serif name, mono extension. Both Ink. The .md is part of the brand.
Three sources of color, each with a clear job. Neutrals carry 95% of the page. Brand strokes live inside diagrams. The rainbow gradient appears on two CTAs and nowhere else.
Background → #0E0E0C. Text → #E5E2DA. Brand strokes are auto-lifted for legibility (see below). Toggle in the colophon, or via the Tweaks panel.
Used as stroke color on dashed lines in the three diagrams, and as the left-rule color on Q&A blocks where one source dominates the answer. Never as fill, never as text color.
Two button styles. The rainbow is the brand's only piece of alive, AI-native energy on an otherwise still page — so it appears at most twice per page, at the moments where conversion happens.
Solid Ink fill, animated rainbow gradient border. 10-second cycle, 6 on hover. Appears on the homepage hero, the homepage final CTA, the Team plan, and the pricing final CTA. Nowhere else.
Ink outline, no animation. Used on non-recommended plans, secondary actions, anywhere the rainbow would dilute. Same arrow, same word, lower volume.
Inter, Graphite, 1px underline at 30%. Hovers to 100%. Used for the secondary action under primary CTAs.
Two continuously animating things on the page. Both slow. Both calm. Everything else is still.
2.5s cycle, linear easing. Each line takes the stroke color of the source it represents. The eye should read it like a slow conveyor or a circulatory system — never a notification, never a loading spinner.
10s ease-in-out, accelerates to 6s on hover. #FBBF24 → #F472B6 → #A78BFA → #60A5FA → #FBBF24.
Dashes resolve to solid lines at 55% opacity. The CTA gradient freezes to a static violet → blue. The page remains fully functional and visually intact in stillness.
No transforms, no scale-on-hover, no scroll-jacking, no parallax, no scroll-triggered reveals. Color shifts only. The page scrolls like a document.
Text column: 680px, left-aligned. Diagram column: 960px max, allowed to break out. Source grid: 720px. Mobile: 92% viewport width.
Section padding: 48px top & bottom (mobile 36px). Hairline rules between sections. Diagrams sit 28px from the surrounding copy, left-aligned with the text column.
Everything left-aligned. The final CTA is the only centered block — one line of display serif, one centered button, one mono reassurance line.
Inter 12px medium, uppercase, +0.08em tracking. Em-dash subtitle in sentence-case Graphite.
"Did Sarah reply to the Acme contract email?"
Yes, on Friday at 4:12pm. She asked for a 14-day extension on the SLA clause.
Italic serif question, sans-serif answer in Graphite, 2px left rule in the dominant source's brand color. Neutral rule (Ink at 30%) when the answer pulls from multiple sources.
Manifold.md is set in Source Serif 4, Inter, and JetBrains Mono.
© Manifold.md, 2026.
The one place the editorial register peeks through. Italic mono, Graphite at 85%, several short lines. A publisher's mark on the last page of a book.
The page survives by what it refuses as much as by what it does. If any of these creep in during implementation, they are removed.
What follows is the original brand document, reproduced here so this page stands alone. The marketing surfaces above quote a register; this section defines it.
Manifold.md has two registers. The first is editorial — the long-arc voice of
a publication. It lives in the notebook, on the /agents.md page, in the colophon, and in any future
printed artifact. The second is the classical product page — closer to Linear,
Vercel, Resend, Anthropic's own marketing pages — used on the homepage, pricing,
and any conversion-oriented surface.
The homepage and pricing page belong to the second register. They quote{" "} the editorial register only at the colophon — a deliberate publisher's mark at the bottom of the page, the way a small italic line appears on the last leaf of a book.
Plain over technical. Calm over urgent. Those are the two sentences pinned above the writer's desk. Every line on the page passes both filters before it is allowed to stay.
Plain over technical means the page never reaches for jargon when an ordinary word will do. "Manifold makes Claude fluent in your company" says what the product does. "A queryable memory layer for modern companies"{" "} says nothing.
Calm over urgent means the page never raises its voice. No countdown timers, no{" "} limited beta, no spots filling fast, no animation that telegraphs hurry. The dashed-line diagrams animate, the rainbow CTA pulses, but both move on a 2.5-second and 10-second cadence respectively — slow enough to feel like watching a circulatory system rather than a notification.
Banned words. The following do not appear on any marketing surface: leverage, unlock, empower, revolutionize, seamless, cutting-edge, next-generation, AI-powered, transform, supercharge. They are not banned because they are wrong — they are banned because they are the words every competitor reaches for, and reaching for them is how a brand becomes interchangeable with every other brand in its category.
The word "AI" appears at most twice on the homepage. Currently zero. Keep it that way. The product is about Claude becoming fluent in a company; the abstraction "AI" is the wrong frame.
What the marketing pages refuse is as important as what they include. None of the following appear, ever:
The pricing page makes one deliberate exception: a two-column mono "Included monthly / Beyond that" table. It is not a comparison grid — it has no checkmarks, no crosses, no "most popular" badge, and it compares one plan against itself, not against rivals.
One serif family at display and text weight, paired with one clean sans for UI
and one mono for code. The serif carries the page; the sans handles buttons,
captions, and section labels; the mono handles code, the .md in the wordmark, and small uppercase
tracked labels.
The reference family is GT Super (Display semibold for headlines, Text regular for body). The implemented fallback is{" "} Source Serif 4, free via Google Fonts, used at the same weights and sizes. The hierarchy holds under either family.
Display headlines — semibold, hero at 64–72px desktop / 40px
mobile, section heads at 36–40px / 28px mobile. Letter-spacing −0.02em on hero,
−0.015em on heads. Generous balance with text-wrap: balance.
Body — 19px desktop / 17px mobile, regular weight, 1.65 line-height, 1.4em between paragraphs. Pages of body copy should read like a well-set product blog.
UI, captions, mono labels, code — Inter at 14–16px for buttons and captions; Inter 12px medium with +0.08em tracking and uppercase for section labels; JetBrains Mono 13–15px for code and the colophon.
The wordmark — Manifold.md{" "}
— combines the serif display name with the mono extension. Both Ink. The{" "}
.md{" "}
is not a decoration — it is part of the brand. Markdown is the medium the product
operates in; the extension belongs in the name.
One — Page chrome. Ink #0E0E0C on Paper{" "}
#FAFAF7.
Graphite #5A5A57{" "}
for secondary text. Hairline rules at Ink 12% opacity. This is 95% of the page.
Calm, editorial, classical.
Two — Real third-party logos. The logos of every connected tool appear in the diagrams and the sources grid as literal brand logos, pulled from each company's published brand-asset kit, in their official colors. Never recreated, never tinted, never stylized, never enclosed in a brand-shaped container. The logos do the color work; we don't abstract them into icons or color swatches.
Three — The animated rainbow CTA. The brand's single signature accent. The primary "Open in Claude" buttons use an animated gradient border — amber → pink → violet → blue → amber — flowing on a 10-second cycle, ease-in-out, infinite. The inner button is solid Ink with Paper text. The border is the only piece of alive, AI-native energy on an otherwise still page. It appears at most twice per page, at the moments where conversion happens. Nowhere else gets a gradient.
Brand strokes inside diagrams. The animated dashed lines flowing from each source into the Manifold node take the dominant brand color of that source — Gmail Red, Drive Green, Notion Black, Slack Aubergine, and so on. This is the only place where we extract a single color from a multi-color logo and use it as a stroke. The full table is above.
Dark mode. Background flips to{" "}
#0E0E0C;
text to #E5E2DA.
Brand strokes whose source color is too dark to read on dark Paper (Notion,
GitHub, Slack, Postgres) are auto-blended 62% toward Paper. Brand identity is
preserved; contrast is gained. The rainbow palette reads beautifully against
both backgrounds and stays identical.
Single column, 680px wide, left-aligned. Diagrams allowed to break out to 960px. The source grid sits at 720px. Mobile drops to 92% viewport width, hero to 40px, body to 17px.
Section spacing: 48px top and bottom on desktop (36px mobile). Hairline rules between sections, except where a diagram does the dividing. Diagrams sit 28px from the surrounding copy and align flush-left with the text column — they do not center.
Alignment is a brand decision. Everything left-aligned. The final CTA section is the only centered block on the page — one line of display serif, one centered button, one mono reassurance line. The asymmetry of left everything and a single centered ending is part of the rhythm.
Two continuously animating elements, both slow. The dashed lines in the diagrams flow inward at 2.5 seconds per cycle. The rainbow CTA border flows at 10 seconds, accelerating to 6 on hover. Everything else is still.
No scroll-jacking. No parallax. No scroll-triggered reveals. No fade-in-on-view section animations. The page scrolls like a document.
Hover. Color shifts only, on interactive elements. No transforms, no scale, no rotation, no shadow that grows. A button is a button; it does not jump when you point at it.
Reduced motion. Under{" "}
prefers-reduced-motion: reduce,
all infinite animations stop. Dashed lines resolve to solid strokes at 55%
opacity. The rainbow gradient freezes to a static violet → blue. The page
remains fully legible and visually intact in stillness — calm in motion, calm
without it.
Three diagrams carry the visual identity of the marketing pages. Together they define what Manifold looks like.
The hero flux diagram. A column of real source logos on the left, each emitting a slowly flowing dashed line in its brand color, all converging into a node labeled Manifold.md. From that node, one thicker Ink-colored dashed line flows further right to the Claude wordmark. The eye reads it in two seconds: tools on the left, Manifold in the middle, Claude on the right.
The entity-resolution diagram. Four corners around a central
node. Each corner holds a source logo and the name that source uses for the
same project: Notion's "Meridian," Linear's{" "}
"Q3-2026-Customer-Portal," Slack's{" "}
#meridian-team,
Drive's "2026 — Customer Portal Initiative." Four dashed lines in the
four brand colors converge into the center node:{" "}
Project Meridian.
The diagram makes the argument before the prose does.
The "How it works" track. Three nodes in a horizontal row: Install, Connect, Ask. Dashed lines between them animate left to right. The three nodes themselves do not move.
What the diagrams refuse. No shadows, no gradients (the only color is the source brand stroke), no hover states beyond accessibility tooltips, no scroll-triggered behavior, no play/pause controls. They animate continuously, calmly, regardless of where the user is on the page.
Third-party logos are the heart of the marketing surfaces' visual identity. They appear in all three diagrams and in the sources grid. Always pulled from each company's official brand-asset kit, always in official colors, sized 20–32px depending on context. Never recreated, never tinted, never given a custom container.
The Claude wordmark appears in two diagrams — the hero flux diagram and the "How it works" track — using the official Anthropic-published wordmark in full color, never recolored.
Utility iconography — arrows, the speech bubble in the "How it works" diagram — uses a single line-icon family (Phosphor or Lucide), 1.5px stroke, Ink color. Never colorized. No illustration beyond this. No 3D, no emoji, no isometric scenes, no decorative SVG flourishes.
The single place on the marketing pages where the editorial register peeks
through. Italic mono, 12px, Graphite at 85% opacity, several short lines: the
typefaces used, a sentence about the wordmark, a note that the product is
closed-source while the agents.md convention is open, a signature, a year.
A publisher's mark on the last page of a book. Nothing else on the page
quotes this register — that is what makes it work.
Color contrast meets WCAG AA on all body text in both light and dark modes.
All diagrams carry descriptive aria-label text. Source logos carry{" "}
title{" "}
attributes for screen readers and tooltips on hover.{" "}
prefers-reduced-motion{" "}
disables every infinite animation. The page is fully legible without
JavaScript-driven motion.
Classical product page in its bones.
The editorial brand only at the colophon.
Pinned above the designer's desk. If a section feels precious, it is wrong for this surface. If a section feels like a SaaS template, also wrong. The midpoint — confident, restrained, calmly classical, with the third-party universe of tools breathing color into otherwise quiet typography — is the target.
The brand document above is intact. Five small decisions were made while building the marketing pages, each in service of the same two-line filter.
One. The rainbow CTA border grew from the spec's 1.5px to 3px. At 1.5px the gradient read as a hairline glow more than a brand signature. Configurable per page via the Tweaks panel.
Two. A second CTA style was introduced — the{" "} quiet CTA: solid Ink outline, no animation. Used on non-recommended plans (Solo, Company). The rainbow stays meaningful by not being everywhere.
Three. Dark-mode legibility was added for dashed-line strokes and Q&A accents. Very dark brand colors (Notion, GitHub, Slack, Postgres) are blended 62% toward Paper in dark mode. Mid- and light-tone brands pass through unchanged. Brand identity is preserved; contrast is gained.
Four. The hero flux diagram became a vertical column of 8 sources with curved bezier flows into Manifold, rather than the spec's left-arc of 15. Eleven logos in an arc was visually crowded at the page's actual diagram width; eight in a column reads cleanly and still says your tools on the left.
Five. A pricing page was added (/pricing). It uses one new pattern — a mono two-column table for{" "} Included monthly / Beyond that — which is a deliberate exception to the "no pricing tables" rule. Two columns, no checkmarks, no comparison grid.