Open Props

Open Props is an open-source CSS library that provides a comprehensive set of CSS custom properties, commonly known as CSS variables, designed to accelerate web development with sensible defaults and a consistent design system out of the box. Created by Adam Argyle, the library offers over 400 ready-to-use CSS custom properties covering color palettes with OKLCH color space support for wide gamut displays, gradient presets, shadows with various elevation levels, aspect ratios, typography scales, border radii, easing curves, animation keyframes, z-index scales, sizing units, and more. The library is designed as a drop-in enhancement that works alongside any CSS framework or methodology, with zero JavaScript runtime and tree-shakeable imports that can be used via npm or CDN. Open Props includes JIT mode for on-demand property generation, normalized reset styles, and a full set of responsive media query tokens for consistent breakpoint usage. The color system features 10 shades per hue across a wide range of base colors, with automatic contrast support. The typography system provides fluid font sizes that adapt smoothly between screen sizes using clamp. The library emphasizes web standards and progressive enhancement, avoiding build steps or preprocessing where possible while still offering PostCSS and Vite plugin integrations for teams that need compile-time optimization. Open Props is particularly suited for rapid prototyping, design system bootstrapping, and educational use cases where developers want to learn modern CSS patterns without reinventing design tokens from scratch.