Foundations19 tokens
Size & stroke
Control heights, icon boxes, the touch target and border widths.
- Source
tokens/number.json- Figma
- Collection Number
- In code
var(--size-control-md)
Control
Height of buttons, inputs and chips. Seven sizes, 2xs to 2xl.
2xs28pxxs32pxsm40pxmd48pxlg56pxxl64px2xl72pxIcon
The box an icon is drawn in. Five sizes, xs to xl. How icons are drawn inside the box: see Icons.
xs12pxsm16pxmd20pxlg24pxxl32pxTarget
The smallest touch area. When a control is smaller, build an invisible layer of this size around it.
size/target44px around a 28px controlStroke
Line widths. stroke/1 for borders and dividers, stroke/2 for focus rings and selected outlines.
stroke/11pxstroke/22px