Workshop. How we build.
Not every decision has to be loud. Some get to be. Six principles, one accent, three typefaces, four motion primitives — the workbench behind every project.
Six rules. No compromises.
These principles aren't all for all cases. They're boundary stakes — when we cross one, there's a reason. When we can't find one, we hold the line.
- 01 / 06
Story first.
Pixels follow.A page without a clear story is furniture design without an apartment. We start with the question of who's looking for what and why — then layout, type, and motion serve that answer, not the other way round.
- 02 / 06
One colour is enough.
When it's the right one.Brand accents lose their charge the moment they multiply. #FF3C00 gets every stage; everything else lives in warm neutrals. One hit per screen, that's the bar.
- 03 / 06
Type is information,
not decoration.Type makes decisions before the eye starts reading. Bricolage Grotesque for statements, DM Sans for argument, JetBrains Mono for the machine layer. Three voices — no fourth, no flourishes.
- 04 / 06
Motion explains
what static can't.We don't animate buttons because it looks slick. We animate when a movement explains an idea faster than a sentence — transition, hierarchy, status. Otherwise: silence.
- 05 / 06
No pattern without reason.
No reason without pattern.Repetition builds trust. When the §-chapters, REC dots, and shutter lines always appear the same way, the eye learns the page's grammar. Breaking the pattern has to mean something — and only then.
- 06 / 06
Fast pages win.
Slow pages lose.Load speed isn't "also important". It's the first decision a visitor makes. Largest Contentful Paint under 2.5 seconds on mobile — otherwise the rest of the work was wasted.
One colour. When it's the right one.
Warm-dark as the stage. Warm-light for statements. A single accent — #FF3C00 — and no tints. UI states use neutrals, not lightened accent variants.
Three typefaces. Three jobs.
Display states it. Body argues it. Mono registers it. No fourth typeface, no mix-and-match, no decorative variant.
Statement type. Headlines, hero scale — wherever an idea is allowed to be loud.
Argument type. Body copy, sub-copy, anything the reader actually reads.
Machine type. Labels, REC markers, coordinates. 10–12px, letter-spacing 0.18em, always UPPERCASE.
Motion explains what static can't.
We don't move things to impress. We move when a gesture explains an idea faster than a sentence — and never longer than necessary.
A black blade opens vertically — section transition, hard "cut" feel.
Element flies hard into final position, one settle-yoyo, then silence.
Movement coupled to scroll position; Lenis + GSAP ScrollTrigger with low lag (0.4).
Opacity + slight Y offset, expo.out — the default reveal for anything carrying data-reveal.
Every movement respects prefers-reduced-motion. With animations off you see the
static version — same content, no flicker, no cut.
We build like this. Want yours built like this too?
First call, 30 minutes, free. Brief → Storyboard → Launch — same process, same accent, same workbench.