DISCIPLINE — VISUAL
Ruper Visual-Direction
STACK
- Next.js 16
- TypeScript
- Supabase
- Anthropic API
- QStash
- Vercel
- PWA
THE GAZE
Ruper is a Swiss meal-planning app that turns supermarket promotions into AI-generated recipes. The design challenge was unusual: make a budget grocery tool feel anything but utilitarian. The decision was to go medieval — not as a gimmick, but as a genuine creative stance. Swiss supermarkets have been running weekly promotions since before anyone can remember; there's something ancient about the ritual of the market, the seasonal offerings, the economy of the harvest. The medieval frame made that subtext visible.
Every visual decision flows from that premise. The dark parchment background, the gold heraldic accents, the store logos redrawn as guild crests, the swipe gestures renamed Estocade and Parade — nothing is decorative for its own sake. The UI speaks a consistent language where grocery shopping becomes a small act of ceremony.
THE PROCESS
The identity was developed entirely through design-in-code — no static mockups, no Figma handoff. Typography was chosen first: Cinzel for monumental headings (Roman gravure, institutional weight), Crimson Text for body (legible serif with manuscript warmth), and Uncial Antiqua / Pirata One for recipe titles (genuine medieval manuscript scripts). Each typeface occupies a distinct register in the hierarchy.
The color system is anchored by three values: Nuit #0d0b08 (burnt parchment black), Or #c9a84c (aged gold), and Ivoire #f0e6cc (vellum white). A blood red #8b1a1a serves as the alert and action accent. The palette evokes illuminated manuscripts without referencing any specific cultural cliché.
The store badges were redesigned from flat colored buttons into heraldic shields — clip-path polygon silhouettes with internal gradient texture simulating hand-painted enamel, each carrying a unique guild emblem in SVG. The swipe system was rebuilt with named gestures: swipe right is an Estocade (sword thrust), swipe left a Parade (shield block), swipe up sends the recipe to the Grimoire (saved recipes). Loading states use rotating medieval phrases rather than spinners.
THE RESULT
A fully deployed PWA at ruper.ch with sub-second load times (down from 44s), a Supabase-cached promotion engine refreshed every Thursday, 100 AI-generated recipes in cache, dietary filters (vegan, gluten-free, etc.), a medieval swipe interface, and image-based recipe sharing. The visual identity — from guild crests to manuscript typography to parchment loading screens — is consistent across every surface of the product.
THE RESONANCE
Ruper should feel like discovering a tavern menu written by a scribe who somehow knew what was on sale at Migros this week. The medieval aesthetic isn't ironic — it's played straight, which makes it work. The app takes a mundane weekly task (planning meals around supermarket deals) and gives it a faint sense of occasion.
The name itself is a Suisse-romand dialect word from the 1800s meaning "to eat well" — still used today. It grounds the whole identity in local culture without being explicitly Swiss in any touristic sense.