PageHeader

States

State	Visual change	Tokens
Default	Title, description and actions	color-fg-default, color-fg-subtle
Loading	A shimmering placeholder instead of the title; status hidden	color-surface-sunken, button-height-sm
Narrow screen (below 640 px)	Actions under the title at full width; breadcrumbs show only the parent link	None

Measurements

Part	Size	Token
Title lg	text-heading-xl	text-heading-xl
Title md	text-heading-lg	text-heading-lg
Description	text-body-md, lines of about 70 characters at most	text-body-md
Vertical gap	8 px	space-sm
Between title and actions	20 px across, 12 px down	space-lg, space-md
Between actions	8 px	space-sm
Placeholder	32 px high, half the width	button-height-sm

Tokens

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

Token	Sample	Light mode	Dark mode
--bigbang-color-fg-default
--bigbang-color-fg-subtle
--bigbang-color-surface-sunken		#f5f5f5#f5f5f5#f5f5f5	#171717#171717#171717
--bigbang-button-height-sm		32px32px32px	32px32px32px
--bigbang-space-sm		6px6px6px	6px6px6px
--bigbang-space-md		8px8px8px	8px8px8px
--bigbang-space-lg		12px12px12px	12px12px12px

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Title appears	opacity 0 → 1 (motion.reveal)	motion-skeleton-reveal-duration	easing-productive-enter	A short fade stays.
Placeholder shimmer	translate (motion.skeleton), three passes, stops after 4.5 s	period-shimmer	Linear	No shimmer; the placeholder is still.
Breadcrumbs expand	From Breadcrumbs	See Breadcrumbs	See Breadcrumbs	See Breadcrumbs.
Action buttons	Button press motion	See Button	See Button	See Button.

See Motion for the values.