Skip to main content
Documentation
Tokens
Library
Updates
Github
Icons
Browse icons and usage guidance
Spinners
Explore and customize spinners
Documentation
Tokens
Icons
Spinners
Changelog
Roadmap
Border
Breakpoints
Color
Font
Height
Motion
Shadow
Space
Typography
Width
Z-Index
Color
Color tokens are used for styling elements.
Color tokens
Token
Description
Neutral950
Neutral0
--vortex-color-foreground-default
-
Neutral800
Neutral100
--vortex-color-foreground-hover
-
Neutral300
Neutral400
--vortex-color-foreground-disabled
-
Neutral500
Neutral200
--vortex-color-foreground-subtle
-
Neutral0
Neutral950
--vortex-color-foreground-inverse
-
Neutral0
Neutral0
--vortex-color-foreground-static-white
-
Neutral950
Neutral950
--vortex-color-foreground-static-black
-
BrandPrimary500
BrandPrimary500
--vortex-color-foreground-static-primary
-
BrandPrimary700
BrandPrimary400
--vortex-color-foreground-primary-default
-
BrandPrimary600
BrandPrimary500
--vortex-color-foreground-primary-hover
-
BrandPrimary800
BrandPrimary300
--vortex-color-foreground-primary-bold
-
AccentRed800
AccentRed500
--vortex-color-foreground-critical-default
-
AccentRed700
AccentRed600
--vortex-color-foreground-critical-hover
-
AccentRed900
AccentRed300
--vortex-color-foreground-critical-bold
-
AccentOrange800
AccentOrange500
--vortex-color-foreground-warning-default
-
AccentOrange700
AccentOrange600
--vortex-color-foreground-warning-hover
-
AccentOrange900
AccentOrange300
--vortex-color-foreground-warning-bold
-
AccentGreen800
AccentGreen500
--vortex-color-foreground-success-default
-
AccentGreen700
AccentGreen600
--vortex-color-foreground-success-hover
-
AccentGreen900
AccentGreen300
--vortex-color-foreground-success-bold
-
AccentBlue800
AccentBlue500
--vortex-color-foreground-info-default
-
AccentBlue700
AccentBlue600
--vortex-color-foreground-info-hover
-
AccentBlue900
AccentBlue300
--vortex-color-foreground-info-bold
-
Neutral0
Neutral950
--vortex-color-foreground-button-primary-default
-
Neutral0
Neutral950
--vortex-color-foreground-button-primary-hover
-
Neutral300
Neutral400
--vortex-color-foreground-button-primary-disabled
-
Neutral0
Neutral0
--vortex-color-foreground-button-primary-critical-default
-
Neutral0
Neutral0
--vortex-color-foreground-button-primary-critical-hover
-
Neutral300
Neutral400
--vortex-color-foreground-button-primary-critical-disabled
-
Neutral950
Neutral0
--vortex-color-foreground-button-secondary-default
-
Neutral950
Neutral0
--vortex-color-foreground-button-secondary-hover
-
Neutral300
Neutral400
--vortex-color-foreground-button-secondary-disabled
-
AccentRed800
AccentRed300
--vortex-color-foreground-button-secondary-critical-default
-
AccentRed800
AccentRed300
--vortex-color-foreground-button-secondary-critical-hover
-
Neutral300
Neutral300
--vortex-color-foreground-button-secondary-critical-disabled
-
Neutral950
Neutral0
--vortex-color-foreground-button-tertiary-default
-
Neutral950
Neutral0
--vortex-color-foreground-button-tertiary-hover
-
Neutral300
Neutral400
--vortex-color-foreground-button-tertiary-disabled
-
AccentRed800
AccentRed300
--vortex-color-foreground-button-tertiary-critical-default
-
AccentRed800
AccentRed300
--vortex-color-foreground-button-tertiary-critical-hover
-
Neutral300
Neutral400
--vortex-color-foreground-button-tertiary-critical-disabled
-
Neutral950
Neutral0
--vortex-color-foreground-button-plain-default
-
Neutral700
Neutral100
--vortex-color-foreground-button-plain-hover
-
Neutral300
Neutral400
--vortex-color-foreground-button-plain-disabled
-
AccentRed800
AccentRed300
--vortex-color-foreground-button-plain-critical-default
-
AccentRed700
AccentRed400
--vortex-color-foreground-button-plain-critical-hover
-
Neutral300
Neutral400
--vortex-color-foreground-button-plain-critical-disabled
-
Neutral700
Neutral600
--vortex-color-border-bold
-
BlackAlpha250
WhiteAlpha500
--vortex-color-border-default
-
BlackAlpha200
WhiteAlpha600
--vortex-color-border-hover
-
Neutral0
Neutral1000
--vortex-color-border-inverse
-
BrandPrimary700
BrandPrimary700
--vortex-color-border-primary-default
-
AccentRed700
AccentRed800
--vortex-color-border-critical-default
-
AccentOrange700
AccentOrange800
--vortex-color-border-warning-default
-
AccentGreen700
AccentGreen800
--vortex-color-border-success-default
-
AccentBlue700
AccentBlue800
--vortex-color-border-info-default
-
Neutral100
Neutral900
--vortex-color-border-divider
-
BlackAlpha300
WhiteAlpha400
--vortex-color-border-input-default
-
BlackAlpha300
WhiteAlpha400
--vortex-color-border-input-hover
-
BrandPrimary500
BrandPrimary500
--vortex-color-border-input-focused
-
BlackAlpha300
WhiteAlpha400
--vortex-color-border-input-filled
-
Neutral950
Neutral0
--vortex-color-border-input-selected
-
Neutral950
Neutral0
--vortex-color-border-button-primary-default
-
Neutral800
Neutral100
--vortex-color-border-button-primary-hover
-
Neutral100
Neutral800
--vortex-color-border-button-primary-disabled
-
AccentRed700
AccentRed700
--vortex-color-border-button-primary-critical-default
-
AccentRed800
AccentRed800
--vortex-color-border-button-primary-critical-hover
-
Neutral100
Neutral800
--vortex-color-border-button-primary-critical-disabled
-
Neutral100
Neutral800
--vortex-color-border-button-secondary-default
-
Neutral100
Neutral800
--vortex-color-border-button-secondary-hover
-
Neutral100
Neutral800
--vortex-color-border-button-secondary-disabled
-
AccentRed200
AccentRed950
--vortex-color-border-button-secondary-critical-default
-
AccentRed200
AccentRed950
--vortex-color-border-button-secondary-critical-hover
-
Neutral100
Neutral800
--vortex-color-border-button-secondary-critical-disabled
-
BlackAlpha0
WhiteAlpha0
--vortex-color-border-button-tertiary-default
-
BlackAlpha0
WhiteAlpha0
--vortex-color-border-button-tertiary-hover
-
BlackAlpha0
WhiteAlpha0
--vortex-color-border-button-tertiary-disabled
-
BlackAlpha0
WhiteAlpha0
--vortex-color-border-button-tertiary-critical-default
-
BlackAlpha0
WhiteAlpha0
--vortex-color-border-button-tertiary-critical-hover
-
BlackAlpha0
WhiteAlpha0
--vortex-color-border-button-tertiary-critical-disabled
-
Neutral0
Neutral1000
--vortex-color-background-default
-
Neutral1000
Neutral0
--vortex-color-background-surface-inverse
-
Neutral0
Neutral950
--vortex-color-background-surface-default
-
Neutral25
Neutral900
--vortex-color-background-surface-hover
-
Neutral50
Neutral800
--vortex-color-background-surface-disabled
-
Neutral100
Neutral800
--vortex-color-background-surface-subtler
-
Neutral25
Neutral900
--vortex-color-background-surface-subtlest
-
Neutral400
Neutral400
--vortex-color-background-surface-bold
-
AccentRed500
AccentRed500
--vortex-color-background-critical-default
-
AccentRed50
AccentRed950
--vortex-color-background-critical-subtlest
-
AccentOrange500
AccentOrange500
--vortex-color-background-warning-default
-
AccentOrange50
AccentOrange950
--vortex-color-background-warning-subtlest
-
AccentGreen500
AccentGreen500
--vortex-color-background-success-default
-
AccentGreen50
AccentGreen950
--vortex-color-background-success-subtlest
-
AccentBlue500
AccentBlue500
--vortex-color-background-info-default
-
AccentBlue50
AccentBlue950
--vortex-color-background-info-subtlest
-
BrandPrimary500
BrandPrimary500
--vortex-color-background-primary-default
-
BrandPrimary50
BrandPrimary900
--vortex-color-background-primary-subtlest
-
Neutral950
Neutral0
--vortex-color-background-button-primary-default
-
Neutral800
Neutral100
--vortex-color-background-button-primary-hover
-
Neutral100
Neutral800
--vortex-color-background-button-primary-disabled
-
AccentRed700
AccentRed700
--vortex-color-background-button-primary-critical-default
-
AccentRed800
AccentRed800
--vortex-color-background-button-primary-critical-hover
-
Neutral100
Neutral800
--vortex-color-background-button-primary-critical-disabled
-
Neutral25
Neutral900
--vortex-color-background-button-secondary-default
-
Neutral50
Neutral800
--vortex-color-background-button-secondary-hover
-
Neutral25
Neutral900
--vortex-color-background-button-secondary-disabled
-
Neutral25
Neutral900
--vortex-color-background-button-secondary-critical-default
-
Neutral50
Neutral800
--vortex-color-background-button-secondary-critical-hover
-
Neutral25
Neutral900
--vortex-color-background-button-secondary-critical-disabled
-
BlackAlpha0
WhiteAlpha0
--vortex-color-background-button-tertiary-default
-
Neutral25
Neutral900
--vortex-color-background-button-tertiary-hover
-
BlackAlpha0
WhiteAlpha0
--vortex-color-background-button-tertiary-disabled
-
BlackAlpha0
WhiteAlpha0
--vortex-color-background-button-tertiary-critical-default
-
Neutral25
Neutral900
--vortex-color-background-button-tertiary-critical-hover
-
BlackAlpha0
WhiteAlpha0
--vortex-color-background-button-tertiary-critical-disabled
-
Neutral100
Neutral800
--vortex-color-skeleton-default
-