PageHeader

Durumlar

Durum	Görsel değişiklik	Token’lar
Varsayılan	Başlık, açıklama ve işlemler	color-fg-default, color-fg-subtle
Yükleniyor	Başlık yerine parlayan yer tutucu; durum gizli	color-surface-sunken, button-height-sm
Dar ekran (640 px altı)	İşlemler başlığın altında, tam genişlik; konum izi yalnızca üst sayfa bağlantısı	Yok

Ölçüler

Parça	Ölçü	Token
Başlık lg	text-heading-xl	text-heading-xl
Başlık md	text-heading-lg	text-heading-lg
Açıklama	text-body-md, en fazla yaklaşık 70 karakter satır	text-body-md
Dikey aralık	8 px	space-sm
Başlık ile işlemler arası	20 px yatay, 12 px dikey	space-lg, space-md
İşlemler arası	8 px	space-sm
Yer tutucu	32 px yükseklik, genişliğin yarısı	button-height-sm

Token’lar

Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.

Token	Örnek	Açık mod	Koyu mod
--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

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Başlığın belirmesi	opacity 0 → 1 (motion.reveal)	motion-skeleton-reveal-duration	easing-productive-enter	Kısa solma kalır.
Yer tutucu parıltısı	translate (motion.skeleton), üç geçiş, 4,5 sn sonra durur	period-shimmer	Doğrusal	Parıltı çalışmaz; yer tutucu durağandır.
Konum izi açılması	Breadcrumbs’tan	Breadcrumbs’a bakın	Breadcrumbs’a bakın	Breadcrumbs’a bakın.
İşlem butonları	Button basma hareketi	Button’a bakın	Button’a bakın	Button’a bakın.

Değerler için Hareket sayfasına bakın.