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

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

Text tokens

Border tokens

Feedback tokens

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