Zhivko Todorov
ALL CASE STUDIES

CASE 166 · OASIS · 2025

STORYBOOKDESIGN SYSTEMCOMPONENTSCHROMATIC

A design system the front-end team actually uses.

A B2C marketplace had a Figma design system that didn’t map cleanly to the React component library, and a React component library that didn’t cleanly match what was shipping. We rebuilt around Storybook with Chromatic visual regression tests, making the design system the single source of truth.

INDUSTRY

B2C marketplace

DOMAIN

PLATFORM

DELIVERED

2025

STACK

STORYBOOK·CHROMATIC·REACT·FIGMA TOKENS·GITHUB ACTIONS

RESULTS

What changed, by the numbers.

COMPONENT DRIFT INCIDENTS

0

CHROMATIC-CAUGHT

DESIGN-SYSTEM ADOPTION

94%

OF FRONT-END PRs

CSS-DUPLICATION

−61%

YEAR-OVER-YEAR

DESIGNER REVIEW LATENCY

−72%

CHROMATIC LINKS IN PR

HOW IT WENT

The previous attempt had been a fork of an enterprise UI library that had been customised so heavily it no longer matched its upstream. Designers worked in Figma; engineers translated; the result drifted further apart over time. Nobody trusted that "the design system" meant the same thing on both sides.

Storybook hosted every component with usage examples and prop documentation. Chromatic ran visual regression tests on every PR — a pixel change in a component flagged for review. Figma tokens piped into the codebase via a token sync so colour, spacing, typography were shared as data.

Component drift incidents dropped to zero — Chromatic catches them at PR time. Design-system adoption hit 94% of front-end PRs. CSS duplication dropped 61% year-over-year. Designers now review changes via Chromatic links instead of pulling branches locally.

READY WHEN YOU ARE

Let's get your AWS bill (and architecture) in order.

The discovery call is free. You walk away with at least one concrete idea — even if we never work together.

Or email directly →