Stepper

States

State	Visual change	Tokens
Complete	Primary fill and check	color-action-primary-default
Current	Primary ring, bold name	color-action-primary-default
Upcoming	Faded ring and number	color-border-strong, color-text-subtle
Attention	Danger fill and alert icon	color-status-danger-emphasis
Hover (button)	Darker fill, underlined name	color-action-primary-hovered

Measurements

Property	Value	Token
Marker	24 px	stepper-marker-size
Line thickness	2 px; the empty part on the layer fill	stepper-track-thickness, color-surface-layer-2
Between horizontal steps	8 px	space-md
Between vertical steps	16 px	space-xl
Compact breakpoint	640 px	—

Tokens

Values are shown for the selected brand; switch brands from the top bar.

Token	Sample	Light mode	Dark mode
--bigbang-stepper-marker-size		24px24px24px	24px24px24px
--bigbang-stepper-track-thickness		2px2px2px	2px2px2px
--bigbang-color-action-primary-default		#146d83#171717#171717	#77bacf#e5e5e5#e5e5e5
--bigbang-color-action-on-primary-default		#ffffff#fafafa#fafafa	#0a0a0a#171717#171717
--bigbang-color-border-strong		#8c8c8c#8c8c8c#8c8c8c	#8c8c8c#8c8c8c#8c8c8c
--bigbang-color-border-subtle		#ededed#ededed#ededed	#303030#303030#303030
--bigbang-color-status-danger-emphasis		#e1595b#e1595b#e1595b	#ff9a97#ff9a97#ff9a97
--bigbang-space-md		8px8px8px	8px8px8px
--bigbang-space-xl		16px16px16px	16px16px16px
--bigbang-color-focus-ring		#146d83#737373#737373	#77bacf#8c8c8c#8c8c8c

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Step completes	The line fills (motion.progress)	motion-progress-duration	easing-productive	Shorter.
Step completes	The check grows from 60% (motion.success)	motion-feedback-duration	motion-feedback-easing	Scale 1; it only appears.
Step count changes	The new count fades in (motion.reveal)	motion-skeleton-reveal-duration	easing-productive-enter	Unchanged.
Hovering Next	The arrow moves 2 px forward	motion-release-duration	easing-spring-productive-fast	The arrow stays.