Epicurean
Epicurean
Epicurean
Epicurean
A conceptual, unified framework for visual design, interaction, and accessibility at Resy
A conceptual, unified framework for visual design, interaction, and accessibility at Resy
Resy is a global dining platform that brings together restaurant discovery, reservations, and dining culture. Epicurean is a conceptual design system created to support consistency, accessibility, and scale across Resy’s diner-facing experiences.
Resy is a global dining platform that brings together restaurant discovery, reservations, and dining culture. Epicurean is a conceptual design system created to support consistency, accessibility, and scale across Resy’s diner-facing experiences.
Team: Project Manager, UI Designer, Editor, Facilitator
Role: Website Deconstruction, UI Kit Design, Design System, Documentation
Team: Project Manager, UI Designer, Editor, Facilitator
Role: Website Deconstruction, UI Kit Design, Design System, Documentation
Design System
UI Kit
Design System
Documentation
Documentation
Design System
Design System
UI Kit
UI Kit
Product Design
Design System
UI Kit
UI Kit
Polished on the outside, fragmented on the inside
Polished on the outside, fragmented on the inside
At first glance, Resy’s product feels expressive and intentional. The brand voices strong. The food photography is rich. The experience feels curated. But when we stepped back and audited the diner facing flows, delivery, reservation, editorials, a different picture emerged.
The design language wasn’t fully unified below the surface.
Inconsistent Visuals: Typography, spacing, and icons clash across pages
Interaction and Governance: No clear system for when to use specific actions
Accessibility: Missing interactive states, alt text and poor typography hierarchy
At first glance, Resy’s product feels expressive and intentional. The brand voices strong. The food photography is rich. The experience feels curated. But when we stepped back and audited the diner facing flows, delivery, reservation, editorials, a different picture emerged.
The design language wasn’t fully unified below the surface.
Inconsistent Visuals: Typography, spacing, and icons clash across pages
Interaction and Governance: No clear system for when to use specific actions
Accessibility: Missing interactive states, alt text and poor typography hierarchy
How might we standardize Resy’s design patterns while preserving its unique brand voice?
Introducing Epicurean
Introducing
Epicurean
Epicurean is a conceptual design system built for Resy. It creates a shared foundation that supports consistency, accessibility, and collaboration without changing Resy’s existing identity.
An “Epicurean” is someone who enjoys fine food and sensory experiences with refinements, not excess. Just as Resy connects diners to their next favorite restaurant, our design system will deliver these refined digital experiences through thoughtful and consistent design. It means precision in every component, quality in every interaction, and a design language that feels sophisticated and effortless, just like a perfect meal.
Epicurean is a conceptual design system built for Resy. It creates a shared foundation that supports consistency, accessibility, and collaboration without changing Resy’s existing identity.
An “Epicurean” is someone who enjoys fine food and sensory experiences with refinements, not excess. Just as Resy connects diners to their next favorite restaurant, our design system will deliver these refined digital experiences through thoughtful and consistent design. It means precision in every component, quality in every interaction, and a design language that feels sophisticated and effortless, just like a perfect meal.
Epicurean Toolkit
Epicurean Toolkit
Epicurean Toolkit
The hardest part of this project wasn’t designing the UI kit but designing the logic behind the UI. We faced significant challenges between Flexibility (giving designers freedom) and Convenience (giving them speed).
The hardest part of this project wasn’t designing the UI kit but designing the logic behind the UI. We faced significant challenges between Flexibility (giving designers freedom) and Convenience (giving them speed).
How granular should we get?
How granular should we get?
If we make components too flexible, they break consistency and if too rigid then the designer wouldn’t want to use it. To solve this, we organized Epicurean into three tiers:
If we make components too flexible, they break consistency and if too rigid then the designer wouldn’t want to use it. To solve this, we organized Epicurean into three tiers:
Foundations
We spent days debating naming conventions and type scales because the audit revealed inconsistent visual language across screens. We settled on a standardized token system for color, typography, and spacing. This ensures that even if two designers work in isolation, their screens feel related.
Foundations
We spent days debating naming conventions and type scales because the audit revealed inconsistent visual language across screens. We settled on a standardized token system for color, typography, and spacing. This ensures that even if two designers work in isolation, their screens feel related.
Foundations
We spent days debating naming conventions and type scales because the audit revealed inconsistent visual language across screens. We settled on a standardized token system for color, typography, and spacing. This ensures that even if two designers work in isolation, their screens feel related.
Components
We built components like buttons and cards with clearly defined states so that designers don’t have to recreate variants manually. While we allowed visual customization, we locked down interaction patterns to guarantee consistency.
Components
We built components like buttons and cards with clearly defined states so that designers don’t have to recreate variants manually. While we allowed visual customization, we locked down interaction patterns to guarantee consistency.
Components
We built components like buttons and cards with clearly defined states so that designers don’t have to recreate variants manually. While we allowed visual customization, we locked down interaction patterns to guarantee consistency.
Patterns
Patterns are composed of solutions for complex structures such as carrousels and menus.
This shifted the workflow from “How do I build this carousel?” to “Which carousel pattern fits this context?”
Epicurean provides three distinct carousel patterns designed for different content needs and user scenarios, helping teams move faster while maintaining consistency across experiences.
Patterns
Patterns are composed of solutions for complex structures such as carrousels and menus.
This shifted the workflow from “How do I build this carousel?” to “Which carousel pattern fits this context?”
Epicurean provides three distinct carousel patterns designed for different content needs and user scenarios, helping teams move faster while maintaining consistency across experiences.
Patterns
Patterns
Patterns are composed of solutions for complex structures such as carrousels and menus.This shifted the workflow from “How do I build this carousel?” to “Which carousel pattern fits this context?”
Epicurean provides three distinct carousel patterns designed for different content needs and user scenarios, helping teams move faster while maintaining consistency across experiences.
Patterns are composed of solutions for complex structures such as carrousels and menus.This shifted the workflow from “How do I build this carousel?” to “Which carousel pattern fits this context?”
Epicurean provides three distinct carousel patterns designed for different content needs and user scenarios, helping teams move faster while maintaining consistency across experiences.
Accessibility built into the system
Accessibility built into the system
Our early audit flagged issues with interactive states and color usage, so we shifted to treating accessibility as a foundational system rather than a final checklist. We built WCAG 2.2 AA compliance directly into our typography, color, tokens, and interaction models so that accessibility was inherited automatically rather than relying on individual decisions.
Our early audit flagged issues with interactive states and color usage, so we shifted to treating accessibility as a foundational system rather than a final checklist. We built WCAG 2.2 AA compliance directly into our typography, color, tokens, and interaction models so that accessibility was inherited automatically rather than relying on individual decisions.
Documentation on Zeroheight
A Figma file is not a system; it’s just a file. To make Epicurean usable, we built our documentation in Zeroheight. The goal was to eliminate the endless Slack messages asking “What font size is this?” by making design decisions clear, documented, and directly translatable to implementation.
A Figma file is not a system; it’s just a file. To make Epicurean usable, we built our documentation in Zeroheight. The goal was to eliminate the endless Slack messages asking “What font size is this?” by making design decisions clear, documented, and directly translatable to implementation.
Epicurean Design System Documentation in Zero Height
Epicurean Design System Documentation in Zero Height
Making Design System Documentation Accessible
Making Design System Documentation Accessible
We documented each component with detailed introductions paired with visual examples and clear usage guidelines. Every component page includes practical sections covering When to Use, Configuration Options were applicable, and Implementation Best Practices. We structured the information architecture to be intuitive and scannable, using plain language that serves both designers and developers. Visual do's and don'ts illustrate proper component applications.
We documented each component with detailed introductions paired with visual examples and clear usage guidelines. Every component page includes practical sections covering When to Use, Configuration Options were applicable, and Implementation Best Practices. We structured the information architecture to be intuitive and scannable, using plain language that serves both designers and developers. Visual do's and don'ts illustrate proper component applications.
Components & patterns overview
Components & patterns overview
Configuration guide
Configuration guide
Usage guidelines
Usage guidelines
Accessibility standards
Accessibility standards
Exploration can be messy but rebuilding established components shouldn’t be.
Exploration can be messy but rebuilding established components shouldn’t be.
Messy Design Board: Rebuilding established components shouldn’t require guesswork.
Messy Design Board: Rebuilding established components shouldn’t require guesswork.
What did the process look like?
What did the process look like?
Step 1
Step 1
Deconstructed the current Resy website
Deconstructed the current Resy website
Audited existing UI to uncover inconsistencies and gaps.
Audited existing UI to uncover inconsistencies and gaps.
Step 2
Step 2
Set up accessible typography token
Set up accessible typography token
Defined accessible typography tokens that meet WCAG-complaint standards
Defined accessible typography tokens that meet WCAG-complaint standards
Step 3
Step 3
Built components and patterns in UI kit
Built components and patterns in UI kit
Created scalable components such as cards, banners and reusable interaction patterns such as carousels, card groups etc.
Created scalable components such as cards, banners and reusable interaction patterns such as carousels, card groups etc.
Step 4
Step 4
Documented good practices on zeroheight
Documented good practices on zeroheight
Centralized guidelines to support consistent team adoption
Centralized guidelines to support consistent team adoption
To check the effectiveness of Epicurean, we asked designers to recreate few screens with our UI Kit
To check the effectiveness of Epicurean, we asked designers to recreate few screens with our UI Kit
Insight 1: Aligning components to the layout felt like guesswork without a grid.
Insight 1: Aligning components to the layout felt like guesswork without a grid.
The components were flexible, but without a grid, maintaining consistent layouts was a challenge.To address this, we introduced a default grid with defined breakpoints for different screen sizes, then updated components and patterns to snap to the grid. This allows to build layouts faster and consistent.
The components were flexible, but without a grid, maintaining consistent layouts was a challenge.To address this, we introduced a default grid with defined breakpoints for different screen sizes, then updated components and patterns to snap to the grid. This allows to build layouts faster and consistent.
Insight 2: Building card group within carousel became challenging due to the number of card variation.
Insight 2: Building card group within carousel became challenging due to the number of card variation.
Designers could easily customize components, but organizing cards into groups for carousel took too much time. While individual components were easy to customize, grouping cards for carousel layouts required repetitive manual assembly.
Designers could easily customize components, but organizing cards into groups for carousel took too much time. While individual components were easy to customize, grouping cards for carousel layouts required repetitive manual assembly.
To streamline this workflow, we introduced a dedicated card group pattern in the UI Kit. This pattern can be dropped directly into the carousel placeholder and swapped between different card group configurations from properties panel.
To streamline this workflow, we introduced a dedicated card group pattern in the UI Kit. This pattern can be dropped directly into the carousel placeholder and swapped between different card group configurations from properties panel.
Collaborating as a specialized infrastructure team to divide, conquer, and debate every system decisions
Collaborating as a specialized infrastructure team to divide, conquer, and debate every system decisions
I was part of a 3-person Design Infrastructure Team alongside Claire Jen and Myra Chen. We constantly challenged each other’s logic. Our sticky notes were full of questions like “How do we organize variables?” and “Aligning structure between 3 designers”. We used a workload tracker to ensure we were moving at the same pace, balancing the heavy lifting of token creation with the detailed work of component design.
I was part of a 3-person Design Infrastructure Team alongside Claire Jen and Myra Chen. We constantly challenged each other’s logic. Our sticky notes were full of questions like “How do we organize variables?” and “Aligning structure between 3 designers”. We used a workload tracker to ensure we were moving at the same pace, balancing the heavy lifting of token creation with the detailed work of component design.
Workload Tracker
Workload Tracker
As our final delivery, we pitched the Epicurean Design System to a hypothetical product design team at Resy, presenting our work as the Design Infrastructure Team.
As our final delivery, we pitched the Epicurean Design System to a hypothetical product design team at Resy, presenting our work as the Design Infrastructure Team.
Snapshot of our work over the span of 3 months
Snapshot of our work over the span of 3 months
My Contributions: Typography and media foundations; banners and cards; carousel, button group, and card group patterns; system-level accessibility documentation.
My Contributions: Typography and media foundations; banners and cards; carousel, button group, and card group patterns; system-level accessibility documentation.
Reflection
Reflection
The most challenging part of building Epicurean Design System was defining rules that allowed multiple designers and teams to work independently without fragmenting the Resy experience. This shifted my understanding of design systems from collection of components to a shared language that guides decision making. I was constantly challenged to think in terms of tokens, grids and accessibility standards.
The most challenging part of building Epicurean Design System was defining rules that allowed multiple designers and teams to work independently without fragmenting the Resy experience. This shifted my understanding of design systems from collection of components to a shared language that guides decision making. I was constantly challenged to think in terms of tokens, grids and accessibility standards.
Collaborating in the team taught me the value of debate and alignment, building a design system for teams requires a system built by teams where decisions are questioned, tested and agreed on before they can scale.
Collaborating in the team taught me the value of debate and alignment, building a design system for teams requires a system built by teams where decisions are questioned, tested and agreed on before they can scale.
Building Epicurean taught me that the best design system is about creating a shared language that empowers the entire team to build better products, faster.
Building Epicurean taught me that the best design system is about creating a shared language that empowers the entire team to build better products, faster.
Looking Ahead: Our 2026 Roadmap
Looking Ahead: Our 2026 Roadmap
Looking Ahead: Our 2026 Roadmap
Q1 focuses on foundations: tokens, responsive components, and initial testing. Q2 is about expansion and getting teams on board. Q3 scales things up with advanced patterns and a second testing round. Q4 adds polish and plans for 2027.
Q1 focuses on foundations: tokens, responsive components, and initial testing. Q2 is about expansion and getting teams on board. Q3 scales things up with advanced patterns and a second testing round. Q4 adds polish and plans for 2027.
Curious to see more? Dive into Epicurean UI kit and documentation.
Epicurean UI Kit
Epicurean UI Kit
A complete component library for Resy featuring foundations, reusable elements, and responsive patterns.
A complete component library for Resy featuring foundations, reusable elements, and responsive patterns.
VIEW
VIEW
VIEW
Epicurean Design System
Epicurean Design System
Documentation covering usage guidelines, accessibility standards, and best practices for the Epicurean system.
Documentation covering usage guidelines, accessibility standards, and best practices for the Epicurean system.
VIEW
VIEW
VIEW
More Projects
More Projects
More Projects
© 2025- Shreesa Shrestha
© 2025- Shreesa Shrestha
© 2025- Shreesa Shrestha
© 2025- Shreesa Shrestha