Design System Toolbox: Colors, Platforms & Metrics

Design system platforms

Supernova

Supernova.io is an end-to-end design system platform that connects design and engineering data, enabling teams to build, manage, and scale design systems efficiently, with features for token management, documentation creation, and automated design-to-code workflows.

Knapsack

Knapsack provides a consolidated platform to manage design and code decisions across your product and brand ecosystem enabling you to deliver better experiences to market, faster.  

Storybook

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

Specify

Flexible and powerful, Specify makes it easy to build the exact

Design Token workflow your Design System needs.

Zeroheight

The end-to-end design system management platform. Document. Deliver. Measure. Evolve.

Frontify

Frontify is a brand-building platform where a user-friendly DAM meets customized portals.

Backlight

Backlight empowers front-end teams to build and ship great design systems. A unique, all-in-one design system solution. For developers, loved by designers.

Figmayo

Create a fully featured documentation site from any Figma design system — instantly.

Colors

Leonardo

Whatever it is, the way you tell your story online can make all the difference.

FarbVelo

FarbVélo (Swiss-German for color bicycle) is a playful color picking tool. It follows simple rules and uses lots of random numbers to help you come up with pleasing color combinations or just chill while cycling through color harmonies.

Supa Palette

Generate or explore accessible, harmonious colors effortlessly, and save hours while building your design system.

Accessibility

Stark

Stark helps eliminate up to 100% of the accessibility issues originating in design. Our AI-powered Sidekick experience combined with our best-in-class manual tools helps every designer find and fix accessibility issues within seconds. And hand over fully annotated designs to developers.

Contrast Figma

Select and scan for contrast issues on gradients, images, blends, and fills with the latest WCAG standard.

Figma Plugin

RandomA11y

RandomA11y is an online tool that generates random, accessible color combinations meeting WCAG contrast guidelines, allowing users to vote on color pairs and providing a practical showcase of these palettes for designers and developers focused on creating inclusive digital experiences.

Usecontrast

Figma plugin for quick access to WCAG color contrast ratios.

Figma Plugin

Able – Friction free accessibility

Add color contrast and color blindness to your workflow with as little effort as possible. Open Able and we will automatically compare the contrast between two layers you select. This way, you can keep Able open, and casually select layers to compare without re-running or updating the plugin!

Figma Plugin

Design system metrics

Omlet

Analyze how and where components are used across your code repos to reduce front-end tech debt and prove design system value.