The brief, compressed
Waymeet's core idea is work materializing while you talk. The product stance is unusually concrete — by the time the meeting ends, the deliverables exist — and the strongest sales argument is a pair of numbers: what the meeting cost in AI (under two dollars) versus what it cost in payroll (a lot more). So the design had two jobs: show work appearing in real time, and make the economics feel physical.
Everything else on the site is in service of those two jobs.
Design direction: the candlelight ledger
Most AI-product sites in 2026 are cold: blue-black backgrounds, neon gradients, glass cards. Waymeet's promise is warm — a room where things get finished. So the palette starts from warm near-black ink and ivory paper, like a well-lit study after hours, and spends its color budget on three accents with fixed meanings:
ink — the room
ivory — the words
gold — the money
phosphor — the agents
coral — the counter-argument
Accents carry meaning, not decoration: gold always marks economics, phosphor always marks agent activity, coral always marks challenge (the Devil's Advocate, the live dot, the payroll alarm). Once a color has a job, readers learn it without being told.
Typography
The trick that makes the headlines feel owned: the second line of every major heading switches to Fraunces italic in gold. One consistent gesture, used everywhere, becomes a brand.
The monospace face is doing the most conceptual work. Waymeet's signature object is the receipt — the AI cost next to the payroll cost — so everything ledger-like on the site (costs, timers, agent names, section labels) is set in mono, as if printed by the same machine.
The centerpiece: a choreographed meeting
The homepage hero is followed by a simulated live meeting: transcript lines type out on the left while finished artifacts assemble on the right, a specialist is forged mid-conversation and dissolves when its job is done, and a receipt at the bottom ticks up — AI cost in cents, payroll cost in real money.
It's not a video. It's a ~200-line timeline engine over plain DOM nodes: each scenario is a script of timed steps, and each step type has one animation.
// a scenario is just a list of timed steps { t: 4400, art: { t: "CRM record — Acme Corp", dur: 5200 } }, { t: 8200, forge: { name: "Security Questionnaire Triager" } }, { t: 11500, say: ["ACME — VP OPS", "That'd be me and our CISO."] }
Three scenarios rotate — a sales call, a board prep, a wedding-venue tour — because the breadth is the message: this isn't a tool for one department. Writing the sim as data made adding scenarios a copywriting task, not an engineering one.
Motion system
- One easing curve everywhere. A single spring-like cubic-bezier (0.16, 1, 0.3, 1) for reveals, hovers, and the sim. Consistent physics reads as one hand.
- Reveal choreography, not reveal effects. Elements fade up on scroll with staggered delays set per-element (--d custom property), so each section unfolds in a deliberate order.
- Ambient, not busy. The hero canvas draws drifting motes that link into faint constellations — words condensing into structure. It pauses offscreen and disables entirely for reduced-motion users.
- Film grain over everything. A fixed, animated SVG-noise overlay at 5% opacity. It kills the "flat vector" feel of dark sites for almost zero cost.
- The dissolve is the story. The specialist chip's vanish animation (blur + drift) is the product's most poetic claim — forged in seconds, gone when done — expressed in 4 lines of CSS.
Craft constraints
The site is plain HTML, one shared stylesheet, and vanilla JavaScript. No framework, no build step, no dependencies beyond three font families. That was a deliberate constraint: every technique on the site is viewable in full with view-source, which suits a guide page like this one — and it loads fast because there's nothing to load.
Structure: five pages sharing assets/main.css (design tokens, components) and assets/main.js (nav, reveals, canvas). Page-specific styling and behavior live inline on each page, so nothing ships to pages that don't use it.
Copy discipline
The positioning brief bans the entire 2024-AI-startup lexicon and demands specific, verifiable numbers over adjectives. That constraint did more for the design than any visual choice: when the hype vocabulary is off the table, you have to write "the follow-up email is in the outbox" — and concrete sentences suggest concrete visuals. The receipt, the forge card, the side-by-side disagreement: each one is a sentence from the brief turned into furniture.
Accessibility & performance notes
- prefers-reduced-motion disables the grain, the canvas, the typewriter, and collapses reveals to simple fades.
- Animated set pieces (sim, canvas) start only when scrolled into view and stop when they leave it.
- The sim is described with aria-labels as a single image; screen readers get the claim without the churn.
- Fonts load with display=swap and the palette holds up in system fallbacks (Georgia / Arial / Consolas).
- No images anywhere on the site — every visual is CSS, SVG, or canvas. The heaviest asset is the type.
- One bug worth passing on: backdrop-filter on a fixed header makes the header the containing block for any fixed descendants — which silently breaks a fixed-position mobile menu inside it. The fix is to put the blur on a ::before pseudo-element instead. Pseudo-elements aren't ancestors, so the menu keeps the viewport as its frame of reference.
What to steal
If you take three things: give each accent color a fixed meaning; build your hero demo as a data-driven timeline instead of a video (it stays editable forever); and pick one repeatable typographic gesture — ours is the gold italic second line — and use it with total consistency.
Designed and built by Claude (Anthropic), July 2026, working autonomously from Waymeet's positioning brief. The humans supplied the product, the stats, and the taste constraints; the type, palette, motion, and code are the model's. Feel free to learn from it — that's why this page exists.