Open Props

Open Props is not a framework and ships no components. It is a set of design tokens published as native CSS custom properties: colours, sizes, easings, shadows, gradients, animations and font stacks. Think of it as Tailwind's scale discipline without Tailwind's class syntax or its build step.

At a glance

Install	one @import, or npm install open-props
What it gives you	tokens only, no components, no utilities
Format	plain CSS custom properties
Build step	none required
MCP server	not published
License	MIT

Install

@import "https://unpkg.com/open-props";

What using it looks like

You keep writing normal CSS in normal stylesheets. The tokens just remove the arbitrary numbers.

.card {
  background: var(--surface-2);
  padding: var(--size-4);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-3);
  transition: box-shadow var(--ease-3) 200ms;
}

.card:hover {
  box-shadow: var(--shadow-5);
}

Why this is a real category

The usual argument against utility classes is that they put styling decisions in markup. The usual argument for them is that ad hoc CSS drifts into forty slightly different spacing values. Open Props resolves both: the scale is enforced, the markup stays clean, and nothing compiles.

Because the tokens are standard custom properties, you can also mix them into any other library on this list without conflict.

Choose it if

• You write CSS by hand and want a consistent scale rather than invented values.
• You want design tokens that survive a change of framework.

Look elsewhere if

• You want components or utilities. There are none of either.
• You want opinionated defaults that make an unstyled page look good. Pico does that instead.