olaf.studio
The studio website — this one
- Services
- UI/UX · Web Design · Development · Motion
- Client
- OLAF Studio
A website that behaveslike the system itis documenting.
Every colour, size, radius and duration on this site is a token lifted straight from the guidelines. Nothing is eyeballed.
Each project sets its own signal, so opening a case study re-skins the accent the way switching the Figma colour mode does. The monochrome underneath never moves.
- Discipline
- Digital
- Stack
- Next.js · TypeScript · GSAP · Lenis
- Year
- 2026
Buttons
Default · Hover · Focus · Active · Disabled
Input
Tags
Loading
Skeletons shimmer in place — never spinners on content.
Micro 150 · UI 250 · Reveal 520 · Scene 800
Motion
Snap, don’t float.
One easing curve — cubic-bezier(.2, .8, .2, 1) — and four durations: 150ms for micro, 250ms for UI, 450–600ms for a reveal, 800ms for a scene.
Transitions are hard cuts cleaned by a single-colour wipe. No dissolves, no blurs, no bounce. Every motion confirms an action; the rest was cut.
Serious execution
Display / M
Space Grotesk Medium · 60/60 · -2%
Young creative energy
Heading / H1
Space Grotesk Bold · 44/48 · -1.5%
Framework over formula
Heading / H3
Space Grotesk Medium · 26/32 · -0.5%
The framework stays consistent; the projects are where the experimentation happens.
Body / M
Inter Regular · 16/26
SIGNAL / CARIBBEAN — SELECTED WORK
Label
Space Mono Regular · 12/14 · +8%
Discipline
Fast on a normal connection in Lagos.
Fonts are self-hosted and subset. Images are responsive and lazy below the fold. The animation layer is loaded only where it earns its place, and it collapses entirely under prefers-reduced-motion.
The cinematic layer is a guest. The content is the resident.
Credits
- Design
- OLAF Studio
- Development
- OLAF Studio
- Motion
- OLAF Studio
Next project
Identity System 2026
DESIGN2026OLAF Studio
