Component Tokens

Button Variants

Primary

bg	#7C8DF5
text	#FFFFFF
height	32px
font-size	14px
radius	8px

bg	#7C8DF5
text	#FFFFFF
height	40px
font-size	16px
radius	8px

bg	#7C8DF5
text	#FFFFFF
height	48px
font-size	17px
radius	8px

Secondary

bg	#F4F4F5
text	#2D2E4A
height	32px
font-size	14px
radius	8px

bg	#F4F4F5
text	#2D2E4A
height	40px
font-size	16px
radius	8px

bg	#F4F4F5
text	#2D2E4A
height	48px
font-size	17px
radius	8px

Destructive

bg	#FF3B30
text	#FFFFFF
height	32px
font-size	14px
radius	8px

bg	#FF3B30
text	#FFFFFF
height	40px
font-size	16px
radius	8px

bg	#FF3B30
text	#FFFFFF
height	48px
font-size	17px
radius	8px

Button Token References

Variant	Property	Token Reference
primary	background	{semantic.action.primary}
	text	{color.white}
	radius	{radius.default}
	height-sm	32px
	height-md	40px
	height-lg	48px
	font-size-sm	14px
	font-size-md	16px
	font-size-lg	17px
	padding-v	{spacing.3}
	padding-h	{spacing.4}
secondary	background	{color.gray.100}
secondary	text	{semantic.text.primary}
destructive	background	{semantic.status.error}
destructive	text	{color.white}

Card Tokens

Property	Token Reference	Resolved
background	{semantic.surface.card}	{semantic.surface.card}
radius	{radius.lg}	{radius.lg} = 12px
padding	{spacing.4}	{spacing.4} = 16px
shadow	{shadow.sm}	{shadow.sm}

Input Tokens

Property	Value / Reference
height	44px
radius	{radius.default} = 8px
border	{semantic.border.default}
border-focus	{semantic.action.primary}
padding-v	{spacing.3} = 12px
padding-h	{spacing.4} = 16px
placeholder	{semantic.text.hint}