Independent reviews. IonBin has no partnerships with the tools on this page and was not paid for these listings. Our evaluations are our own, based on public documentation and our research. Product names are trademarks of their owners and are used for identification only. How disclosure works.

Tokens & playbooks / CSS tokens

Open Props

Replace repeated visual guesses with a named CSS scale.

Documentation reviewed

Source review

What this status means

Understand the resource

What it is.

Open Props supplies CSS custom properties for values such as spacing, color, shadows and motion. Its pieces can be adopted selectively, which makes it useful when a product needs consistent values without replacing its component architecture.

When it is useful

Your CSS contains near-duplicate sizes and shadows with no shared meaning.

A proposed application

Put it to work.

This example illustrates a possible use. The proposed workflow and expected result are separate from the bounded checks recorded below.

Try this

Map a small spacing and radius subset to semantic project tokens, then refactor one card and one form.

Result to aim for

A controlled token layer with fewer arbitrary values.

Before you start

What you need.

  • CSS custom-property support and a deliberate mapping to project tokens.

The practical boundaries

What to watch for.

  • A token palette does not guarantee usable contrast or appropriate animation.
  • Remote CDN imports create a network dependency; review versioning, packaging and any normalization styles before adopting them.

Review record

What we could establish.

  • Public primary documentation and the bounded account-free checks below were reviewed. Open Props 1.7.23 resolved the tested spacing, radius, color and responsive type tokens. Five local checks passed; a raw spin token kept moving under reduced motion until the consuming CSS added a media guard.
Source coverage and runtime coverage are separate

The source-review notes describe documentation and identity. The account-free evaluation below records exactly which public interaction or local fixture was checked, what happened, and what remains untested.

Check current access, terms, licensing and data handling before using a resource with your own material.

Runtime and security evaluation

What the evaluation covers.

Bounded runtime checkedAccount-free ·

Open Props 1.7.23 resolved the tested spacing, radius, color and responsive type tokens. Five local checks passed; a raw spin token kept moving under reduced motion until the consuming CSS added a media guard.

Methods: Public HTTP response · Public browser sample · Local package fixture · Source review. A completed check covers the stated sample; it is not a safety certification.

Target
open-props
Version or capture
1.7.23
Integrity scope
sha512-+xyrJmxV9QUBFbSwPROYhOg/FLXry+uuPr4R+B5EaE4556Oc18/8ZC/fL5A+/lbRSwNvA0Alh+C0KpyFWLmLZg==

Test conditions

  • Chromium 155.0.8059.82 on Windows; fresh temporary profile and fresh account-free contexts.
  • Public HTTPS GET/HEAD requests only; telemetry/auth routes and WebSockets blocked. No account storage or credential environment variables.
  • Synthetic local inputs only. Package/skill source inspected before execution; no install lifecycle scripts run.
  • Local package/CSS browser fixtures block real network. Variate additionally uses Node filesystem permissions and a no-network preload.

Individual checks and observations

  1. Public document and DOM

    pass

    Public browser sample: Fresh Chromium GET, then inspect rendered controls after hydration delay

    Observed: HTTP 200; 70 captured button labels; 20 inputs; 0 canvases.

  2. Token application

    pass

    Local package fixture: Apply size-4, radius-2 and blue-6 to a synthetic element

    Observed: {"padding": "20px", "borderRadius": "5px", "color": "rgb(34, 139, 230)", "fontSize": "16px"}

  3. Fluid font scale

    pass

    Local package fixture: Measure font-size-fluid-1 at 320 and1280px viewports

    Observed: {"small": 16, "large": 24}

  4. Color-scheme shadow token

    pass

    Local package fixture: Switch emulated color scheme and read shadow-color

    Observed: {"light": "220 3% 15%", "dark": "220 40% 2%"}

  5. Inline noise asset

    pass

    Local package fixture: Apply noise-1 and inspect resolved background URL

    Observed: {"dataSvg": true, "outboundRequests": 0}

  6. Reduced motion requires consumer guard

    pass

    Local package fixture: Compare raw spin token with an authored no-preference media wrapper

    Observed: {"normal": [{"id": "unguarded", "running": 1}, {"id": "guarded", "running": 1}], "reduced": [{"id": "unguarded", "running": 1}, {"id": "guarded", "running": 0}], "interpretation": "Observed raw animation token keeps running. The consumer media wrapper stops its own animation; this is not a claim of automatic library motion suppression."}

Security findings and boundaries

Passive inspection of the public response headers, requested hosts and the named browser sample. Also inspected pinned source and the specified synthetic fixture outputs. No active exploitation, authenticated permissions test or complete security audit.

Observed · caution

Animation tokens need a motion policy

The same spin token ran under reduced motion. The authored no-preference wrapper stopped its own animation, showing that the consumer must decide when motion is appropriate.

Observed · info

Inspected package and isolated run

The pinned package declares no runtime dependencies; registry SHA512 matched. The synthetic browser fixture made zero outbound requests. This does not establish all possible package behavior.

Practical caveats

  • Map tokens into your own semantic names and add explicit reduced-motion rules before using animation tokens.
  • Pin and recheck the selected version or sample before adoption; the observations apply only to the scope and date shown.

What remains untested

  • Only the pinned compiled CSS and representative tokens were exercised; no complete token-build, contrast or browser-compatibility audit.
  • Fresh-browser restrictions can affect external assets and hydration. Initial failed selectors and limited probes remain in the evidence; they are not blanket product failures.

Security limits

  • No authenticated workspace, private content, production backend permissions or data-retention verification.
  • Only the pinned compiled CSS and representative tokens were exercised; no complete token-build, contrast or browser-compatibility audit.

Evaluation sources

  1. Primary public resource
  2. Exact evaluated registry archive

Download this evaluation record (JSON)

Follow the evidence

Sources and further reading.

  1. Primary product page
  2. Official linked repository

Keep exploring

More in tokens & playbooks.

View category

Documentation reviewed

UI Skills

Turn broad polish requests into focused review tasks.

Documentation reviewed

DesignSystems.one

Compare published systems and inspect their design foundations.