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
Open Props
open-props.style
Sub-atomic styles: an open source set of expertly crafted CSS custom properties for consistent, adaptive design, installable from a CDN or NPM.
What is Open Props?
Open Props ships web design tokens as plain CSS custom properties — colors, sizes, shadows, radii, easings, animations and named media queries. Import everything from unpkg or NPM and drop the variables into any framework, since they are just CSS. It is MIT licensed and aimed at making adaptive, consistent components faster to build.
Best for
- Adding consistent design tokens to any framework
- Speeding up adaptive, variable-driven CSS
- Projects that want tokens without a build step
Key features
- Design tokens as plain CSS custom properties
- Install from a CDN or NPM, as CSS or JavaScript
- Named media queries and ready-made animations
- Works with any framework, MIT licensed
Related resources
designsystems.one
Home of five free React UI effect libraries — Beam, Orb, Gooey, Metal and Image — built to be installed and wired up by coding agents.
ReactAnimationAI+3
libraries.dev
Extract design tokens from any live website with one command, then track token drift, WCAG contrast and changes over time.
Design SystemsCLIWeb+1
dembrandt.com