Polkadot Design System

A system to define the look and experience of web3

Company
Parity Technologies
Role
Design System, Design, Front End
Year
2023
Tags
Design System, UI, Front End
Tech
Figma, Token Studio, Style Dictionary, React

GitHub

Summary

Shared design language for the Polkadot ecosystem. Token pipeline: Figma → Token Studio → Style Dictionary → CSS variables + Tailwind config.

Problem

Brand designers, product teams, and external builders all worked in isolation. A shared system was needed to improve consistency, collaboration, and speed across a diverse, distributed ecosystem.

Process

Aligned designers org-wide, collected web3 best practices, defined shared principles. Built the token system: style primitives from Figma via Token Studio → Style Dictionary → CSS + Tailwind. Internal contributions first, with a Treasury-funded ecosystem vision that wasn't realized before company shutdown.

Outcome

Five Polkadot products were built on the system. Daniel built three of them alongside the system itself — the Open Gov Delegation Dashboard, the Validator Selector and an Asset Menu demo — each feeding new components back into the library; Multisig Commander and a staking dashboard used it too. The theme is public at github.com/dnlklmn/polkadot-theme. Parity shut down its app-building efforts before the Treasury-funded ecosystem contribution model could be realized.

Best for