Design system for Clearledger
A React component library with design tokens, documentation and visual tests, adopted by four product teams. A case study by Mateo Fernández, Frontend Developer (React & TypeScript).
Challenge
Clearledger, an accounting platform, 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.