Skip to content

Open Props

Open Props is a collection of reusable CSS variables for sizes, colors, shadows and other styles.

Visit Open Props

What does importing Open Props give you?

Import the stylesheet or a smaller group of variables. Then reference the values you want in your own rules. For example, use the same spacing value on a card and a dialog so related surfaces feel consistent.

The main library supplies values. It also offers separate extras, such as a normalization stylesheet. Check what an extra changes across the page before adding it.

Where should you define your app’s spacing?

Give the role a name in your own CSS, such as panel padding, and set it from a variable you choose. Then a new spacing value can update the surfaces that use that role without changing every rule.

You still write the layout and behavior. The Open Props library is MIT-licensed. Check outside fonts and assets separately.

How can you see whether two panels should share a value?

Sketch two fictional invoice panels. Use no stylesheet download or real app.

  1. Name the shared value
    Mark the space inside both panels with one name.
  2. Change it on paper
    Draw a tighter value and see whether both panels still fit long labels. If the jobs differ, give the spacing roles separate names.