Open Props
A ready made set of CSS custom properties, no framework attached
Open Props is a library of CSS custom properties covering colour, spacing, type, shadows, easings and animations. It is a token layer and nothing else, usable in plain CSS with no build step, no components and no opinion about your markup.
Why a token only library is useful
Most projects need a considered scale far more than they need components. Open Props gives you a complete set of scales, already balanced against each other, which removes the tedious part of starting a design system without importing anyone's aesthetic.
The easing and animation properties are the standouts. Well chosen curves are hard to invent and immediately improve every transition in a project.
How it sits alongside Tailwind
They overlap and can coexist. Tailwind's theme layer is itself custom properties now, so Open Props values can be mapped straight into it when you want its scales without leaving Tailwind.
For projects not using a utility framework at all, this is the shortest path to a coherent set of variables.
Reach for it when
- you want a considered scale without adopting a framework
- the project is plain CSS with no build pipeline
- you need good easing curves and do not want to invent them
Watch out for
- tokens only, so components and layout remain entirely yours
- importing the whole set adds a lot of unused custom properties, so take the subsets you need
- it overlaps with Tailwind's theme, so decide which one owns a value
Compare with these
- Design systemsFree
Awesome Design Systems
The published design systems of dozens of real companies, in one list
- design-systems
- tokens
- documentation
CC0-1.0Read - Design systemsFree
Primer
GitHub's design system, documented for developers rather than designers
- design-systems
- github
- tokens
MITRead - Design systemsFree
Carbon Design System
IBM's system, built for dense data and long lived enterprise software
- design-systems
- ibm
- enterprise
Apache-2.0Read