Case Study · Design & Development
A pixel-perfect Figma-to-React build for a decentralized community trade platform.
FOAF Foundation needed a public-facing website before launch — something that introduced the platform, communicated what it actually does, and established a visual identity. We designed the full Figma spec, then built it as a production Next.js site, matching the design exactly.
Figma → React
The whole brief was fidelity — take a finished Figma design to the browser without losing anything. That's exactly where most handoffs quietly fail: spacing drifts, type weights shift, animations get dropped.
Every margin, line-height, and weight matches the source file — not "close enough."
Responsive behaviour resolved at mobile, tablet, and desktop — including layouts the file never explicitly drew.
Hovers, focus, and transitions filled in to match the design's intent where static frames went quiet.
Static generation, careful image handling, and a minimal JS footprint — faithful and quick.
Built component-by-component from the Figma design system — Next.js, React, and Tailwind, deployed to a custom domain.
The mark
Three nodes joined by two golden arcs, drawn from the seed geometry of a sunflower. There's a deeper story to it — Fibonacci, the golden angle, the lot — but that lives where it belongs.
Read the story of the mark →Design and development from one practice — from the Figma file to production, without the drift.
