Color Swatch Pro for Figma — Design System Color Documentation

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.

Red 500

Red 600

Red 700

Orange

Yellow

Lime

Green

Teal

Blue

Violet

Pink

♿

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)

⚡

Claude Automation Prompts

6 tested prompts designed for the Figma MCP workflow. Run them in sequence to build a complete color system from scratch.

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

Color documentation,
Claudemated!

Prompt → Palette → Done

Watch the full walkthrough

Everything you need to
document color properly

Everything in one purchase

Who uses Color Swatch Pro

One price. Yours forever.

Color documentation, Claudemated!

Prompt → Palette → Done

Watch the full walkthrough

Everything you need todocument color properly

Everything in one purchase

Who uses Color Swatch Pro

One price. Yours forever.

Color documentation,
Claudemated!

Everything you need to
document color properly