SXL Studio
Tokens

Borders

Borders group token types: Border, Border Width, Border Radius, Stroke Style — strokes, corner rounding, and line styles with examples.

The Borders group covers everything related to element strokes: thickness, corner radius, line style, and composite border.

Border

A composite type describing a full stroke: color + width + style.

Figma: does not export as a Variable or Style. Applied directly to a layer's stroke properties.

Value structure:

JSON
{
  "border": {
    "default": {
      "$value": {
        "color": "#E5E7EB",
        "width": "1px",
        "style": "solid"
      },
      "$type": "border"
    }
  }
}

Object properties:

PropertyTypeDescription
colorstringStroke color (CSS format)
widthstring / numberStroke width
stylestringStyle: solid, dashed, dotted, none, hidden
strokeAlignstringPosition: inside, outside, center

When style is none or hidden, the stroke is removed (weight = 0).

Aliases in properties:

JSON
{
  "border": {
    "card": {
      "$value": {
        "color": "{color.neutral.200}",
        "width": "{borderWidth.sm}",
        "style": "solid"
      },
      "$type": "border"
    }
  }
}

Applies to sides: via property stroke-all, stroke-top, stroke-right, stroke-bottom, stroke-left.

Figma limitation: Figma doesn't support dashed strokes (dashed/dotted) through variables. Stroke style is applied via the node's dashPattern.

Border Width

Stroke thickness. A simple numeric token.

Figma: exports as a Number Variable (FLOAT).

Default Figma Scope: STROKE_FLOAT.

JSON
{
  "borderWidth": {
    "$type": "borderWidth",
    "none": { "$value": "0px" },
    "sm": { "$value": "1px" },
    "md": { "$value": "2px" },
    "lg": { "$value": "4px" }
  }
}

Accepted formats: "1px", "0.5rem", 1, 2.

Applies to layers: Stroke Weight.

Border Radius

Corner rounding radius. A simple numeric token.

Figma: exports as a Number Variable (FLOAT).

Default Figma Scope: CORNER_RADIUS.

JSON
{
  "borderRadius": {
    "$type": "borderRadius",
    "none": { "$value": "0px" },
    "sm": { "$value": "4px" },
    "md": { "$value": "8px" },
    "lg": { "$value": "12px" },
    "xl": { "$value": "16px" },
    "2xl": { "$value": "24px" },
    "full": { "$value": "9999px" }
  }
}

Tip: 9999px is a standard technique for fully circular elements (pill buttons, avatars).

Applies to layers: Corner Radius (all corners at once or individually).

Border radius scale from sm to full

Stroke Style

Stroke line style. Describes the dash pattern.

Figma: does not export as a Variable (internal only). Applied directly to the node's dashPattern.

Simple value — string:

JSON
{
  "strokeStyle": {
    "dashed": {
      "$value": "dashed",
      "$type": "strokeStyle"
    }
  }
}

Accepted strings: solid, dashed, dotted.

Object value — custom pattern:

JSON
{
  "strokeStyle": {
    "custom-dash": {
      "$value": {
        "dashArray": [4, 2],
        "lineCap": "round"
      },
      "$type": "strokeStyle"
    }
  }
}

Numeric value: interpreted as a uniform dash:

JSON
{ "$value": 4, "$type": "strokeStyle" }

Figma limitation: Figma supports dashPattern (alternating dash/gap array) but not all CSS stroke styles (e.g., double, groove). Use solid, dashed, dotted, or a custom dashArray.

Full example: stroke system

JSON
{
  "borderWidth": {
    "$type": "borderWidth",
    "0": { "$value": "0px" },
    "1": { "$value": "1px" },
    "2": { "$value": "2px" },
    "4": { "$value": "4px" }
  },
  "borderRadius": {
    "$type": "borderRadius",
    "none": { "$value": "0px" },
    "sm": { "$value": "4px" },
    "md": { "$value": "8px" },
    "lg": { "$value": "12px" },
    "xl": { "$value": "16px" },
    "full": { "$value": "9999px" }
  },
  "border": {
    "default": {
      "$value": {
        "color": "{color.neutral.200}",
        "width": "{borderWidth.1}",
        "style": "solid"
      },
      "$type": "border"
    },
    "strong": {
      "$value": {
        "color": "{color.neutral.400}",
        "width": "{borderWidth.2}",
        "style": "solid"
      },
      "$type": "border"
    },
    "dashed": {
      "$value": {
        "color": "{color.neutral.300}",
        "width": "{borderWidth.1}",
        "style": "dashed"
      },
      "$type": "border"
    }
  }
}