Shared Design System

Product teams were rebuilding the same inputs, dialogs and sheets from Figma by hand, and every release of the shared library reached about 20 apps, so one broken export broke other teams.

• 22 components, including an OTP/PIN input, date pickers, a navigation bar with 4 layouts, a dialog that becomes a bottom sheet on phones, bank and UPI logos and file upload.
• Figma tokens typed onto the Material UI theme through module augmentation, with light and dark values.
• A tree-shakeable Vite library build: preserved modules, explicit exports and side effects limited to CSS.
• Per-branch Storybook deploys in CI, and an upgrade from Storybook 8.6 to 10.3.
• A 1,200-line adoption guide for other teams, including Next.js App Router setup.

Moving the Video KYC SDK onto the system made its dialogs render 40px too wide on phones. Material UI renders dialogs in a portal on document.body, outside the SDK's scoped CSS baseline, so they lost border-box sizing. A global reset would have leaked styles into the host apps, so I scoped the fix to the dialog and snackbar roots only.

The Video KYC SDK went from about 2.9 MB (JS and CSS) to 651 KB of JS with no CSS file. Part of that drop is shared code the host app now loads once from the design system.