This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Design Tokens

Design Tokens

Version: Next

Design Tokens

Design tokens are variables used to express the look and feel of the VTEX admin and its products. It provides the foundation for themes and automated the design process.

Token
Style prop
Css Variables
Values
Example
$white
background
--admin-ui-bg-white
#FFFFFF
AA
$black
background
--admin-ui-bg-black
#000000
AA
$blue05
background
--admin-ui-bg-blue05
#F1F4FC
AA
$blue10
background
--admin-ui-bg-blue10
#DDE5F7
AA
$blue20
background
--admin-ui-bg-blue20
#BBCBF0
AA
$blue30
background
--admin-ui-bg-blue30
#96B2F2
AA
$blue40
background
--admin-ui-bg-blue40
#2953B2
AA
$blue50
background
--admin-ui-bg-blue50
#20408C
AA
$blue60
background
--admin-ui-bg-blue60
#172F66
AA
$lightBlue05
background
--admin-ui-bg-lightBlue05
#EDF5FB
AA
$lightBlue10
background
--admin-ui-bg-lightBlue10
#DEECF7
AA
$lightBlue20
background
--admin-ui-bg-lightBlue20
#B9DAF3
AA
$lightBlue30
background
--admin-ui-bg-lightBlue30
#7CBBEA
AA
$lightBlue40
background
--admin-ui-bg-lightBlue40
#2978B5
AA
$lightBlue50
background
--admin-ui-bg-lightBlue50
#216090
AA
$lightBlue60
background
--admin-ui-bg-lightBlue60
#143C5C
AA
$red05
background
--admin-ui-bg-red05
#FBF2F2
AA
$red10
background
--admin-ui-bg-red10
#F8E3E3
AA
$red20
background
--admin-ui-bg-red20
#EDBABA
AA
$red30
background
--admin-ui-bg-red30
#F49494
AA
$red40
background
--admin-ui-bg-red40
#CC3D3D
AA
$red50
background
--admin-ui-bg-red50
#962828
AA
$red60
background
--admin-ui-bg-red60
#782020
AA
$green05
background
--admin-ui-bg-green05
#ECF7EC
AA
$green10
background
--admin-ui-bg-green10
#DFF1E0
AA
$green20
background
--admin-ui-bg-green20
#AEDDB0
AA
$green30
background
--admin-ui-bg-green30
#83D187
AA
$green40
background
--admin-ui-bg-green40
#38853C
AA
$green50
background
--admin-ui-bg-green50
#285F2B
AA
$green60
background
--admin-ui-bg-green60
#1C431E
AA
$orange05
background
--admin-ui-bg-orange05
#FFF5EC
AA
$orange10
background
--admin-ui-bg-orange10
#FFEBD7
AA
$orange20
background
--admin-ui-bg-orange20
#FFCD9B
AA
$orange30
background
--admin-ui-bg-orange30
#F5AE70
AA
$orange40
background
--admin-ui-bg-orange40
#D56A00
AA
$orange50
background
--admin-ui-bg-orange50
#A65200
AA
$orange60
background
--admin-ui-bg-orange60
#5C2C00
AA
$cyan05
background
--admin-ui-bg-cyan05
#EFF9FB
AA
$cyan10
background
--admin-ui-bg-cyan10
#D5EFF4
AA
$cyan20
background
--admin-ui-bg-cyan20
#A4DEE9
AA
$cyan30
background
--admin-ui-bg-cyan30
#63CBDB
AA
$cyan40
background
--admin-ui-bg-cyan40
#1C99A8
AA
$cyan50
background
--admin-ui-bg-cyan50
#207883
AA
$cyan60
background
--admin-ui-bg-cyan60
#093F46
AA
$purple05
background
--admin-ui-bg-purple05
#F6F3FA
AA
$purple10
background
--admin-ui-bg-purple10
#EDE8F4
AA
$purple20
background
--admin-ui-bg-purple20
#D3C4E4
AA
$purple30
background
--admin-ui-bg-purple30
#C6A5EA
AA
$purple40
background
--admin-ui-bg-purple40
#835AB3
AA
$purple50
background
--admin-ui-bg-purple50
#684391
AA
$purple60
background
--admin-ui-bg-purple60
#462D63
AA
$pink05
background
--admin-ui-bg-pink05
#FBF2F5
AA
$pink10
background
--admin-ui-bg-pink10
#F5E0E7
AA
$pink20
background
--admin-ui-bg-pink20
#EAB2C4
AA
$pink30
background
--admin-ui-bg-pink30
#F48AAB
AA
$pink40
background
--admin-ui-bg-pink40
#DA3561
AA
$pink50
background
--admin-ui-bg-pink50
#B1204B
AA
$pink60
background
--admin-ui-bg-pink60
#850D35
AA
$teal05
background
--admin-ui-bg-teal05
#E8F7F3
AA
$teal10
background
--admin-ui-bg-teal10
#CDEFE7
AA
$teal20
background
--admin-ui-bg-teal20
#A6E0D2
AA
$teal30
background
--admin-ui-bg-teal30
#66CBB7
AA
$teal40
background
--admin-ui-bg-teal40
#007969
AA
$teal50
background
--admin-ui-bg-teal50
#006053
AA
$teal60
background
--admin-ui-bg-teal60
#00463C
AA
$gray05
background
--admin-ui-bg-gray05
#F4F4F4
AA
$gray10
background
--admin-ui-bg-gray10
#E6E6E6
AA
$gray20
background
--admin-ui-bg-gray20
#DDDDDD
AA
$gray30
background
--admin-ui-bg-gray30
#B9B9B9
AA
$gray40
background
--admin-ui-bg-gray40
#747474
AA
$gray50
background
--admin-ui-bg-gray50
#545454
AA
$gray60
background
--admin-ui-bg-gray60
#3B3B3B
AA
$grayTransparent05
background
--admin-ui-bg-grayTransparent05
#0000000Drgba(0, 0, 0, 0.05)
AA
$grayTransparent10
background
--admin-ui-bg-grayTransparent10
#0000001Argba(0, 0, 0, 0.1)
AA
$grayTransparent20
background
--admin-ui-bg-grayTransparent20
#00000033rgba(0, 0, 0, 0.2)
AA
$grayTransparent30
background
--admin-ui-bg-grayTransparent30
#0000004Drgba(0, 0, 0, 0.3)
AA
$grayTransparent40
background
--admin-ui-bg-grayTransparent40
#00000066rgba(0, 0, 0, 0.4)
AA
$grayTransparent50
background
--admin-ui-bg-grayTransparent50
#00000080rgba(0, 0, 0, 0.5)
AA
$grayTransparent60
background
--admin-ui-bg-grayTransparent60
#00000099rgba(0, 0, 0, 0.6)
AA
$grayTransparent70
background
--admin-ui-bg-grayTransparent70
#000000B3rgba(0, 0, 0, 0.7)
AA
$grayTransparent80
background
--admin-ui-bg-grayTransparent80
#000000CCrgba(0, 0, 0, 0.8)
AA
$grayTransparent90
background
--admin-ui-bg-grayTransparent90
#000000E6rgba(0, 0, 0, 0.9)
AA
$primary
background
--admin-ui-bg-primary
#FFFFFF
AA
$secondary
background
--admin-ui-bg-secondary
#F4F4F4
AA
$disabled
background
--admin-ui-bg-disabled
#E6E6E6
AA
$positive
background
--admin-ui-bg-positive
#DFF1E0
AA
$critical
background
--admin-ui-bg-critical
#F8E3E3
AA
$warning
background
--admin-ui-bg-warning
#FFEBD7
AA
$info
background
--admin-ui-bg-info
#DEECF7
AA
$inverted
background
--admin-ui-bg-inverted
#000000
AA
$overlay
background
--admin-ui-bg-overlay
#00000080rgba(0, 0, 0, 0.5)
AA
$skeleton
background
--admin-ui-bg-skeleton
linear-gradient(90deg, transparent, #E6E6E6, transparent)
AA
$action.neutral.tertiary
background
--admin-ui-bg-action-neutral-tertiary
transparent
AA
$action.neutral.tertiaryHover
background
--admin-ui-bg-action-neutral-tertiaryHover
#0000000Drgba(0, 0, 0, 0.05)
AA
$action.neutral.tertiaryPressed
background
--admin-ui-bg-action-neutral-tertiaryPressed
#0000001Argba(0, 0, 0, 0.1)
AA
$action.main.primary
background
--admin-ui-bg-action-main-primary
#2953B2
AA
$action.main.primaryHover
background
--admin-ui-bg-action-main-primaryHover
#20408C
AA
$action.main.primaryPressed
background
--admin-ui-bg-action-main-primaryPressed
#172F66
AA
$action.main.secondary
background
--admin-ui-bg-action-main-secondary
#DDE5F7
AA
$action.main.secondaryHover
background
--admin-ui-bg-action-main-secondaryHover
#BBCBF0
AA
$action.main.secondaryPressed
background
--admin-ui-bg-action-main-secondaryPressed
#96B2F2
AA
$action.main.tertiary
background
--admin-ui-bg-action-main-tertiary
transparent
AA
$action.main.tertiaryHover
background
--admin-ui-bg-action-main-tertiaryHover
#F1F4FC
AA
$action.main.tertiaryPressed
background
--admin-ui-bg-action-main-tertiaryPressed
#DDE5F7
AA
$action.main.tertiarySelected
background
--admin-ui-bg-action-main-tertiarySelected
#F1F4FC
AA
$action.critical.primary
background
--admin-ui-bg-action-critical-primary
#CC3D3D
AA
$action.critical.primaryHover
background
--admin-ui-bg-action-critical-primaryHover
#962828
AA
$action.critical.primaryPressed
background
--admin-ui-bg-action-critical-primaryPressed
#782020
AA
$action.critical.secondary
background
--admin-ui-bg-action-critical-secondary
#F8E3E3
AA
$action.critical.secondaryHover
background
--admin-ui-bg-action-critical-secondaryHover
#EDBABA
AA
$action.critical.secondaryPressed
background
--admin-ui-bg-action-critical-secondaryPressed
#F49494
AA
$action.critical.tertiary
background
--admin-ui-bg-action-critical-tertiary
transparent
AA
$action.critical.tertiaryHover
background
--admin-ui-bg-action-critical-tertiaryHover
#FBF2F2
AA
$action.critical.tertiaryPressed
background
--admin-ui-bg-action-critical-tertiaryPressed
#F8E3E3
AA
$action.critical.tertiarySelected
background
--admin-ui-bg-action-critical-tertiarySelected
#FBF2F2
AA
$form.neutral
background
--admin-ui-bg-form-neutral
transparent
AA
$form.neutralHover
background
--admin-ui-bg-form-neutralHover
#E6E6E6
AA
$form.neutralPressed
background
--admin-ui-bg-form-neutralPressed
#B9B9B9
AA
$form.neutralChecked
background
--admin-ui-bg-form-neutralChecked
#000000
AA
$form.neutralCheckedHover
background
--admin-ui-bg-form-neutralCheckedHover
#3B3B3B
AA
$form.neutralCheckedPressed
background
--admin-ui-bg-form-neutralCheckedPressed
#545454
AA
$form.neutralInactive
background
--admin-ui-bg-form-neutralInactive
#B9B9B9
AA
$form.neutralInactiveHover
background
--admin-ui-bg-form-neutralInactiveHover
#545454
AA
$form.neutralInactivePressed
background
--admin-ui-bg-form-neutralInactivePressed
#3B3B3B
AA
$form.neutralActive
background
--admin-ui-bg-form-neutralActive
#000000
AA
$form.neutralActiveHover
background
--admin-ui-bg-form-neutralActiveHover
#3B3B3B
AA
$form.neutralActivePressed
background
--admin-ui-bg-form-neutralActivePressed
#545454
AA
$form.controlHover
background
--admin-ui-bg-form-controlHover
transparent
AA
$form.controlChecked
background
--admin-ui-bg-form-controlChecked
#2953B2
AA
$form.controlCheckedHover
background
--admin-ui-bg-form-controlCheckedHover
#20408C
AA
$form.controlActive
background
--admin-ui-bg-form-controlActive
#38853C
AA
$form.controlActiveHover
background
--admin-ui-bg-form-controlActiveHover
#285F2B
AA
$form.controlInactive
background
--admin-ui-bg-form-controlInactive
#B9B9B9
AA
$form.controlInactiveHover
background
--admin-ui-bg-form-controlInactiveHover
#747474
AA
$white
color
--admin-ui-fg-white
#FFFFFF
AA
$black
color
--admin-ui-fg-black
#000000
AA
$blue05
color
--admin-ui-fg-blue05
#F1F4FC
AA
$blue10
color
--admin-ui-fg-blue10
#DDE5F7
AA
$blue20
color
--admin-ui-fg-blue20
#BBCBF0
AA
$blue30
color
--admin-ui-fg-blue30
#96B2F2
AA
$blue40
color
--admin-ui-fg-blue40
#2953B2
AA
$blue50
color
--admin-ui-fg-blue50
#20408C
AA
$blue60
color
--admin-ui-fg-blue60
#172F66
AA
$lightBlue05
color
--admin-ui-fg-lightBlue05
#EDF5FB
AA
$lightBlue10
color
--admin-ui-fg-lightBlue10
#DEECF7
AA
$lightBlue20
color
--admin-ui-fg-lightBlue20
#B9DAF3
AA
$lightBlue30
color
--admin-ui-fg-lightBlue30
#7CBBEA
AA
$lightBlue40
color
--admin-ui-fg-lightBlue40
#2978B5
AA
$lightBlue50
color
--admin-ui-fg-lightBlue50
#216090
AA
$lightBlue60
color
--admin-ui-fg-lightBlue60
#143C5C
AA
$red05
color
--admin-ui-fg-red05
#FBF2F2
AA
$red10
color
--admin-ui-fg-red10
#F8E3E3
AA
$red20
color
--admin-ui-fg-red20
#EDBABA
AA
$red30
color
--admin-ui-fg-red30
#F49494
AA
$red40
color
--admin-ui-fg-red40
#CC3D3D
AA
$red50
color
--admin-ui-fg-red50
#962828
AA
$red60
color
--admin-ui-fg-red60
#782020
AA
$green05
color
--admin-ui-fg-green05
#ECF7EC
AA
$green10
color
--admin-ui-fg-green10
#DFF1E0
AA
$green20
color
--admin-ui-fg-green20
#AEDDB0
AA
$green30
color
--admin-ui-fg-green30
#83D187
AA
$green40
color
--admin-ui-fg-green40
#38853C
AA
$green50
color
--admin-ui-fg-green50
#285F2B
AA
$green60
color
--admin-ui-fg-green60
#1C431E
AA
$orange05
color
--admin-ui-fg-orange05
#FFF5EC
AA
$orange10
color
--admin-ui-fg-orange10
#FFEBD7
AA
$orange20
color
--admin-ui-fg-orange20
#FFCD9B
AA
$orange30
color
--admin-ui-fg-orange30
#F5AE70
AA
$orange40
color
--admin-ui-fg-orange40
#D56A00
AA
$orange50
color
--admin-ui-fg-orange50
#A65200
AA
$orange60
color
--admin-ui-fg-orange60
#5C2C00
AA
$cyan05
color
--admin-ui-fg-cyan05
#EFF9FB
AA
$cyan10
color
--admin-ui-fg-cyan10
#D5EFF4
AA
$cyan20
color
--admin-ui-fg-cyan20
#A4DEE9
AA
$cyan30
color
--admin-ui-fg-cyan30
#63CBDB
AA
$cyan40
color
--admin-ui-fg-cyan40
#1C99A8
AA
$cyan50
color
--admin-ui-fg-cyan50
#207883
AA
$cyan60
color
--admin-ui-fg-cyan60
#093F46
AA
$purple05
color
--admin-ui-fg-purple05
#F6F3FA
AA
$purple10
color
--admin-ui-fg-purple10
#EDE8F4
AA
$purple20
color
--admin-ui-fg-purple20
#D3C4E4
AA
$purple30
color
--admin-ui-fg-purple30
#C6A5EA
AA
$purple40
color
--admin-ui-fg-purple40
#835AB3
AA
$purple50
color
--admin-ui-fg-purple50
#684391
AA
$purple60
color
--admin-ui-fg-purple60
#462D63
AA
$pink05
color
--admin-ui-fg-pink05
#FBF2F5
AA
$pink10
color
--admin-ui-fg-pink10
#F5E0E7
AA
$pink20
color
--admin-ui-fg-pink20
#EAB2C4
AA
$pink30
color
--admin-ui-fg-pink30
#F48AAB
AA
$pink40
color
--admin-ui-fg-pink40
#DA3561
AA
$pink50
color
--admin-ui-fg-pink50
#B1204B
AA
$pink60
color
--admin-ui-fg-pink60
#850D35
AA
$teal05
color
--admin-ui-fg-teal05
#E8F7F3
AA
$teal10
color
--admin-ui-fg-teal10
#CDEFE7
AA
$teal20
color
--admin-ui-fg-teal20
#A6E0D2
AA
$teal30
color
--admin-ui-fg-teal30
#66CBB7
AA
$teal40
color
--admin-ui-fg-teal40
#007969
AA
$teal50
color
--admin-ui-fg-teal50
#006053
AA
$teal60
color
--admin-ui-fg-teal60
#00463C
AA
$gray05
color
--admin-ui-fg-gray05
#F4F4F4
AA
$gray10
color
--admin-ui-fg-gray10
#E6E6E6
AA
$gray20
color
--admin-ui-fg-gray20
#DDDDDD
AA
$gray30
color
--admin-ui-fg-gray30
#B9B9B9
AA
$gray40
color
--admin-ui-fg-gray40
#747474
AA
$gray50
color
--admin-ui-fg-gray50
#545454
AA
$gray60
color
--admin-ui-fg-gray60
#3B3B3B
AA
$grayTransparent05
color
--admin-ui-fg-grayTransparent05
#0000000Drgba(0, 0, 0, 0.05)
AA
$grayTransparent10
color
--admin-ui-fg-grayTransparent10
#0000001Argba(0, 0, 0, 0.1)
AA
$grayTransparent20
color
--admin-ui-fg-grayTransparent20
#00000033rgba(0, 0, 0, 0.2)
AA
$grayTransparent30
color
--admin-ui-fg-grayTransparent30
#0000004Drgba(0, 0, 0, 0.3)
AA
$grayTransparent40
color
--admin-ui-fg-grayTransparent40
#00000066rgba(0, 0, 0, 0.4)
AA
$grayTransparent50
color
--admin-ui-fg-grayTransparent50
#00000080rgba(0, 0, 0, 0.5)
AA
$grayTransparent60
color
--admin-ui-fg-grayTransparent60
#00000099rgba(0, 0, 0, 0.6)
AA
$grayTransparent70
color
--admin-ui-fg-grayTransparent70
#000000B3rgba(0, 0, 0, 0.7)
AA
$grayTransparent80
color
--admin-ui-fg-grayTransparent80
#000000CCrgba(0, 0, 0, 0.8)
AA
$grayTransparent90
color
--admin-ui-fg-grayTransparent90
#000000E6rgba(0, 0, 0, 0.9)
AA
$primary
color
--admin-ui-fg-primary
#000000
AA
$secondary
color
--admin-ui-fg-secondary
#545454
AA
$disabled
color
--admin-ui-fg-disabled
#747474
AA
$inverted
color
--admin-ui-fg-inverted
#FFFFFF
AA
$positive
color
--admin-ui-fg-positive
#38853C
AA
$info
color
--admin-ui-fg-info
#2978B5
AA
$critical
color
--admin-ui-fg-critical
#CC3D3D
AA
$warning
color
--admin-ui-fg-warning
#D56A00
AA
$action.neutral.tertiary
color
--admin-ui-fg-action-neutral-tertiary
#545454
AA
$action.neutral.tertiaryHover
color
--admin-ui-fg-action-neutral-tertiaryHover
#3B3B3B
AA
$action.neutral.tertiaryPressed
color
--admin-ui-fg-action-neutral-tertiaryPressed
#000000
AA
$action.main.primary
color
--admin-ui-fg-action-main-primary
#FFFFFF
AA
$action.main.primaryHover
color
--admin-ui-fg-action-main-primaryHover
#FFFFFF
AA
$action.main.primaryPressed
color
--admin-ui-fg-action-main-primaryPressed
#FFFFFF
AA
$action.main.secondary
color
--admin-ui-fg-action-main-secondary
#2953B2
AA
$action.main.secondaryHover
color
--admin-ui-fg-action-main-secondaryHover
#20408C
AA
$action.main.secondaryPressed
color
--admin-ui-fg-action-main-secondaryPressed
#172F66
AA
$action.main.tertiary
color
--admin-ui-fg-action-main-tertiary
#2953B2
AA
$action.main.tertiaryHover
color
--admin-ui-fg-action-main-tertiaryHover
#20408C
AA
$action.main.tertiaryPressed
color
--admin-ui-fg-action-main-tertiaryPressed
#172F66
AA
$action.main.tertiarySelected
color
--admin-ui-fg-action-main-tertiarySelected
#2953B2
AA
$action.critical.primary
color
--admin-ui-fg-action-critical-primary
#FFFFFF
AA
$action.critical.primaryHover
color
--admin-ui-fg-action-critical-primaryHover
#FFFFFF
AA
$action.critical.primaryPressed
color
--admin-ui-fg-action-critical-primaryPressed
#FFFFFF
AA
$action.critical.secondary
color
--admin-ui-fg-action-critical-secondary
#CC3D3D
AA
$action.critical.secondaryHover
color
--admin-ui-fg-action-critical-secondaryHover
#962828
AA
$action.critical.secondaryPressed
color
--admin-ui-fg-action-critical-secondaryPressed
#782020
AA
$action.critical.tertiary
color
--admin-ui-fg-action-critical-tertiary
#CC3D3D
AA
$action.critical.tertiaryHover
color
--admin-ui-fg-action-critical-tertiaryHover
#962828
AA
$action.critical.tertiaryPressed
color
--admin-ui-fg-action-critical-tertiaryPressed
#782020
AA
$action.critical.tertiarySelected
color
--admin-ui-fg-action-critical-tertiarySelected
#CC3D3D
AA
$form.neutral
color
--admin-ui-fg-form-neutral
#000000
AA
$form.neutralChecked
color
--admin-ui-fg-form-neutralChecked
#FFFFFF
AA
$form.controlChecked
color
--admin-ui-fg-form-controlChecked
#FFFFFF
AA
$neutral
border
--admin-ui-border-neutral
1px solid #DDDDDD
AA
$mainSelected
border
--admin-ui-border-mainSelected
2px solid #2953B2
AA
$positive
border
--admin-ui-border-positive
1px solid #83D187
AA
$info
border
--admin-ui-border-info
1px solid #7CBBEA
AA
$critical
border
--admin-ui-border-critical
1px solid #F49494
AA
$warning
border
--admin-ui-border-warning
1px solid #F5AE70
AA
$disabled
border
--admin-ui-border-disabled
1px solid #747474
AA
$form.neutral
border
--admin-ui-border-form-neutral
1px solid #B9B9B9
AA
$form.neutralHover
border
--admin-ui-border-form-neutralHover
1px solid #545454
AA
$form.neutralFocus
border
--admin-ui-border-form-neutralFocus
1px solid #3B3B3B
AA
$form.neutralPressed
border
--admin-ui-border-form-neutralPressed
1px solid #3B3B3B
AA
$form.neutralChecked
border
--admin-ui-border-form-neutralChecked
1px solid #000000
AA
$form.neutralCheckedHover
border
--admin-ui-border-form-neutralCheckedHover
1px solid #3B3B3B
AA
$form.neutralCheckedPressed
border
--admin-ui-border-form-neutralCheckedPressed
1px solid #545454
AA
$form.critical
border
--admin-ui-border-form-critical
1px solid #CC3D3D
AA
$form.criticalHover
border
--admin-ui-border-form-criticalHover
1px solid #962828
AA
$form.criticalFocus
border
--admin-ui-border-form-criticalFocus
1px solid #782020
AA
$form.control
border
--admin-ui-border-form-control
1px solid #B9B9B9
AA
$form.controlHover
border
--admin-ui-border-form-controlHover
1px solid #545454
AA
$form.controlChecked
border
--admin-ui-border-form-controlChecked
1px solid #2953B2
AA
$form.controlCheckedHover
border
--admin-ui-border-form-controlCheckedHover
1px solid #20408C
AA
$ring.critical
boxShadow
--admin-ui-shadow-ring-critical
0rem 0rem 0rem 0.0625rem #FBF2F2, 0rem 0rem 0rem 0.1875rem #F49494
AA
$ring.neutral
boxShadow
--admin-ui-shadow-ring-neutral
0rem 0rem 0rem 0.0625rem #F4F4F4, 0rem 0rem 0rem 0.1875rem #B9B9B9
AA
$ring.main
boxShadow
--admin-ui-shadow-ring-main
0rem 0rem 0rem 0.0625rem #F1F4FC, 0rem 0rem 0rem 0.1875rem #96B2F2
AA
$overlay.center
boxShadow
--admin-ui-shadow-overlay-center
0rem 0rem 1rem 0rem rgba(0,0,0,0.10)
AA
$overlay.bottom
boxShadow
--admin-ui-shadow-overlay-bottom
0rem 0rem 1.5rem 0rem rgba(0,0,0,0.05)
AA
$pageTitle
text
fontFamily: --admin-ui-text-pageTitlefontVariationSettings: --admin-ui-text-pageTitlefontSize: --admin-ui-text-pageTitlelineHeight: --admin-ui-text-pageTitleletterSpacing: --admin-ui-text-pageTitle
fontFamily: "VTEX Trust", -apple-system, system-ui, BlinkMacSystemFont, sans-seriffontVariationSettings: 'WGHT' 400, 'WDTH' 300fontSize: 1.25remlineHeight: 1.2letterSpacing: -0.004em
AA
$title1
text
fontFamily: --admin-ui-text-title1fontVariationSettings: --admin-ui-text-title1fontSize: --admin-ui-text-title1lineHeight: --admin-ui-text-title1letterSpacing: --admin-ui-text-title1
fontFamily: "VTEX Trust", -apple-system, system-ui, BlinkMacSystemFont, sans-seriffontVariationSettings: 'WGHT' 500, 'WDTH' 300fontSize: 1remlineHeight: 1.5letterSpacing: 0em
AA
$title2
text
fontFamily: --admin-ui-text-title2fontVariationSettings: --admin-ui-text-title2fontSize: --admin-ui-text-title2lineHeight: --admin-ui-text-title2letterSpacing: --admin-ui-text-title2
fontFamily: "VTEX Trust", -apple-system, system-ui, BlinkMacSystemFont, sans-seriffontVariationSettings: 'WGHT' 400, 'WDTH' 300fontSize: 1remlineHeight: 1.5letterSpacing: 0em
AA
$action1
text
fontFamily: --admin-ui-text-action1fontVariationSettings: --admin-ui-text-action1fontSize: --admin-ui-text-action1lineHeight: --admin-ui-text-action1letterSpacing: --admin-ui-text-action1
fontFamily: "VTEX Trust", -apple-system, system-ui, BlinkMacSystemFont, sans-seriffontVariationSettings: 'WGHT' 500, 'WDTH' 300fontSize: 0.875remlineHeight: 1.1428571429letterSpacing: 0.01em
AA
$action2
text
fontFamily: --admin-ui-text-action2fontVariationSettings: --admin-ui-text-action2fontSize: --admin-ui-text-action2lineHeight: --admin-ui-text-action2letterSpacing: --admin-ui-text-action2
fontFamily: "VTEX Trust", -apple-system, system-ui, BlinkMacSystemFont, sans-seriffontVariationSettings: 'WGHT' 400, 'WDTH' 300fontSize: 0.875remlineHeight: 1.1428571429letterSpacing: 0.01em
AA
$display
text
fontFamily: --admin-ui-text-displayfontVariationSettings: --admin-ui-text-displayfontSize: --admin-ui-text-displaylineHeight: --admin-ui-text-displayletterSpacing: --admin-ui-text-display
fontFamily: "VTEX Trust", -apple-system, system-ui, BlinkMacSystemFont, sans-seriffontVariationSettings: 'WGHT' 500, 'WDTH' 300fontSize: 1.5remlineHeight: 1.3333333333letterSpacing: -0.004em
AA
$body
text
fontFamily: --admin-ui-text-bodyfontVariationSettings: --admin-ui-text-bodyfontSize: --admin-ui-text-bodylineHeight: --admin-ui-text-bodyletterSpacing: --admin-ui-text-body
fontFamily: "VTEX Trust", -apple-system, system-ui, BlinkMacSystemFont, sans-seriffontVariationSettings: 'WGHT' 400, 'WDTH' 300fontSize: 0.875remlineHeight: 1.4285714286letterSpacing: 0.002em
AA
$detail
text
fontFamily: --admin-ui-text-detailfontVariationSettings: --admin-ui-text-detailfontSize: --admin-ui-text-detaillineHeight: --admin-ui-text-detailletterSpacing: --admin-ui-text-detail
fontFamily: "VTEX Trust", -apple-system, system-ui, BlinkMacSystemFont, sans-seriffontVariationSettings: 'WGHT' 400, 'WDTH' 300fontSize: 0.75remlineHeight: 1.3333333333letterSpacing: 0.004em
AA
$space-0
space
-
0rem
$space-05
space
-
0.125rem
$space-1
space
-
0.25rem
$space-2
space
-
0.5rem
$space-3
space
-
0.75rem
$space-4
space
-
1rem
$space-5
space
-
1.25rem
$space-6
space
-
1.5rem
$space-7
space
-
1.75rem
$space-8
space
-
2rem
$space-10
space
-
2.5rem
$space-12
space
-
3rem
$space-16
space
-
4rem
$space-20
space
-
5rem
$space-24
space
-
6rem
$space-28
space
-
7rem
$space-32
space
-
8rem