Raava is my company, and it needed a public site that explains its services and products, can be edited without touching code, and keeps its look as pages are added. I built it as a system rather than a set of pages: content in a CMS, a design system underneath, and a motion layer with clear rules. It is live, and it is still being built.
My role: founder and sole engineer. I design and build the site, its design system and its content model.
How a page gets made
Content pipeline
Connections: Editor to Payload CMS; Payload CMS to Postgres; Postgres to Next.js build; Next.js build to Live site.
Payload became the canonical content source on 23 May 2026, three weeks after the first commit. Before that, content lived in files in the repository. For the cutover I ran both sources behind a flag, with Playwright parity tests comparing the two, and deleted the file path once the CMS matched it.
Four layers, one direction
The system, bottom to top
- 1TokensColour, type, spacing and motion values, defined once.
- 2ComponentsShared building blocks that take their values only from tokens.
- 3SectionsReusable page bands assembled from components. The release 4 work turns these into a kit.
- 4PagesMostly compositions of sections. A new product page reuses one shared template instead of starting over.
Motion with rules
The site moves, but under rules I enforced in code and in tests in October 2026:
- One ease-out curve across the source, so nothing moves on its own timing.
- The first paint is the resting state. Nothing autoplays, and animated counters render their final figure on the server.
- Reduced motion gets a designed still, not a broken half-animation. A site-wide motion switch drives the same still for anyone who wants it.
- Accessibility scans run against the still, so the checks see what a reduced-motion visitor sees.
From git
Milestones
Dates from the repository history.
Show as table
| Phase | When | Note |
|---|---|---|
| First commit: Next.js 16 shell on Vercel | May 2026 to May 2026 | |
| Payload CMS added, then made the content source | May 2026 to May 2026 | |
| Reusable product pages and animation registry | Jun 2026 to Jun 2026 | Build checkpoint dated 2 June 2026. |
| Services section from the new section kit goes live | Sep 2026 to Sep 2026 | 16 September 2026. |
| Motion lab, then the motion foundation, merged | Oct 2026 to Oct 2026 | 3 and 5 October 2026. |
- commits to the site
- 436
- On main, 1 May to 5 October 2026
- Source: git log
- static pages in one green build
- 55
- A dated checkpoint from 2 June 2026, not a current count
- Source: Build report, 2 June 2026
- product pages from one template
- 3
- Same checkpoint, with nine bespoke animations
- Source: Build report, 2 June 2026
There are no traffic, lead or conversion figures here because none are recorded. Raava's product names and any CMS screens with real entries are also left out.
What I'd do next
- Finish the next version of the design system before adding more pages.
- Ship the remaining section-kit releases, starting with products.
- Recount pages and components so the numbers on this page can be current rather than dated.
