Rebuild nimsforest.com — emoji rebrand (6 pages)

Type: feature · Area: website · Priority: high
Attached: nimsforest-brand-kit.zip (brand guide + logo files) and
design_handoff_nimsforest_rebrand.zip (the design reference + full build spec)

Summary

Replace the current nimsforest.com with the approved rebrand: an emoji-based identity and six
pages — Home, Growth Engine Sprint, Strategy Activation Sprint, Integrations, Whitepaper,
Get started.

Read README.md in the design handoff zip first. It is self-sufficient: every colour,
type size, screen, interaction, and the exact construction of the two diagrams. The
Nimsforest.dc.html beside it is a design reference, not code to port — rebuild it in our
stack with our own patterns. Static generation preferred; this is a marketing site, not an app.

Attachments — what is in each zip

nimsforest-brand-kit.zip — the brand, for anyone touching design or copy

Nimsforest Brand Guide.html — the guide (open in a browser; print to PDF to share).
Keep doc-page.js and support.js beside it or it will not render.
Nimsforest Brand Guide.docx — same content, editable, no images.
nimsforest-logo*.svg, nimsforest-mark*.svg — the lockups. README.md says which to use when.
emoji/noto-*.svg — the four brand glyphs as licensed artwork.
LICENSE.txt — Noto Emoji, Apache 2.0. Ships with the artwork wherever it goes.

design_handoff_nimsforest_rebrand.zip — the build

README.md — the implementation spec. Start here.
Nimsforest.dc.html + support.js — the design reference. Open from the folder, not alone.
Nimsforest-Whitepaper.pdf — linked from the whitepaper page.

The emoji rule — gets this wrong easily

Every glyph has a fixed meaning and the meanings are load-bearing copy. Do not substitute
lookalikes.

Glyph	Unicode	Means
💧	U+1F4A7	a drop — one thing an outside system reports
🌊	U+1F30A	the river — every drop flowing in as one stream
🌳	U+1F333	the forest — the systems the company already runs on. Also the logo
🍂	U+1F342	a leaf — one understood event (`order.placed`, `invoice.paid`)
🍃	U+1F343	the wind — what carries leaves to whoever should act
✨	U+2728	a nim — a role where people and AI agents work as one
🏡	U+1F3E1	a treehouse — deterministic software, work that needs no judgment

In the website markup, type the Unicode character — do not embed the SVGs. The platform's own
emoji font should draw them so the site looks native on every device. The SVG files in the brand
kit are for print and fixed artwork only (favicons and app icons being the exception where the
site does need a file).

Scope

Six routes: /, /growth-engine-sprint, /strategy-activation-sprint, /integrations, /whitepaper, /signup (matches the current live URLs). The reference switches pages in component state — replace with real pages, each with its own title/meta; OG tags on the whitepaper page.
Global chrome: credit strip, sticky blurred header, footer. The nav must stay white-space: nowrap — the "Get started" pill wraps to two lines without it. Wordmark is Forest #1D4E32.
The flow diagram (homepage "How it works" and again on Integrations — the repetition is intentional). Highest-value asset; build it carefully. Three traps we already hit: the river/wind spines must be 3px-wide bars with their glyph and caption positioned absolutely off them (sizing the spine's column instead leaves every connector dangling); animated glyphs need animation-fill-mode: both or they sit visible at the wrong node during their delay; twinkle goes on the ✨ glyph, never its circle, or the ring fades and looks broken.
Homepage hero vertical spine with travelling 💧 and 🍂. Note the motes travel one 88px segment each — drops only between "your tools" and the river, leaves only between the forest and the nims.
Pricing: €5,000 sprint once (3,000 + 1,000 + 1,000) and €1,000/year after. Optional AI tiers €50/€100/€200 plus a "Tailored" column. Tier numbers are guidance, not caps — the copy says so; do not reintroduce limit language.
Signup form: wire to the real CRM or form endpoint, add validation and error states (the reference has none). Success state is designed.
Whitepaper page links the PDF, ungated on purpose.
Responsive: the reference is desktop-only. Breakpoints are in the spec — below ~900px the flow diagram stacks vertically and can reuse the hero's one-column spine treatment.
Accessibility: aria-label on meaningful emoji, aria-hidden on decorative motes, visible focus rings, prefers-reduced-motion. Do not lighten the mono label grey #6B7C6D — it is the lightest value that clears 4.5:1 on the paper background.

Decisions — settled, build to these

Whitepaper follow-up is a mailto, not a form. The secondary CTA under "Read the full paper" is mailto:cederik@nimsforest.com?subject=The next paper, labelled "Send me the next one". No list signup, no gate — the PDF stays open to everyone.
"Tailored" is the fourth pricing tier name. Final.
"We reply personally, within two working days" is confirmed and may ship as written on the signup page.
Integrations stays its own page. Not folding it into the homepage.

Fonts

Instrument Serif (display), Figtree (body/UI), IBM Plex Mono (labels) — self-host, don't hotlink
Google Fonts. No images, icon sets or SVG illustration anywhere in the design.

Decisions settled 2026-07-28 (supersede the open questions in the handoff)

Missing brand guide .docx: ignore. The HTML guide is authoritative.
Stripe self-service becomes a separate flow, not removed. /signup becomes the lead-capture form from the design (name, work email, company, size, sprint choice, reply within two working days). The existing Stripe checkout (org name + slug + plan -> Stripe -> provisioning via nimsforeststripe / pantheon / landregistry / hetznertreehouse) moves to its own route and keeps working. /status/{slug} and /api/status/{slug} stay as-is: existing customers depend on them.
Replace nimsforestwebcomponents. The emoji identity goes into the shared library rather than being forked into the marketing site, so the paper/emoji chrome becomes the look for every app that imports nwc (iamnim, mycelium, nimsforestadmin, keeper, eos, grove, issue, organize, productize, webviewer, pantheon, quoteportal, ecommerce).

Notes from reviewing both zips

Brand kit is complete apart from the .docx. All SVGs self-contained; colour tokens agree with the handoff spec.
nimsforest-mark.svg (512x512, no text) is the favicon/app-icon asset.
The three lockups carry the wordmark as live in Figtree with a Helvetica/Arial fallback the brand guide forbids: self-hosted Figtree must load before any lockup is inlined, and print handovers need the text outlined first.
Only 4 of the 7 meaning-bearing glyphs ship as artwork (no river, leaf or treehouse file). Fine for the site, which types Unicode.
Emoji artwork is Noto Emoji, Apache 2.0, (c) Google LLC. LICENSE.txt travels with the SVGs into any repo.
Strip __MACOSX/ and .DS_Store before committing kit files.
Site copy in the spec is written with em dashes throughout; house style is no em dashes, so the copy needs a pass on the way in.

HydraIssues

Description