Design system for Monetra
A React component library with design tokens, documentation and visual tests, adopted by four product teams. A case study by Pedro Alves, Junior Frontend Developer (React).
Challenge
Monetra, a cross-border payments company, had three products built by different teams, with four button styles, two date pickers and colours defined in 40 places. Every redesign took months and still looked inconsistent.
Solution
Together with their designer I set up design tokens exported from Figma, built 38 core components in React with TypeScript and documented them in Storybook with usage guidelines. Visual regression tests protect every component from accidental changes.