# Fenouil: case study

Concept, self-initiated, by Ido Vadavker (strategy, identity, design, development, motion), 2026. A site for a made-up brand studio in Marseille: three pages and twelve project sheets.

Web page: https://www.idovadavker.com/case-studies/fenouil/
Live site: https://fenouil.pages.dev/

## What's real

- Real: the design, the wordmark, the code, the motion, the live site.
- Invented: the studio, its people, its twelve projects and their clients.
- Generated: every picture and clip, made with Midjourney and upscaled.

## The problem

Most studio sites hide the work. They open on a manifesto, and the projects sit two scrolls down as small thumbnails that all lead to the same template page. That's backwards for a studio whose whole pitch is how its work looks. On Fenouil, pictures fill the first screen, and every picture you see opens its own project.

## Where the motion goes

- A loader that opens the name. The wordmark splits between FEN and OUIL, and three frames of work flash through the gap before it grows into the hero. It waits until the video can play, so a slow connection gets a longer hold on the name instead of a blank hero.
- A projects page you drag through. All twelve projects sit on one curved wall. You drag it with a mouse or a finger, or move it with the wheel or the arrow keys, and it keeps going in every direction.
- Click a picture, get the project. The picture you click flies into the project sheet in one second and stays the same image the whole way. The sheet has the brief, the team, the city and a link to the next project.

## Style guide

The whole system is five colours, two typefaces, five durations and two easing curves.

- Colours: Paper #F5F0E4 (page), Ink #15264B (type, the footer), Muted #5E6A80 (labels, captions), Surface #E9E1CF (panels), Pastis #E8C457 (the one accent).
- Contrast: Ink on Paper 13.1:1 (AAA), Muted on Paper 4.8:1 (AA), Pastis on Ink 8.8:1 (AAA). Pastis never sits on Paper (1.5:1).
- Type: Besley (roman and italic) for display, reading and the italic accent; DM Mono for labels.
- Wordmark: Besley 800, tracked +35. A script draws each letter as one path straight from the font, so the loader can split the word at the exact seam.
- Motion: durations 0.35, 0.6, 0.8, 1.0 and 1.2 seconds. Custom curves fenouil.bloom, cubic-bezier(0.76, 0, 0.12, 1), and fenouil.move, cubic-bezier(0.62, 0, 0.16, 1). Text rises out of a line mask.

## Under the hood

Astro (static HTML), GSAP self-hosted, Besley and DM Mono subset to Latin, Cloudflare Pages.

Measured on the live home page, 2026-10-26: Lighthouse performance 100 on desktop, largest paint 0.6 s, 0 ms main-thread blocking. On a throttled phone it scored between 88 and 97 over five runs. The home page weighs 1.1 MB on desktop, most of it the reel.

- With reduced motion turned on, or ?skipanim in the address, you get the finished page with no loader and no reveals.
- Every duration comes from one file, so the timing of the whole site can be retuned in one place.
- Every word of the site lives in one file, and the pages render from it.
- The site is kept out of search on purpose, which is the only thing Lighthouse marks it down for.

## Credits

Solo build. The projects grid is built on Osmo's Infinite Dome Grid (Jesper Landberg). Type: Besley and DM Mono, SIL Open Font License. Pictures: Midjourney.

Want this for your studio or product? Book a 15-minute call: https://cal.com/ido-vadavker/intro