Pinwheel - Design Systems

About this app

Create beautiful gradients and palettes. Automate contrast testing. Convert between color formats. Export design systems to code. ### 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 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. ### 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. ### 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. ### 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.

Momentum comes from crawler snapshots for the tracked storefront. “Viral growth signal” means unusually fast recent rating gains; it is an indicator, not download data.

1. First observed Oct 1, 2026 · 6:25 AM $8.99