A curated gallery of 120 real-world design systems with evidence-linked guides, plus free interactive token, color and accessibility tools.
Design SystemsInspirationFree+1
designsystems.one
Dembrandt
dembrandt.com
Extract design tokens from any live website with one command, then track token drift, WCAG contrast and changes over time.
What is Dembrandt?
Dembrandt reads the design system off any live URL — run npx dembrandt example.com to extract colors, typography, spacing and shadows. The explorer shows real output from 21 brands, and every color pair is graded against WCAG AA and AAA. A drift dashboard tracks snapshots and baselines, with a CI drift gate that fails builds and Slack alerts when tokens move; exports include DTCG, brand guide PDFs and shadcn/ui themes.
Best for
- Auditing what shipped versus what you designed
- Watching live sites for design token drift
- Generating shadcn themes and DTCG exports
Key features
- One-command token extraction from any URL
- WCAG AA/AAA contrast grading for every pair
- Drift dashboard with snapshots and baselines
- CI drift gate and Slack alerts
- DTCG export, brand guide PDF, shadcn theme
Related resources
designsystems.one
A color generator for design systems — build 50–950 shade scales with contrast control and export straight to Tailwind CSS, CSS or design tokens.
ColorDesign SystemsTailwind+2
kigen.design
Visitopens in a new tab
Sub-atomic styles: an open source set of expertly crafted CSS custom properties for consistent, adaptive design, installable from a CDN or NPM.
CSSDesign SystemsOpen Source+2
open-props.style