Chardonnay: one Evino on every screen

Why "Chardonnay"?

At Evino, internal projects were named after grapes. The data lake, for example, was called Malbec. The design system became Chardonnay: the world's most versatile white grape, adapting to very different climates and styles without losing its identity. That's exactly what the system had to do across five platforms.

Problem

There was no standard. Buttons changed shape from screen to screen, structures repeated in different ways, and users moved between screens without feeling they were in the same app or site. For the team, that meant rework: every delivery came back from product review with visual fixes.

What I did

• Tokens as the foundation: color, spacing, motion and typography defined once and applied across every platform.
• 240+ components documented in libraries for design and engineering.
• Together with the developers, we cleaned up the existing code and replaced one-off elements with library components.

The tokens

Colors with light and dark themes, a spacing scale and radii, straight from Chardonnay's code.

From Figma to code

Chardonnay's web library, built by the front-end team from the system, is public: React and TypeScript, documented in Storybook, with 28 components. Several came from the checkout, like the credit card, the order summary, the payment methods and the free-shipping bar. Below, some of them rebuilt at scale, with the same sizes, radii and colors as the code.

Keeping the system alive

It took 2 years, with pauses due to company reprioritization. Three PMs came through the project in that time, and at every restart the system had to stay coherent.

Result

• A consistent experience across web, mobile, desktop, iOS and Android. Evino finally looked like one brand on every screen.
• Cleaner code, with duplicated elements replaced by components.
• Faster development: new screens were assembled from ready-made pieces.
• Less rework: post-code product reviews came back with far fewer fixes.