Open-Props

What Is Open Props?

Open Props is a set of CSS custom properties, design tokens delivered as ready-to-use CSS variables, created by Adam Argyle. Rather than being a framework that imposes layout structures or pre-built components, Open Props gives you a curated palette of values for color, typography, spacing, sizing, shadows, gradients, easings, and animations, all exposed as standard CSS variables you can drop into your own styles. The tagline that best captures it is "supercharged CSS variables": you keep writing ordinary CSS, but with a thoughtfully designed system of values at your fingertips.

The core idea is to bridge the gap between writing every value by hand and adopting a full design system. Building a consistent interface requires hundreds of small decisions, what shade of blue, how much padding, how soft a shadow, how snappy an animation, and Open Props makes those decisions for you in the form of sensible, well-named tokens. You reference var(--size-3) for spacing, var(--blue-6) for a color, or var(--shadow-2) for elevation, and you get a coherent result without inventing your own scale from scratch.

Open Props is open source under the MIT license and is framework-agnostic by design. It works with plain HTML and CSS, with any JavaScript framework, and alongside other CSS tools, because at the end of the day it is just CSS custom properties. It is not a SaaS product, not a browser extension, and not a component library. You can include it from a CDN, install it via a package manager, or import only the specific token groups you need.

Positioning matters here. Open Props is not a competitor to component frameworks like Bootstrap in the usual sense, because it does not give you buttons, cards, or navbars. Instead it competes with the idea of hand-rolling your own design tokens or pulling in a heavier framework just to get a consistent scale. It pairs naturally with utility-first tools and with classless frameworks alike, and it is increasingly used as the token foundation underneath custom design systems. Because it is built entirely on native CSS variables, it leans into the platform rather than abstracting it away, which appeals to developers who want modern, maintainable CSS without a heavy build-time dependency.

How Open Props Works

Open Props works by defining a large library of CSS custom properties, typically attached to the :root selector, that you then consume throughout your own stylesheets. When you include Open Props, your document gains access to dozens of well-organized variable groups, and you author styles by referencing those variables instead of hard-coding values. The browser resolves the variables natively at runtime, so there is no special syntax and no proprietary tooling involved.

The tokens are organized into intuitive scales. Sizes and spacing follow a numbered scale such as --size-1 through larger steps, giving you a consistent rhythm for padding, margins, and gaps. Colors are exposed as named hues with numbered shades, for example --blue-0 (lightest) through --blue-12 (darkest), covering a full spectrum so you can build palettes without a color picker. Typography tokens cover font sizes, line heights, font weights, and letter spacing. There are also tokens for borders and radii, shadows for elevation, gradients, animations and easings, and aspect ratios.

A central benefit is that these variables compose cleanly with modern CSS features. Because they are real custom properties, you can use them in calc(), swap them under media queries, redefine them inside a component scope, or override them entirely to theme a site. Open Props also ships optional normalize styles and supports adaptive light and dark color schemes, so the same tokens can respond to a user's preferred color scheme.

The framework is consumable in two main ways. The simplest is to link the full Open Props stylesheet from a CDN, after which all tokens are globally available. For production, developers more often install the package and import only the token groups they use, or rely on a PostCSS plugin that inlines just the referenced variables, keeping the shipped CSS lean. Either way the authoring experience is the same: write normal CSS, reference the tokens, and let the cascade do the rest.

Because Open Props is purely a set of values, it imposes no layout opinions and no class structure. You decide how to build your components and your grid; Open Props simply ensures the raw values you plug in are consistent and tasteful. This separation, values handled by the token library, structure and components handled by you, is the essence of how it fits into a project, and it is why the tool slots so comfortably into many different stacks without conflict.

How to Tell if a Website Uses Open Props

Detecting a design-token library is fundamentally different from detecting a component framework, and it is genuinely harder. Open Props adds CSS custom properties rather than recognizable HTML classes, so there is no telltale markup in the DOM the way there is with class-heavy frameworks. StackOptic and a careful manual investigator therefore look at the stylesheet and the custom properties rather than at element class names. Be aware that this is one of the harder fingerprinting cases, and a confident answer often depends on the variables being present under their original names.

The Open Props stylesheet link. The clearest signal is a stylesheet loaded from an Open Props CDN path or a file named recognizably, such as a link containing open-props (for example an open-props.min.css or a jsdelivr/unpkg URL referencing the package). Seeing that link in the <head> is the most direct confirmation.

Characteristic custom-property names. Open Props uses a distinctive, well-documented naming convention for its variables. Inspecting the computed styles or the stylesheet for custom properties like --size-3, --blue-6, --shadow-2, --ease-3, or --gradient-7 is a strong signal, because that exact vocabulary is specific to Open Props. In DevTools you can select :root and scan the list of defined custom properties.

Inlined variables from a build. When a project inlines only the variables it uses via the PostCSS plugin, the CDN link disappears, but the custom-property names survive in the served CSS. Searching the stylesheet text for the Open Props naming pattern is then the way to recognize it.

Method	What to do	What Open Props reveals
View Source	"View Page Source" and scan <link> tags and inline <style>	A reference to open-props or its CDN path
Browser DevTools	Select :root in the Elements panel and read the Styles pane	Custom properties like --size-*, --blue-*, --shadow-*, --ease-*
Network tab	Inspect loaded stylesheets	A request for an Open Props CSS file
curl -s	`curl -s https://example.com	grep -iE "open-props
Wappalyzer	Run the extension on the page	May identify Open Props when the CDN path is detectable

A practical check is to open DevTools, select the :root element, and look for the unmistakable Open Props variable names; alternatively curl -s https://example.com | grep -i "open-props" surfaces a CDN link if one exists. For the broader approach to inspecting a site's styles, see how to find what fonts and colors a website uses and the general how to find out what technology a website uses.

A candid caveat applies. Because Open Props is "just variables," a developer can copy a subset of tokens into their own stylesheet and rename them, at which point the library becomes effectively undetectable, you would only see generic custom properties with no clear origin. Even unmodified, distinguishing Open Props from a hand-written token system requires recognizing its specific naming scheme rather than relying on a single obvious marker. This is the same difficulty that makes minimal and atomic CSS approaches hard to fingerprint in general; the less unique markup or naming a tool leaves behind, the lower the confidence of any detection. Server-side analysis helps by retrieving the raw, unmodified CSS and HTML so that any surviving CDN reference or characteristic variable names are easy to read. When the tokens have been fully absorbed and renamed, honest detection acknowledges uncertainty rather than guessing. If you also want to confirm any JavaScript framework the site pairs with Open Props, our guide on how to check what JavaScript libraries a website uses is a helpful companion.

Key Features

• Comprehensive design tokens. Curated CSS variables for color, spacing, sizing, typography, borders, radii, shadows, gradients, easings, and animations.
• Framework-agnostic. Pure CSS custom properties that work with plain HTML, any JavaScript framework, or alongside other CSS tools.
• Native CSS variables. Tokens resolve at runtime with no proprietary syntax, usable in calc(), media queries, and scoped overrides.
• Adaptive color schemes. Built-in support for light and dark modes that respond to user preferences.
• Optional normalize layer. A normalize stylesheet is available to standardize browser defaults.
• Selective imports. Install via a package manager and include only the token groups you need, or inline just the referenced variables with a PostCSS plugin.
• MIT licensed and open source. Free to use, self-host, and adapt.

Pros and Cons

Pros

• Provides a consistent, tasteful set of design values without forcing layout or component opinions.
• Built entirely on native CSS variables, so it is future-proof and leans into the platform.
• Composes cleanly with any framework or with hand-written CSS.
• Can be tree-shaken or inlined so only the tokens you use ship to production.

Cons

• Not a component library; you still build all your own UI structure and components.
• Requires familiarity with CSS custom properties to use effectively.
• Harder to detect and reason about than class-based frameworks, which can complicate auditing.
• The breadth of tokens can be overwhelming until you learn the naming scheme.

Open Props vs Alternatives

Open Props occupies an unusual position, it is a token layer rather than a framework, so comparisons should account for that difference. The table below clarifies where it fits.

Tool	What it provides	Layout/components?	Best for
Open Props	Design tokens as CSS variables	No (values only)	Custom design systems wanting consistent values
Tailwind CSS	Utility classes generated from a token config	Utilities, no components	Teams building bespoke UIs from utilities
Bootstrap	Components and utilities	Yes, full library	Applications needing ready-made UI
Pico CSS	Semantic element styling	Element styles, minimal classes	Semantic HTML with elegant defaults
Hand-rolled tokens	Whatever you define	No	Teams wanting full control and willing to maintain it

Open Props is frequently paired with the very tools it is compared against. You might use its tokens as the value layer beneath a custom system, or alongside a utility tool. To see how a utility-first approach differs, read how to tell if a website uses Tailwind CSS, and compare Open Props with the semantic, class-light Pico CSS for a contrasting philosophy.

Use Cases

Open Props is most valuable for teams and developers building a custom design system who want a high-quality set of base values without inventing every scale themselves. It gives a new project an instant, coherent foundation, consistent spacing, a full color spectrum, sensible shadows and easings, so the team can focus on structure and components rather than bikeshedding raw values.

It also suits developers who prefer writing their own CSS but want consistency, design-conscious engineers who appreciate tasteful defaults, and projects that mix multiple frameworks and need a shared token vocabulary across them. Because it is framework-agnostic, it is a natural choice in React, Vue, Svelte, or Astro projects, as well as plain static sites. Prototyping benefits too: you can assemble a polished-looking interface quickly by leaning on the tokens, then refine later.

Picture a few representative adopters. A small product team starting a new web app might include Open Props to get a professional spacing and color system on day one, then build their components on top using the tokens for every value. A design engineer who dislikes utility-class markup but wants consistency might write semantic CSS that references Open Props variables throughout, keeping the HTML clean while the values stay systematic. A developer maintaining several small sites might standardize on Open Props so that every project shares the same underlying scale, making it easier to move between them. The unifying theme is a desire for consistency and quality at the value level, with full freedom over everything above it.

From a technology-detection standpoint, recognizing Open Props is a nuanced signal. Its presence suggests a modern, CSS-savvy team that values design tokens and native platform features over heavyweight frameworks, often a sign of careful front-end engineering. Because the library is harder to fingerprint than class-based tools, confidently detecting it across many domains is genuinely difficult, which is part of what makes automated, multi-signal analysis valuable when it can surface the clue at all.

Frequently Asked Questions

Is Open Props a CSS framework?

Not in the traditional sense. Open Props is a library of design tokens, CSS custom properties for color, spacing, typography, shadows, animations, and more, rather than a framework that ships layout systems or pre-built components. You still write your own CSS and build your own UI; Open Props simply supplies a consistent, well-designed set of values to plug in. It is often described as "supercharged CSS variables" precisely to distinguish it from component frameworks.

How do I tell if a site uses Open Props?

Look for a stylesheet link referencing open-props or its CDN path, then open DevTools, select the :root element, and scan the custom properties for Open Props' distinctive names like --size-3, --blue-6, or --shadow-2. A curl -s URL | grep -i open-props can surface a CDN reference. Be aware that if a developer has inlined and renamed the tokens, the library can be effectively invisible, so detection is inherently less certain than for class-based frameworks.

Can Open Props be used with React or other frameworks?

Yes. Open Props is framework-agnostic because it is nothing more than CSS custom properties. It works equally well with React, Vue, Svelte, Angular, Astro, or plain HTML, since every modern framework ultimately renders to the DOM and styles it with CSS. You include the tokens globally or import the groups you need, then reference the variables in your component styles, CSS modules, or stylesheets exactly as you would any other CSS.

Does Open Props add a lot of weight to a page?

It does not have to. While the full token library defines many variables, production setups commonly import only the groups in use or rely on a PostCSS plugin that inlines just the variables you actually reference. That keeps the shipped CSS lean. Even the complete set is plain CSS with no JavaScript, so the runtime cost is minimal; the main consideration is including only what you need rather than the entire catalog.

Is Open Props free and open source?

Yes. Open Props is released under the permissive MIT license and is free to use in personal and commercial projects. You can include it from a CDN, install it from a package manager, self-host the files, or copy and adapt the tokens. As an open-source project created by Adam Argyle, it can be used and modified freely without licensing fees or sign-up.

Want to detect Open Props and the rest of a site's technology stack instantly? Analyze any URL with StackOptic at https://stackoptic.com.