/guide
This site was designed and coded end to end by Claude, from a one-page brief. Here is the approach, so you can reproduce it.
A The approach
The brief fit on one page: value proposition, Why, What, How, Reason to believe. Each section became a page (Why, The platform, How it works, References), linked to the others, with a landing page that whets the appetite for all of them.
“Signal in the noise”: Apaia’s job is to turn the information flood into sharp briefings. The aesthetic follows — warm paper and ink like an intelligence memo, ultramarine for the signal, editorial typography (Fraunces for headings, Instrument Sans for text, a mono for metadata).
A single stylesheet carries the whole site: CSS variables, card grids, alternating light and dark bands, reused components (kicker, quote, stat, chip, mockups). Every page assembles these bricks — that is what creates the coherence.
The home hero is a canvas: erratic particles (the noise) pass through a slit and align into clean lines (the signal) — the value proposition, literally drawn. Elsewhere: scroll reveals via IntersectionObserver, a pipeline that fills as you scroll, a topics marquee. Everything respects prefers-reduced-motion.
After each “finished” version, a fine-toothed-comb review in the browser, page by page and on mobile: typographic hierarchy, vertical rhythm, contrast, hover states, link consistency. Each pass produced its list of fixes before sign-off.
One folder per language (/fr, /en), same design system, a FR/EN switcher in the header, hreflang tags on every page, and a root page that redirects to the visitor’s language (saved choice first, browser language otherwise). Adding a language = duplicating a folder and translating — nothing else changes.
The site is 100% static — HTML pages, one CSS file, one JS file, no dependencies, no build. It deploys as-is on Netlify: drag and drop the folder on app.netlify.com, or netlify deploy --prod from the command line. Clean routes (/guide) work natively.
B Tech sheet
No build, no dependencies: the robustness and speed of a pure static site. Fonts are the only external call.
Colors, typography, spacing and components defined once in styles.css and reused across all pages, in every language.
2D canvas particles for the hero, scroll reveals, animated pipeline — under 250 lines of JavaScript in total.
French and English today; any additional language is one more folder plus a link in the switcher. The visitor’s choice is remembered.
All animations are disabled when the system requests reduced motion; AA contrast on body text; visible keyboard focus.
A one-page brief as input; structure, art direction, copy, code, translations and iterations by Claude (Anthropic).