Unified Design System, React Component Library for Self-Service Banking
A leading Romanian retail bank
Overview
A shared React component library, the bank’s Unified Design System (UDS) for self-service banking, packaged as a reusable npm module so every SSS front-end renders a consistent, on-brand UI.
What We Built
A TypeScript + SCSS component library (rbro-tat-uds, internal package rbro-usd-package) organised by atomic design: components/atoms and components/molecules, with a parallel SCSS system (scss/atoms, scss/utils, global.scss) for tokens and styling. It’s bundled with Rollup into ESM, CommonJS and typed (.d.ts) outputs via the package’s main/module/types entry points, with React/React-DOM as peer dependencies so consuming apps share a single React. Babel handles transpilation; a full Storybook 7 setup (.storybook/, stories such as SButton, Header, Page, plus a playground/) documents and showcases components in isolation. Sass is compiled through the Rollup pipeline for self-contained styling.
Technologies & Approach
Rollup for a clean, tree-shakeable multi-format library build; peer-dependency React to avoid duplication; atomic-design structure for scalability; Storybook for living documentation and visual review. Shipping typed bundles makes the library safe to consume across the bank’s TypeScript front-ends.
Outcome / Impact
Centralised the UI layer for the self-service banking suite into one versioned, documented design system, reducing duplication and keeping the identity, anti-takeover, lending and advisory front-ends visually and behaviourally consistent.
Capabilities Demonstrated
- Design systems and reusable React component libraries
- Atomic-design UI architecture (atoms/molecules + SCSS tokens)
- Multi-format library packaging with Rollup (ESM/CJS + types)
- Living documentation and visual testing with Storybook