Bento Design System
Taking the system into the product
A design system only becomes valuable when it works in real product experiences. With stronger foundations and component behaviour in place, the next challenge was applying Bento across the interfaces customers actually used — combining reusable patterns into complete product experiences while maintaining consistency across brands and platforms.
A component library isn't a product
Individual components could be well designed and documented, but real product experiences introduced another level of complexity.
Components had to work together across different screens, journeys and content conditions — without losing the flexibility product teams needed to solve their own problems.
The challenge shifted from defining individual building blocks to understanding how those building blocks behaved as part of a complete experience.
Building repeatable product patterns
As components came together in real interfaces, recurring compositions began to emerge.
Navigation, content cards, product tiles, search, headers and actions weren’t experienced independently. Their spacing, hierarchy and behaviour needed to work together as a coherent interface.
Bento provided the shared building blocks while product context determined how they were composed.
The system had to survive reality
Components rarely appear under perfect conditions.
Real products introduce long restaurant names, different imagery, changing prices, promotional content, localisation and varying amounts of information.
Reusable UI therefore needed enough structure to remain predictable while allowing content and product context to change.
One system, many product moments
Bento supported interfaces across different stages of the ordering experience.
The same underlying foundations and component language could appear across discovery, browsing, selection and ordering while still adapting to the needs of each moment.
The goal wasn’t to make every screen identical. It was to create enough shared structure that the experience still felt connected.
Shared system, different expressions
Bento was designed to support multiple brands without requiring each team to rebuild the same underlying interface patterns.
Shared foundations and components created consistency at the system level, while brand expression could still come through in areas such as colour, typography, imagery and content.
This allowed the system to provide common structure without forcing every experience to look exactly the same.
Making the system usable by product teams
A design system doesn’t scale because the library exists. It scales when teams can confidently use it in their everyday work.
Clear components, product patterns and documentation gave teams a shared starting point, while design review and collaboration helped maintain quality as Bento moved into more product surfaces.
The system provided structure without removing the product teams’ responsibility to solve the problem in context.
From a library to a product language
Bento connected reusable foundations and components to the interfaces customers actually experienced.
Instead of treating the design system as a separate library, the work established a shared product language that could support different journeys, teams and brands.