Frühschicht

The task

Coffee shop sites are almost interchangeable: beige and kraft paper, beans falling across the screen, a latte from above on a wooden table, “roasted with passion”, and identical bags where only the name changes. I wanted to show a roastery shop you recognise even with the logo covered, where every colour and every number tells you something about the coffee. This is a sample project: the roastery, its building and its coffees are made up, the photos and bags are generated, and nothing is really sold.

Role

Concept, art direction, design, development, 3D, packaging

What I did

• Art direction before code: an honest list of coffee-site clichés, a moodboard with two palettes on the same screen and three font pairs. The chosen look is concrete grey with one cherry red for actions only, and colour appears only as roast level: ochre, rust, dark brown. The idea comes from the place: Frühschicht means early shift, the roastery sits in a former miners’ changing hall in the Ruhr, so the site reads like a shift plan and a roast log.
• A whole shop, not a landing page: a catalogue shelf with filters by method and taste and a roast slider that runs along a curve, product pages, one cart shared by every page, a demo checkout and a Dauerschicht subscription that shows the 10 % saving straight away. The ticker in the header counts down to the next roast and shows the batch number, and the footer is the roasting plan for the week: Tuesday and Friday.
• A bag you can turn: on the product page it is a 3D model in Three.js. Drag it or pick a side, and each face carries its own data: the label, origin, roast and taste. Below, the roast curve is drawn from the profile data, and the roastery page puts all three curves side by side: same drum, different end.
• A brew guide that does its job in the kitchen: pick V60, Aeropress, French press or moka pot and a dose, the site works out the water and temperature, then leads you step by step with a live timer and target weights, and the screen stays on.
• Bags with real coffee data, like on a good specialty bag: origin, region, variety, process, altitude, taste. I wrote the brief and generated them in four rounds with gpt-image-2, separately in German and Ukrainian. German, English and Ukrainian with its own addresses; the display font is Bulgarian and draws д like a g by default, so I built font files with the usual Ukrainian letterforms. Reduce Motion is respected everywhere.

Result

The demo is live: put a bag in the cart, go through the checkout and start the brew timer yourself. Nothing is paid and nothing leaves your browser. A roastery, a bakery or a tea shop can sell on its own site the same way, with a character of its own instead of a template.

Built with

Astro, TypeScript, Three.js, View Transitions, Nanostores · gpt-image-2 (bags) · Sofia Sans Extra Condensed, IBM Plex Mono