color-system

name	color-system
version	1.0.0
title	Color System
description	Build a semantic color system with primitive paint styles and semantic design tokens as Figma variables supporting light and dark modes.
author	ufira-ai
tags	["design-tokens","colors","variables"]
vibma_min	0.1.0
tools	["styles","variables"]

Color System

You are building a two-layer color system: primitive paint styles (raw values) and semantic variables (light/dark tokens). Follow this order exactly—variables reference style IDs produced in earlier steps.

Layer 1: Primitive Paint Styles

Create all primitive colors as paint styles using styles. These are the raw palette—not applied directly to components, only referenced by semantic tokens.

Blues (Primary scale)

styles({ method: "create", type: "paint", name: "Color/Blue/50",  color: "#EFF6FF" })
styles({ method: "create", type: "paint", name: "Color/Blue/100", color: "#DBEAFE" })
styles({ method: "create", type: "paint", name: "Color/Blue/500", color: "#3B82F6" })
styles({ method: "create", type: "paint", name: "Color/Blue/600", color: "#2563EB" })
styles({ method: "create", type: "paint", name: "Color/Blue/700", color: "#1D4ED8" })
styles({ method: "create", type: "paint", name: "Color/Blue/900", color: "#1E3A8A" })

Neutrals (Slate scale)

styles({ method: "create", type: "paint", name: "Color/Slate/0",   color: "#FFFFFF" })
styles({ method: "create", type: "paint", name: "Color/Slate/50",  color: "#F8FAFC" })
styles({ method: "create", type: "paint", name: "Color/Slate/100", color: "#F1F5F9" })
styles({ method: "create", type: "paint", name: "Color/Slate/200", color: "#E2E8F0" })
styles({ method: "create", type: "paint", name: "Color/Slate/400", color: "#94A3B8" })
styles({ method: "create", type: "paint", name: "Color/Slate/600", color: "#475569" })
styles({ method: "create", type: "paint", name: "Color/Slate/700", color: "#334155" })
styles({ method: "create", type: "paint", name: "Color/Slate/900", color: "#0F172A" })
styles({ method: "create", type: "paint", name: "Color/Slate/950", color: "#020617" })

Feedback colors

styles({ method: "create", type: "paint", name: "Color/Red/50",  color: "#FEF2F2" })
styles({ method: "create", type: "paint", name: "Color/Red/500", color: "#EF4444" })
styles({ method: "create", type: "paint", name: "Color/Red/600", color: "#DC2626" })
styles({ method: "create", type: "paint", name: "Color/Green/50",  color: "#F0FDF4" })
styles({ method: "create", type: "paint", name: "Color/Green/500", color: "#22C55E" })
styles({ method: "create", type: "paint", name: "Color/Green/600", color: "#16A34A" })
styles({ method: "create", type: "paint", name: "Color/Amber/50",  color: "#FFFBEB" })
styles({ method: "create", type: "paint", name: "Color/Amber/500", color: "#F59E0B" })

Record all returned styleId values in a map keyed by the style name.

Layer 2: Create the Variable Collection with Modes

Call variables to create a collection named "Color Tokens" with two modes:

variables({
  method: "create",
  type: "collection",
  name: "Color Tokens",
  modes: ["Light", "Dark"]
})

Record the returned collectionId and the modeId for each mode (lightModeId, darkModeId).

Layer 3: Create Semantic Variables

For each semantic token below, call variables with method: "create" and type: "variable". Set collectionId, variableType: "COLOR", and modeValues mapping each mode to a primitive hex.

Primary tokens

Variable name	Light value	Dark value
color/primary/default	#2563EB	#3B82F6
color/primary/hover	#1D4ED8	#2563EB
color/primary/subtle	#EFF6FF	#1E3A8A
color/primary/on	#FFFFFF	#FFFFFF

variables({
  method: "create",
  type: "variable",
  collectionId: "<collectionId>",
  name: "color/primary/default",
  variableType: "COLOR",
  modeValues: {
    "<lightModeId>": "#2563EB",
    "<darkModeId>":  "#3B82F6"
  }
})

Repeat for all primary tokens.

Surface tokens

Variable name	Light value	Dark value
color/surface/page	#FFFFFF	#0F172A
color/surface/card	#F8FAFC	#1E293B
color/surface/overlay	#F1F5F9	#334155

Text tokens

Variable name	Light value	Dark value
color/text/primary	#0F172A	#F8FAFC
color/text/secondary	#475569	#94A3B8
color/text/disabled	#94A3B8	#475569
color/text/inverse	#FFFFFF	#0F172A

Border tokens

Variable name	Light value	Dark value
color/border/default	#E2E8F0	#334155
color/border/strong	#94A3B8	#475569

Feedback tokens

Variable name	Light value	Dark value
color/feedback/error	#DC2626	#EF4444
color/feedback/error-bg	#FEF2F2	#450A0A
color/feedback/success	#16A34A	#22C55E
color/feedback/success-bg	#F0FDF4	#052E16
color/feedback/warning	#F59E0B	#F59E0B
color/feedback/warning-bg	#FFFBEB	#451A03

Layer 4: Bind Variables to Paint Styles (Optional but Recommended)

For each primitive paint style that has a matching semantic variable, update the style to reference the variable so Figma surfaces the token in the inspector.

styles({
  method: "update",
  styleId: "<Color/Blue/600 styleId>",
  boundVariableId: "<color/primary/default variableId>"
})

Only bind styles to their closest semantic match. Do not bind every primitive—only those directly used in components.

Completion

Report to the user:

• Collection name, mode names, and total variable count
• A summary table of all semantic token names grouped by category (primary, surface, text, border, feedback)
• Any variables that could not be created and why