I wasn’t trying to build a tea database, or even a traditional “map.” What I wanted to understand was how tea behaves differently depending on where it grows—and how to express that visually without flattening everything into the same category labels.

Tea isn’t just leaves and regions. It’s climate, ritual, migration, adaptation, and sometimes absence. Some places grow tea at scale; others sit at the edges of possibility, shaping meaning through scarcity, trade, or improvisation. I wanted a system that could hold all of that without becoming literal or cluttered.

From Regions to Icons

Instead of starting with countries, I started with gestures.

For each region—Asia, Africa, Europe, and the Americas—I designed a small set of icons that represented how tea shows up there rather than what tea “is.” In Asia, this meant grounding the visuals in long-established cultivation and ceremonial forms. In Africa, the icons reflect climate, botanical diversity, and the ways tea intersects with indigenous plants and colonial histories. Europe became about rarity, adaptation, and wild or herbal traditions rather than scale. The Americas, in contrast, focus on movement—yerba mate, blended teas, and modern experimentation.

Designing for Interaction, Not Illustration

Once the visuals existed, the next challenge was how to use them on the site.

I started thinking in terms of interaction instead of presentation. Hover states, overlays, and clickable modules became a way to invite curiosity without overwhelming the page.

Each card holds back information until you engage with it. Hovering reveals context. Clicking leads deeper into a specific tea, region, or practice. The goal isn’t to explain everything at once, but to let visitors explore at their own pace—much like learning about tea itself.

Translating Design Into WordPress

From a development perspective, this project became an exercise in translation: taking a design system built visually and turning it into reusable WordPress components.

I built modular card layouts using CSS Grid, consistent hover overlays, and flexible content structures so the system can grow without breaking its own logic. The same module can represent a dessert, a tea tradition, or a geographic idea—because the structure is about relationships, not content type.

This was intentional. I wanted the site to behave more like an archive than a menu.

Why This Matters (to Me)

This project sits at the intersection of a few things I care deeply about: design systems, cultural research, and the quiet stories that don’t always get told in mainstream food narratives.

Tea is often presented as either extremely traditional or extremely commercial. What gets lost are the in-between spaces—the regions where tea survives rather than dominates, where people adapt plants to new climates, or where herbal traditions fill the gaps left by imported crops.

Building this system forced me to slow down, research carefully, and make design decisions that respected complexity instead of smoothing it over.

Where It’s Going

Interactions will become richer as the archive grows. But the core idea remains the same: use design and code to tell stories that aren’t easily summarized, and let exploration—not explanation—do the heavy lifting.

If you’re interested in how design systems can be used as storytelling tools rather than just UI scaffolding, this project is very much an open notebook.