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.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.