Breadcrumbs

States

State	Visual change	Tokens
Default link	Muted text colour, no underline	color-fg-subtle
Hover and keyboard focus	Link text turns the default text colour and is underlined	color-fg-default
Current page	Dark regular-weight text without a link	color-fg-default
Separator	Subtle chevron icon	color-icon-subtle
Collapse button	32 px icon button	button-height-sm
Focus	2 px outer ring with a 2 px offset	color-focus-ring

Measurements

Part	Measurement
Text	text-body-md (14 px) for links and the current page
Gap between items	space-sm (6 px); separator to label space-xs (4 px)
Separator icon	icon-size-sm
Collapse button	32 px (button-height-sm)
Narrow-screen breakpoint	640 px (Tailwind sm); below it only the parent link shows

Tokens

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

Token	Sample	Light mode	Dark mode
--bigbang-color-fg-subtle
--bigbang-color-fg-default
--bigbang-color-icon-subtle		#737373#737373#737373	#a1a1a1#a1a1a1#a1a1a1
--bigbang-color-focus-ring		#146d83#737373#737373	#77bacf#8c8c8c#8c8c8c
--bigbang-button-height-sm		32px32px32px	32px32px32px

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Link hover	color	motion-hover-duration	motion-hover-easing	Unchanged; it is only a colour change.
Hidden locations expand	opacity 0 → 1, 4 px rise (staggered by --stagger-index)	motion-list-enter-duration	easing-productive-enter	Only the fade remains; no rise.
Pressing the collapse button	scale	motion-press-duration, motion-release-duration	motion-press-scale scale	Unchanged.
Focus	Ring appears at once, no transition	None	None	Unchanged.

See the Motion page for the values.