AppShell

Durumlar

Durum	Görsel değişiklik	Token’lar
Bağlantı varsayılan	Soluk etiket ve ikon	color-text-subtle, color-icon-subtle
Bağlantı üzerine gelme	Hafif dolgu, koyu etiket	color-action-subtle-hovered, color-text-default
Bağlantı basılı	Dolgu bir ton koyulaşır	color-action-subtle-pressed
Geçerli sayfa	Seçili zemin, orta kalınlıkta etiket, marka ikonu ve 2 px gösterge çubuğu (tab.indicator.thickness)	color-surface-selected, color-icon-brand, color-action-primary-default
Odak	2 px iç odak halkası	color-focus-ring, border-width-focus
Daralmış	Yalnızca ikonlar, ortalanmış	Yok
Açılır menü açık	Yükseltilmiş panel ve karartılmış arka plan	color-surface-raised, shadow-overlay, color-surface-scrim

Ölçüler

Parça	Ölçü
Kenar menüsü	256 px (app-shell-sidebar-width); daralmış 48 px (app-shell-sidebar-width-collapsed)
Açılır menü	En fazla 288 px (app-shell-drawer-width) ya da ekranın yüzde 85’i
Üst çubuk	En az 56 px yükseklik
Bağlantı	32 px yükseklik (app-shell-item-height), 8 px yatay iç boşluk ve aralık, text-body-md (14/400), 16 px ikon
Grup başlığı	En az 32 px yükseklik, text-label-sm; katlanan grubun öğeleri 1 px bir çizgiden sarkar (color-border-subtle)
Menü iç boşluğu	8 px (space-md)
Kenar şeridi	Kenar menüsü kenarında ortalanmış 16 px tıklama alanı (app-shell-rail-width); üzerine gelince 2 px çizgi görünür
Gösterge çubuğu	2 px genişlik (tab.indicator.thickness), bağlantı yüksekliğinde
İçerik iç boşluğu	24 px (space-lg); 640 px’in altında 12 px (space-md)
İçe yerleşik panel (inset)	1024 px ve üstünde üstten, alttan ve sondan 8 px (space-md) içeride, 14 px köşe (radius-xl), shadow-raised; kabuk zemini surface-layer-1

Ctrl+B (macOS’ta Cmd+B) kenar menüsünü daraltır ya da genişletir; 1024 px’in altında açılır menüyü açar ya da kapatır. Her değişiklik yedi gün süreyle bigbang_sidebar_collapsed çerezine (APP_SHELL_COOKIE) yazılır; sunucu bunu defaultCollapsed olarak geri verebilir.

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-surface-default		#f7f7f7#f7f7f7#f7f7f7	#1e1e1e#1e1e1e#1e1e1e
--bigbang-color-surface-raised		#ffffff#ffffff#ffffff	#262626#262626#262626
--bigbang-color-surface-selected		#edf5f8#ededed#ededed	#092932#404040#404040
--bigbang-color-surface-scrim		rgba(0, 0, 0, 0.10196078431372549)rgba(0, 0, 0, 0.10196078431372549)rgba(0, 0, 0, 0.10196078431372549)	rgba(0, 0, 0, 0.10196078431372549)rgba(0, 0, 0, 0.10196078431372549)rgba(0, 0, 0, 0.10196078431372549)
--bigbang-color-border-subtle		#ededed#ededed#ededed	#303030#303030#303030
--bigbang-color-action-primary-default		#146d83#171717#171717	#77bacf#e5e5e5#e5e5e5
--bigbang-color-action-subtle-hovered		#f5f5f5#f5f5f5#f5f5f5	#303030#303030#303030
--bigbang-color-icon-brand		#146d83#9a451c#4f55b4	#77bacf#ea9774#9aa6ff
--bigbang-color-focus-ring		#146d83#737373#737373	#77bacf#8c8c8c#8c8c8c
--bigbang-shadow-overlay		0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)	0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)
--bigbang-color-action-subtle-pressed		#ededed#ededed#ededed	#404040#404040#404040
--bigbang-app-shell-sidebar-width		256px256px256px	256px256px256px
--bigbang-app-shell-sidebar-width-collapsed		48px48px48px	48px48px48px
--bigbang-app-shell-drawer-width		288px288px288px	288px288px288px
--bigbang-app-shell-item-height		32px32px32px	32px32px32px
--bigbang-app-shell-rail-width		16px16px16px	16px16px16px

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Gösterge geçerli sayfaya kayar	translate, height	motion-indicator-duration (310 ms)	easing-spring-productive-base	Anında yer değiştirir.
Açılır menü açılır	translate tam genişlik, opacity (motion.drawer)	motion-drawer-enter-duration	easing-spring-productive-slow	Kayma olmaz; yalnızca solar.
Açılır menü kapanır	translate, opacity geri	motion-drawer-exit-duration	motion-drawer-exit-easing	Yalnızca solar.
Arka plan	opacity (motion.scrim)	motion-dialog-enter-duration	motion-dialog-enter-easing	Değişmez.
Grup açılır	İçerik solar ve 4 px kayar (motion.collapsible)	motion-collapsible-duration	motion-collapsible-easing	Yalnızca solar.
Etiketler geri gelir	opacity (motion.reveal)	motion-skeleton-reveal-duration	easing-productive-enter	Değişmez.
Bağlantı üzerine gelme	Arka plan rengi (motion.hover)	motion-hover-duration (110 ms)	motion-hover-easing	Değişmez.

Göstergenin yüksekliği yalnızca mutlak konumlu olduğu için animasyonlanır (MOT-02 istisnası). Kenar menüsünün genişliği animasyonsuz değişir. Değerler için Hareket sayfasına bakın.