SXL Studio
Tokens

Styles

Styles group token types: Color, Gradient, Image, Fill, Opacity — formats, keys, modifiers, and export behavior.

Color

color is the base token type for interface colors.

Export: Variable (COLOR).

Accepted $value formats

FormatExample
HEX#6366F1, #6366F180, #F00
RGB/RGBArgb(99, 102, 241), rgba(99, 102, 241, 0.5)
HSL/HSLAhsl(239, 84%, 67%), hsla(239, 84%, 67%, 0.5)
Object{ "r": 0.39, "g": 0.40, "b": 0.95, "a": 1 }
Alias{color.brand.primary}

Color modifiers ($extensions.figma.modify)

SXL Studio supports modifier chains over a base color alias/value.

JSON
{
  "color": {
    "$type": "color",
    "primary": { "$value": "#6366F1" },
    "primary-light": {
      "$value": "{color.primary}",
      "$extensions": {
        "figma.modify": { "type": "lighten", "value": 0.12, "space": "oklch" }
      }
    },
    "primary-dark": {
      "$value": "{color.primary}",
      "$extensions": {
        "figma.modify": { "type": "darken", "value": 0.18, "space": "oklch" }
      }
    },
    "primary-contrast": {
      "$value": "{color.primary}",
      "$extensions": {
        "figma.modify": [
          { "type": "mix", "value": 0.24, "color": "#ffffff", "space": "srgb" },
          { "type": "alpha", "value": 0.92 }
        ]
      }
    }
  }
}
KeyRequiredValues
type✅lighten, darken, alpha, mix
value✅number 0..1 or alias string
spaceoptionalsrgb, hsl, lch, oklch, p3
colorfor mixsecond color (#..., rgb(...), alias)

Notes:

  • figma.modify can be one object or an array (applied in order).
  • if space is omitted, oklch is used.
  • alpha updates opacity.
  • mix blends current color with color by value.

Gradient

gradient defines a gradient fill.

Export: Paint Style.

Accepted $value formats

  1. CSS gradient string
JSON
{
  "gradient": {
    "$type": "gradient",
    "brand": { "$value": "linear-gradient(135deg, #6366F1 0%, #EC4899 100%)" }
  }
}
  1. Gradient object
JSON
{
  "gradient": {
    "hero": {
      "$type": "gradient",
      "$value": {
        "type": "linear",
        "angle": 135,
        "stops": [
          { "position": 0, "color": "#6366F1" },
          { "position": 1, "color": "#EC4899" }
        ]
      }
    }
  }
}

Gradient object keys

KeyTypeNotes
typestringlinear, radial, angular, diamond
anglenumberused when gradientTransform is not provided
stopsarrayrequired for object form; each stop: { position, color }
gradientTransform[[a,b,c],[d,e,f]]optional explicit transform matrix

Notes:

  • String conic-gradient(...) is parsed as angular gradient.
  • Stop color supports literal color or token alias.
  • For object format, use normalized 0..1 position values.

Image (img)

img is for image paint values.

Export: Paint Style (paint pipeline).

Accepted $value formats

  1. URL string / url(...)
JSON
{
  "img": {
    "$type": "img",
    "hero": { "$value": "https://cdn.example.com/hero.jpg" }
  }
}
  1. Object
JSON
{
  "img": {
    "pattern": {
      "$type": "img",
      "$value": {
        "type": "image",
        "url": "https://cdn.example.com/pattern.png",
        "scaleMode": "FILL",
        "opacity": 0.8,
        "blendMode": "NORMAL"
      }
    }
  }
}
KeyTypeNotes
typestringuse image
url / imageUrl / src / hrefstringimage source
scaleModestringFILL, FIT, CROP, TILE
opacitynumber0..1
blendModestringFigma blend mode

Fill

fill is a universal paint token: solid, gradient, image, or multi-layer stack.

Export: Paint Style.

Accepted $value formats

  • color/gradient/image string;
  • alias string ({fill.surface} or {color.brand.500});
  • one object layer;
  • array of layers.

Fill layer object keys

KeyTypeNotes
typestringsolid, gradient, image
colorstringfor solid; literal or alias
gradientobjectfor gradient; uses type/angle/stops/gradientTransform
url / imageUrl / src / hrefstringfor image
scaleModestringimage scale mode
opacitynumberlayer opacity (0..1)
blendModestringlayer blend mode
visiblebooleandefaults to true

Example: multi-layer fill

JSON
{
  "fill": {
    "$type": "fill",
    "card": {
      "$value": [
        {
          "type": "solid",
          "color": "#FFFFFF",
          "opacity": 0.92,
          "blendMode": "NORMAL"
        },
        {
          "type": "gradient",
          "gradient": {
            "type": "linear",
            "angle": 180,
            "stops": [
              { "position": 0, "color": "#F6F3FF" },
              { "position": 1, "color": "#FFFFFF" }
            ]
          },
          "opacity": 1,
          "blendMode": "MULTIPLY"
        },
        {
          "type": "image",
          "url": "https://cdn.example.com/noise.png",
          "scaleMode": "TILE",
          "opacity": 0.16,
          "blendMode": "OVERLAY"
        }
      ]
    }
  }
}

Opacity

opacity controls layer transparency.

Export: Variable (FLOAT), scope OPACITY.

Accepted $value formats

FormatExample
0..1 float0.6
0..100 number60
percent string"60%"
alias{opacity.overlay}
JSON
{
  "opacity": {
    "$type": "opacity",
    "disabled": { "$value": 0.4 },
    "overlay": { "$value": "60%" },
    "hover": { "$value": "{opacity.overlay}" }
  }
}

Notes:

  • For Figma variable export, values 0..1 are stored as 0..100 scale.
  • For apply to node, values above 1 are treated as percent-like (60 -> 0.6).
  • Unlike most float tokens, opacity % is not converted via remBase.