Design Tokens

Design tokens with the same names as Arco Design, with their current values. Use palette tokens as rgb(var(--primary-6)) and the others as var(--color-text-1). Click a variable to copy it.

Primary

Token	Value	CSS Var	Equivalent	Description
primary-6	`rgb(var(--arcoblue-6))`			Normal
primary-5	`rgb(var(--arcoblue-5))`			Hover
primary-7	`rgb(var(--arcoblue-7))`			Click
primary-4	`rgb(var(--arcoblue-4))`			Special scene
primary-3	`rgb(var(--arcoblue-3))`			Normally disabled
primary-2	`rgb(var(--arcoblue-2))`			Text disabled
primary-1	`rgb(var(--arcoblue-1))`			Light/white suspension

Success

Token	Value	CSS Var	Equivalent	Description
success-6	`rgb(var(--green-6))`			Normal
success-5	`rgb(var(--green-5))`			Hover
success-7	`rgb(var(--green-7))`			Click
success-4	`rgb(var(--green-4))`			Special scene
success-3	`rgb(var(--green-3))`			Normally disabled
success-2	`rgb(var(--green-2))`			Text disabled
success-1	`rgb(var(--green-1))`			Light/white suspension

Warning

Token	Value	CSS Var	Equivalent	Description
warning-6	`rgb(var(--orange-6))`			Normal
warning-5	`rgb(var(--orange-5))`			Hover
warning-7	`rgb(var(--orange-7))`			Click
warning-4	`rgb(var(--orange-4))`			Special scene
warning-3	`rgb(var(--orange-3))`			Normally disabled
warning-2	`rgb(var(--orange-2))`			Text disabled
warning-1	`rgb(var(--orange-1))`			Light/white suspension

Danger

Token	Value	CSS Var	Equivalent	Description
danger-6	`rgb(var(--red-6))`			Normal
danger-5	`rgb(var(--red-5))`			Hover
danger-7	`rgb(var(--red-7))`			Click
danger-4	`rgb(var(--red-4))`			Special scene
danger-3	`rgb(var(--red-3))`			Normally disabled
danger-2	`rgb(var(--red-2))`			Text disabled
danger-1	`rgb(var(--red-1))`			Light/white suspension

Link

Token	Value	CSS Var	Equivalent	Description
link-6	`rgb(var(--arcoblue-6))`		-	Normal
link-5	`rgb(var(--arcoblue-5))`		-	Hover
link-7	`rgb(var(--arcoblue-7))`		-	Click
link-4	`rgb(var(--arcoblue-4))`		-	Special scene
link-3	`rgb(var(--arcoblue-3))`		-	Normally disabled
link-2	`rgb(var(--arcoblue-2))`		-	Text disabled
link-1	`rgb(var(--arcoblue-1))`		-	Light/white suspension

Border Color

Token	Value	CSS Var	Equivalent	Description
color-border-1	`var(--color-neutral-2)`			Light color
color-border-2	`var(--color-neutral-3)`			Normal
color-border-3	`var(--color-neutral-4)`			Deep/Hover
color-border-4	`var(--color-neutral-6)`			Heavy/Button Border

Fill Color

Token	Value	CSS Var	Equivalent	Description
color-fill-1	`var(--color-neutral-1)`			Light/Disabled
color-fill-2	`var(--color-neutral-2)`			Normal/White Hover
color-fill-3	`var(--color-neutral-3)`			Deep/Gray Hover
color-fill-4	`var(--color-neutral-4)`			Heavy/Special scene

Text Color

Token	Value	CSS Var	Equivalent	Description
color-text-1	`var(--color-neutral-10)`			Emphasis/Body Title
color-text-2	`var(--color-neutral-8)`			Sub-Emphasis/Body Title
color-text-3	`var(--color-neutral-6)`			Secondary information
color-text-4	`var(--color-neutral-4)`			Grayed out information

Background Color

Token	Value	CSS Var	Equivalent	Description
color-bg-1	`#FFF`		-	Overall background color
color-bg-2	`#FFF`			Primary container background
color-bg-3	`#FFF`		-	Secondary container background
color-bg-4	`#FFF`		-	Tertiary container background
color-bg-5	`#FFF`			Popup, Tooltip background color
color-bg-white	`#FFF`			White background

Font Size

Token	Value	CSS Var	Equivalent	Description
font-size-body-3	`14px`	-		Body - General
font-size-body-2	`13px`	-		Body - Regular - Small
font-size-body-1	`12px`	-		Auxiliary Copywriting/Secondary Copywriting
font-size-caption	`12px`	-	-	Watermark text
font-size-title-1	`16px`	-		Title - Small
font-size-title-2	`20px`	-		Title - Medium
font-size-title-3	`24px`	-	-	Title - Large
font-size-display-1	`36px`	-	-	Operational Title - Small
font-size-display-2	`48px`	-	-	Operational Title - Medium
font-size-display-3	`56px`	-	-	Operational Title - Large

Font Weight

Token	Value	CSS Var	Equivalent	Description
font-weight-400	`400`	-	-	Normal
font-weight-500	`500`	-	-	Medium (bold)
font-weight-600	`600`	-	-	Half thick
font-weight-700	`700`	-	-	Bold
font-weight-800	`800`	-	-	Medium black
font-weight-900	`900`	-	-	Black body
font-weight-300	`300`	-	-	Fine body
font-weight-200	`200`	-	-	Slim
font-weight-100	`100`	-	-	Very fine

Size

Token	Value	CSS Var	Equivalent	Description
size-none	`0`	-	-
size-1	`4px`	-	-
size-2	`8px`	-	-
size-3	`12px`	-	-
size-4	`16px`	-	-
size-5	`20px`	-	-
size-N	`(4 * N)px`	-	-	The corresponding value of the variable is (4 * N)px size
size-50	`200px`	-	-

Component Size

Token	Value	CSS Var	Equivalent	Description
size-mini	`@size-6`	-	-	mini(24px)
size-small	`@size-7`	-		small(28px)
size-default	`@size-8`	-		medium(32px)
size-large	`@size-9`	-		large(36px)

Border Size

Token	Value	CSS Var	Equivalent	Description
border-none	`0`	-	-	None Border
border-1	`1px`	-		Normal
border-2	`2px`	-	-	Thicker
border-3	`3px`	-	-	Bold

Border Radius

Token	Value	CSS Var	Equivalent	Description
border-radius-none	`0`		-	Right angle
border-radius-small	`2px`			Rounded Corners - Regular
border-radius-medium	`4px`		-	Rounded Corners - Medium
border-radius-large	`8px`		-	Rounded Corners - Larger
border-radius-circle	`50%`		-	Rounded Corners - Full Rounded Corners

Shadow

Token	Value	CSS Var	Equivalent	Description
shadow-special	`0 0 1px rgba(0, 0, 0, 0.3)`	-	-	Special shade
shadow1-center	`0 -2px 5px rgba(0, 0, 0, 0.1)`	-	-	shadow style 1
shadow2-center	`0 0 10px rgba(0, 0, 0, 0.1)`	-	-	shadow style 2
shadow3-center	`0 0 20px rgba(0, 0, 0, 0.1)`	-	-	shadow style 3