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 |