Building Rekvon in the open — the design system behind this site

This site is our first portfolio piece. Not the projects on it — the site itself. So it seems fair to show the working.

One page of rules

Before any code, we locked a one-page design spec. The short version:

• One dark theme. Soft black — never pure #000 — with warm off-white text and exactly one accent: signal orange. If something isn't the accent color for a reason, it doesn't get to be orange.
• Typography does the heavy lifting. A grotesque sans for structure, a serif italic for one emphasized word per headline, a monospace for labels and metadata. Three fonts, three jobs, no exceptions.
• A banned list. Purple gradients, gradient text, glassmorphism, icon-top feature cards, pill badges floating over headlines. Every one of these reads as template. Deleting them did more for the design than anything we added.

Motion with a reason

Everything that moves is driven by one rule: motion should tell you something about where you are or what you can do.

The scroll stack is Lenis for smooth scrolling and GSAP ScrollTrigger for choreography, both driven off a single ticker so the DOM and the animations never disagree about time. Service rows scale up as they enter the viewport — scrubbed to scroll position, so the page answers your hand. The grid in the background drifts slowly and lights up around your cursor: the site notices you're there.

And all of it respects prefers-reduced-motion. If a visitor asks for stillness, they get a fully working still site — not a broken one.

Proof over polish

The gallery on the home page says "proof, not promises" and we mean it literally: the devices in it are concept builds today, clearly labeled, being replaced one by one with shipped work. A portfolio you can't verify is just adjectives with a color scheme.

That's the standard we build client work to as well. If you want a site — or a product — held to it, book a call. The first one is free and comes with real numbers.