Tokens

Token nameCurrent valueFigma usageDescription
Commerce
--p-font-family-sans
-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serifUse typography styles from UI kit
Commerce
--p-font-family-mono
ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospaceUse typography styles from UI kit
Aa
--p-font-size-275
var(--p-font-size-70-experimental)Use typography styles from UI kit
Aa
--p-font-size-325
var(--p-font-size-80-experimental)Use typography styles from UI kit
Aa
--p-font-size-350
var(--p-font-size-100)Use typography styles from UI kit
Aa
--p-font-size-750
var(--p-font-size-500)Use typography styles from UI kit
Aa
--p-font-size-900
var(--p-font-size-600)Use typography styles from UI kit
Aa
--p-font-size-1000
var(--p-font-size-700)Use typography styles from UI kit
Aa
--p-font-size-75
0.75remUse typography styles from UI kit
Aa
--p-font-size-100
0.875remUse typography styles from UI kit
Aa
--p-font-size-200
1remUse typography styles from UI kit
Aa
--p-font-size-300
1.25remUse typography styles from UI kit
Aa
--p-font-size-400
1.5remUse typography styles from UI kit
Aa
--p-font-size-500
1.75remUse typography styles from UI kit
Aa
--p-font-size-600
2remUse typography styles from UI kit
Aa
--p-font-size-700
2.5remUse typography styles from UI kit
Aa
--p-font-weight-regular
400Use typography styles from UI kit
Aa
--p-font-weight-medium
500Use typography styles from UI kit
Aa
--p-font-weight-semibold
600Use typography styles from UI kit
Aa
--p-font-weight-bold
700Use typography styles from UI kit
--p-font-letter-spacing-densest
-0.03375remUse typography styles from UI kit
--p-font-letter-spacing-denser
-0.01875remUse typography styles from UI kit
--p-font-letter-spacing-dense
-0.0125remUse typography styles from UI kit
--p-font-letter-spacing-normal
0remUse typography styles from UI kit
Hello
World
--p-font-line-height-300
var(--p-font-line-height-075-experimental)Use typography styles from UI kit
Hello
World
--p-font-line-height-400
var(--p-font-line-height-1)Use typography styles from UI kit
Hello
World
--p-font-line-height-500
var(--p-font-line-height-2)Use typography styles from UI kit
Hello
World
--p-font-line-height-600
var(--p-font-line-height-3)Use typography styles from UI kit
Hello
World
--p-font-line-height-700
var(--p-font-line-height-4)Use typography styles from UI kit
Hello
World
--p-font-line-height-800
var(--p-font-line-height-5)Use typography styles from UI kit
Hello
World
--p-font-line-height-1000
var(--p-font-line-height-6)Use typography styles from UI kit
Hello
World
--p-font-line-height-1200
var(--p-font-line-height-7)Use typography styles from UI kit
Hello
World
--p-font-line-height-1
1remUse typography styles from UI kit
Hello
World
--p-font-line-height-2
1.25remUse typography styles from UI kit
Hello
World
--p-font-line-height-3
1.5remUse typography styles from UI kit
Hello
World
--p-font-line-height-4
1.75remUse typography styles from UI kit
Hello
World
--p-font-line-height-5
2remUse typography styles from UI kit
Hello
World
--p-font-line-height-6
2.5remUse typography styles from UI kit
Hello
World
--p-font-line-height-7
3remUse typography styles from UI kit