Building the TOQUE Design System
TOQUE is a recipe-sharing app that struggled with retention and engagement.
As lead UX designer, my goal was to improve usability, spark engagement, and add customization—without overwhelming novice cooks. It all started in the kitchen—literally.
As I explored global ingredients and flavors, it became clear the visuals needed to taste like the food: tomato-paste reds, garlicky creams, herbaceous greens. What began as a simple redesign evolved into a flavor-first design system—an expressive, scalable UI that felt edible, intuitive, and alive. The system brought consistency, but more importantly, it unlocked speed, control, and creative exploration.
I wasn’t just creating order—I was building a system that could tell a story.
🛠 What I Built
→ Typography Scale: Designed for clarity—big titles, easy-to-read body text, and thoughtful spacing between steps.
→ Color System: Inspired by food. Tomato red, herb green, citrus yellow—each hue tied to feeling and function.
→ Button System: Modular CTAs for moments like “Start Cooking” or “Flip it”
→ Component Library: For recipe cards, sliders, sharing overlays, tutorial flows, and onboarding.
→ Color Tokens: Semantic and scalable. I didn’t just name colors by hue—I named them by function (e.g. Surface 100, Content 800).
→ Text Styles: Hierarchy mapped to information type, not just size. From H1 down to caption, all reusable.
→ Link & Button Components: Clear states. Built for reusability in Framer.
→ CMS Labeling System: For global recipes and experiments like "Flavor Flip."
🧩 Why It Mattered
→ It was important to have a flexible product experience that let users explore inspiration in different ways—from ingredients to moods to regions.
→ There needed to be a way to keep styles consistent while testing new layouts and flows.
→ It had to be scalable, responsive, and accessible.
🎨 Color as Storytelling
We didn’t just choose colors for contrast—we chose them to evoke flavor, emotion, and possibility:
→ 🍅 Red = Tomatoes = Flavor + Familiarity
Used for ingredient icons and quick action buttons. Warm and inviting—like home-cooked food.
→ 🌿 Green = Freshness + Flexibility
Used for ingredient swaps and customization highlights. Signaled health, growth, and freedom.
→ 💡 Yellow/Orange = Ideas & Warmth
Used for “Flip it” toggles. These colors supported experimentation and surprise.
→ 🫐 Blue/Purple = Structure
Anchored the interface. Helped balance the vibrancy and brought in a feeling of stability.
The palette was playful but usable, colorful but not chaotic.
The aim was to match the energy of the user feeling inspired and made TOQUE feel accessible to anyone inspired to cook.
🔠 The Flavor of Type
Why Epilogue? - Used for headings (H1, H2, etc.)
– A modern geometric sans-serif with a slightly editorial feel.
– Has a refined, minimalistic tone while conveying a clean structure— perfect for a food/cooking app.
– It brings a slightly elevated tone—implying that this app is well-designed, not “just another recipe app."
Why Nunito? - Used for body text
– Soft, rounded sans-serif that adds warmth and friendliness.
– It’s highly readable, even at small sizes—perfect for long ingredient lists or instructions.
– It feels more approachable and community-driven, balancing the structure of Epilogue with a sense of human touch.
Chips
Users were seeking personalization and control, usability testing showed that interface had too many dropdowns, checkboxes, toggles, and long lists of filter options. Navigating content—whether recipes, products, or project tags—it sometimes felt like alphabet soup.
Users wanted clarity. They wanted speed, not scroll fatique.
Enter: Chips and Tag Pills.
Small, rounded rectangles with one mission: Let users see, select, and control their inputs instantly.
Design Principles That Emerged
→ Clarity > Cleverness: Inspired by user frustration with long recipe blogs, I prioritized stripped-down content and UI.
→ Inspiration, Not Intimidation: The interface needed to energize, not overwhelm. Typography and spacing played a big role.
→ Customization with Guardrails: Features like “Flip it” needed to work across cuisines and flavors. Structure made this scalable.
The Process
→ Audited the UI for repeatable patterns.
→ Named every style by role, not just looks.
→ Built with flexibility in mind (what if we changed color schemes later?).
→ Used the design system to speed up prototyping for the rest of the project.
💡 What I Learned
→ Design systems aren’t just for scale—they’re for sanity.
→ Naming conventions matter more than you think.
→ A good system lets you design faster, test quicker, and focus on what matters most: the idea.
→ This wasn’t just about polish. It was about building a system helped enable experimentation.
