Pour Pierre — case study extract

A mobile-first cocktail book and home-bar companion, built as a birthday gift for one friend, then rebuilt for everyone else as After Pour.

It runs entirely in the browser: no backend, no accounts, no API keys, no tracking. All state lives in the device's localStorage, and the app makes zero external network requests — the fonts are self-hosted.

Browse the design system: neila247.github.io/pour-pierre-case-study Full case study: neilcaetano.com/work/pour-pierre

---

What this repository is

This is a public extract, not the application. It contains the parts of the project that are mine to publish: the design system, the product guardrails, and the logic that makes the app work.

The recipe corpus is not here. Around half of it is adapted from Cocktail Codex (Alex Day, Nick Fauchald & David Kaplan, Ten Speed Press, 2018) — remeasured into centilitres with fresh descriptions — so the data stays in the private repository.

├── PRODUCT.md              who it's for, principles, and the banned-cliché list
├── design.md               the Atelier design system — tokens, type, motion rules
├── src/
│   ├── index.css           the @theme token block: the whole look, in one place
│   ├── lib/bar.js          the suggestion engine
│   ├── lib/mood.js         scoring for the five-question mood quiz
│   ├── data/ingredients.js canonical ingredients + the synonym map
│   ├── data/substitutions.js
│   └── components/         DrinkArt (the illustration layer), QuestionArt, spirit colours
├── index.html              the Atelier design system, one self-contained page
└── images/                 screenshots and the pattern library

The interesting parts

design.md and PRODUCT.md are the point of the project. The app was built with AI assistance, so the work moved from producing options to judging them — and judgement only scales if you write it down somewhere the tools can reach. PRODUCT.md includes an explicit list of AI design clichés the app is banned from using; design.md is the full Atelier system, tokens through motion.

src/index.css holds the entire visual system in one @theme block rather than in component markup. That is why seven complete skins were affordable to build and retire — design decisions you can reverse cheaply are decisions you can actually test.

src/lib/bar.js diffs each recipe's ingredients against your shelf to bucket the book into make now, almost, and shop for; ranks the single next bottle that unlocks the most drinks; and picks a deterministic cocktail of the day from a calendar seed, so it's the same for everyone with nothing stored.

src/data/ingredients.js resolves brand names, plurals and other languages to canonical ingredients — Cointreau, Angostura and Zitrone all land correctly. Nobody should have to learn the app's vocabulary to add a bottle they own.

Design system

The whole system lives in a single self-contained page: type, colour, surfaces, icons, components and motion, on the real tokens with the fonts embedded. No build step, no dependencies — open index.html in any browser, or read it online at the link above.

A true-neutral white canvas — deliberately not the cream or parchment that AI reaches for by default — a near-black ink ramp, a single deep-navy accent (#2d4a73), and red (#b3122b) reserved for meaning. Bricolage Grotesque for display, Archivo for body, Space Mono for measures.

The pattern library is a live route in the running app (?gallery), built on real tokens, so it can't drift from what ships. See images/design-system-pattern-library.png.

Stack

React 19 · Vite 8 · Tailwind CSS v4 · Netlify. Three runtime dependencies, no state library. Boring on purpose — the interesting decisions belong in the design, not the toolchain.

Licence

All rights reserved. Published for review, not for reuse — see LICENSE.

The bundled fonts are third-party and openly licensed; see NOTICE.md.