Redesigning Material Design

Role / Responsibilities

Solo Product Designer & Developer

Responsible for: Reverse-engineering the Material Design token system, developing the automation workflow, and executing the color transformation.

Problem Discovery

Material Design's strength is also its biggest user barrier. Its comprehensive system of 196 semantic color variables ensures consistency but makes customization a manual, overwhelming chore.

Changing a brand's color scheme isn't a creative task—it's a mechanical one, requiring hours of repetitive variable updates.

Our strategy

To transform this rigid system into a flexible one. This case study demonstrates how to break the customization barrier, showing how to inject any color scheme into Material Design in one click—both for new files and existing, complex projects.

Overview

In this case study, we’ll explore two major use cases of Inked Colibri in action:

1. Applying Realtimecolors to a Modified Material Design File

Instantly bring your Realtimecolors URL experiments directly into Figma.
Apply them to a Material Design-based file with just one click.
Change an entire color scheme or update a single color using the plugin’s intuitive interface

2. Scaling and Variablizing an Existing Material Design System

If you’ve already built your project with Material Design, this section shows how to:

Variablize up to 196 color variables in your design.
Assign them to the Inked Colibri variable system.
Generate and apply new color schemes effortlessly, without manually editing each style.

Our strategy

Although we’re using Material Design as an example, the approach is design system–agnostic — you can apply the same workflow to any design system or custom structure.

Fresh Start: Import from Realtime Colors

Let's learn how to change the color scheme using a fresh Material Design INked template. You can do this in a couple of ways:

Generate and copy a URL from RealtimeColors.com.
Paste the URL into Inked Colibri
Generate the entire system instantly

One-Click Conversion Includes:

Importing colors from RealtimeColors.com
Automatic generation of a full spectrum of shades (text-shades/text-5…100)
Creating alpha variants for each shade background (text-alpha/text-5…100)

Fresh Start: Randomize & Apply via Plugin

Follow these steps to transform the Material Design color system in under a minute:

Click "Randomize" to generate a different light and dark color scheme.
Click the arrow (▼) to open the bottom configuration panel.
Click "Set Figma Variables" to apply the new color scheme.
The interface will get and show the current color variables from the file, confirming the application was successful.

One-Click Conversion Includes:

Importing colors from RealtimeColors.com
Automatic generation of a full spectrum of shades (text-shades/text-5…100)
Creating alpha variants for each shade background (text-alpha/text-5…100)

Note

Depending on your device speed, applying the new scheme to all 196 variables can take up to 1 minute. Clicking on different pages in Figma during this process may slow it down.

2. Scaling and Variablizing an Existing Material Design System

Step-by-Step: Using Inked Colibri to Variablize and Apply Color Schemes

In this section, I’ll walk through how I used the Inked Colibri plugin step by step. If you’d like to skip straight to the import and conversion process, jump to the part where I demonstrate how to import a JSON file and convert the variables.

Step 1: Exporting the M3 Color Collection

Material Design keeps all its color shades and alpha values organized in the M3 collection. To start, we need to export that collection using the Inked Colibri Plugin:

Open Inked Colibri in your Figma file.
Go to Token Commander → Export → Variables.
From the dropdown, select the M3 collection.
Click Export to generate your color token JSON file.

Step 2: Explain to AI

Explain to AI the Structure of Variables and Ask to Replace Hex Values with RTC Inked Variables

Share the exported JSON file with any AI chat and explain how Material Design color variables are named and what they represent. Then describe the structure of RTC Inked variables, so the AI can understand how to match them.

Ask the AI to replace the hex values in your JSON with the corresponding RTC Inked variables. After downloading the modified JSON, a few manual minor adjustments were made, and the result was pretty satisfying.

M3 JSON

After execution of this json You would Assign Material design Variable to RTC Variable In Figma

{
"variables": {
"M3/Schemes/Primary": {
"type": "color",
"value": "primary-shades/primary-100",
"description": "Color variable for M3/Schemes/Primary"
},
"M3/Schemes/Surface Tint": {
"type": "color",
"value": "primary-shades/primary-100",
"description": "Color variable for M3/Schemes/Surface Tint"
},
"M3/Schemes/On Primary": {
"type": "color",
"value": "background-shades/background-100",
"description": "Color variable for M3/Schemes/On Primary"
},
"M3/Schemes/Primary Container": {
"type": "color",
"value": "primary-shades/primary-95",
"description": "Color variable for M3/Schemes/Primary Container"
},
"M3/Schemes/On Primary Container": {
"type": "color",
"value": "primary-shades/primary-30",
"description": "Color variable for M3/Schemes/On Primary Container"
},
"M3/Schemes/Secondary": {
"type": "color",
"value": "secondary-shades/secondary-100",
"description": "Color variable for M3/Schemes/Secondary"
},
"M3/Schemes/On Secondary": {
"type": "color",
"value": "background-shades/background-100",
"description": "Color variable for M3/Schemes/On Secondary"
},
"M3/Schemes/Secondary Container": {
"type": "color",
"value": "secondary-shades/secondary-95",
"description": "Color variable for M3/Schemes/Secondary Container"
},
"M3/Schemes/On Secondary Container": {
"type": "color",
"value": "secondary-shades/secondary-30",
"description": "Color variable for M3/Schemes/On Secondary Container"
},
"M3/Schemes/Tertiary": {
"type": "color",
"value": "accent-shades/accent-100",
"description": "Color variable for M3/Schemes/Tertiary"
},
"M3/Schemes/On Tertiary": {
"type": "color",
"value": "background-shades/background-100",
"description": "Color variable for M3/Schemes/On Tertiary"
},
"M3/Schemes/Tertiary Container": {
"type": "color",
"value": "accent-shades/accent-95",
"description": "Color variable for M3/Schemes/Tertiary Container"
},
"M3/Schemes/On Tertiary Container": {
"type": "color",
"value": "accent-shades/accent-30",
"description": "Color variable for M3/Schemes/On Tertiary Container"
},
"M3/Schemes/Background": {
"type": "color",
"value": "background-shades/background-100",
"description": "Color variable for M3/Schemes/Background"
},
"M3/Schemes/On Background": {
"type": "color",
"value": "text-shades/text-100",
"description": "Color variable for M3/Schemes/On Background"
},
"M3/Schemes/Surface": {
"type": "color",
"value": "background-shades/background-100",
"description": "Color variable for M3/Schemes/Surface"
},
"M3/Schemes/On Surface": {
"type": "color",
"value": "text-shades/text-100",
"description": "Color variable for M3/Schemes/On Surface"
},
"M3/Schemes/Surface Variant": {
"type": "color",
"value": "background-shades/background-95",
"description": "Color variable for M3/Schemes/Surface Variant"
},
"M3/Schemes/On Surface Variant": {
"type": "color",
"value": "text-shades/text-30",
"description": "Color variable for M3/Schemes/On Surface Variant"
},
"M3/Schemes/Outline": {
"type": "color",
"value": "text-shades/text-50",
"description": "Color variable for M3/Schemes/Outline"
},
"M3/Schemes/Outline Variant": {
"type": "color",
"value": "text-shades/text-80",
"description": "Color variable for M3/Schemes/Outline Variant"
},
"M3/Schemes/Shadow": {
"type": "color",
"value": "text-shades/text-100",
"description": "Color variable for M3/Schemes/Shadow"
},
"M3/Schemes/Scrim": {
"type": "color",
"value": "text-shades/text-100",
"description": "Color variable for M3/Schemes/Scrim"
},
"M3/Schemes/Inverse Surface": {
"type": "color",
"value": "text-shades/text-20",
"description": "Color variable for M3/Schemes/Inverse Surface"
},
"M3/Schemes/Inverse On Surface": {
"type": "color",
"value": "background-shades/background-95",
"description": "Color variable for M3/Schemes/Inverse On Surface"
},
"M3/Schemes/Inverse Primary": {
"type": "color",
"value": "primary-shades/primary-80",
"description": "Color variable for M3/Schemes/Inverse Primary"
},
"M3/Schemes/Primary Fixed": {
"type": "color",
"value": "primary-shades/primary-95",
"description": "Color variable for M3/Schemes/Primary Fixed"
},
"M3/Schemes/On Primary Fixed": {
"type": "color",
"value": "primary-shades/primary-10",
"description": "Color variable for M3/Schemes/On Primary Fixed"
},
"M3/Schemes/Primary Fixed Dim": {
"type": "color",
"value": "primary-shades/primary-80",
"description": "Color variable for M3/Schemes/Primary Fixed Dim"
},
"M3/Schemes/On Primary Fixed Variant": {
"type": "color",
"value": "primary-shades/primary-30",
"description": "Color variable for M3/Schemes/On Primary Fixed Variant"
},
"M3/Schemes/Secondary Fixed": {
"type": "color",
"value": "secondary-shades/secondary-95",
"description": "Color variable for M3/Schemes/Secondary Fixed"
},
"M3/Schemes/On Secondary Fixed": {
"type": "color",
"value": "secondary-shades/secondary-10",
"description": "Color variable for M3/Schemes/On Secondary Fixed"
},
"M3/Schemes/Secondary Fixed Dim": {
"type": "color",
"value": "secondary-shades/secondary-80",
"description": "Color variable for M3/Schemes/Secondary Fixed Dim"
},
"M3/Schemes/On Secondary Fixed Variant": {
"type": "color",
"value": "secondary-shades/secondary-30",
"description": "Color variable for M3/Schemes/On Secondary Fixed Variant"
},
"M3/Schemes/Tertiary Fixed": {
"type": "color",
"value": "accent-shades/accent-95",
"description": "Color variable for M3/Schemes/Tertiary Fixed"
},
"M3/Schemes/On Tertiary Fixed": {
"type": "color",
"value": "accent-shades/accent-10",
"description": "Color variable for M3/Schemes/On Tertiary Fixed"
},
"M3/Schemes/Tertiary Fixed Dim": {
"type": "color",
"value": "accent-shades/accent-90",
"description": "Color variable for M3/Schemes/Tertiary Fixed Dim"
},
"M3/Schemes/On Tertiary Fixed Variant": {
"type": "color",
"value": "accent-shades/accent-30",
"description": "Color variable for M3/Schemes/On Tertiary Fixed Variant"
},
"M3/Schemes/Surface Dim": {
"type": "color",
"value": "background-shades/background-85",
"description": "Color variable for M3/Schemes/Surface Dim"
},
"M3/Schemes/Surface Bright": {
"type": "color",
"value": "background-shades/background-100",
"description": "Color variable for M3/Schemes/Surface Bright"
},
"M3/Schemes/Surface Container Lowest": {
"type": "color",
"value": "background-shades/background-100",
"description": "Color variable for M3/Schemes/Surface Container Lowest"
},
"M3/Schemes/Surface Container Low": {
"type": "color",
"value": "background-shades/background-95",
"description": "Color variable for M3/Schemes/Surface Container Low"
},
"M3/Schemes/Surface Container": {
"type": "color",
"value": "background-shades/background-95",
"description": "Color variable for M3/Schemes/Surface Container"
},
"M3/Schemes/Surface Container High": {
"type": "color",
"value": "background-shades/background-90",
"description": "Color variable for M3/Schemes/Surface Container High"
},
"M3/Schemes/Surface Container Highest": {
"type": "color",
"value": "background-shades/background-90",
"description": "Color variable for M3/Schemes/Surface Container Highest"
},
"M3/State Layers/Primary/Opacity-08": {
"type": "color",
"value": "primary-alpha/primary-10",
"description": "Color variable for M3/State Layers/Primary/Opacity-08"
},
"M3/State Layers/Primary/Opacity-12": {
"type": "color",
"value": "primary-alpha/primary-15",
"description": "Color variable for M3/State Layers/Primary/Opacity-12"
},
"M3/State Layers/Primary/Opacity-16": {
"type": "color",
"value": "primary-alpha/primary-20",
"description": "Color variable for M3/State Layers/Primary/Opacity-16"
},
"M3/State Layers/On Primary/Opacity-08": {
"type": "color",
"value": "background-alpha/background-10",
"description": "Color variable for M3/State Layers/On Primary/Opacity-08"
},
"M3/State Layers/On Primary/Opacity-12": {
"type": "color",
"value": "background-alpha/background-15",
"description": "Color variable for M3/State Layers/On Primary/Opacity-12"
},
"M3/State Layers/On Primary/Opacity-16": {
"type": "color",
"value": "background-alpha/background-20",
"description": "Color variable for M3/State Layers/On Primary/Opacity-16"
},
"M3/State Layers/Primary Container/Opacity-08": {
"type": "color",
"value": "primary-alpha/primary-10",
"description": "Color variable for M3/State Layers/Primary Container/Opacity-08"
},
"M3/State Layers/Primary Container/Opacity-12": {
"type": "color",
"value": "primary-alpha/primary-15",
"description": "Color variable for M3/State Layers/Primary Container/Opacity-12"
},
"M3/State Layers/Primary Container/Opacity-16": {
"type": "color",
"value": "primary-alpha/primary-20",
"description": "Color variable for M3/State Layers/Primary Container/Opacity-16"
},
"M3/State Layers/On Primary Container/Opacity-08": {
"type": "color",
"value": "primary-alpha/primary-10",
"description": "Color variable for M3/State Layers/On Primary Container/Opacity-08"
},
"M3/State Layers/On Primary Container/Opacity-12": {
"type": "color",
"value": "primary-alpha/primary-15",
"description": "Color variable for M3/State Layers/On Primary Container/Opacity-12"
},
"M3/State Layers/On Primary Container/Opacity-16": {
"type": "color",
"value": "primary-alpha/primary-20",
"description": "Color variable for M3/State Layers/On Primary Container/Opacity-16"
},
"M3/State Layers/Primary Fixed/Opacity-08": {
"type": "color",
"value": "primary-alpha/primary-10",
"description": "Color variable for M3/State Layers/Primary Fixed/Opacity-08"
},
"M3/State Layers/Primary Fixed/Opacity-12": {
"type": "color",
"value": "primary-alpha/primary-15",
"description": "Color variable for M3/State Layers/Primary Fixed/Opacity-12"
},
"M3/State Layers/Primary Fixed/Opacity-16": {
"type": "color",
"value": "primary-alpha/primary-20",
"description": "Color variable for M3/State Layers/Primary Fixed/Opacity-16"
},
"M3/State Layers/On Primary Fixed/Opacity-08": {
"type": "color",
"value": "primary-alpha/primary-10",
"description": "Color variable for M3/State Layers/On Primary Fixed/Opacity-08"
},
"M3/State Layers/On Primary Fixed/Opacity-12": {
"type": "color",
"value": "primary-alpha/primary-15",
"description": "Color variable for M3/State Layers/On Primary Fixed/Opacity-12"
},
"M3/State Layers/On Primary Fixed/Opacity-16": {
"type": "color",
"value": "primary-alpha/primary-20",
"description": "Color variable for M3/State Layers/On Primary Fixed/Opacity-16"
},
"M3/State Layers/Primary Fixed Dim/Opacity-08": {
"type": "color",
"value": "primary-alpha/primary-10",
"description": "Color variable for M3/State Layers/Primary Fixed Dim/Opacity-08"
},
"M3/State Layers/Primary Fixed Dim/Opacity-12": {
"type": "color",
"value": "primary-alpha/primary-15",
"description": "Color variable for M3/State Layers/Primary Fixed Dim/Opacity-12"
},
"M3/State Layers/Primary Fixed Dim/Opacity-16": {
"type": "color",
"value": "primary-alpha/primary-20",
"description": "Color variable for M3/State Layers/Primary Fixed Dim/Opacity-16"
},
"M3/State Layers/On Primary Fixed Variant/Opacity-08": {
"type": "color",
"value": "primary-alpha/primary-10",
"description": "Color variable for M3/State Layers/On Primary Fixed Variant/Opacity-08"
},
"M3/State Layers/On Primary Fixed Variant/Opacity-12": {
"type": "color",
"value": "primary-alpha/primary-15",
"description": "Color variable for M3/State Layers/On Primary Fixed Variant/Opacity-12"
},
"M3/State Layers/On Primary Fixed Variant/Opacity-16": {
"type": "color",
"value": "primary-alpha/primary-20",
"description": "Color variable for M3/State Layers/On Primary Fixed Variant/Opacity-16"
},
"M3/State Layers/Secondary/Opacity-08": {
"type": "color",
"value": "secondary-alpha/secondary-10",
"description": "Color variable for M3/State Layers/Secondary/Opacity-08"
},
"M3/State Layers/Secondary/Opacity-12": {
"type": "color",
"value": "secondary-alpha/secondary-15",
"description": "Color variable for M3/State Layers/Secondary/Opacity-12"
},
"M3/State Layers/Secondary/Opacity-16": {
"type": "color",
"value": "secondary-alpha/secondary-20",
"description": "Color variable for M3/State Layers/Secondary/Opacity-16"
},
"M3/State Layers/On Secondary/Opacity-08": {
"type": "color",
"value": "background-alpha/background-10",
"description": "Color variable for M3/State Layers/On Secondary/Opacity-08"
},
"M3/State Layers/On Secondary/Opacity-12": {
"type": "color",
"value": "background-alpha/background-15",
"description": "Color variable for M3/State Layers/On Secondary/Opacity-12"
},
"M3/State Layers/On Secondary/Opacity-16": {
"type": "color",
"value": "background-alpha/background-20",
"description": "Color variable for M3/State Layers/On Secondary/Opacity-16"
},
"M3/State Layers/Secondary Container/Opacity-08": {
"type": "color",
"value": "secondary-alpha/secondary-10",
"description": "Color variable for M3/State Layers/Secondary Container/Opacity-08"
},
"M3/State Layers/Secondary Container/Opacity-12": {
"type": "color",
"value": "secondary-alpha/secondary-15",
"description": "Color variable for M3/State Layers/Secondary Container/Opacity-12"
},
"M3/State Layers/Secondary Container/Opacity-16": {
"type": "color",
"value": "secondary-alpha/secondary-20",
"description": "Color variable for M3/State Layers/Secondary Container/Opacity-16"
},
"M3/State Layers/On Secondary Container/Opacity-08": {
"type": "color",
"value": "secondary-alpha/secondary-10",
"description": "Color variable for M3/State Layers/On Secondary Container/Opacity-08"
},
"M3/State Layers/On Secondary Container/Opacity-12": {
"type": "color",
"value": "secondary-alpha/secondary-15",
"description": "Color variable for M3/State Layers/On Secondary Container/Opacity-12"
},
"M3/State Layers/On Secondary Container/Opacity-16": {
"type": "color",
"value": "secondary-alpha/secondary-20",
"description": "Color variable for M3/State Layers/On Secondary Container/Opacity-16"
},
"M3/State Layers/Secondary Fixed/Opacity-08": {
"type": "color",
"value": "secondary-alpha/secondary-10",
"description": "Color variable for M3/State Layers/Secondary Fixed/Opacity-08"
},
"M3/State Layers/Secondary Fixed/Opacity-12": {
"type": "color",
"value": "secondary-alpha/secondary-15",
"description": "Color variable for M3/State Layers/Secondary Fixed/Opacity-12"
},
"M3/State Layers/Secondary Fixed/Opacity-16": {
"type": "color",
"value": "secondary-alpha/secondary-20",
"description": "Color variable for M3/State Layers/Secondary Fixed/Opacity-16"
},
"M3/State Layers/On Secondary Fixed/Opacity-08": {
"type": "color",
"value": "secondary-alpha/secondary-10",
"description": "Color variable for M3/State Layers/On Secondary Fixed/Opacity-08"
},
"M3/State Layers/On Secondary Fixed/Opacity-12": {
"type": "color",
"value": "secondary-alpha/secondary-15",
"description": "Color variable for M3/State Layers/On Secondary Fixed/Opacity-12"
},
"M3/State Layers/On Secondary Fixed/Opacity-16": {
"type": "color",
"value": "secondary-alpha/secondary-20",
"description": "Color variable for M3/State Layers/On Secondary Fixed/Opacity-16"
},
"M3/State Layers/Secondary Fixed Dim/Opacity-08": {
"type": "color",
"value": "secondary-alpha/secondary-10",
"description": "Color variable for M3/State Layers/Secondary Fixed Dim/Opacity-08"
},
"M3/State Layers/Secondary Fixed Dim/Opacity-12": {
"type": "color",
"value": "secondary-alpha/secondary-15",
"description": "Color variable for M3/State Layers/Secondary Fixed Dim/Opacity-12"
},
"M3/State Layers/Secondary Fixed Dim/Opacity-16": {
"type": "color",
"value": "secondary-alpha/secondary-20",
"description": "Color variable for M3/State Layers/Secondary Fixed Dim/Opacity-16"
},
"M3/State Layers/On Secondary Fixed Variant/Opacity-08": {
"type": "color",
"value": "secondary-alpha/secondary-10",
"description": "Color variable for M3/State Layers/On Secondary Fixed Variant/Opacity-08"
},
"M3/State Layers/On Secondary Fixed Variant/Opacity-12": {
"type": "color",
"value": "secondary-alpha/secondary-15",
"description": "Color variable for M3/State Layers/On Secondary Fixed Variant/Opacity-12"
},
"M3/State Layers/On Secondary Fixed Variant/Opacity-16": {
"type": "color",
"value": "secondary-alpha/secondary-20",
"description": "Color variable for M3/State Layers/On Secondary Fixed Variant/Opacity-16"
},
"M3/State Layers/Tertiary/Opacity-08": {
"type": "color",
"value": "accent-alpha/accent-10",
"description": "Color variable for M3/State Layers/Tertiary/Opacity-08"
},
"M3/State Layers/Tertiary/Opacity-12": {
"type": "color",
"value": "accent-alpha/accent-15",
"description": "Color variable for M3/State Layers/Tertiary/Opacity-12"
},
"M3/State Layers/Tertiary/Opacity-16": {
"type": "color",
"value": "accent-alpha/accent-20",
"description": "Color variable for M3/State Layers/Tertiary/Opacity-16"
},
"M3/State Layers/On Tertiary/Opacity-08": {
"type": "color",
"value": "background-alpha/background-10",
"description": "Color variable for M3/State Layers/On Tertiary/Opacity-08"
},
"M3/State Layers/On Tertiary/Opacity-12": {
"type": "color",
"value": "background-alpha/background-15",
"description": "Color variable for M3/State Layers/On Tertiary/Opacity-12"
},
"M3/State Layers/On Tertiary/Opacity-16": {
"type": "color",
"value": "background-alpha/background-20",
"description": "Color variable for M3/State Layers/On Tertiary/Opacity-16"
},
"M3/State Layers/Tertiary Container/Opacity-08": {
"type": "color",
"value": "accent-alpha/accent-10",
"description": "Color variable for M3/State Layers/Tertiary Container/Opacity-08"
},
"M3/State Layers/Tertiary Container/Opacity-12": {
"type": "color",
"value": "accent-alpha/accent-15",
"description": "Color variable for M3/State Layers/Tertiary Container/Opacity-12"
},
"M3/State Layers/Tertiary Container/Opacity-16": {
"type": "color",
"value": "accent-alpha/accent-20",
"description": "Color variable for M3/State Layers/Tertiary Container/Opacity-16"
},
"M3/State Layers/On Tertiary Container/Opacity-08": {
"type": "color",
"value": "accent-alpha/accent-10",
"description": "Color variable for M3/State Layers/On Tertiary Container/Opacity-08"
},
"M3/State Layers/On Tertiary Container/Opacity-12": {
"type": "color",
"value": "accent-alpha/accent-15",
"description": "Color variable for M3/State Layers/On Tertiary Container/Opacity-12"
},
"M3/State Layers/On Tertiary Container/Opacity-16": {
"type": "color",
"value": "accent-alpha/accent-20",
"description": "Color variable for M3/State Layers/On Tertiary Container/Opacity-16"
},
"M3/State Layers/Tertiary Fixed/Opacity-08": {
"type": "color",
"value": "accent-alpha/accent-10",
"description": "Color variable for M3/State Layers/Tertiary Fixed/Opacity-08"
},
"M3/State Layers/Tertiary Fixed/Opacity-12": {
"type": "color",
"value": "accent-alpha/accent-15",
"description": "Color variable for M3/State Layers/Tertiary Fixed/Opacity-12"
},
"M3/State Layers/Tertiary Fixed/Opacity-16": {
"type": "color",
"value": "accent-alpha/accent-20",
"description": "Color variable for M3/State Layers/Tertiary Fixed/Opacity-16"
},
"M3/State Layers/On Tertiary Fixed/Opacity-08": {
"type": "color",
"value": "accent-alpha/accent-10",
"description": "Color variable for M3/State Layers/On Tertiary Fixed/Opacity-08"
},
"M3/State Layers/On Tertiary Fixed/Opacity-12": {
"type": "color",
"value": "accent-alpha/accent-15",
"description": "Color variable for M3/State Layers/On Tertiary Fixed/Opacity-12"
},
"M3/State Layers/On Tertiary Fixed/Opacity-16": {
"type": "color",
"value": "accent-alpha/accent-20",
"description": "Color variable for M3/State Layers/On Tertiary Fixed/Opacity-16"
},
"M3/State Layers/Tertiary Fixed Dim/Opacity-08": {
"type": "color",
"value": "accent-alpha/accent-10",
"description": "Color variable for M3/State Layers/Tertiary Fixed Dim/Opacity-08"
},
"M3/State Layers/Tertiary Fixed Dim/Opacity-12": {
"type": "color",
"value": "accent-alpha/accent-15",
"description": "Color variable for M3/State Layers/Tertiary Fixed Dim/Opacity-12"
},
"M3/State Layers/Tertiary Fixed Dim/Opacity-16": {
"type": "color",
"value": "accent-alpha/accent-20",
"description": "Color variable for M3/State Layers/Tertiary Fixed Dim/Opacity-16"
},
"M3/State Layers/On Tertiary Fixed Variant/Opacity-08": {
"type": "color",
"value": "accent-alpha/accent-10",
"description": "Color variable for M3/State Layers/On Tertiary Fixed Variant/Opacity-08"
},
"M3/State Layers/On Tertiary Fixed Variant/Opacity-12": {
"type": "color",
"value": "accent-alpha/accent-15",
"description": "Color variable for M3/State Layers/On Tertiary Fixed Variant/Opacity-12"
},
"M3/State Layers/On Tertiary Fixed Variant/Opacity-16": {
"type": "color",
"value": "accent-alpha/accent-20",
"description": "Color variable for M3/State Layers/On Tertiary Fixed Variant/Opacity-16"
},

"M3/State Layers/Outline/Opacity-08": {
"type": "color",
"value": "text-alpha/text-10",
"description": "Color variable for M3/State Layers/Outline/Opacity-08"
},
"M3/State Layers/Outline/Opacity-12": {
"type": "color",
"value": "text-alpha/text-15",
"description": "Color variable for M3/State Layers/Outline/Opacity-12"
},
"M3/State Layers/Outline/Opacity-16": {
"type": "color",
"value": "text-alpha/text-20",
"description": "Color variable for M3/State Layers/Outline/Opacity-16"
},
"M3/State Layers/Background/Opacity-08": {
"type": "color",
"value": "background-alpha/background-10",
"description": "Color variable for M3/State Layers/Background/Opacity-08"
},
"M3/State Layers/Background/Opacity-12": {
"type": "color",
"value": "background-alpha/background-15",
"description": "Color variable for M3/State Layers/Background/Opacity-12"
},
"M3/State Layers/Background/Opacity-16": {
"type": "color",
"value": "background-alpha/background-20",
"description": "Color variable for M3/State Layers/Background/Opacity-16"
},
"M3/State Layers/On Background/Opacity-08": {
"type": "color",
"value": "text-alpha/text-10",
"description": "Color variable for M3/State Layers/On Background/Opacity-08"
},
"M3/State Layers/On Background/Opacity-12": {
"type": "color",
"value": "text-alpha/text-15",
"description": "Color variable for M3/State Layers/On Background/Opacity-12"
},
"M3/State Layers/On Background/Opacity-16": {
"type": "color",
"value": "text-alpha/text-20",
"description": "Color variable for M3/State Layers/On Background/Opacity-16"
},
"M3/State Layers/Surface/Opacity-08": {
"type": "color",
"value": "background-alpha/background-10",
"description": "Color variable for M3/State Layers/Surface/Opacity-08"
},
"M3/State Layers/Surface/Opacity-12": {
"type": "color",
"value": "background-alpha/background-15",
"description": "Color variable for M3/State Layers/Surface/Opacity-12"
},
"M3/State Layers/Surface/Opacity-16": {
"type": "color",
"value": "background-alpha/background-20",
"description": "Color variable for M3/State Layers/Surface/Opacity-16"
},
"M3/State Layers/On Surface/Opacity-08": {
"type": "color",
"value": "text-alpha/text-10",
"description": "Color variable for M3/State Layers/On Surface/Opacity-08"
},
"M3/State Layers/On Surface/Opacity-12": {
"type": "color",
"value": "text-alpha/text-15",
"description": "Color variable for M3/State Layers/On Surface/Opacity-12"
},
"M3/State Layers/On Surface/Opacity-16": {
"type": "color",
"value": "text-alpha/text-20",
"description": "Color variable for M3/State Layers/On Surface/Opacity-16"
},
"M3/State Layers/Surface Variant/Opacity-08": {
"type": "color",
"value": "background-alpha/background-10",
"description": "Color variable for M3/State Layers/Surface Variant/Opacity-08"
},
"M3/State Layers/Surface Variant/Opacity-12": {
"type": "color",
"value": "background-alpha/background-15",
"description": "Color variable for M3/State Layers/Surface Variant/Opacity-12"
},
"M3/State Layers/Surface Variant/Opacity-16": {
"type": "color",
"value": "background-alpha/background-20",
"description": "Color variable for M3/State Layers/Surface Variant/Opacity-16"
},
"M3/State Layers/On Surface Variant/Opacity-08": {
"type": "color",
"value": "text-alpha/text-10",
"description": "Color variable for M3/State Layers/On Surface Variant/Opacity-08"
},
"M3/State Layers/On Surface Variant/Opacity-12": {
"type": "color",
"value": "text-alpha/text-15",
"description": "Color variable for M3/State Layers/On Surface Variant/Opacity-12"
},
"M3/State Layers/On Surface Variant/Opacity-16": {
"type": "color",
"value": "text-alpha/text-20",
"description": "Color variable for M3/State Layers/On Surface Variant/Opacity-16"
},
"M3/State Layers/Inverse Surface/Opacity-08": {
"type": "color",
"value": "text-alpha/text-10",
"description": "Color variable for M3/State Layers/Inverse Surface/Opacity-08"
},
"M3/State Layers/Inverse Surface/Opacity-12": {
"type": "color",
"value": "text-alpha/text-15",
"description": "Color variable for M3/State Layers/Inverse Surface/Opacity-12"
},
"M3/State Layers/Inverse Surface/Opacity-16": {
"type": "color",
"value": "text-alpha/text-20",
"description": "Color variable for M3/State Layers/Inverse Surface/Opacity-16"
},
"M3/State Layers/Inverse On Surface/Opacity-08": {
"type": "color",
"value": "background-alpha/background-10",
"description": "Color variable for M3/State Layers/Inverse On Surface/Opacity-08"
},
"M3/State Layers/Inverse On Surface/Opacity-12": {
"type": "color",
"value": "background-alpha/background-15",
"description": "Color variable for M3/State Layers/Inverse On Surface/Opacity-12"
},
"M3/State Layers/Inverse On Surface/Opacity-16": {
"type": "color",
"value": "background-alpha/background-20",
"description": "Color variable for M3/State Layers/Inverse On Surface/Opacity-16"
},
"M3/State Layers/Inverse Primary/Opacity-08": {
"type": "color",
"value": "primary-alpha/primary-10",
"description": "Color variable for M3/State Layers/Inverse Primary/Opacity-08"
},
"M3/State Layers/Inverse Primary/Opacity-12": {
"type": "color",
"value": "primary-alpha/primary-15",
"description": "Color variable for M3/State Layers/Inverse Primary/Opacity-12"
},
"M3/State Layers/Inverse Primary/Opacity-16": {
"type": "color",
"value": "primary-alpha/primary-20",
"description": "Color variable for M3/State Layers/Inverse Primary/Opacity-16"
},
"M3/State Layers/Shadow/Opacity-08": {
"type": "color",
"value": "text-alpha/text-10",
"description": "Color variable for M3/State Layers/Shadow/Opacity-08"
},
"M3/State Layers/Shadow/Opacity-12": {
"type": "color",
"value": "text-alpha/text-15",
"description": "Color variable for M3/State Layers/Shadow/Opacity-12"
},
"M3/State Layers/Shadow/Opacity-16": {
"type": "color",
"value": "text-alpha/text-20",
"description": "Color variable for M3/State Layers/Shadow/Opacity-16"
},
"M3/State Layers/Surface Tint/Opacity-08": {
"type": "color",
"value": "primary-alpha/primary-10",
"description": "Color variable for M3/State Layers/Surface Tint/Opacity-08"
},
"M3/State Layers/Surface Tint/Opacity-12": {
"type": "color",
"value": "primary-alpha/primary-15",
"description": "Color variable for M3/State Layers/Surface Tint/Opacity-12"
},
"M3/State Layers/Surface Tint/Opacity-16": {
"type": "color",
"value": "primary-alpha/primary-20",
"description": "Color variable for M3/State Layers/Surface Tint/Opacity-16"
},
"M3/State Layers/Outline Variant/Opacity-08": {
"type": "color",
"value": "text-alpha/text-10",
"description": "Color variable for M3/State Layers/Outline Variant/Opacity-08"
},
"M3/State Layers/Outline Variant/Opacity-12": {
"type": "color",
"value": "text-alpha/text-15",
"description": "Color variable for M3/State Layers/Outline Variant/Opacity-12"
},
"M3/State Layers/Outline Variant/Opacity-16": {
"type": "color",
"value": "text-alpha/text-20",
"description": "Color variable for M3/State Layers/Outline Variant/Opacity-16"
},
"M3/State Layers/Scrim/Opacity-08": {
"type": "color",
"value": "text-alpha/text-10",
"description": "Color variable for M3/State Layers/Scrim/Opacity-08"
},
"M3/State Layers/Scrim/Opacity-12": {
"type": "color",
"value": "text-alpha/text-15",
"description": "Color variable for M3/State Layers/Scrim/Opacity-12"
},
"M3/State Layers/Scrim/Opacity-16": {
"type": "color",
"value": "text-alpha/text-20",
"description": "Color variable for M3/State Layers/Scrim/Opacity-16"
},
"M3/State Layers/Surface Container Highest/Opacity-08": {
"type": "color",
"value": "background-alpha/background-10",
"description": "Color variable for M3/State Layers/Surface Container Highest/Opacity-08"
},
"M3/State Layers/Surface Container Highest/Opacity-12": {
"type": "color",
"value": "background-alpha/background-15",
"description": "Color variable for M3/State Layers/Surface Container Highest/Opacity-12"
},
"M3/State Layers/Surface Container Highest/Opacity-16": {
"type": "color",
"value": "background-alpha/background-20",
"description": "Color variable for M3/State Layers/Surface Container Highest/Opacity-16"
},
"M3/State Layers/Surface Container High/Opacity-08": {
"type": "color",
"value": "background-alpha/background-10",
"description": "Color variable for M3/State Layers/Surface Container High/Opacity-08"
},
"M3/State Layers/Surface Container High/Opacity-12": {
"type": "color",
"value": "background-alpha/background-15",
"description": "Color variable for M3/State Layers/Surface Container High/Opacity-12"
},
"M3/State Layers/Surface Container High/Opacity-16": {
"type": "color",
"value": "background-alpha/background-20",
"description": "Color variable for M3/State Layers/Surface Container High/Opacity-16"
},
"M3/State Layers/Surface Container/Opacity-08": {
"type": "color",
"value": "background-alpha/background-10",
"description": "Color variable for M3/State Layers/Surface Container/Opacity-08"
},
"M3/State Layers/Surface Container/Opacity-12": {
"type": "color",
"value": "background-alpha/background-15",
"description": "Color variable for M3/State Layers/Surface Container/Opacity-12"
},
"M3/State Layers/Surface Container/Opacity-16": {
"type": "color",
"value": "background-alpha/background-20",
"description": "Color variable for M3/State Layers/Surface Container/Opacity-16"
},
"M3/State Layers/Surface Container Low/Opacity-08": {
"type": "color",
"value": "background-alpha/background-10",
"description": "Color variable for M3/State Layers/Surface Container Low/Opacity-08"
},
"M3/State Layers/Surface Container Low/Opacity-12": {
"type": "color",
"value": "background-alpha/background-15",
"description": "Color variable for M3/State Layers/Surface Container Low/Opacity-12"
},
"M3/State Layers/Surface Container Low/Opacity-16": {
"type": "color",
"value": "background-alpha/background-20",
"description": "Color variable for M3/State Layers/Surface Container Low/Opacity-16"
},
"M3/State Layers/Surface Container Lowest/Opacity-08": {
"type": "color",
"value": "background-alpha/background-10",
"description": "Color variable for M3/State Layers/Surface Container Lowest/Opacity-08"
},
"M3/State Layers/Surface Container Lowest/Opacity-12": {
"type": "color",
"value": "background-alpha/background-15",
"description": "Color variable for M3/State Layers/Surface Container Lowest/Opacity-12"
},
"M3/State Layers/Surface Container Lowest/Opacity-16": {
"type": "color",
"value": "background-alpha/background-20",
"description": "Color variable for M3/State Layers/Surface Container Lowest/Opacity-16"
},
"M3/State Layers/Surface Bright/Opacity-08": {
"type": "color",
"value": "background-alpha/background-10",
"description": "Color variable for M3/State Layers/Surface Bright/Opacity-08"
},
"M3/State Layers/Surface Bright/Opacity-12": {
"type": "color",
"value": "background-alpha/background-15",
"description": "Color variable for M3/State Layers/Surface Bright/Opacity-12"
},
"M3/State Layers/Surface Bright/Opacity-16": {
"type": "color",
"value": "background-alpha/background-20",
"description": "Color variable for M3/State Layers/Surface Bright/Opacity-16"
},
"M3/State Layers/Surface Dim/Opacity-08": {
"type": "color",
"value": "background-alpha/background-10",
"description": "Color variable for M3/State Layers/Surface Dim/Opacity-08"
},
"M3/State Layers/Surface Dim/Opacity-12": {
"type": "color",
"value": "background-alpha/background-15",
"description": "Color variable for M3/State Layers/Surface Dim/Opacity-12"
},
"M3/State Layers/Surface Dim/Opacity-16": {
"type": "color",
"value": "background-alpha/background-20",
"description": "Color variable for M3/State Layers/Surface Dim/Opacity-16"
}
}
}

Step 3: Import the Modified JSON and Apply in Figma

After receiving the AI-modified JSON, download it and open the Inked Colibri Plugin.

Go to Token Commander → Variables, paste the JSON content into the text area, and click Execute.

The plugin will automatically create and link all variables, applying the new RTC Inked color system across your Material Design file.

This completed the workflow — fast, consistent, and ready for further color experiments.