---
title: "Pilgrimz | Case Study | Carmen Rincon"
url: https://stacklist.com/card/37a207a8-796e-4efa-bfa9-1afd58e36e48
source_url: "https://www.carmen-elena.space/work/pilgrimz"
stack: https://stacklist.com/stack/67b59b54-8aa2-4460-bdb8-fa13669f687d
summary: "Pilgrimz is a cultural travel app that resolved AI design debt by building a comprehensive design system with AI-readable tokens, semantic colors, and reusable components. The system enables consistent product growth across Europe while allowing AI tools like Claude to generate on-brand outputs efficiently."
tags: "design-system, ux-design, ai-enablement, travel-app, design-tokens, component-library"
key_entities: "Carmen Elena (person), Pilgrimz (organization), Claude (technology), Plus Jakarta Sans (technology), DM Sans (technology), design-tokens (concept), AI design debt (concept), Europe (location), Paris (location)"
classification: "framework"
content_hash: "sha256:e2777b300c4e1af5837a28b54a7741f692da1d1dfb1283b3a66a1d3d97afe10f"
acp_version: "0.2"
token_counts_approximate: 3169
visibility: public
agent_accessible: true
status: "final"
---

# Pilgrimz | Case Study | Carmen Rincon

My Work Let's go! 🚀 0 % Partner: Pilgrimz Mobile App From AI design debt to a system the whole team runs A cultural travel app growing fast across Europe, held back by invisible AI design debt. We built the system underneath it, then redesigned the flows that turn first-time users into returning ones. ~5 min read UX Design UI Design Design System Design Thinking Product Strategy User Testing AI Enablement Download on the App Store Hidden gem Historic deep dive on this tour Hidden gem The covered passages of Paris Tour · 5 stops · 40 min Slip through the glass-roofed arcades of the 1800s, from Passage des Panoramas to Galerie Vivienne. C J M 34 pilgrims walked this 01 The AI-enabled foundation From AI design debt to a foundation Claude can build on Pilgrimz was designing straight in Claude with a few guidelines, and every screen added debt. Phase one built the missing foundation, and built it to be read by AI, so a tiny team gets great, on-system output from the first pass instead of racking up cleanup rounds. Color Color with psychology and accessibility applied The base red was retuned into a coral primary reserved for action. Teal carries exploration, amber marks featured and sponsored, and warm neutrals replace cold grays. Contrast was a constraint throughout, not an afterthought. Coral #E84C44 Primary actions. Play, book, save. Signals action, never alarm. Teal #0F888F Exploration, discovery, and selected states. Amber #E89B24 Featured and sponsored content, achievements. Warm neutrals, not cold grays ink #1C1B19 white #FFFFFF Semantic, kept distinct from brand Success Warning Error Info The error red stays deliberately distinct from the coral primary, so an action never looks like a failure. Click a family to copy its hex. Typography A voice that reads as a knowledgeable guide Plus Jakarta Sans for headings and display, DM Sans for body and UI. The full scale, weights, line heights, and letter spacing are defined as tokens. Plus Jakarta Sans Headings & display Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789 Display 36 px / 44 px · 700 Know the story Heading 1 28 px / 36 px · 700 Roman and Moorish Málaga Heading 2 22 px / 30 px · 600 Worth the detour Heading 3 18 px / 26 px · 600 Explore all 32 tours DM Sans Body & UI Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789 Body large 18 px / 29 px · 400 GPS triggered audio guides bring the story to where you stand. Body 16 px / 24 px · 400 Pride in knowing, and the joy of passing it on. Label 14 px / 20 px · 500 view in map · Download Caption 12 px / 16 px · 500 Tour · 4 stops · 45 min Core components Components connected back to tokens The pieces travelers touch every day: play an audio guide, tap a map marker, browse tours, events, and hubs. Every component draws its color, type, and radius from the tokens, so the product holds together as it grows. They are live, try them. Plaza de los Naranjos …the lovely orange trees lining the plaza… −1:08 Mini audio player neutral/50 @85% + backdrop/md · secondary/500→600 · primary/500 · radius/lg Tour · photo marker, brand ring and tail when selected Map markers (POI) neutral/400 · secondary/500 · accent/500 · elevation/xl Hidden gem The covered passages of Paris Tour · 5 stops · 40 min Slip through the glass-roofed arcades of the 1800s, from Passage des Panoramas to Galerie Vivienne. 34 pilgrims walked this Tour Cards: tour, POI, event, hub surface · accent/100 · primary/500 · radius/2xl Readable by AI Docs Claude can act on Tokens map cleanly to code, and every one ships with a description, references, and good vs bad usage. Claude knows when to use a token, not just what it is. tokens.js: what Claude reads "primary": { "500": { "$value": "#E84C44", "$description": "Primary action. Play, book, save. Signals action, never alarm.", "$extensions": { "figma-console-mcp": { "collectionId": "VariableCollectionId:1:12", "lastSyncedAt": "2026-07-02T14:46:16Z", "lastSyncedValue": { "Light": { "literal": "#E84C44" }, "Dark": { "literal": "#F26B62" } } }, "usage": { "use": ["playButton", "primaryCta"], "avoid": ["backgrounds", "errorStates"], "note": "error/500 stays #DC2626" } } } } Good vs bad, encoded usage rules Claude can check Tours Hidden gem The covered passages Tour · 5 stops · 40 min Selected Featured Book this tour Coral only where you act Tours Hidden gem The covered passages Tour · 5 stops · 40 min Selected Featured Book this tour Red everywhere reads as alert Every token ships with do and don’t examples, references, and the reasoning behind them, so output follows intent, not vibes. The system in use Decisions made on real screens, not swatches I showed color and type living on primary screens with usage guidance, so the founders could judge the system where it matters, on the product. Before tokens On system The differentiator The Claude Design OS I did not stop at tokens. I built Pilgrimz an operating system for designing with Claude, so great output is the default, not luck. The concrete promise to the founders: ask Claude to build and test a feature and get something on-system in about an hour. Handoff kit Yours to run Design OS playbook every workflow, documented Context library craft rules, ready to use Eval suite quality checks built in Claude infrastructure skills, agents, files Live team workshop everyone onboarded The whole team, not just designers, left able to run the OS themselves. AI-readable from day one Created so Claude can read it. Not just tokens and values, but the context and intent behind them. Infrastructure inside Claude and VS Code Skills, agents, and files wired into the tools the team already builds in. Trained on their craft, not generic data The OS carries Pilgrimz's own craft rules, so output looks like Pilgrimz, not like generic UI. Evaluation loops Quality checks built in, so the team can trust what ships without manual policing. With the debt paid down and the OS in place, the work shifted from cleanup to real product strategy. 02 The design work Core flows, restructured around trust and the business The redesign was downstream of the OS. I designed these flows myself, with Claude working alongside as another member of the team, so core screens were reworked quickly and stayed consistent. Every choice served trust, retention, and the business. Navigation, discovery & the map The map as a primary surface, not a backdrop Users struggled to move between cities without zooming the map, reaching for a search they could not find. The redesign made moving between destinations obvious, differentiated point of interest types, and surfaced sponsored places clearly, which ties straight to how Pilgrimz makes money. Tours Recs Favorites Hidden gem ★ Featured Selected The covered passages of Paris Tour · 5 stops · 40 min City picker The Hub The B2B revenue surface, made premium Hubs are curated spaces from museums, tourism boards, and cultural organizations, the business to business product Pilgrimz sells. I redesigned them as branded homes each institution can be proud of, from the first impression to the empty state. 1 A branded home, not a listing The institution leads: hero, logo, and its own story. The Malaga Cultural Center opens with the Buenavista Palace and the 285 works donated by Picasso's family, with More info and its social channels right there. Below, the Tours tab puts routes worth the detour up front and the full catalog, all 32 tours, one scroll away. 2 An agenda that earns bookings Events carry their own logic: single dates, ranges like 19 to 22 June, and recurring runs like all Saturdays, each with times and details one tap away. This is the surface institutions pay to fill, so it reads like a program, not a feed. 3 A directory that sells each partner The Hubs tab pitches every institution with its numbers, five tours, three points of interest, five events, and one clear action: explore the hub. 4 No dead ends Areas without hubs get a coming soon state that points travelers to the tours nearby instead of an empty screen. Even the gap sells the product. 1 A branded home, not a listing The institution leads: hero, logo, and its own story. The Malaga Cultural Center opens with the Buenavista Palace and the 285 works donated by Picasso's family, with More info and its social channels right there. Below, the Tours tab puts routes worth the detour up front and the full catalog, all 32 tours, one scroll away. 2 An agenda that earns bookings Events carry their own logic: single dates, ranges like 19 to 22 June, and recurring runs like all Saturdays, each with times and details one tap away. This is the surface institutions pay to fill, so it reads like a program, not a feed. 3 A directory that sells each partner The Hubs tab pitches every institution with its numbers, five tours, three points of interest, five events, and one clear action: explore the hub. 4 No dead ends Areas without hubs get a coming soon state that points travelers to the tours nearby instead of an empty screen. Even the gap sells the product. One system, every screen Consistent from the map to the audio guide The same journey, screen after screen: browse tours in an area, open one, walk its stops, and let each point of interest talk to you. Every screen is built from the system, so it all reads as one product. Tour discovery Tour page POI page Audio guide picker Player, gallery mode Player, read mode Consistent, trusted screens are the groundwork for the part the founders most want next. 03 Social discovery In progress A social layer built around places, not strangers This is the chapter underway now. The old feed showed strangers' activity with no reason to care, so social is being reframed around destinations. The useful unit is many travelers found this place great for solo travelers, not this user took a Tuesday walk. Two of the interactions in design right now: rating as the door into a tour's community, and invites that carry the plan instead of a dead link. Walk complete Roman and Moorish Málaga Tour · 4 stops · 45 min 47 pilgrims walked this Marta Planning together Walk complete Roman and Moorish Málaga Tour · 4 stops · 45 min 47 pilgrims walked this Marta Planning together A feed built around places Discovery rethought around places, inspiration, and saving destinations for later, not a social network of strangers. Light micro-feedback Quick tags after a tour, like good for solo travelers or great coffee, that improve the product without asking users to perform. Shareable trip cards Cards built for outbound sharing to Instagram and WhatsApp, designed to inspire the person who receives it to go do the same. Outcomes What Pilgrimz walked away with No invented numbers. The value is trust, consistency, speed, and infrastructure the team builds on every day. Design debt stopped compounding Screens come out on-brand on the first pass, no cleanup rounds. New work stays inside the system instead of adding drift. Design capacity, multiplied The team ships more, inside a system designers built, so quality never dilutes as they move faster. Core flows rebuilt around trust The map, tour pages, and discovery were restructured so travelers always know where they are, what a tour offers, and why it's worth paying for. Hubs partners are proud of Museums and tourism boards get a branded home instead of a listing, from the first impression to the empty state. A stronger pitch for the business side of Pilgrimz. They run it without us One workshop later, the whole team designs through the OS. Not just the designers. Tokens saved, money saved No more twenty rounds of iteration and long prompts. Claude understands the system from the first pass. The Journey Phase 1 The AI-enabled foundation A design system built to be read by AI, plus the infrastructure inside Claude (Skills, agents, and context) so the team ships on-system. Phase 2 The design work Core flows and screens restructured around trust, retention, and the business, fast and consistent because the foundation existed. Phase 3 Social discovery Reframing social around destinations and inspiration. The chapter underway now. ? ? Looking for sticky notes and empathy maps? Let's chat instead. I'd rather tell you the real story over coffee ☕ Book a call Next Case Study Water.day UX Design