Skip to content
aiarabicdev
Design systems

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.

FreeMITCSSSelf hostable

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
NEXT TO IT ON THE SHELF

Compare with these

@arabic_Intelligence

New entries, as they land

One channel. New tools when they are added, with the caveat included. No daily digest, no course, nothing to buy.

Join the Telegram

Free. No email required.