Border

A composite type bundling colour, width, and style into one token, so a border is a single decision rather than three loosely-coupled ones.

---

Value format

{
  "$type": "border",
  "$value": {
    "color": { "colorSpace": "srgb", "components": [0.9, 0.9, 0.9], "alpha": 1 },
    "width": { "value": 1, "unit": "px" },
    "style": "solid"
  }
}

Slot	Type
color	A color value or a reference
width	A dimension value or a reference
style	A stroke style keyword or a reference

---

Authoring

The value field is a three-part form — colour, width, style — where each slot can independently be a literal value or a reference:

{
  "color": "{global.color.border.subtle}",
  "width": "{global.border.width.hairline}",
  "style": "solid"
}

The whole token can also be a single reference to another border token.

---

Applying to Figma

Default target: the layer’s stroke. Requires a layer that supports strokes; others are skipped.

Applying a border performs three steps in order:

1. Colour → replaces the layer’s stroke list with one solid paint
2. Width → sets the stroke weight
3. Style → sets the dash pattern and cap, using the width from step 2

Nested references are resolved up to 10 levels deep; a cycle reports “Circular reference detected”.

---

Notes and limits

Border width ignores rem

The width slot uses its raw number without the rem → px conversion that plain dimension tokens get. A width of 0.5rem sets a stroke weight of 0.5, not 8.

Use px for border widths until this is fixed.

• Value checking on the border object itself is shallow — a malformed slot may pass the dialog and fail at apply time rather than on save.
• Applying a border replaces existing strokes rather than adding to them.
• The five unsupported stroke style keywords fall back to solid here too.