Open Props

Open Props is a set of CSS custom properties that give you design tokens for sizes, colors, shadows, easings and more. You can import the whole set or only the parts you need.

Open Props provides variables such as spacing, radius, shadow and animation values that you use in your own stylesheets. The naming is consistent across the set, so values are easy to predict. Files come from a CDN or from npm, in either CSS or JavaScript form. The package also includes an optional normalize file and button styles, plus a set of color and gradient props. Because the library gives you values rather than components, you still write your own layouts.

• Design tokens for sizes, shadows and colors
• Import the whole set or single prop packs
• Light and dark color scheme props
• Available from a CDN or npm
• Optional normalize and button styles

Developers who write their own CSS and want consistent values across a site. Teams that want small, dependency-free styling helpers, and designers who use tokens to keep spacing and color decisions aligned, will also find it useful.

Open Props is open source under the MIT license, so it is free to use. Several prop packs are marked as work in progress on the site, so check which ones are ready before relying on them. The site also has a playground and demos for each pack.