01 / The brief
Make an invisible product feel tangible.
Data infrastructure is abstract. Buyers need to get what Novae does in seconds, and trust it with their whole stack.
- 01Explain the platform in one scroll.
- 02Make AI agents feel accountable.
- 03One conversion path: Get started.
- 04An identity worth sharing.
02 / Research & positioning
One idea every section hangs from.
Data infrastructure is hard to picture, so Novae needed one ownable metaphor. Every event is a particle, and Novae gathers them into one picture. That became the line “Bring your data to light”.
Audience
Ops, data and security leads juggling six dashboards.
Promise
Every tool on one surface, with agents that act on it.
Proof
Logos early, then quotes and numbers before the ask.
Action
One call to action, repeated top, middle and end.
03 / Moodboard
Light emerging from darkness.
Particle renderings, point-cloud spheres, blue gradients and lit horizons, balanced with calm editorial layouts.
Particles as data
Scattered events gathering into one sphere became the hero.
Light out of darkness
Deep night at the top, brightening as the story resolves.
Energy, sparingly
Generous space, quiet type, one bright moment per screen.
#05060A Horizon
#0D2C82 Deep blue
#1E4BBE Brand
#5C7AFF Violet
#8F6BFF Muted
#A3AAB9 Paper
#D2D4DB Snow
#F2F4F8
Aa
Matter, headlines and body
GEIST MONO, LABELS AND DATA
- H1Bring your data to light.Matter 75px
- H2Four modules, one platform.Matter 56px
- H3SignalsMatter 28px
- H4Field notes on turning noise into signal.Matter 22px
- LeadEvery event is a particle. Novae gathers them into one picture.Matter 24px
- BodyConnect every tool your company runs on and find the signal.Matter 15px
- SmallInes Okafor, VP OperationsMatter 14px
- Label01 / CAPTUREGeist Mono 12px
04 / Wireframes
Structure before style.
I used AI to generate four wireframe directions in minutes, then built on the dark, story-led one and refined it by hand.
05 / Visual exploration
Dozens of particle directions, fast.
I connected TouchDesigner to an AI agent over MCP and generated a wide range of particle patterns. I picked the style I liked most, then built a small web tool with Claude to recreate the effect in web technologies.
01 Generate
TouchDesigner over MCP for rapid particle studies.
02 Choose
One style that fit the light-from-darkness story.
03 Rebuild
A small web tool, built with Claude, for the live effect.
06 / Visual design
Night to dawn, and back again.
The visual direction follows the product story. The page opens in near-black ink, where a particle sphere is the only bright thing on screen. As you scroll, a blue horizon rises and the page turns to soft paper grey for integrations and proof. The final call to action drops back into night under a glowing horizon, closing the loop.
07 / Motion
Motion that explains and also decorates.
- Particle hero: events gather into one sphere.
- Live caret: headlines feel like a running system.
- Integration arc: tools orbit one surface.
08 / Build
Designed and shipped by the same hands.
Built in code and deployed on Vercel. Motion was prototyped in the browser, and every section is fully responsive.
09 / What shipped
A site, a system and a story.
- SiteResponsive, nine sections, live on Vercel.
- SystemType, colour, glyphs and components.
- MotionParticles, orbits, UI animations and hover interactions.
- ContentCopywriting for every section.
How I work
Built for sites millions of people see.
Pages and microsites
A system for core pages, room for bold launches.
I can code it
Shipped in code or Webflow, so ideas survive handoff.
AI in the loop
Faster exploration, human judgement on what ships.