Self-Initiated Concept
Pizzeria
Moderna
Digital experience for a contemporary Italian pizzeria.
Role
Art Direction · UX/UI · Frontend Development
Type
Self-Initiated Concept
Year
2026
Stack
Next.js · React · TypeScript · Tailwind CSS
01 — Context
Pizzeria Moderna is a concept for a neighborhood pizzeria in Aurora, Torino — wood-fired oven, twenty-eight covers, a short list of pizzas made the same way every night. Not a fine-dining reinvention, not a chain: a place that does a few things well and lets that show.
02 — Challenge
Most independent pizzerias communicate online through a PDF menu, a Google listing, and an Instagram feed. Those channels explain what’s on the menu. They rarely explain why the dough takes twenty-four hours to rest, why the ingredient list is short on purpose, or what the room actually feels like at 8pm on a Friday — the details that are usually the actual reason someone chooses one pizzeria over another.
03 — Direction
The craft is the experience.
Instead of a digital menu, the site is built to communicate craft, dough, ingredients, fire, and atmosphere — the site as an extension of what it’s actually like to eat there. The visual language draws on contemporary Italian editorial design, food photography, tactile materials and restaurant interiors — design decisions made for this concept, not the output of a real brand workshop.
Visual System
Typography
Fraunces
Display serif — headlines, prices, section numerals.
Archivo
Body and interface text. Two families, one weight each of the sans, kept deliberately narrow.
Color
Cream
Paper
Charcoal
Tomato
Olive
Wheat
A warm cream base, near-black charcoal, and a single restrained tomato accent reserved for calls to action and the active state in the menu and dough timeline.
Grid
A 1440px content width with a fluid gutter (clamp between 1.25rem and 4rem), and a 12-column grid used asymmetrically — the ingredients list and the intro headline both push content off-center rather than centering everything.
Imagery
Curated food and interior photography stands in for commissioned photography — every image is labeled in code as a placeholder for a real shoot. Close crops on dough, char, and basil carry the tactile part of the direction.
04 — Experience
The page reads as one continuous argument rather than a stack of sections. A diagonal-split hero states the premise. A one-line intro (“Facciamo poche cose. Le facciamo bene.”) sets the tone. The dough timeline shows the process before the menu shows the result. The menu leads into a single held shot of the signature pizza, then the ingredients are named one by one, then the room itself. The reservation call to action only appears twice — once early, once at the natural end of the story — instead of following the visitor down the page.
Key Design Decisions
The hero as a diagonal cut
A clip-path split — image on one side, type on the other — instead of a full-bleed photo with text stacked on top. It reads as a considered composition, not a stock hero banner.
Time as a design element
The dough process becomes a scroll-linked timeline: a sticky image and a progress rail that fills as you read, so the four steps feel like they're actually taking time, not just listed.
An editorial menu, not menu cards
Five dishes as a single list with a sticky image panel that responds to hover and focus. No price tags on thumbnails, no grid of identical cards — closer to a printed menu than a food-delivery app.
One pizza, held on screen
The signature pizza is pinned and scrubbed by scroll position — it settles, scales and turns slightly as you pass through the section, then lets go.
Restrained motion
A single Reveal component with three variants (fade, mask, scale) drives every entrance animation, gated by IntersectionObserver and fully disabled under prefers-reduced-motion. Motion supports hierarchy — it isn't layered on as decoration.
Mobile as its own composition
The hero's clip-path, the sticky image heights in the dough and menu sections, and the header's navigation all switch to dedicated mobile values rather than just scaling down — the mobile menu is a full composed panel with its own motion, not a shrunk desktop bar.
05 — Interaction
Why the movement exists
The dough timeline
The dough process uses scroll position, not a click, to move through its four steps. A sticky image cross-fades and a thin rail fills as the visitor reads — the passing of time from mixing to the oven is something you scroll through, not a carousel you click past. It communicates that the process takes time before the copy even says so.
The signature pizza
Further down, one pizza is pinned in place for the length of its section. As the visitor scrolls through it, the image settles into focus, scales up slightly and turns — then holds. It’s the one place motion is used purely for presence: a single dish given the same weight a plated shot gets in a print magazine.
Every other transition on the site — section entrances, the menu’s hover-driven image swap, the header’s scroll state — is a restrained fade, mask-reveal, or opacity change built on the same IntersectionObserver pattern, and everything above respects prefers-reduced-motion.
Responsive
The mobile layout isn’t the desktop layout scaled down. The hero’s diagonal clip-path changes angle at the mobile breakpoint; the sticky image panels in the dough timeline and the menu shrink from 65vh to 42vh so they don’t push the reading content off screen; and the header collapses into a full-screen panel with its own open/close motion, keyboard (Escape) support, and focus return — rather than a hamburger that just reveals a shorter list.
This session couldn’t capture live screenshots to place side by side here, so the honest way to see it is to open the live concept and resize the window, or load it on a phone.
06 — Development
How it’s built
Next.js 16
App Router, file-based metadata (sitemap, robots, opengraph-image), and a mix of server and client components.
TypeScript
Typed content and image data (lib/content.ts, lib/images.ts) shared across every section component.
React 19
Client components hold interaction state — the active menu item, the dough-timeline step, the reservation dialog.
Tailwind CSS v4
Design tokens (color, easing, duration, container width) defined once in globals.css and consumed via @theme inline.
next/image
Responsive sizes on every image, priority only on the hero, remote patterns scoped to the photography source.
IntersectionObserver
Drives the reveal-on-scroll system and the dough-timeline progress — no animation library, no scroll-jacking dependency.
Performance
No measured Lighthouse run is attached to this build, so no score is claimed here. What the implementation does: every photograph is served through next/image with explicit sizes, only the hero image is marked priority, most sections are server components, motion runs on CSS and IntersectionObserver instead of an animation library, and the project has zero runtime dependencies beyond React and Next.js.
Accessibility
Semantic sectioning throughout, a visible tomato focus ring on every interactive element, descriptive alt text on every photograph (empty alt on the purely decorative reservation background), a keyboard-operable mobile menu with aria-expanded, Escape-to-close and focus return, and a site-wide prefers-reduced-motion rule that disables every animation. No formal WCAG audit has been run, so no compliance level is claimed.
07 — Result
What the concept demonstrates
- Building a distinctive, non-generic identity for a local business from a one-line premise.
- Connecting brand language and interaction — motion that reinforces what the business is, not motion for its own sake.
- Producing responsive, production-quality frontend without a component library or animation dependency.
- Structuring a page around a reservation decision without turning every section into a call-to-action.
- Working end to end — direction, layout, copy, and implementation — on a single, coherent piece of work.
Pizzeria Moderna is not a real restaurant. No booking platform, review, or figure on this site or in this case study reflects real business activity — it is a self-initiated concept built to demonstrate this way of working.
The goal wasn’t to make a pizzeria website look expensive. It was to see whether a website could earn the same patience the dough gets — and to prove that to myself, end to end, before ever pitching it to a client.
— Michele Modica