About this Post

Open Source CSS variables that help accelerate adaptive and consistent design.


I came across Open Props earlier this year, an open source library of sub-atomic styles (or tokens) by Adam Argyle. I also had a brief exchange with my buddy Eric Ritchey about it earlier this week, so I thought I'd finally write a post about it.

Announcing Open Props 🎉 ✨free✨ CSS variables
Loading...

Open Props consists of a plethora of expertly crafted tokens; it really puts the spotlight on the power of vanilla CSS variables and how to use them, especially if you're pursuing the path of creating a design system, or extending your existing system (because who isn't, right?!).

/* Example of Aspect Ratio Open Props */ --ratio-square: 1; --ratio-landscape: 4/3; --ratio-portrait: 3/4; --ratio-widescreen: 16/9; --ratio-ultrawide: 18/5; --ratio-golden: 1.618/1;

With Open Props, you can import subsets of the library into your app, which, in this arena, Open Props is a bit ahead of the Tesla Design System.

/* Example usage of Open Props */ @import 'open-props/style'; /* Optional imports that use the props */ @import 'open-props/normalize'; /* I dig this one: importing the button tokens, specifically */ @import 'open-props/buttons';

In our next major upgrade (TDS v8), we'll make incremental adoption of the Tesla Design System easier for teams across the company with this level of modular approach that Open Props offers. It's really neat to see the potential and value of this granular approach.

I've simply been in awe while playing around with Open Props. It's also a nice validation of the approach we've taken with Tesla Design System (TDS), which has been to build in vanilla CSS, then use this foundation to create other library implementations of TDS, like React, React Native, Vue, and eventually Angular.

Props and gratitude to Adam for creating this library and making it open source - cool stuff.