Color Swatch Pro for Figma

Color Documentation,
Claudemated!

Build complete, accessible, token-ready color palettes in minutes. Color Swatch Pro pairs with Claude and the Figma MCP workflow to turn a prompt into a fully documented design system.

Download Color Swatch Pro · $29

View Demo

45min

saved per palette

22+

color primitives

2×

contrast models

109

--brand-primary-500

#4040a0

H: 240 S: 43 L: 44

Large text:45

Fluent text:60

Body text:75

✗Preferred:90

_color-swatch

Contrast Mode

Dark Mode

Color

--name

-value

↳ Hue 240

↳ Saturation 43

↳ Lightness 44

Token 1

Token 2

How it works

Prompt… Palette… Done

Six automated steps replace hours of manual work. Claude reads the component structure and handles everything.

Generate Color Variables

Claude creates primitive color variables directly in Figma with your chosen palette and naming conventions.

Build Swatch Components

Every color variable becomes a fully documented swatch — token name, HEX, HSL, and contrast data included.

Calculate Contrast

WCAG and APCA contrast values are computed and written into each swatch automatically. No manual testing.

Optimize for Dark Mode

Colors are evaluated and adjusted for both light and dark mode usage with token references for each.

Toggle Pass/Fail

Accessibility indicators flip on for large, fluent, body, and preferred text thresholds across every swatch.

Organize the Palette

Auto layout arranges everything into a clean documentation grid — ready to share with designers and engineers.

See it in action

Watch the full walkthrough

See how Claude and Color Swatch Pro work together to build a complete, accessible color system in minutes.

What's inside

Everything you need to
document color properly

Full Documentation Component

Each swatch displays token name, color value, HEX and HSL formats, contrast ratings, and accessibility status. Everything designers and engineers need in one component.

WCAG & APCA Contrast

Toggle between contrast models. Meet today's WCAG standard while preparing for APCA — the next generation accessibility scoring model.

Token-Ready Architecture

Built with design token references from the ground up. Works with light and dark mode and supports variable aliasing for semantic tokens.

--color-primary-500: #54a0ff

--color-primary-600: #2e86de

--text-on-primary: var(--neutral-0)

--surface-accent: var(--primary-100)

--text-on-primary

--surface-accent

Claude Automation Prompts

Check the walkthrough video above for copy & paste prompt templates designed for the Figma MCP workflow. Run them in sequence to build a complete color system from scratch. #claudemate

Prompt 1

Create Color Variables

Create a set of color variables in a new collection called _primitives. The first color is brand-primary, with a 500 value of hsl(245 52 50). Create a second color for neutral with a 500 value of hsl(245 4 50). Create 25, 50, 100–400, then 600–900 and 950 where 25–400 are tints and 600–950 are shades.

Prompt 2

Start Color Swatch Pro

Use the component_color-swatch to create a color swatch for each variable in _primitives. Fill the layer "color" with the variable's color value. _color-swatch has a #hex and HSL color values, please fill that in for each linked variable.

Prompt 3

Color Contrast & Accessibility

Update the color APCA contrast value for each color and set Pass or Fail for Large Text, Fluent Text, Body Text and Preferred Text. The _color-swatch component has a layer named 00, replace that with the APCA value. Toggle each component property true or false based on the APCA value.

Prompt 4

Optimize Contrast

Adjust each swatch for better contrast. The _color-swatch component has a property for dark mode. By default it is in light mode. Update each swatch to dark where it increases the potential use cases for each color. Please update the APCA value and pass/fail values for all swatches changed to Dark Mode.

Prompt 5

Organize

Wrap each color set in a new frame with auto layout applied. Padding 24px and gap 24px. Add a card at the beginning of the color set with a title and description of the color and its use cases.

Prompt 6

Fixes & Tokens

Update the name and color value (##) for each color using the _primitive name.

22 Color Primitives

A ready-to-use palette structure with 11 tints and 11 shades per hue.

Light & Dark Mode

Token references and usage guidance optimized for both light and dark themes.

Video Tutorial

Step-by-step walkthrough covering Figma MCP setup and the full automation workflow.

What's included

Everything in one purchase

One file. Lifetime access. No subscriptions.

Full Component System

Flexible Figma component built for design system color documentation.

Prompt Automation Library

Tested prompts designed to drive Claude through color system creation end-to-end.

WCAG + APCA Models

Both contrast models included. Evaluate now and prepare for upcoming standards.

22 Color Primitives

Ready-to-use palette with 11 tints and shades to start immediately.

Light & Dark Token Support

Token references for design systems using both light and dark modes.

Step-by-Step Tutorial

Video walkthrough showing how to connect Claude, Figma MCP, and automate the workflow.

Built for

Who uses Color Swatch Pro

From solo designers to cross-functional teams.

Product Designers

Build token-ready color systems quickly inside Figma without leaving your design environment.

Figma Native

Design System Teams

Create consistent color documentation across products and keep your system up to date at scale.

Scalable

Accessibility Designers

Evaluate contrast and WCAG/APCA compliance as you build — not as an afterthought.

A11Y First

Engineers in Figma

Understand color tokens and usage clearly through documented swatches built for handoff.

Dev-Ready

Pricing

One price. Yours forever.

The time saved from a single design system setup typically pays for the file immediately.

$29

One-time purchase · Lifetime use in Figma

Full color swatch component system
Claude automation prompt library
WCAG and APCA contrast models
22 color variable primitives
Light and dark mode token support
Step-by-step video tutorial
Lifetime use — no subscription

Download at Figma

Available in the Figma Community · Instant access after purchase

Stay in the loop

Color Documentation, Claudemated!

Prompt… Palette… Done

Generate Color Variables

Build Swatch Components

Calculate Contrast

Optimize for Dark Mode

Toggle Pass/Fail

Organize the Palette

Watch the full walkthrough

Everything you need todocument color properly

Full Documentation Component

WCAG & APCA Contrast

Token-Ready Architecture

Claude Automation Prompts

Create Color Variables

Start Color Swatch Pro

Color Contrast & Accessibility

Optimize Contrast

Organize

Fixes & Tokens

22 Color Primitives

Light & Dark Mode

Video Tutorial

Everything in one purchase

Full Component System

Prompt Automation Library

WCAG + APCA Models

22 Color Primitives

Light & Dark Token Support

Step-by-Step Tutorial

Who uses Color Swatch Pro

Product Designers

Design System Teams

Accessibility Designers

Engineers in Figma

One price. Yours forever.

Get updates on new features

Color Documentation,
Claudemated!

Everything you need to
document color properly