$type: "strokeStyle" primitive

Stroke Style Token

Stroke style tokens define how a line or border is rendered. The $value can be a string keyword (solid, dashed, dotted, double, groove, ridge, outset, inset) or a composite object with dashArray (array of dimension values) and lineCap (round, butt, or square) for custom dash patterns. These correspond to CSS border-style and SVG stroke-dasharray properties.

Value Format

A string ("solid", "dashed", "dotted", etc.) or a composite object with dashArray and lineCap

When to Use

Use stroke style tokens to standardize the visual style of borders, dividers, outlines, and focus rings. They ensure that dashed or dotted elements follow a consistent pattern throughout your design system.

Valid Example

Valid JSON .json

{
  "stroke": {
    "solid": {
      "$value": "solid",
      "$type": "strokeStyle"
    },
    "dashed": {
      "$value": {
        "dashArray": ["4px", "4px"],
        "lineCap": "round"
      },
      "$type": "strokeStyle"
    }
  }
}

Paste the example above into the validator to test it yourself.

Open Validator

Related Token Types