11 adımlı opaklık skalası — sabit %10'luk artışlarla. Token'lar --nb-opacity-{0..100} şeklinde isimlendirilir. Disabled, hover film, backdrop, eyebrow pill gibi yarı-saydam durumlar bu skaladan beslenir; opacity: 0.43 gibi keyfi değerler yazılmaz.
Buton, switch, link veya kart "Yakında" işaretiyle pasifleştirildiğinde uygulanır. pointer-events:none eşliğinde.
Kanban kartı sürüklenirken (veya başka bir hedefe taşınırken) kaynak kart bu opaklığa düşer; rotate-1 ile birleşir.
Modal/drawer arkasındaki siyah backdrop. Karanlık modda --nb-opacity-60'a yükselir.
--nb-opacity-10
Marketing hero üstündeki cam-pill — bg-white/5 → border-white/10. Backdrop-blur ile birleşir.
Hero başlık from-white from-30% to-white/40; alt-sağ köşe %40 saydam beyaza iner.
Beyaz CTA'ların altındaki shadow-white/10. Hover'da --nb-opacity-20'ye çıkar.
| Token | Değer | Kullanım |
|---|---|---|
| --nb-opacity-0 | 0 | Tam saydam — animasyon başlangıcı (fadeIn from) |
| --nb-opacity-5 | 0.05 | Eyebrow pill bg, çok ince hover film |
| --nb-opacity-10 | 0.10 | Eyebrow pill border, white CTA halo, divider on dark |
| --nb-opacity-20 | 0.20 | Dark divider, CTA hover halo, kbd badge bg |
| --nb-opacity-30 | 0.30 | Mobile sidebar overlay |
| --nb-opacity-40 | 0.40 | Drag-active card, display gradient son rengi |
| --nb-opacity-50 | 0.50 | Disabled state, modal backdrop (light tema) |
| --nb-opacity-60 | 0.60 | Modal backdrop (dark tema), phone mockup ring |
| --nb-opacity-75 | 0.75 | Skeleton shimmer mid-stop, secondary label on dark |
| --nb-opacity-90 | 0.90 | Hover bumped pill, near-opaque overlay |
| --nb-opacity-100 | 1.00 | Default — token kullanma |
opacity'si — tüm element ve çocuklarına etki; (b) renk değerinin alfa kanalı (rgb()/rgba()) — yalnızca o renge etki. Mümkün olan her yerde (b)'yi seç.opacity: 0.5 + cursor: not-allowed + pointer-events: none birlikte kullanılır.color ile soldur, opacity ile değil (ekran okuyucu pasif değildir).0.50, dark 0.60. Hardcode etme.opacity ve transform tween'lenir; layout property'leri tween'lenmez.