Features
- Comprehensive set of CSS custom properties
- Consistent design tokens for spacing, color, typography
- Adaptive color palettes with light/dark support
- Animation and easing presets
- Tree-shakeable — import only what you use
Pros
- Zero runtime — just CSS custom properties
- Framework-agnostic, works with any tech stack
- Provides design consistency without framework lock-in
Cons
- Requires understanding CSS custom properties
- Less opinionated than utility-class frameworks
- Smaller community and ecosystem than Tailwind
Overview
Open Props is a collection of CSS custom properties (variables) that provide a comprehensive design token system for building consistent UIs. Created by Adam Argyle (Google Chrome team), it offers carefully crafted values for colors, spacing, typography, shadows, animations, and more.
Unlike utility-class frameworks, Open Props gives you design tokens as CSS variables that you use in your own CSS. This approach is framework-agnostic, works with any styling method, and adds no runtime overhead. The properties follow consistent naming conventions and are designed to work together harmoniously.
When to Use
Open Props is the right choice when you want a design token system without a framework, when you prefer writing traditional CSS with good defaults, or when you need a lightweight set of design primitives that work across different projects and frameworks.
Getting Started
npm install open-props@import "open-props/style";
.card {
padding: var(--size-3);
border-radius: var(--radius-2);
box-shadow: var(--shadow-2);
background: var(--surface-1);
color: var(--text-1);
}
.card:hover {
box-shadow: var(--shadow-3);
}