Brief
The studio brand under which I ship client web work. Editorial typography, restrained motion language, and a design system built around a single highlighter-pen accent.
Challenge
Indonesian SMBs see studio websites that look identical — same hero, same gradient, same testimonials. A new studio needs to look more disciplined than the buyer expects, without the production budget of an established firm.
Solution
Designed an editorial system around the Stabilo highlighter metaphor — strikethrough on the weak claim, highlight on the strong one — and built it as a Next.js site with a three-tier label discipline, fluid type clamps, and GSAP motion only on signature moments. Server-derived isMobile prevents hydration mismatch on phones.
What I built
- 01Custom GSAP entry timelines on hero only (rest is CSS)
- 02Server-side User-Agent sniff to fix mobile hydration cost
- 03Three-tier label system (eyebrow / meta / fn)
- 04Locale-aware EN/ID routing with typed dictionaries
- 05SSR-first composition with restrained client islands
Stack
- Next.js
- GSAP
- Tailwind v4
- TypeScript
- Vercel
Results
- Sub-secondMobile first-paint after perf pass
- 2 langsEN + ID locale-aware routes