Open Props is a CSS custom properties library that provides design tokens to accelerate adaptive and consistent design across projects.
The tool solves the problem of establishing a shared design language by offering a comprehensive set of pre-defined CSS variables covering colors, gradients, shadows, aspect ratios, typography, easing functions, animations, sizes, borders, z-indexes, and media queries. Rather than building these foundations from scratch, developers import Open Props and reference its variables throughout their stylesheets, ensuring consistency and reducing repetition.
The library suits teams building design systems or projects that benefit from a standardized palette of values. It works well for developers who want to accelerate prototyping and maintain coherent spacing, sizing, and color schemes without the overhead of defining every value manually. Open Props is available via CDN for immediate use without a build step, through npm for integration into build pipelines, and as design tokens in multiple formats including JSON and Figma-compatible exports, making it adaptable to different workflows.
The project maintains active development with regular updates to its token sets and build tooling. The maintainers provide multiple generation modes through CLI commands, allowing developers to customize the output for different use cases such as versions without the `:where()` selector, scoped versions for Shadow DOM, prefixed variants, and JavaScript module builds. The tool includes a normalize stylesheet available separately, and the team supports the community through a Discord channel for questions and discussion.
