Open Props — Supercharged CSS Custom Properties

Introduction

Open Props is a library of CSS custom properties (variables) covering colors, sizes, typography, easing curves, animations, gradients, borders, and shadows. Instead of defining your own design tokens from scratch, you import Open Props and use its consistent, well-tested variables throughout your stylesheets. It works with any framework or no framework at all since it is pure CSS.

What Open Props Does

• Provides 100+ CSS custom properties for colors organized in perceptually uniform palettes
• Includes size scales, fluid typography, and spacing variables for consistent layout
• Offers easing functions, animations, and transition presets as ready-to-use variables
• Supplies shadow, border-radius, and gradient tokens for polished UI elements
• Ships an optional normalize stylesheet that applies sensible defaults using the props

Architecture Overview

Open Props is generated from a set of source files that define each token category (colors, sizes, easings, etc.) using a build system that outputs standard CSS custom property declarations. The library ships as individual CSS files per category so you can import only what you need. There is no JavaScript runtime. Every token is a CSS custom property defined on :root, making it compatible with any styling approach including plain CSS, Sass, PostCSS, Tailwind, or CSS-in-JS solutions.

Self-Hosting & Configuration

• Install via npm with npm install open-props or link the CDN stylesheet
• Import the full bundle with @import "open-props/style" or pick individual modules like open-props/colors
• Override any variable in your own stylesheet by redefining it on :root or a more specific selector
• Use the optional normalize import (open-props/normalize) for a styled baseline
• Integrate with PostCSS using the JIT plugin to tree-shake unused variables from production builds

Key Features

• Pure CSS with no JavaScript runtime or build step required for basic usage
• Perceptually uniform color palettes generated using the OKLCH color space
• Fluid typography and spacing that scale smoothly between viewport sizes
• Modular imports let you pick only the token categories your project needs
• PostCSS JIT plugin strips unused variables for minimal production CSS output

Comparison with Similar Tools

• Tailwind CSS — utility classes applied in HTML; Open Props provides design tokens as CSS variables you use in your own stylesheets
• CSS Modules — scoped styling for components; Open Props complements any scoping solution by providing shared design tokens
• Design Tokens (W3C) — a format specification for tokens; Open Props is a ready-to-use implementation of that concept in CSS
• Bootstrap Variables — framework-specific tokens tied to Bootstrap components; Open Props is framework-agnostic and focused solely on design tokens

FAQ

Q: Does Open Props require a build step? A: No. You can link the CSS file from a CDN and start using the variables immediately. A build step is only needed for tree-shaking unused variables.

Q: Can I customize the color palette? A: Yes. Override any variable on :root in your stylesheet. You can also fork the source and regenerate with your own palettes.

Q: Does Open Props work with Tailwind CSS? A: Yes. You can reference Open Props variables in your Tailwind config theme section or use them alongside Tailwind utility classes.

Q: How large is the full bundle? A: The full CSS file is roughly 15 KB gzipped. Using the PostCSS JIT plugin reduces this to only the variables you actually reference.

Sources

• https://github.com/argyleink/open-props
• https://open-props.style