Border Style Tokens — Color, Width, and Style Combinations

Complete Border Token System

Borders define visual boundaries between UI regions. A complete border token system covers width, style, color, and composed shorthand values.

Border Color Tokens

:root {
  --borders-color-default: #e4e4e7;
  --borders-color-subtle: #f4f4f5;
  --borders-color-strong: #a1a1aa;
  --borders-color-focus: #3b82f6;
  --borders-color-error: #ef4444;
  --borders-color-success: #22c55e;
}

Border Width Tokens

:root {
  --borders-width-0: 0;
  --borders-width-1: 1px;
  --borders-width-2: 2px;
  --borders-width-4: 4px;
  --borders-width-8: 8px;
}

Composed Border Tokens

For convenience, create composed tokens:

:root {
  --borders-default: 1px solid var(--borders-color-default);
  --borders-subtle: 1px solid var(--borders-color-subtle);
  --borders-strong: 2px solid var(--borders-color-strong);
}

Focus Ring Tokens

Focus rings are a special case of border tokens critical for accessibility:

:root {
  --borders-focus-ring: 0 0 0 2px var(--borders-color-focus);
  --borders-focus-ring-offset: 0 0 0 4px var(--colors-background), 0 0 0 6px var(--borders-color-focus);
}

Divider Tokens

Horizontal and vertical dividers need their own tokens:

{
  "borders": {
    "divider-color": "#e4e4e7",
    "divider-width": "1px",
    "divider-style": "solid"
  }
}

Dark Mode Considerations

Border colors often need to change in dark mode. Use semantic naming so the same token name maps to different values per theme.