Pinwheel

Design systems

Pinwheel can be the source of truth for your design system, or a way to convert Figma variables into code. It supports many different workflows.

Color sets help when creating beautiful, stepped color gradients, and are perfect as design system primitives. OKLAB, OKLCH, and color space aware linear blending can be used, which avoids the typical issue of muddy colors in the middle of gradients.

Color aliases are an ideal solution for semantic colors. They reference other colors or color sets, dynamically updating as the original changes.

Pinwheel also includes shadows, numbers, strings, booleans, and more.

Works offline

Pinwheel can keep working, even when you have no internet connection.

Works with Figma

Yes! Pinwheel plays nicely with Figma. There’s various ways to integrate Pinwheel with Figma to keep variables in sync, including our very own Figma plugin.

Works for developers

Pinwheel’s document format is an open specification, and documents can be stored in Git repos. It’s likely Pinwheel can be integrated into your existing workflows and build scripts.

Groups

Everything can be organised in groups, and groups can be namespaced. What’s a namespaced group? If a namespaced group is called text, then a color alias inside could be called primary.

When exported, the color can be referenced as text.primary in Swift, or --text-primary in CSS.

Importing and exporting

Pinwheel imports Design Tokens JSON, Figma documents, Sketch documents, CSS, asset catalogs, and other file types.

Once you’ve finished making adjustments, automated exporting can be set up to simultaneously export in multiple formats. Would you like SCSS, Design Tokens JSON, and SwiftUI color enums all at once? Sure thing.

Pinwheel can also be run from the command line, if that sort of thing excites you. It excites us!

Exporting can process color and token names, too. Tokens in your Pinwheel documents can have nice capitalisation and spaces, but your CSS variable names can be kebab case with a prefix, and your Swift enums can be camel case.

Color testing

Pinwheel has on-the-fly color accessibility testing that shows WCAG 2 and APCA contrast next to the picker as colors are adjusted, making it faster to meet accessibility requirements.

More comprehensive and repeatable color accessibility testing can be set up, and the resulting reports can be saved as HTML or PDF documents.

Color accessibility testing can be run from the command line, too. Being able to easily re-run tests means regressions can be spotted and fixed quickly. It also means accessibility testing can be part of build scripts or unit testing.

Pinwheel handles opacity correctly when testing colors, unlike some other tools.

Custom templates

Pinwheel’s exporting supports a wide range of common formats. If you need a format we don’t support, a custom template can be used. Templates are incredibly flexible and have access to colors in a wide range of formats, including CSS color(), OKLCH, and RGBA float.

Fix common issues

When moving colors between design tools or into code, sometimes their appearance can change unexpectedly. Colors may become too vibrant, or too dull, not matching how they looked when they were originally chosen. Pinwheel provides utilities to resolve these issues in a single click.

Not a subscription

Pinwheel is USD$25 plus local taxes. All 1.x updates are included in that price. There’s also a 30-day free trial, so you can use it for a few weeks before making up your mind.

If you’d like to know more, please read about Pinwheel’s pricing and business model.

Privacy focused

Pinwheel and all our products are privacy focused, with no ads, no analytics, and no creepy tracking.

Unlike other tools, we aren’t watching you work. Documents aren’t stored on our servers, and we can not view them.