Dev.to WebDev 🛠 Dev 👁 0

I turned the design system of a real permissions product into a UI kit: 42 components, 14 screens, zero dependencies

I spent the last months building a web product for managing permits, and the design system I made for it ended up more polished than expected — so I hardened it into a standalone kit. What's in it: 42 documented compo

I spent the last months building a web product for managing permits, and the design system I made for it ended up more polished than expected — so I hardened it into a standalone kit.

What's in it:

  • 42 documented components (anatomy, variants, 14 states each: loading, empty, error, offline…)
  • 14 product screens: auth, lists, dashboard, wizard, print reports, onboarding
  • Full light AND dark themes — every token defined in both
  • WCAG 2.2 AA: contrast validated per token pair (even hover/disabled), 44px targets, reduced-motion support
  • Vanilla HTML/CSS/JS — no framework, no CDN, no build; the whole preview gallery is under 1.5 MB and runs from file://

One rule shaped it all: a UI anti-pattern detector had to report 0 findings before any visual change shipped. It started at 208.

It's paid ($39), so no pretending this isn't partly promo — happy to answer anything about tokens, theming or the QA gate.

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.